HTMLとCSSをちゃんと勉強してみる

Webアプリを普段作っているときに、意外とHTML/CSSでハマることがおおいな、と思ってました。
よくよく考えると、ちゃんと勉強したことないじゃん？ってなったので、この機会に学び直すことにしました！

教材は↓です。

入社したときに買ったもので、結局読まずに眠ってました...笑
少し古い内容かもしれませんが、勉強していきます！

学んだことを備忘録的に箇条書きにしていきます。

htmlファイルの基本的な構成の説明
pタグは段落を表す。段落として区切らず、単に改行したい場合は
を挿入する
リスト作成の仕方。ulとolの違い。
tableタグの使い方
- 表の中で、ヘッダー、ボディ、フッターに分ける場合はthead,tbody,tfootを使う
- セルを縦に結合する場合は、rowspan属性を追加する
- セルを横に結合する場合はcolspan属性を追加する
セクションタグについて
- セクションタグは全部で4つある
  1. article - 内容が単体で完結するセクション
  2. aside - 前後の内容と関連はあるが、本筋からは外れる内容を表すセクション
  3. nav - ナビゲーション
  4. section - 上記のどれにも当てはまらないセクション
- セクションタグを挿入することで、正しい文書構造をブラウザに認識させることができる
header と footer
1. header - セクションの見出しや導入部分、ページのロゴやタイトル、目次、検索フォームなど
2. footer - 記事を書いた人の名前や関連リンク、コピーライト

pタグのブラウザ標準は16px
クラス名は数字で始めることはできない
セレクタは「タグ名.クラス名」という記述もできる
モニタに表示される色の仕組み
- RGBの各色は0~255の256段階に分割される。256³色を表現できる
隣り合う上下のマージンは重なり合って相殺される。入れ子のタグにも適用される。左右のマージンには適用されない。
list-style-typeプロパティを使うとリスト記号を変更することができる
list-style-positionプロパティは、リスト記号の位置を設定できる
セレクタをカンマで区切ると、セレクタを増やすことができ、スタイルを共有できる
font-family、body要素にはsans-serif(ゴシック系)を指定する事が多い。系統のみを指定しておけば、ユーザが任意に設定したフォントで表示される。
line-heightプロパティはpxではなく、文字サイズに対する割合で指定する方が一般的。

Google fontsの使い方の解説
コピーライトは、細目としてsmallタグで囲う。
ページ全体をdivで囲ってセンター寄せにする
日付をtimeタグで囲む
メインカラムとサブカラムのwidthを設定し、それぞれfloatプロパティを使って左右の2段組みレイアウトにする
pagebodyのafterに、clear: both;を追記し、ページボディに高さを付与する(clearFix)
overflow:hiddenでも同様の効果を得られる
floatプロパティとclearプロパティ
- floatは指定した要素を左、または右に寄せて配置する。後続のコンテンツはfloatを指定した要素の反対側に割り込む
- clearプロパティはfloatの回り込みを解除する
段組みレイアウトをする場合は「フレキシブルボックスレイアウト」を使用するべき
上位ブロックからスペース区切りでセレクタを記述すると、指定されたセレクタのブロックないでのみスタイルが有効になる。

NON STOP TECH BLOG