プログラミングの学習を何から始めていいかわからないという方や、どんな風に学習していったらいいかわからないという方へ、勉強方法や気づいたこと、本の感想などをご紹介していきます。
今回は、WebクリエイターのManaさんの本、「１冊ですべて身につくHTML＆CSSとWebデザイン入門講座」（以下、教本）を実際に使って学習した感想を書いていきたいと思います。
参考）１冊ですべて身につくHTML＆CSSとWebデザイン入門講座
Webサイトの基礎が学べる
デザインというと、オシャレにしなきゃ！カッコよくしなきゃ！などと思ってしまいがちです。センスないし作れるかな・・・と思うこともしばしば。
ですが、この教本には書いてあります！
デザインはセンスではなくて知識が必要。つまり、勉強すれば誰でも身につきます。
引用：１冊ですべて身につくHTML＆CSSとWebデザイン入門講座
そう言われたら、自分でもできるかも！とやる気にもなります。
ユーザビリティやwebサイトの仕組み、デバイスやブラウザーの種類など、知ってるようで説明するのは難しい（私だけ？）ことも、しっかりまとめてくれているので、わかりやすい辞書のようです。
コードを書くために必要なテキストエディターのダウンロード方法や、デザインカンプを作成するのに使えるグラフィックツールの紹介などもあります。
私が、プログラミングスクールでオリジナルサイトを作成するときに教えていただいた制作の流れもこの教本にしっかり掲載されていました！
クライアントからの依頼時やオリジナルサイトの作成には欠かせない（どんな言語で作成する場合でも）ことなので、見返すこともできてとても便利です。
HTMLの基礎が学べる
wordpress や wix など、簡単に文章を打ち込んでそのままWebページに公開できるツール現在はたくさんありますが、ページのソースを表示したときに必ず表示されるものが、HTMLです。
この教本では、HTMLの書き方を一から教えてくれます。
HTMLを書くのに必要なのは、Webサイトの基礎でダウンロードしたテキストエディターです。
HTMLの基本は ＜開始タグ＞コンテンツ（見出しや文章など）＜/終了タグ＞ です。
このタグの中に何を入れたらいいのか、画像やリンクのはりかた、リストや表の作り方など一通り教えてくれます。
この、教本に沿ってHTMLを書くだけで上記に書いたことはもちろん、よくWebサイトで見るフォームなんかも作ることができました。
”よく使うHTMLタグ一覧”をまとめてくれているので、とっても便利です。私は、このページに付箋をして何度も見ています。
CSSの基本が学べる
Webページを作るためには、HTMLだけでは白背景に黒文字だけという、とってもシンプルな物になります。
作成したHTMLにCSSを書き加えることで、色をつけたり、大きさを変えたりと装飾することができます。
CSSを使用するには、3つの方法があります。
- CSSファイルを読み込む
- <head>内に<style>タグを使用し書き込む
- HTML内にstyle属性を使って書き込む
教本では、基本的に1.CSSファイルを読み込む方法 を使用して作成していきます。
教本通りに作成していくと、文字の大きさを変えたり、色を変えたり、フォントを変えたりと、作成したHTMLがいろんな変化を見せてくれるのでとても楽しかったです。
Webフォントの使用方法もとても分かりやすかったです。
教本には掲載されていませんが、Font Awesome などのイラスト調のものをフォントとして使用できるサイトもたくさんあります。この辺は、また改めてご紹介したいと思います。
CSSは文字だけでなく、線を引いたり枠を作ったり、レイアウトを組んだりと、とても盛り沢山です。
私は、サイトに書いてある数字を変更したりしながら、どこをいじったらどう変化するのかなどを見て学習を深めました。
１カ所ずつ変更しながらWebサイトを更新することで、一つ一つの変化が見れるのでオススメです。
色のイメージや配色例、カラー比率なども載っているので、わかりやすいです。
また、参考Webサイトなども掲載されているので、とても勉強になりました。HTML同様、”よく使うCSSプロパティ一覧” をまとめてくれているので、とても便利です。
HTMLとCSSだけでオシャレなカフェのホームページが作れる！！
教本を使用しここまで学習を進めてくると、HTMLとCSSがなんとなくわかってきます。そして、いざ何かを作ってみようと思うのですが、形にするのって難しいんですよね・・・
そんなときに、この教本がとてもいい題材をくれます！
教本に沿ってコードを書いていくと、あっという間にオシャレなカフェのホームページが出来上がります。
メインビジュアルで大々的にアピールできるフルスクリーンのページを始め、タイル形式に写真を掲載できるタイル表示の仕方など、写真の効果的な配置方法も学べます。
紹介されている２カラムのレイアウトは、メインエリアの文章を表示できる部分とサイドバーのカテゴリーや検索BOXを表示できる部分が並んでいるので、ユーザーにも使いやすくわかりやすいレイアウトです。
昨今、いろんな大きさのデバイスがあります。それに対応するのが、レスポンシブです。
せっかくできたWebサイトも、レスポンシブに対応していないと、パソコンではとてもよくできているのに、スマホやタブレット表示ではとても見づらく残念な仕上がりになってしまいます。
特にお店の情報などはスマホで見る方が沢山いるので、気をつけたいところです。
このレスポンシブのやり方も教本では詳しく説明されています。教本に出てくる写真はダウンロードして使うこともできるので、写真を準備せずに学習に取り組めるというのも嬉しいです。
教本どおりにコードを書いているはずなのに、何かがおかしいな・・・というときは、サンプルデータもダウンロードすることができるので、それと見比べてみると自分の間違いにも気づきやすいのでオススメです。
間違いを繰り返しながら見つけていくと、エラーに気づきやすくなります。
外部メディアの利用方法を学べる
外部メディアを利用することで、Webサイトの幅がグッと広がります。
コンタクトフォームなどPHPなどを利用しないと作れないサービスも、外部メディアの利用で簡単に設置することができます。
コンタクトフォームに利用できるサービスの紹介や、お店の紹介には必要不可欠なGoogleマップを利用した地図の導入の仕方もとてもわかりやすかったです。
最近のWebサイトはSNSとの連携も重要です。
Facebook や Twitter などのプラグインの挿入方法も掲載されているので、SNSと連携したWebサイトの運用の仕方も学べます。
外部サイトを組み込むには、それぞれのアカウント取得が最低限必要ですが、無料で取得できるものばかりなのでいろいろ試してみる価値があると思います。
Webサイト作れます！って言っているのに、「SNSなどの知識はゼロです」とも言えませんしね。これを機会に、まだアカウントを持っていない方は登録してみましょう！
まとめ
結局のところ、この本のオススメ度は？というと・・・
私は１００％オススメします！
なぜなら、HTML や CSS の知識がゼロだったプログラミング初心者の私でもこの教本に従って学習を進めていくことによって、本当にWebサイトが作れたからです。
確かに、教本に書いてあることを読みながら写していくだけなので、誰にでもできます。
しかし、その一度できた！というのは自信にも繋がりますし、ひとつずつコードを書きながらどんなふうにWeb上で表示されるのかをみていくことで、少しずつ理解できるようになっていきます。
HTMLやCSSの書き方は、ある程度決まっているので、あとは自分でどんな色にするか、どんなレイアウトにするか、どんな写真やデータを使うかでオリジナル化していけます。
この教本をベースに写真やコメントを変えてオリジナルサイトを作っても楽しいです。
私はWebサイトを作成する時に、この教本を辞書代わりに使用しています。
気になる方はぜひ使ってみてください！
