HTML&CSS

HTMLとCSSでイメージしたレイアウトを作成してみる

このブログを始める前にProgateの「シンプルなWebサイトを作ろう PHPコース」を受講してましたが、HTML/CSSでのレイアウトイメージがいまいちつかめてませんでした。Progateは実際にソースを書いて表示のイメージを確認しながら進んで行くんですけど、ソースを記述する箇所にはコメントが書かれてたりするので、なんとなくで進めるんですよね。なんとなくで進んでいけるのがProgateの魅力だとは思いますが、それで理解した、作れるっていう気持ちになるので気をつけないといけないです。

今回はHTML/CSSを使用してのレイアウトのイメージをつかむために実際に自分でHTML/CSSを作成してみました。

作成するレイアウトイメージ

作成したHTML(index.html)

作成したCSS(style.css)

実行(表示)結果

メインをサイドバーも包含してしまってますが、ほぼほぼイメージ通りにできたと思います。

全ての要素のスタイルに枠線をつけたので、ブロック要素とインライン要素の違いやタグをネスト(入れ子)した時の配置もイメージしやすかったです。ここに背景色(background-color)もつけたらもっとイメージしやすいんでしょうけど、面倒だったんでそこまではやりませんでした。

苦戦したところ

やっぱりfloatですね。floatは文字通り要素が浮いた状態になるので、ネストしても親要素の中に入ってくれないんですよ。

こんな感じで。

mainタグ内の「float: left;」しているdiv要素(div0)が浮いた状態になっているので、footerタグの内容がdiv0の下に入りこんでしまってます。

これを解決してくれたのが、「clearfix」です。

clearfixをざっくりいうとclassにclearfixを指定した要素の後に擬似的に要素を追加し、その要素に対してfloatをclearしてあげることによって、それ以降の要素ではfloatが解除された状態となるイメージになります。

個人的にclearfixに関しては以下のサイトがわかりやすかったです。
https://qiita.com/mariofujisaki/items/2ad1de8432d7249afadc

まとめ

TwitterとかYoutubeとかで色んなエンジニアの方がProgateとかでインプットしたら、必ず自分の手でアウトプットすること。これが本当に大事だと思います。その時に構文が分からなくても「こんなことができたはず」「こんなことがしたい」ってところからググって解決できれば全然問題ありません。

そりゃ何から何まで記憶しててパチパチできるほうが良いでしょうけど、それより自分でググって解決できる能力のほうが大事です。ググることは恥ずかしいことでもなんでもないですよ。

どんどんググっていきましょう!!

ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す