kanacan✨エンジニア成長日記🐣

プログラミング完全未経験からの21歳女性エンジニアによる成長日記

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デザインのサイトが教材になっていたが、凄くわかりやすくて「こんなこともできちゃうの!?」とかなり興味が持てるようになった。