誰かに見てもらうための、簡単なデザイン

《読んだ本》2日で楽しく身につくHTML/CSS入門教室

何の前知識もなくホームページを初めて作る人や、中学生くらいの学生さんの勉強にも良さそうな本「2日で楽しく身につくHTML/CSS入門教室」を読みましたのでレビューです。

これは技術書なのですが、技術書の部類ではかなり敷居が低く、文章も作例も簡単です。
ホームページの仕組みが分からない人、全くWeb制作をしたことがない人はもちろん、中学生くらいの学生さんの自由研究や自分のサイト作りにも活用できそうです。
イベントの告知や店舗の紹介などで、簡単なホームページが欲しい、自分で作ってみたいという方の最初の一歩として、とても読みやすく実践しやすい内容です。
よって基本的なことばかりで、できるホームページもとても簡単なのですが、基礎がきっちりと書かれているので、ホームページ制作経験者の方が読むには今更な内容なばかりな気もしますが、正しいHTML5の記述・文書構造の確認などもできそうです。

IMG_4195_cut

この本の進行の仕方

表紙のイラストにも登場しているのですが、この本は「みさきくん」という小学6年生、「ヘンリー」というネットに詳しいアニメヲタクの外国人の会話で進行されていきます。
ストーリー形式で進みますし、難しい漢字や英語にはルビが振ってありますので、分かりやすく、中学生くらいの学生さんでも読めると思います。

本自体はイラストや図解写真も多く、専門用語は出てきますが解説もあって、よく使うタグなどは表にまとまってたりもするので、一度勉強したあとも手元に置いておいて基本を確認できる本だと思います。

実際にWebサイト構築をしていくのはみさきくん、先生役がヘンリーです。なので小学生でも実践できる内容…という感じがしますが、ホームページを作るということはパソコンで文字を打ち込む操作が出来ないといけない上に、プログラミング言語が英語が元になっているので、多少英語の知識があった方が理解しやすいです。
それを考えると、小学生…特にパソコンや英語に触れる機会が少ない人が、本だけでホームページを作れるのか…というのはちょっと心配になります。
英語の知識はそんなにハイレベルなものはいらないので、中学生くらいならこの本だけで作っていけそうな気がします。

あとは、XHTMLなど現在ではあまり使われなくなったHTMLの知識をお持ちの方で、現在よく使われているHTML5のタグ、書き方などを学びたい方にもこの本は向いていると思います。作例がシンプルな分、HTML5の文書構造もとても分かりやすいので、HTML5の仕組みを1から学んでいきやすいと思います。

この本とパソコンさえあれば、すぐに無料で始められる

ホームページを作ることは、サーバー代やドメイン代、使うソフトウェアなどの料金がかかることもありますが、この本は全て無料でできるツールを使ってホームページを作っていきます。ホームページ制作のプログラミング部分(HTML/CSSを使った文字の打ち込み)をするのはBrackets(ブラケッツ)を、写真のサイズ調整などはPixlr(ピクセラ)を、出来上がったホームページを公開するためのアップロードソフトはFileZilla(ファイルジラ)を、ホームページのデータを置くサーバーはXdomain(エックスドメイン)を使います。

パソコンはWindows10とMac両方の作業方法が解説されています。上に書いてあるソフトは全てどちらでも対応しています。インストール方法から基本的な操作方法まで書かれています。

パソコン1つあればあとは無料で始められるので、商業用にはちょっと向かないかもしれませんが、個人のホームページ制作や勉強には十分です。
FilezillaやBracketsは実際の業務で使われているWeb制作者さんも多いと思うので(私まさしく使ってます)、この本を終えて本格的にホームページが作りたくなっても、そのままソフトを使っていけるのも良い点です。

内容はシンプルだけどスマホ対応してる

この本で作るホームページは「どんぐり合唱団」という音楽チームの紹介、公演予定、地図が含まれた1ページのみのホームページです。
最近は1ページのみで、スクロールして見るタイプのホームページが増えていますが、まさしくそれです。
ホームページの骨組みを作るHTMLでは、ナビゲーションの作り方、リスト、画像の配置、表組み、地図の埋め込みなど、基本的でよく使う技術を実践していきます。
デザイン担当のプログラミング言語であるCSSは、リンクの色の変え方やナビゲーションを横並びにする方法、見出しの装飾の仕方など、これまた一般的なホームページを作るには欠かせない技術を学んでいきます。
ボックスモデルとフロートという、初心者がつまづきがちなちょっと難しい仕組みについても解説されています。

そして、出来上がったホームページをスマホでも見れるように調整していきます。メディアクエリを使ってそれ用のCSSを書いていくのではなく、普通のCSSにちょっと追記するだけでスマホでも見やすいように改変していきます。
スマホ対応部分はいたってシンプルで、そんなに難しい記述もなく、沢山のCSSを書かなければいけないということはありません。
パソコンでの見た目とスマホでの見た目の比較から入っていくので、段階を踏んで学習していけると思います。

スマホ対応のホームページというととても難しく感じますが、この本では結構あっさりできる、そして基本的な手法が使われているので、その分複雑なホームページには対応しづらい点もありますが、初心者が基本を理解するには十分な内容かと思います。

準備から公開まで一貫してる

ホームページ制作に必要なものの解説からそれらのインストール方法、使い方、ホームページ本体のHTML/CSSを使ったプログラミング、完成したら公開…と、一通りの手順を実践できるので、この本があれば中途半端に制作が終わることはなさそうです。その分、この本だけでは発展的な内容は学びにくいと思いますが、簡単なホームページを作るのであればこれ1冊であれば完成まで割とすんなりとできそうな気がします。
ホームページ制作には、ネットや検索エンジンの仕組みなど概念的な部分の知識があった方が理解しやすいですが、この本にはその部分の最低限の話が子供でも分かりやすいように書かれています。

この本を書かれた方の前作作りながら学ぶ HTML/CSSデザインの教科書という本は、とても分かりやすく丁寧な解説で私も愛用しているのですが、この本では更にステップアップした内容を学ぶことができます。1ページだけのホームページで物足りなくなったら、次はこちらで勉強してみるのも良いと思いました。

たった2日で楽しく身につく HTML/CSS入門教室は、なんだか学生の自由研究みたいな感覚で読めて、CoderDojoのような子供向けプログラミング教室や、ホームページに興味があるお子さんの最初の本としても良さそうな気がしました。
2日で身につくとありますが、確かに2日くらいで十分できそうな内容です。

でもね、最後にヘンリーが・・・

それでは!Have a nice design!!