はじめに
将来的にWeb開発をしたいと考え、その第一歩としてHTMLとCSSの基礎を学びました。
学んだことをアウトプットするために、生成AIにレイアウト例を出してもらい、それを元に簡単なWebページを実装してみました。
この記事では、実装の過程でつまずいたポイントや気づきについて、備忘録も兼ねてまとめます。
つまずいたところ
Flexの使い方
Flexによって解決したこと
-
要素を左右や上下の端に寄せる
-
左にプロフィール画像、右にテキストを配置するレイアウト
display: flexを使うことで簡単に実現できる場面が多く、驚きました。
Flexは、要素を横や縦に並べる、端に寄せるなどの調整にとても便利だと実感しました。
Gridの使い方
カードのような要素をタイル状に並べるときは、display: gridが便利でした。
Flexとの違いは、1次元か2次元かという点で、Gridを使えば縦横に整ったレイアウトがしやすくなります。
オブジェクトの中央寄せ
例えば、ボタンをページの中央に配置したいとき、最初はボタン要素自体に中央寄せのCSSを書いていました。
ですが、ページの中央に配置したい場合、ボタン単体ではなく、その親要素に対して中央寄せのスタイルを指定する必要があると気づきました。
ラベルと値を整えるレイアウト
左にラベル、右に値を表示するレイアウトでは、ラベルの文字数が異なることで右側の整列が崩れやすく、揃え方に悩みました。
その際、<span>を活用することで調整できることがわかりました。
文章中で細かく調整したい場合には、<span>が有効だと感じました。
感想
今回は、ページの構造を意識しながらHTML/CSSを書くことを意識して取り組みました。
まだ可読性やレスポンシブ対応までは手が回りませんでしたが、実際に作ってみたことで、Webページの構造が少しずつ見えるようになってきた気がします。
まだまだ学ぶことは多いですが、今回の取り組みは自分にとって良い第一歩になったと感じています。