HTMLで2カラムのレイアウト作成をできるようにする

HTMLで2カラムのレイアウト作成をできるようにする

2カラムのレイアウトを作成できるようにするためには、HTMLの要素をどのようにマークアップすればいいのか、そして作成した2カラムのHTML要素をどんなCSSを使用してレイアウトを組んでいけばいいのかを、一つずつの手順を理解することで簡単に2カラム作成ができるようになります。

2カラムレイアウトで見ることが多い「左にメインコンテンツ」「右にサイドコンテンツ」の2カラム構成を作成してみたときの作成方法を説明します。

 

HTMLで2カラムのレイアウトを組む

 

HTMLで2カラムレイアウトにする要素を組んでいき、CSSでレイアウト確認しやすいように完成させる目標は以下の画像のようにするが目標です。

 

 

HTMLでサイト全体の要素を2カラム用にマークアップしてから、メインコンテンツの中に入れる記事一覧のレイアウトも2カラムで作成できるようにした要素を組み立てます。

それぞれのwebサイト作成者によってマークアップの仕方やHTMLタグの使い方には違いがあるので、いろいろな作成方法があるかと思いますが上の画像のように2カラムのレイアウトを作成するのが今回の目標です。一例として参考程度に読んでみてください。

ちなみにレイアウトって配置とか配列って意味なのですね。

 

2カラムレイアウトのHTMLをサンプルで把握

 

はじめに2カラムのレイアウトにするためにマークアップした全体要素をHTMLサンプルをみて軽く仕上がりイメージを把握しておきます。

 

<div class="wrapper">
    <section class="main">
        <h1>メインコンテンツ</h1>
        <div class="archive">
            <div>
                <img src="no-image.gif" alt="no-img">
                <p>見出しや文章</p>
            </div>
            <div>
                <img src="no-image.gif" alt="no-img">
                <p>見出しや文章</p>
            </div>
            <div>
                <img src="no-image.gif" alt="no-img">
                <p>見出しや文章</p>
            </div>
            <div>
                <img src="no-image.gif" alt="no-img">
                <p>見出しや文章</p>
            </div>
        </div>
    </section>
    <section class="side">
        <h2>サイドコンテンツ</h2> 
        <p>サイドコンテンツの内容</p>
        <h2>サイドリスト</h2>
        <ul>
            <li>メニュー</li>
            <li>メニュー</li>
            <li>メニュー</li>
            <li>メニュー</li>
        </ul>
    </section>
</div>

 

上のサンプルのHTMLコードでは、2カラムでレイアウトする2つのコンテンツをまとめているのが<div class=”wrapper”></div>です。

そして2カラムでメインコンテンツにする要素をまとめているのが<section class=”main”></section>

メインコンテンツの横にレイアウトを組み2カラムになるサイドコンテンツをまとめる要素が<section class=”side”><section>です。

 

Advertisement

 

HMLで2カラムの要素作成は、大きく分けて3つのポイントを抑えて把握してしまえば簡単に作成ができるようになります。

 

  • 2カラムにする2つのコンテンツをまとめる要素
  • メインコンテンツをまとめる要素
  • サイドコンテンツをまとめる要素

 

<div class="wrapper">
    
</div>

 

今の時点では、2カラムレイアウト作成に必要な2つのコンテンツをまとめる要素をマークアップしておくだけにして、順番に分かりやすいようにHTMLで2カラムのレイアウトを組んでいくことにします。

 

サイトのレイアウトを2カラムで作成

 

HTMLでサイトを2カラムでレイアウトする場合の作成は、先述した2カラムレイアウト作成に使用する2つのコンテンツ要素をまとめるwrapperなどの親要素の中に2つの子要素を作成して組み立てていきます。

 

<div class="wrapper">
    <section class="main">
        <h1>メインコンテンツ</h1>
    </section>
</div>

 

まずは2カラムの中でメインになるコンテンツをメインセクションとして要素を作成します。上のHTMLコードでは<section class=”main”></section>が2カラムのメインコンテンツをまとめてます。

 

<div class="wrapper">
    <section class="main">
        <h1>メインコンテンツ</h1>
    </section>
    <section class="side">
        <h2>サイドコンテンツ</h2>
    </section>
</div>

 

メインコンテンツを作成した次に、2カラムレイアウトのメインの横に配置するサイドコンテンツを作成します。

HTMLでメインコンテンツ要素の下に<section class=”side”></section>のようにサイドコンテンツを作成するときの要素を囲めるようにしておきます。

2カラムレイアウトで作成のときは、レイアウトするHTMLの順番は2カラムの親要素の中で、メインコンテンツが先でサイドコンテンツが後の順番で要素を組み立てます。

また、作成した2カラムの親要素と2つの子要素にはclass属性かid属性を記述しておいて、作成した2カラムの要素をCSSでもレイアウトができるようにしておきます。

 

コンテンツも2カラムレイアウトで作成

 

サイトを2カラムのレイアウトにする親要素の中のメインコンテンツも2カラムレイアウトで作成しようと思います。

 

<div class="wrapper">
    <section class="main">
        <h1>メインコンテンツ</h1>
        <div class="archive">
            <div>
                <img src="no-image.gif" alt="no-img">
                <p>見出しや文章</p>
            </div>
            <div>
                <img src="no-image.gif" alt="no-img">
                <p>見出しや文章</p>
            </div>
            <div>
                <img src="no-image.gif" alt="no-img">
                <p>見出しや文章</p>
            </div>
            <div>
                <img src="no-image.gif" alt="no-img">
                <p>見出しや文章</p>
            </div>
        </div>
    </section>
    <section class="side">
        <h2>サイドコンテンツ</h2> 
        <p>サイドコンテンツの内容</p>
        <h2>サイドリスト</h2>
        <ul>
            <li>メニュー</li>
            <li>メニュー</li>
            <li>メニュー</li>
            <li>メニュー</li>
        </ul>
    </section>
</div>

 

サイトを2カラムで構成するために作成したメインコンテンツ要素内にdivでclassかid属性をつけてCSSでスタイルできるようにしておきます。

そしてメインコンテンツで2カラムになる部分に画像をimgタグで、文章をpタグでマークアップして作成しておきます。このときdivで囲んだimgとpのセットを4つくらい作成するようにします。4つくらいないと2カラムにならないからです。

サイドコンテンツのほうは、見出しで文章やリストをマークアップしておくだけにします。最後に2カラムで作成したデザインを確認するとき用ですね。

 

Advertisement

 

一つずつHTMLで2カラムのレイアウトを作成する説明をしてきましたが、あとはHTMで作成した2カラムのレイアウト要素にCSSでスタイリングしていき仕上げていきます。

 

HTMLの2カラム要素をflexboxでレイアウトする

 

HTMでマークアップした2カラムのレイアウト要素をCSSではflexboxで2カラムにしていきます。

2カラムレイアウトにする場合、CSSのfloatプロパティを使用して要素を浮かせて2カラムする方法もありますが、要素を浮かせることでレイアウト崩れすることも多く、崩れたレイアウトの修正に悩まされることがあります。

一方で崩れたレイアウトの修正に悩む時間を無くし簡単なCSSの記述だけで2カラムのレイアウトを組むことができるflexboxでは、効率よく2カラムの作成ができるのでおすすめです。

 

flexboxでレイアウトしたCSSのサンプル

 

HTMLでサイトの2カラムとコンテンツを2カラムにした要素にflexboxでレイアウトして細かい配置調整もした全体のCSSのサンプルが以下のCSSコードです。

 

/* 2カラムサイトにする */
.wrapper {
    width: 80%;
    display: flex;
    margin: 20px auto;
    justify-content: center;
}

.main, .side {
    padding: 20px;
}

.main {
    background: pink;
    width: 60%;
    margin-right: 20px;
}

.side {
    background: skyblue;
    width: 20%;
}

.side p, ul {
    background-color: #f0f0f0;
    padding: 30px;
}

/* 2カラムコンテンツにする */

.archive {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.archive div {
    margin-bottom: 3rem;
    padding: 3rem;
    width: 35%;
    background-color: #f0f0f0;
}

.archive img {
    display: block;
    margin-bottom: 3rem;
    width: 100%;
    height: auto;
}

 

CSSで2カラムにするための大きなポイントは、HTMLで作成した2つの2カラム要素を囲む親要素にdisplay:flexを指定して、2つの子要素を横に並べるということが作成の大きなポイントです。

大きなポイントも含めて、マークアップした2カラムの要素をどのように指定すればいいのか、サイトを2カラムにするレイアウト部分とコンテンツを2カラムの部分のcssに切り分けて説明します。

 

サイトを2カラムにするCSS

 

サイトを2カラムにする部分では、2つの2カラム要素の親要素にCSSのdisplayプロパティにflexの値を指定してメインコンテンツとサイドコンテンツを横並びにレイアウトします。

そして2カラムの幅の指定やマージンで余白を与えながらレイアウトを微調整します。

 

.wrapper {
    width: 80%;
    display: flex;
    margin: 20px auto;
    justify-content: center;
}

.main, .side {
    padding: 20px;
}

.main {
    background: pink;
    width: 60%;
    margin-right: 20px;
}

.side {
    background: skyblue;
    width: 20%;
}

.side p, ul {
    background-color: #f0f0f0;
    padding: 30px;
}

 

サイトのメイン部分とサイド部分が横並びになり2カラムっぽくなると、あとはメインとサイドの2つの要素それぞれに幅をパーセントで振り分けて調整します。

私の場合は、2カラムにするメインとサイドの親要素の幅を80%にしたので、メインは「width:60%」サイドは「width:20%」で振り分けています。

あとは表示確認用に、それぞれの要素には背景色をつけておくと作成後の配置確認がスムーズにできます。

 

コンテンツを2カラムにするCSS

 

2カラムにしたメイン部分のコンテンツもflexboxで2カラムレイアウトで作成します。

まずはメインコンテンツを囲む親要素にdisplay:flexを指定して、子要素を横並びにします。

 

.archive {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.archive div {
    margin-bottom: 3rem;
    padding: 3rem;
    width: 35%;
    background-color: #f0f0f0;
}

.archive img {
    display: block;
    margin-bottom: 3rem;
    width: 100%;
    height: auto;
}

 

親要素にdisplay:flexだけだと、横並びにする要素が全て横一列に並んでしまうのですが、ここで親要素にはflex-wrap:wrapを指定してあげます。

flex-wrap:wrapはflexboxの折り返しをするプロパティとその値です。

flex-wrap:wrapの指定で折り返しが可能になるので、2列で折り返すにはコンテンツ要素の幅をパーセントで調整することで2カラムになるようにレイアウトできます。

 

 

2列並びというほうが正しいのですかね。2カラム表現に自信がなくなってきました…

 

2カラムレイアウトのレスポンシブ

 

サイトを2カラムレイアウトにした場合、ブラウザの画面を狭くするとコンテンツが細長くなってしまいます。

細長い2カラムにならないようにするためには、小さい画面のときはレスポンシブにしてサイドコンテンツをメインコンテンツの下に配置されるように作成します。

 

 

@media screen and (max-width: 1350px) {
    .wrapper {
        flex-direction: column;
        width: 100%;
    }
    .main, .side {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
    }
    .archive div {
        width: 70%;
        margin: 20px auto;
    }
}

 

上のCSSで説明します。

メディアクエリで幅が1350pxまでの画面の場合は、その下で指定しているCSSの記述が適用されるように作成しているのですが、2カラムレイアウトで組んだメインとサイドを囲む親要素にflex-direction: columを指定します。

そうすると、幅が1350pxまでのスクリーンで2カラムは縦並びになりメインの下にサイドコンテンツが並ぶように作成できます。

縦並びを実現しているのがflex-directionプロパティと、その値のcolumです。

あとはメディアクエリでレスポンシブにした縦並びのレイアウトが2カラムの場合のレイアウトのままだと微妙な配置になることがあるので、検証ツールで確認しながらメディアクエリ用にレイアウトを整え完成させます。

 

まとめ

 

HTMLで2カラムのレイアウト作成をできるようにするには、HTMLで横に並べたい要素を2つ作成して親要素で囲み、囲んだ親要素にCSSでdisplay:flexを指定して横並びにする。

そして並んだ2つの要素をそれぞれ幅を決めてレイアウトし、細かい微調整をしながら2カラムレイアウトを整えていく。

という作成の流れで簡単に2カラムレイアウトを組むことができるので素敵な2カラムサイト作成をしてみてください。

HTMLカテゴリの最新記事