圧倒的成長日記-2日目-

日記っぽいこと

起床(4h睡眠@部室)即出勤は頭が働かないからだめ。未来の自分への丸投げドキュメント投げて帰ってきた。
今日はだらだら勉強してあんまり進まなかった。あと、少し絵のほうの方針についても話しあったけどまぁ結局模写をするといいのではないかということだったのでそうしようと思う。ただ何となく模写してもなんか最悪な感じになったのでせっかく買ったトレッシングペーパーを使って、

  1. トレースする
  2. 比率を調べる
  3. 紙に書く

の手順で行こうと思う。ペンタブいらないから明日からでも始められるね!

HTML

画像挿入

便利サイト:http://pixlr.com/editor/
あとは

<img src="相対パス" alt="代替テキスト" width="x" height="y">

実際には、本文から参照されていたらfigureタグで囲ったり、figcaptionタグでキャプションをつけたりする。

レイアウトやら

fontの便利サイト:https://www.google.com/fonts
divタグで区切って、いろいろやる。
センター寄せ

/*margin 縦の余白 横の余白*/
# id{
  margin: 0 auto;
}

右寄せ、左寄せ

#id{
  float:left(or right);
}

寄せ解除

#id{
  clear:both;
}

寄せ解除:基本的に無指定だと「直前の要素の逆」に来るのでそれを解除したいときに。
→なんかサンプルの奴が(5-2-2 7)理屈でいうとrightの逆にleftが来るような気がするんだけど。

よくある問題

floatを指定した要素の高さはその親要素には反映されないことになっている
⇒つまり、中身がfloat指定したやつしか入っていないsectionやらなんやらの高さは0になってしまう、ということ。

解決策:clearfix
  • clear:bothは消す。
  • 親要素に以下のようなやつを追加する。
#parentElement:after{
  content:"";
  clear:both;
  display: block;
}
解説

float指定された後続の要素はfloatを指定した要素の逆側に回り込む(らしい)。clearはそれを解除できる(clearについてもleft,right,bothの指定ができる。これでさっきの疑問を解決できる?)。
まぁ、直感的には空いている場所に来るという想像でOKだと思う。
floatを指定した要素はフローティングボックスという特殊なボックスになる。通常のボックスはこのフローティングボックスを無視するが「中身は重ならないように配置」される。
→勝手に回り込まれてしまう。
という理屈らしい。
clearfixは、親要素のセレクタに":after"という空の疑似要素をつけて、それにclear:bothして回り込みを解除するというテクニック。display:blockについては後述らしい。
別の手法としてoverflow:hiddenなるものがあるみたいだけど、あんまり推奨じゃないっぽいので解説しない。
そもそもCSS3では段組みレイアウトとしてフレキシブルボックスレイアウトといのが提唱されているらしい。でも詳しい説明はない。

その他

CSSのnamespaceを親要素を前に書くことで限定できるよ、というだけの話。
おわり。