プログラミングやWebに興味を持ち始めてから自分の中で長年の悩みだったWebデザインを改善したかったので本書を手にとった。自分の今までの悩みとしては、検索しても複数サイトで書き方が違ったり、新しい情報なのか古い情報なのか判断ができないことが合った。この本は現時点でのWeb制作に関わる知識がまとまっており、自分と同じような知識が点在していて線になっていない人は読む価値があると思う。

Lesson1 Webサイトの成り立ち
Lesson2 Webサイトの枠組みを知る
Lesson3 Webデザインに必要な素材
Lesson4 HTMLをマスターする
Lesson5 CSSをマスターする
Lesson6 シングルページのサイトを作る
Lesson7 レスポンシブ対応サイトを作る
Lesson8 Webサイトを公開してみよう
Lesson9 SNS連携とWebサイトの運用

Webサイト制作のワークフローを知ろう

Webサイトの制作には「戦略フェーズ」「設計フェーズ」「制作フェーズ」「保守・運用フェーズ」の4フェーズがある。言葉は違うが、お客様が何をしたいのか調査したり、実際に要件を定義したり、実際に手を動かして制作したりとSIerなどと大きく変わらないことがわかった。オモシロイと思ったのが設計フェーズでの情報設計で、ワイヤーフレームというWebサイトの設計図を書く段階だった。ユーザがどのような順序でWebサイトを閲覧するのか考えながら落とし込む作業を手書きでやるのだが、当たり前にはなってきているがwebサイトは動的でリッチになってきているので最近はプロトタイピングツールを使うことが多くなってきているようだ。ワイヤーフレームのサイトと呼んでいいかわからないが、自分が以前使った事があるものは「Figma」で個人的には使いやすかった。代表的なものは「Cacoo」「Wireframe.cc」のようで自分は知らなかった。

cacoo.com

wireframe.cc

www.figma.com

また、ワイヤーフレームの参考になるサイトの「Wireframe Showcase」が例として上がっていて、デザインのプロトタイピングとしては「Prott」も紹介されていた。

www.wireframeshowcase.com

prottapp.com

bodyタグの構造

bodyタグの中については「ブロックレベル」と「インラインレベル」があることは知っていた。しかしHTML5においては「コンテンツモデル」という考え方に変わったようで、ブロックレベルとインラインに限らずタグの性質に応じて「入れ子にできるものと・できないもの」に区別される。コンテンツモデルは7つのカテゴリに分かれており次のものが存在している。

「フロー」
「インタラクティブ」
「フレージング」
「ヘッディング」
「セクショニング」
「メタデータ」
「エンペティッド」

sectionとdivとspan

sectionは文章のまとまりで表現されるためのもので、例えばこのブログ記事でいうと##や ###で段落を一つ下げて文章のまとまりを表現するときに使うのがベストであると理解した。

divの役割としては「情報整理、レイアウトのブロック分け」と書かれており、文章に意味付けをするものではない。本に書かれていたがsectionタグやheaderタグが生まれるまえはすべてdivタグを使ってレイアウトをしていたようで、自分にとってはこのあたりが正しく整理されず個人開発で上手く扱えなかったのだと感じた。 spanの役割としては「部分的にCSSを当てたい箇所を囲む」と書かれておりdivタグとの使い方がはっきりと理解できた。spanはインライン要素の性質があるため文章の中で使われる。

冒頭に書いた「検索しても複数サイトで書き方が違ったり、新しい情報なのか古い情報なのか判断ができないことが合った」は、自分としてはsectionとdivとspanが当てはまり、体系的に知識が整理されてよかった。divタグとspanタグのどちらにも言えることだが多用するとそこらじゅうに記述されることになり、文章全体が見えにくくなるため注意が必要だと書かれていた。

CSS

divでレイアウトのブロック分けをおこなうが、分けられたブロックは何もしなければ縦に積み上がっていくことになる。横に並べたり、一部を固定化したり、要素を重ねることでリッチな表現となっていく。CSS3以前では横に並べる場合floatを使っていたが、CSS3以降はdisplay:inline-blockが簡単かつ便利のようだ。

flexboxを使えば1行書くだけで要素を横並びにでき非常に便利。flexboxについては以前勉強のサイトを紹介したこともあるので貼っておく。また更に最新の方法はCSS Gridと呼ばれる方法があり、簡単にグリッドレイアウトが可能である。CSS Gridについては名前は聞いたことがあったレベルなので、今回知ることができてよかった。

yoshitaku-jp.hatenablog.com