はじめに
職業訓練のWeb制作の授業で、CSSのfloatプロパティについて学びました。
floatは、画像の横に文章を表示するなど、要素の周囲に「回り込み」を作るためのCSSです。
現在のWeb制作では、要素を横並びにするときにFlexboxやGridを使うことが増えています。そのため、floatをページ全体のレイアウトに使う場面は以前より少なくなっています。
それでも、過去に作られたWebサイトのコードを読んだり、CSSの回り込みの仕組みを理解したりするためには、floatを学ぶ意味があります。
実際に授業で使ってみると、簡単な横並びは作れても、レイアウトが複雑になった途端に手が止まりました。
今回の学習で一番大きかったのは、floatの使い方を覚えたことではありません。
「複雑なWebレイアウトは、細かい部分ではなく大枠から考える」
という制作全体に通じる考え方を学べたことでした。
floatを使って要素を横並びにする
授業では、floatを使って画像と文章を横に並べたり、複数の要素を左右に配置したりする方法を学びました。
例えば、画像にfloat: left;を指定すると、画像が左側に寄り、その横に後続の文章が回り込みます。
単純なレイアウトであれば、floatを指定するだけで比較的簡単に形を作ることができます。
しかし、要素が増えたり、複数のボックスを横に並べたりすると、急に難しくなりました。
思った位置に要素が並ばなかったり、下に配置したはずの要素まで横に回り込んだりします。
見た目が崩れても、どのCSSが原因なのか分からず、何度も書き直しました。
floatは、指定した瞬間だけを見れば単純に感じます。しかし、その影響が後ろの要素にも続くため、初心者には全体の動きを把握しにくいプロパティだと感じました。
なぜclearプロパティが必要なのか
floatを学ぶうえで欠かせないのが、clearプロパティです。
floatした要素は通常の文書の流れから外れるため、そのままにすると、親要素の高さが正しく認識されなかったり、次の要素が意図せず回り込んだりすることがあります。
そこで、clearプロパティを使って回り込みを終わらせます。
例えば、左右どちらの回り込みも解除したい場合は、次のように指定します。
clear: both;最初は、floatを指定したのに、なぜ別の場所でclearプロパティが必要になるのか理解できませんでした。
しかし、floatは「要素を寄せる指定」、clearプロパティは「その回り込みをここで終わらせる指定」と考えると、少し整理しやすくなりました。
floatを使うときは、横並びにすることだけではなく、どこでclearプロパティを使い、回り込みを解除するのかまで考える必要があります。
複雑なレイアウトになると手が止まる
簡単な横並びであれば、floatを指定してclearプロパティで解除する流れを理解できました。
ところが、複数のエリアが組み合わさったレイアウトになると、急に手が止まりました。
細かい部分から作ろうとすると、どの要素にfloatを指定するのか、どこでclearプロパティを使うのか分からなくなります。
目の前の要素を動かすことばかり考えていると、ページ全体の構造が見えなくなってしまいました。
幅を少し変え、余白を調整し、また別の場所が崩れる。
その繰り返しで、作業が進まなくなりました。
そこで、細かい要素をいったん見るのをやめて、ページ全体を大きな枠に分けて考えることにしました。
floatより大切だった「大きな箱で考えること」
今回の授業で、floatの書き方以上に大切だと感じたのが、「大きな箱で考えること」です。
Webページは、文章や画像が無秩序に並んでいるわけではありません。
まずページ全体の枠があり、その中にヘッダー、メイン部分、サイドバー、フッターなどの大きな箱があります。
さらに、その大きな箱の中に、見出し、画像、文章、ボタンなどの小さな要素が入っています。
複雑なレイアウトを見たときに、いきなり画像や文字の位置を調整しようとすると、どこから手を付ければよいのか分からなくなります。
そこで、次の順番で考えるようにしました。
- ページ全体の幅を決める
- 大きなエリアに分ける
- 横並びにする部分を確認する
- floatを指定する要素を決める
- clearプロパティで回り込みを終わらせる場所を決める
- 最後に余白や文字サイズを整える
この順番で作業すると、複雑に見えたレイアウトも少しずつ整理できました。
最初から完成形を作ろうとするのではなく、大きな箱を置き、その中に小さな箱を入れていくイメージです。
この考え方によって、途中で手が止まっても、どの部分までできていて、次に何を設定すればよいのか分かるようになりました。
idやclassの名前も役割で考える
授業では、idやclassの名前の付け方についても学びました。
idやclassは、HTMLの要素に名前を付け、CSSでデザインを指定するときに使います。
学習を始めたばかりの頃は、box1やbox2のような名前を付けたくなります。
しかし、要素が増えると、それぞれが何を表しているのか分からなくなります。
例えば、記事のメイン部分ならmain-content、サイドバーならsidebar、メニューならnavigationのように、役割が分かる名前を付けると、後からコードを見直しやすくなります。
ここでも大切なのは、見た目だけで名前を付けるのではなく、その要素がページ全体の中でどのような役割を持っているのかを考えることです。
大きな構造を理解していると、idやclassの名前も決めやすくなると感じました。
用途別にCSSファイルを分ける
CSSファイルを用途別に整理する方法についても学びました。
小さなWebページであれば、すべてのCSSを一つのファイルに書いても管理できます。
しかし、ページ数やコード量が増えると、修正したい場所を探すだけでも時間がかかります。
そこで、共通デザイン、レイアウト、ページごとのデザインなど、役割ごとにCSSファイルを分けると管理しやすくなります。
ただし、初心者のうちは細かく分けすぎると、どのファイルに何を書いたのか分からなくなることもあります。
まずは、全体共通のCSSと、特定ページ用のCSSを分けるなど、自分が管理できる範囲から始めるのがよいと思いました。
CSSファイルを分ける場合も、ページの構造や役割を大きく捉えることが大切です。
floatの学習からWeb制作全体の考え方を学んだ
今回の学習を始めたときは、floatプロパティの書き方やclearプロパティの使い方を覚えることが目標でした。
しかし、実際に課題へ取り組んでみると、それ以上に大切なことに気づきました。
それは、Web制作では、まず全体を俯瞰し、大きな部分から順番に作ることです。
レイアウトが崩れると、つい目の前の要素だけを直そうとしてしまいます。
しかし、問題の原因が親要素の幅やページ全体の構造にある場合、細かな部分だけを調整しても解決しません。
まず大きな箱の構造を確認し、その後で小さな要素を見る。
この考え方は、floatだけでなく、FlexboxやGridを使ったレイアウトでも役立つはずです。
Web制作では、すぐにコードを書き始めるのではなく、最初にページの構造を見て、大きなまとまりに分ける習慣を付けたいと思いました。
初心者がfloatでつまずいたときの確認ポイント
floatを学び始めたばかりの人は、最初から複雑なレイアウトを完成させようとしないことが大切です。
まずは、画像を左側に配置し、その横に文章を回り込ませる簡単な例から始めると、floatの動きを理解しやすくなります。
レイアウトが崩れたときは、次の順番で確認すると原因を探しやすくなります。
1. HTMLの構造を確認する
親要素と子要素の関係を確認します。閉じタグの位置が間違っていないかも見直します。
2. 大きな箱の幅を確認する
横並びにする要素の幅と余白の合計が、親要素の幅を超えていないか確認します。
3. floatを指定した要素を確認する
どの要素が左または右に寄せられているのかを整理します。
4. clearプロパティを確認する
回り込みを終わらせたい場所に、clearプロパティが指定されているか確認します。
5. 細かい調整は最後にする
文字サイズや余白の微調整は、大きなレイアウトが完成してから行います。
一度にすべてを直そうとすると、どの変更が影響したのか分からなくなります。
まず大きな構造を確認し、その後でfloatやclearプロパティを一つずつ見直すことが大切です。
まとめ
職業訓練で学んだfloatは、初心者の私にとって難解なプロパティでした。
簡単な横並びは作れても、複雑なレイアウトになると、どこにfloatを指定し、どこでclearプロパティを使えばよいのか分からなくなりました。
それでも、ページ全体を俯瞰し、大きな箱から順番に設定することで、少しずつ形にすることができました。
今回学んだのは、floatの使い方だけではありません。
Web制作では、細かな部分から作り始めるのではなく、最初に全体の構造を整理することが大切だと実感しました。
複雑なレイアウトで手が止まったときは、いったんコードを書くのを止めて、ページを大きな箱に分けてみてください。
まずは紙やノートにページの大枠を書き出し、どの部分を横並びにするのか整理するところから始めてみましょう。
コメント