BLOG
ブログ・お知らせ
  • TOP
  • BLOG
  • HTMLのレイアウト方法について解説します【HTML&CSS最速攻略】

HTMLのレイアウト方法について解説します【HTML&CSS最速攻略】

 2020.05.11  ブログ  みやしも
HTML&CSSを使ってWEBサイトのコーディングをしてみるも、レイアウトが上手く出来ずにコードがごちゃごちゃになってしまいました。


HTMLコーディングはレイアウトの『型』を使うと簡単ですよ!!今回は、そんな『型』を使ったWEBページのレイアウト手法について詳しく解説してゆきます。



▼この記事はこんな方向け

  • HTMLやCSSの基礎を学んでいる方
  • コーディングの要領やスピード感を得たい方
  • 模写コーディングなどの練習を行っている方



▼この記事を書いた人

筆者のみやしも.jpg


Twitter -  @miyashimo_eng


IT業界勤務10年以上のみやしもが解説を行います。これまの経験やノウハウを活かして、効率よくHTML&CSSが学べる方法を紹介してゆきます。

HTMLのレイアウトを攻略しよう!!

レイアウトのイメージ.jpg


HTMLやCSSの書き方を学んでいざ実際にWEBページを作っていくも、レイアウトが上手くゆかずコードを追加…色々迷っていくうちに更に追加…コードが迷子になって。。もう訳解らないよ!!そんな経験ありませんか?

僕もHTML&CSSを学び始めた時は何度も体験しました。何度も書き直したり…調べなおしたりと、ドツボにはまりました。

WEBページの構成は『HTML要素』の積み重ねと詰め合わせから成り立っています。そんなWEBページの構成を考える時は、『HTML要素をどの様に組み合わせていくか』の構成を考える事がきわめて重要です。



そして構成がないままにコーディングを始めると…最終的にレイアウトが崩壊...!なんて事態にも。



今回は、そんなコーディングに関する細やかな問題をクリアし、レイアウト崩壊の危機を回避する、便利なHTMLレイアウトの『型』 をお教えいたします。

誰でも出来るお手軽手法です。レイアウトの『型』を利用して、効率よくコーディングを行いましょう。

レイアウトの『型』を使おう

レイアウトのイメージ2.jpg


今回のキーワードであるレイアウトの『型』とは。そしてその型がHTML&CSSのコーディングでどの様に役立つのか、順番に解説してゆきます。


HTMLレイアウトで役立つ『型』の紹介

今回紹介するレイアウトの『型』とは、次のような幅・位置・余白などのレイアウトに関する内容があらかじめ調整された、 HTMLやCSSのテンプレートです。そしてこの型を繰り返し使えば、レイアウト崩壊の危機を回避しつつ、スムーズなコーディングが出来る様になります。



▼HTML

<section class="wrapper">
    <div class="container">
        <div class="content">
            <!-- ここにHTMLを書き込みます -->
        </div>
    </div>
</section>



▼CSS

.wrapper .container{
    max-width:1000px;
    margin:0px auto;
    padding:80px 0px;
}



このテンプレートは『.wrapper』『.container』『.content』といったクラス名がついた要素が入れ子になったHTML。そして.containerに最大横幅(max-width)や余白(margin・padding)の設定がされたCSSの2つから成り立っています。



また、『.content』の要素の中に『ここにHTMLを書き込みます』と書いている通り、実際にWEBページのコーディングをする際はこの位置から 書き始める様にして使います。



このHTMLとCSSを図のイメージに起こすと次の様になります。



▼表示イメージ

レイアウトの基本の型.jpg

シンプルな内容のHTML&CSSですが、実際にどの様に作用するのかをイメージしてみて下さいね。

HTMLのレイアウトにどの様に役立つ?


実際にこの『型』を使ったコーディングの作業では、次のようなメリットが発生します。



▼コーディング時のメリット

  • 全体の余白に統一感が生まれWEBページが見やすくなる
  • 同じパターンでHTML&CSSが書けるのでコードが読みやすくなる
  • HTMLやCSSのコードや、クラスの管理が行いやすくなる



WEBページの制作では、次の様な『セクション(内容)』を表現する事があると思いますが、HTML&CSSによるレイアウト作業では、そのセクションの 横幅・位置・余白』などに対して、常に気を遣わなければなりません。



色々な幅や余白を調整しなければならない.jpg



ですが仮に、セクションごとに毎回異なる方法でHTMLやCSSを書いたりしていたら・・・当然ですが、余白などの調整方法も セクションごとにバラバラになってしまい、例えば、次の様な問題を引き起こす、原因を作ってしまいます。



  • セクション同士のレイアウト調整が行いづらくなる
  • HTMLやCSSに読みにくいコードを生んでしまう
  • 調整が調整を呼び、HTMLやCSSが増えてしまう
こうなるとちょっと大変・・・!!レイアウト崩壊への入り口かも・・・?


レイアウトをそんな風にしないためにも、コンテンツを表示する『横幅・位置・余白』の調整を担うHTMLの構造はあらかじめ用意しておくのがベターです。



そして今回紹介するレイアウトの『型』とはまさに そんな問題回避に役立つように出来ているHTML&CSSのテンプレートなのです。


繰り返し使ってレイアウトを攻略して行こう

WEBページのコーディングをする際は、レイアウトの『型』を繰り返し使って作業を進めてゆきましょう。



ヘッダーやメインビジュアルなど、固有のレイアウトを持つ様な部品に場合は使わない事もありますが、セクション(内容)のコーディングは基本的にすべてこのテンプレートで対応する事が出来る様になっています。



▼レイアウトの『型』で各セクションを攻略していこう

レイアウトの『型』であらゆるセクションを組もう.jpg



良質なコードを生むポイントは繰り返し使うこと。使えそうな場所には積極的に使ってゆきましょう。


次の章では実際に、WEBページのコーディング作業を通したHTMLのレイアウトの組み方について解説してゆきます!!

レイアウトの『型』を使ってHTMLを構成しよう


今回は、次のような『シングルカラムレイアウト』のWEBページのセクション(内容)を、HTMLとCSSに書き出してみます。



▼『シングルカラムレイアウト』のWEBページ

HTMLレイアウトのサンプル_BEFORE.jpg



良く見るWEBページのレイアウトだと思います。HTMLに書き出すにあたって先ずは、先ほど紹介したレイアウトの『型』を当てはめてみましょう。すると、次のようなイメージになります。



▼レイアウトの『型』を当てはめたイメージ

HTMLレイアウトのサンプル_AFTER.jpg



WEBページにはセクションが大きく分けて4つあるため、セクションの分だけ先ほどのレイアウトの『型』を適用する事ができます。この上で、HTMLとCSSを実際に書き出してみましょう。



ここでポイントなのが『wrapper』のクラス名をセクションごとの固有の名前を付けるとCSSが書き分けやすくなるという事です。なので、それも踏まえてHTMLとCSSを書き出すと、次の様になります。



▼HTML

<!-- MESSAGE -->
<section class="message">
    <div class="container">
        <div class="content">
            <!-- ここにHTMLを書き込みます -->
        </div>
    </div>
</section>
<!-- // MESSAGE -->
<!-- VISION -->
<section class="vision">
    <div class="container">
        <div class="content">
            <!-- ここにHTMLを書き込みます -->
        </div>
    </div>
</section>
<!-- // VISION -->
<!-- ABOUT -->
<section class="about">
    <div class="container">
        <div class="content">
            <!-- ここにHTMLを書き込みます -->
        </div>
    </div>
</section>
<!-- // ABOUT -->
<!-- STORY -->
<section class="story">
    <div class="container">
        <div class="content">
            <!-- ここにHTMLを書き込みます -->
        </div>
    </div>
</section>
<!-- STORY -->


▼CSS

/*---------------------------------
 MESSAGE
---------------------------------*/
.message .container{
    max-width:1000px;
    margin:0px auto;
    padding:80px 0px;
}
/*---------------------------------
 VISION
---------------------------------*/
.vision .container{
    max-width:1000px;
    margin:0px auto;
    padding:80px 0px;
}
/*---------------------------------
 ABOUT
---------------------------------*/
.about .container{
    max-width:1000px;
    margin:0px auto;
    padding:80px 0px;
}
/*---------------------------------
 STORY
---------------------------------*/
.story .container{
    max-width:1000px;
    margin:0px auto;
    padding:80px 0px;
}



レイアウトの『型』を使ったHTML&CSSの構成が出来ましたね...!!HTMLとCSSで各セクションを区切る様に『コメント』を付けておくのも分かり易いコードを生むためのポイントです。



この様にWEBページに適用したレイアウトの『型』を繰り返し使ってゆけば、セクションごとに発生する余白や横幅の調整の作業をショートカットしつつも、コーディングをスムーズに進めるための整った状態を作る事が出来ます。

これでレイアウト崩壊は回避されます!!HTMLの構成が良ければ、セクションごとのコードもサクサク書いてゆくことが出来ますよ!!


ここまで来たら、後はセクションごとの固有の内容を『.content』に書いていけばOKです。

基本を押さえつつもアレンジしてゆこう

今回は、WEBページのレイアウト作業に役立つ、HTMLレイアウトの基本の『型』について紹介させて頂きました。



そしてこのレイアウトの『型』を繰り返し使ってコーディングしてゆけば、レイアウトの調整のしやすいHTMLが作成できる事を、実例をもとに解説させて頂きました。


必ずしもこの形をとる必要はありませんが、僕はこのレイアウトの型をHTMLコーディングの基本形として多用しています。応用が利かせやすいやり方なのでぜひ参考にしてみて下さいね!