こんにちは、がーすーです。
今回はHTML&CSSの初学者にかなり人気の技術書を購入したので実際にやってみた感想を書いていきます。
目次
1.Webデザインについての基礎知識
2.Webサイトの仕組みについての基礎知識
3.HTMLの基礎学習
4.CSSの基礎学習
5.フルスクリーンページのサイト制作
6.2カラムサイトの制作
7.タイル型サイトの制作
8.外部メディアの利用について
大まかにこのような流れでの学習になっています。
WebデザインやWebサイトの基礎学習から入るので、Web制作に関する知識がない人でもWebサイトの基本から学ぶことができます。
ではそれぞれのチャプターで学べることや参考になるなーと思ったことを書いていきます！
はじめに、よいWebデザインとは？ということについて様々な実在するサイトを例にしてそれぞれのサイトデザインがどのような目的でされているかなどについて詳しく書いてあります。
ユーザーにとってどういったデザインが見やすいのか、使いやすいのかということも学ぶことができるのでサイト制作をする上での必要な基礎知識を得ることができました。
こういったサイト内のデザインが意味することについては Progateなどでは学ぶことができないのでかなり勉強になりましたね。
ここではWebページやURL、ブラウザーについてなどのWebに関する基礎知識を学ぶことができます。
私たちが普段なにげなく見ているWebページがどのように表示されているのかといったことの仕組みがわかりやすく記述してあるのでWebに関する知識が全くない人でもわかりやすい内容になっています。
HTMLについての基本情報や、ファイルの作りから学ぶことができるのでかなり初心者にやさしい内容になっています。
HTMLの骨組みや基本の書き方からよく使われる見出しタグやテーブルタグ、フォームの作り方を実際にコードを入力しながら体系的に学ぶことができます。
個人的にはテーブルタグの解説が図もわかりやすくてかなり参考になりました。
また、ページを構成するブロックタグについても1つ1つ細かく解説してあり勉強になったのでここで復習がてらまとめます。
| タグ | 用途 |
| <header> | サイトロゴやタイトルなどのページ上部を囲うタグ |
| <nav> | ナビゲーションメニューを囲うタグ |
| <article> | ニュースなどの読み物、記事を囲うタグ |
| <section> | テーマを持ったグループを囲うタグ |
| <main> | ページの核となる部分を囲うタグ |
| <aside> | サイドバーなどの補足情報を囲うタグ |
| <footer> | コピーライトやSNSリンクなどのページ下部を囲うタグ |
| <div> | 意味を持たないブロックでグループ化によく使うタグ |
HTMLの次はCSSの基礎学習です。CSSとは？やCSSをHTMLに適用させる方法、基本の書き方から学べるので初心者でも置き去りにされることはないです。
この本は、このCSSについての解説がかなりタメになります。
他の技術書などの場合は「CSSでの記述でこんな装飾ができますよ」という説明書きくらいで終わることが多いのですが
本のタイトルにWebデザインと入ってるだけあって、文字の太さや、間隔、揃える方向などに関して全てデザイン込みでこういう場合はこういう装飾をした方がいいといったことを図を用いて具体的に解説してあるので
めちゃくちゃ参考になりました！
文字だけでなく色の配色についても具体的に解説していて、「色」についても学ぶことができます。
それぞれの色が持つ印象や使い方、配色例などが見やすい一覧でまとめてあり
カラーコードも記載されているので勉強が終わった後も資料としてずっと使っていけるので初心者の方は持っておいて損はないと思います！
上記のように画像や動画を画面全体に表示させるレイアウトをを0からコーディングしていきます。
HTML構造の作り方やサイト制作の流れを体系的に学ぶことができ、他にもファビコンの設定方法などについても解説してあり勉強になりました。
ここでもデザイン書ならではの解説があり、背景画像にグラデーション背景を重ね合わせるといった方法まで書いてあります。
次は、ニュースサイトやブログによく用いられる汎用性の高い2列に並んだレイアウトをコーディングしていきます。
flexboxを活用しての横並びレイアウトやレスポンシブ対応の仕方を学ぶことができました。
この辺をしっかり理解しておくといろんなデザインに応用ができて作れるサイトデザインの幅が広がりますね。
ここでは、ショッピングサイトなどでよく利用されているタイル型レイアウトを作成していきます。このレイアウトはレスポンシブデザインとも相性がいいです。
CSSグリッドの使い方が詳しく解説してあってかなり勉強になりました。
グリッドを使うことでこんなに簡単にレイアウトできるなんて思ってもなかったのでめちゃくちゃ感動しました（笑）
Progateとかでは学べないので皆さんも是非やってみてください！
ここではお問い合わせページを作成していきながら、様々な外部メディアとの連携などについて学べました。
- Google マップの挿入
- Facebookプラグインの挿入
- Twitterプラグインの挿入
- YouTube動画の挿入
どれも案件をこなすなかでクライアントからの要望でよくあるパターンなので
ここもしっかり理解して使いこなせるようにしておいた方がいいですね！
この本は発行年が2019年と新しいこともあり、今風のサイトデザインをFlexboxやCSSグリッドなど最新の表現方法で作り上げながら学ぶことができます。
また、技術的な部分だけでなく常にデザインを意識した内容となっていてデザインについても学ぶことができるのでかなり買ってよかったです！
- これからHTML&CSSの勉強をしようとしている初心者
- 脱初心者を目指す人
- 最近の技法をあまり知らない中級者
この本でHTML ＆CSSの基本的なところからデザインの基礎までしっかりカバーすることができるので初学者〜中級者にはもってこいの１冊になっています。
HTML&CSSの全てを習得できる訳ではありませんが、カラーコード表やFlexboxのチートシートなど今後も使用頻度の高いものが記載されていますので
持っておいて損はない本だと思います！
みなさんも1度お店やアマゾンで試し読みしてみてはいかがでしょうか？
