html5 css3 写経

この本の写経をした際のメモ。

part 1

vscodeにlive serverという拡張がある。名前のとおり、live reloadしてくれるサーバーをサクッと建てられる。
要素を横並びにするにはfloat: left, float: rightを指定
- floatを指定した要素の親に高さを伝えるためにclearfixというテクニックがある
box-sizing: border-box: 要素のwidthやheightが、どこまでを指すか。デフォルトではcontentのみ。paddingとborderを含めた方が直感的
文書の構造を、キチンとhtmlに反映させる
- 見た目・デザイン上、セクションが必要ない場合も、h2, h3要素はhtmlに入れておく。見せたくない場合はcssで不可視にする
- 要素の順番にも気を配る。ex. 日付情報は見た目では上にあるけど意味的には本文の下に来るべき、など
  - 親要素がposition: relativeで子要素がposition: absoluteなら、親要素からの座標を絶対値で指定できる。これを使って、兄要素をpaddingで少し間隔を開けたところに描画すれば、上に表示したい要素の位置を調整できる
  - 親要素にposition: relatveが指定されていないと、position: absoluteの基準が画面の左上になる
background: url("...")で、背景に画像を指定できるrepeat-xで横方向に繰り返し
letter-spacing: 1pxで、文字の間に1px挿入される。大見出しとか日付とか読む文章ではないところに使うとアクセントになる
max-height: ...; overflow-y: autoとすると、最大の高さまでは縦に伸び、それ以上の場合はスクロールするようになる
box-shadowで要素に影を付けられる
ポインタがある要素を目立たせる方法
- :hoverに、opacity: 0.8を指定（ちょっと薄くなる）
- :hoverで、背景色を少し変える
- :hoverで、アンダーラインを付ける
- transition: opacity 0.15sなどとして、変化する時間を少しだけ確保すると、反応が心地よくなる（指定なしだと急に変わってせわしない）
↓の指定で、はみ出す場合は...表示になる

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

↓の指定で、要素の横に縦棒を作れる

  margin: 15px 0;
  padding-left: 8px;
  border-left: 5px solid #d03c56;

セレクタの意味
- ul liはulの子孫のli
- ul > liはulの直接の子供のli
  - ulがネストしているときに、子孫のliを選択すると、すべてのliが選ばれてしまうが、子のliだと1階層目だけを選べる
- li + liはliの兄弟で次のli
  - 2番目以降だけを選べるので、margin-topを指定すると、リストの中だけ間隔を空けることができる
  - htmlのタグの間に改行があると（フォーマッタが勝手に入れちゃう場合がほとんど）、ブラウザで表示した際に、単語の切れ目とみなされてスペースが挿入されてしまう。この隙間を埋めるために、font-size: 0を指定すると隙間が詰まる。しかし、子要素にfont-sizeが引き継がれてしまうので、子要素を持つ場合は、font-sizeを指定しなおす必要がある。親要素 > *で選択した中でfont-sizeを設定し直せばよい
cursor: pointerで、その要素にマウスポインタがあるときに表示が指になる

まとめと感想

part 1は、固定幅の画面でのスタイリングと理解。CSSは、あらゆることが手続き的なのだなと思った（要素を中央に寄せる、という指示ではなく、左右のmarginを自動で決める、と指定するなど）。結果、Xを実現したい場合にはYというパターンを使う、というようなイディオム・ノウハウの塊になっているように思う。世の中に、そういうノウハウを紹介するサイトが多い理由が分かった。

CSSのクラス名には名前空間がないのでネーミングの管理が大変というのは知っていたが、part 1の例では、各パーツごとにパーツ全体を囲むdiv要素を導入した上で適当なクラスを付与し、CSSで要素を選択する際に、そのクラスの子孫要素に対してスタイルを選択することで解決していると思った。例 .body .itemと.side .itemで異なるスタイルを当てるとか。

ネストが深くならないなら、これで十分な気がする。一方で、ネストが深くなると、.itemという名前が複数階層で出現するような場合に困ることがあるかもしれない。

要素の幅やmargin, paddingはほとど絶対値で指定している。少し調整しようと思ったらすべての値を整合的に修正する必要があるが、これは骨が折れそうだと思った。mdnによると変数も使えるみたいだ。

part 2

html要素でfont-size: 62.5%を指定するのが定石
- remを10pxにしとくと、相対指定をしたときに実際のサイズが分かりやすくて便利（120%=12px）など
- 主要なブラウザのデフォルトフォントサイズが16px。62.5%を指定すると、10pxになる
  - デフォルトからの相対値で指定しているので、ユーザーが個別にサイズを変えているときも比例的に変わる
全要素でbox-sizing: border-bosを指定→paddingまでがボックスの大きさになる
a要素のデフォルトの装飾（下線）も消しておき、全体で色を統一する
::beforeや::after擬似要素に関わるものを表示させるには、contentの指定が必要。content: ""を設定すれば、要素自身は空っぽだけどborderなどを表示することができる
::beforeや::after擬似要素は、その要素の隣ではなく、直下の最初 or 最後に置かれる ex: a::afterとすると、a要素の子要素の一番最後に擬似要素が挿入される。

まとめと感想

今回も、固定幅のデザインなので各種サイズは絶対値で指定。クリッカブルな要素にhoverしたときのアイデアがいくつかあった:

透明度を上げて、ちょっと明るく見えるようにする
要素を回転させる
影を付けて浮き上がる感じにする
下線が伸びて表示される

アクションが可能な要素に触れたときに、何かしら反応があると「それっぽい」感じになるので重要度は高い。また、基本が分かれば、CSSでこれらのアニメーションを実現するのは、そこまで大変ではないことが分かった。

part 3

background: fixedで、スクロールしたときに背景画像が動かないようにできる
- background-size: coverで、要素いっぱいに背景画像を合わせる
backgroundに画像を置いて、それに合わせたフォント色を使う場合は、背景色として似た色を置いておくと、万が一画像を読めなかった場合でも読みづらくなくなる可能性がたかい
display: tableを使って、複数の要素を横に並べることができる

まとめと感想

なんとなく、画面の大きさが変わったら、全要素がそれに比例して拡大・縮小するようなイメージを持っていたが、そうではないんだな。同じディスプレイで少しウィンドウの幅を広げたり縮めたりする程度の変化であれば、文字のサイズや要素間の隙間などは固定値の方が見やすい。n分割にしている要素の幅のみがこういった比較的小さな変化に対しては追随している方が自然。

レスポンシブなデザインは、すごい頑張って色んな場所で条件分岐をするような作業を想像していたけどそういうわけではなかった。メディアクエリの中で一部の値を変更するだけで、わりと簡単にスマホ用のデザインに変わっていったのに驚いた。例えば、display: tableをdisplay: blockに変えるだけで横並びが縦並びになったりとか。

ただし、これは元のHTML/CSSで、あとでレスポンシブにすることを前提に組んでいたからだろう。逆に言うと、自分でレスポンシブなCSSを書こうと思ったら、最初から意識して書かなければならず、なかなかハードルが高い。