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
ソフトウェア会社(SIer)で10年以上勤務のシステムエンジニア|ポケットWiFi使用歴2年以上|ポケットWiFi+αで快適でお得なインターネット環境を構築するための情報を発信|その他、IT情報やWebサービス、アプリ、ガジェットなどの情報を発信|自分と他の人のカバンの中身を紹介するメディア「カバンの中身ラボ(https://kaban-no-nakami-labo.com/)」も運営しています。 ポケットWiFi選びに迷ったらTwitter、お問合せフォームからご連絡ください。