CSSのfloatに苦戦した初心者が、ピザ屋さんのWebサイトを完成させるまで

# CSSのfloatに苦戦した初心者が、ピザ屋さんのWebサイトを完成させるまで

今日は職業訓練の授業で、これまで学習したCSSのプロパティを使い、Webサイトのトップページを装飾しました。

今回制作したのは、架空のピザ屋さんのWebサイトです。

ページには、大きな画像を表示するメインビジュアル、メニューの紹介、商品のラインナップなどがありました。

これまで授業で学んできたHTMLとCSSを使い、見本サンプルに近いページを自分で作っていく課題です。

CSSのプロパティを一つずつ練習するときとは違い、実際のページ制作では複数の設定を組み合わせる必要があります。

そのため、どこから手をつければよいのか迷う場面もありました。

CSS float 初心者｜これまで学んだCSSでトップページを制作

今回の課題では、昨日学んだfloatプロパティを使う場面がありました。

floatは、画像などの要素を左右に寄せ、その周囲に文章を回り込ませるために使われるCSSプロパティです。

以前はWebページ全体の横並びにも使われていましたが、現在はFlexboxやGridを使う場面が増えています。

私はfloatを学んだばかりだったため、最初からHTMLとCSSを同時に進めると混乱しそうだと感じました。

そこで今回は、まずHTMLでページの骨組みを作ることにしました。

CSS float 初心者｜HTMLの骨組みを作ってからCSSを設定

見出しや画像、文章などをひととおり配置し、ページの構造を確認してからCSSの設定に進みました。

制作方法は一つではなく、実際にはHTMLとCSSを行き来しながら調整することもあります。

それでも、学び始めたばかりの私には、先にHTMLの構造を作るほうが内容を整理しやすかったです。

CSS float 初心者｜完成させるために役立った3つの工夫

今回の制作で意識したのは、最初から細かな部分を完璧に合わせようとしないことです。

見本と自分の画面を見比べながら、まずはページ全体の大きな部分からCSSを設定していきました。

特に役立ったのは、次の3つです。

1．最初にHTMLの構造を作る

先にHTMLで見出しや画像、文章を配置しておくと、どの部分にCSSを設定すればよいのか整理しやすくなりました。

CSSを追加する前に、必要な要素がそろっているか確認できたのもよかったです。

2．大きなレイアウトから整える

最初から文字の位置や細かな余白を合わせるのではなく、ページ全体の幅や、大きなブロックの配置から調整しました。

大枠が決まると、見本との違いも見つけやすくなります。

3．一つ変更するたびに画面を確認する

CSSを一度にたくさん変更すると、表示が崩れたときに原因が分からなくなります。

そのため、一つの設定を変更するたびにブラウザを更新し、画面を確認しました。

少し手間はかかりますが、どのコードが表示に影響しているのか理解しやすくなりました。

大きな部分から順番に組み立てる考え方は、複雑なレイアウトを整理するときにも役立ちました。複雑なWebレイアウトは大枠から考える｜CSSのfloatで学んだことにも書いています。

Webサイト 模写｜分からない部分はノートやインターネットで確認

制作の途中では、思った位置に要素が並ばなかったり、見本とは違う表示になったりしました。

特にfloatを使った部分では、設定したつもりでもレイアウトがうまく整わず、何度か手が止まりました。

そのようなときは、授業で書いたノートを見返したり、インターネットでプロパティの使い方を調べたりしました。

調べた内容をそのまま使うだけではなく、自分のHTMLやCSSに合わせて数値や指定方法を変えながら試しました。

一度で正しく表示されることは少なく、コードを修正してブラウザを更新する作業を何度も繰り返しました。

それでも、一つずつ問題を確認していくことで、なんとかトップページとして形にすることができました。

Webサイト 模写｜完璧な再現より最後まで作り切ることが大切

今回、最も大きな学びになったのは、完璧でなくても最後まで作り切ることの大切さです。

見本を1ピクセル単位で正確に再現することは、初心者にとって簡単ではありません。

完成したページを見本と比べると、文字の位置や余白、画像の大きさなど、まだ違う部分が残っています。

途中では、思いどおりに表示されない箇所ばかりが気になり、細かな調整に時間を使いすぎそうになることもありました。

しかし、細部にこだわりすぎて作業が止まるよりも、まずはページ全体を最後まで形にすることを優先しました。

完成まで進めたことで、自分がどの部分でつまずいたのか、どのプロパティを理解できていないのかが見えてきました。

途中でやめていたら、「難しかった」という感想だけで終わっていたかもしれません。

最後まで作ったからこそ、次に復習するべき内容が具体的になったと感じています。

CSS float 初心者｜同じ初心者として伝えたいこと

私自身、最初から細かな部分まで見本に合わせようとすると、作業がなかなか進みませんでした。

まずはHTMLで骨組みを作り、CSSで大きなレイアウトを整えてから、細かな部分を調整すると進めやすかったです。

また、うまく表示されないときは、一度に複数のコードを変更するのではなく、一つずつ試して画面を確認する方法が役立ちました。

同じように、見本どおりに作れず悩んでいる方は、最初から完璧な完成度を目指すのではなく、まずページ全体を最後まで形にすることを目標にしてみてもよいと思います。

一度完成させると、次に作るときは前回よりも早く進められる部分が増えていきます。

完成した回数を重ねることで、少しずつコードの書き方やレイアウトの考え方も身についていくのではないでしょうか。

floatを解除するかどうかで迷った話は、floatの解除はいつ必要？CSS学習で感じた判断の難しさにまとめています。

片道2時間、月18日の通学が50代の体にどう響くかは、職業訓練は50代にきついかでも振り返っています。

CSS float 初心者に多い疑問

同じようにfloatで苦戦している方から聞かれそうな疑問をまとめました。

floatで苦戦したとき、何を意識すればいいですか

最初から細かい部分を完璧に合わせようとせず、まずHTMLで骨組みを作り、大きなレイアウトから整えることを意識しました。一度に複数のコードを変えるのではなく、一つずつ変更して画面を確認する方法も役立ちました。

まとめ

今回は、職業訓練で学んだHTMLとCSSを使い、架空のピザ屋さんのトップページを制作しました。

floatやレイアウトの調整には苦戦しましたが、HTMLで骨組みを作り、大きな部分からCSSを設定することで、最後まで形にできました。

見本と比べると、文字の位置や余白などに違いは残っています。

それでも、完成まで進めたことで、自分がどこでつまずくのか、何を復習すべきなのかが見えてきました。

次は今回うまく再現できなかった部分を確認し、もう一度同じレイアウトを作ってみたいです。

完璧な一回を目指すよりも、小さなページを何度も完成させながら、少しずつ精度を上げていきます。

同じようにCSSのレイアウトで悩んでいる方も、まずは一つのページを最後まで完成させてみてください。