HTML&CSSをイチから学び直す
HTMLはデザインするためのものじゃない
私が普段HTMLを書くときはRailsのViewでどう見せたいかを表現するときに書く。 つい「ここはもっと強調させたい」とかをHTMLでやろうとしちゃうけどそれはCSSでやること。
- ここは見出し
- ここはリスト
- ここはテーブル
といったように環境に依存せずにコードの役割を書いていく＝マークアップするのがHTMLである。
HTML5で出来るようになったこと
- header,footer,articleなどでヘッダーやフッター、記事部分がそれぞれどこになるのか区別できるようになった
- audio,video,canvasタグが使えるようになったおかげで動画編集が出来るようになった
CSSはページの見た目を期待通りに装飾していく
CSSはデザインの部分なのでデザインセンスのない自分には少し億劫な部分でさけていた。 折角の機会なので自力でCSSを書けるようになって苦手意識をなくしたい🔥
Positionで要素の位置を決める
今まで位置を決めるとすれば
aline-centerなんかを使っていたので初めて知った
positionの値
- static： デフォルト
- relative: 現在の位置から相対的な位置を決める
- absolute: 親要素の位置から絶対的な位置を決める
fixed: 画面の決まった位置に固定する
書き方
. test {position: relative}
positionのプロパティ
- top
- bottom
- left
- right
例えばtopの場合、基準の上からの距離で指定する。 基本はtopとleftなど2つ組み合わせて指定する
よく見る写真の隅にタイトルが重なっているのは親要素を
relativeで固定して、子要素をabsoluteを載せるとぴったりハマる。fixedを使うとスクロールしても動かないヘッダーが作れる
まとめ
HTMLとCSSは役割を分けてあげることが重要。そうすることでブラウザなどの環境に依存せず伝えたいどおりに表示ができる CSSは奥が深い、、！ サルワカというWebデザインのサイトが教材になっていたが、凄くわかりやすくて「こんなこともできちゃうの!?」とかなり興味が持てるようになった。
