HTMLレイアウトはたった５つの型でOK！【サンプルあります】

HTMLのレイアウトをどうすればいい？

サンプルやテンプレートがあればそれに沿って作成していきたいなあ。

と思ったことはありませんか？

このようなお悩みを解消するため、今回は「レイアウトを考える上でおさえておくべき５つの型」をお伝えします。

この内容を習得する事で、簡単に見栄えのよいサイトレイアウトが構築できますよ。

1 HTMLレイアウトはたった５つの型をおさえればいい
2 2カラムレイアウト
3 ３カラムレイアウト
4 フルスクリーン型レイアウト
5 2分割レイアウト
6 タイル型レイアウト
7 おまけ
8 まとめ

HTMLレイアウトはたった５つの型をおさえればいい

サイト作成する上でまず初めに考えなければいけないものがレイアウト。レイアウトとはユーザーが見やすく使いやすいように設計する事です。

世界中には多くのサイトが存在しておりますが、たった５つの型だけをおさえておけばもうレイアウトに悩むことはありません。

なぜなら、多くのサイトがこれからご紹介する５つの型に沿って構築されているからなのです。

では５つの型のどれを選べばいいかというと、作成するサイトの「特徴」をから選びます。５つの型にはそれぞれの特徴がありますので、その特徴を合わせてご紹介いたします。

2カラムレイアウト

２カラムレイアウトとは２列に並んだレイアウトの事です。

２カラムレイアウトの特徴

２カラムはコンテンツ量の多いサイトに起用される事が多いです。

なぜなら、ユーザーがサイトを見る時、Zの法則に沿って見ていく傾向があるからです。ヘッダーを見て、次にメインを左から右へと視線がうつっていきます。その傾向をうまく取り入れた形がこの２カラムです。

主に、ニュースサイトやブログなどかあります。実際に参考サイトを見ていきましょう。

参考サイトその１（右側にサブコンテンツ）

metaps

https://www.metaps-payment.com/

MEMO

メインを左側にサイドを右側に配置しています。多くのサイトが２カラムを採用しており、右側にサブコンテンツをレイアウトしています。

参考サイトその２（左側にサブコンテンツ）

株式会社　ユナイテッドアローズ

https://store.united-arrows.co.jp/shop/glr/

MEMO

サイドを左側に、メインを右側にレイアウトしてます。サイトを訪れた人が知りたい情報をすぐに得る事できるように、左側に検索欄がレイアウトされてます。Zの法則をうまく利用してますね。

２カラムレイアウトのサンプル

２カラムのサンプルです。このように表示されます。

↓HTML↓

  <div class="a">
    <header class="header">
      <h1><a href="#"><img class="logo" src="img/logo.png" alt="会社ロゴ"></a></h1>
      <nav class="h-nav">
        <ul class="b">
          <li><a href="#">menu1</a></li>
          <li><a href="#">menu2</a></li>
          <li><a href="#">menu3</a></li>
          <li><a href="#">menu4</a></li>
          <li><a href="#">menu5</a></li>
          <li><a href="#">menu6</a></li>
        </ul>
      </nav>  
    </header>
    <img class="h-img" src="img/sea.jpg" alt="sea">
    <div class="c">
      <main class="main">メイン</main>
      <aside class="side">サイド</aside>
    </div>
    <footer class="footer">
      テキスト
    </footer>
  </div>

</ul>

</nav>

</header>

</div>

テキスト

</footer>

</div>

↓CSS↓

img{
  max-width: 100%;
}
h1{
  margin-top: 0;
}
.a{
  width: 1200px;
  margin: 0 auto;
}
.a .logo{
  width: 100px;
  margin-top: 36px;
  margin-left: 4%;  

}
.header{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4%;
  background-color: #6fb5ff;
}
.main{
  float: left;
  width: 72%;
  padding: 10px;
  background-color: #b3d874;
  height:400px;
}
.side{
  width: 22%;
  margin: 0 auto;
  padding: 10px;
  background-color: #ff838b;
}
.footer{
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
  height: 100px;
  background-color: #ffce5b;
}
.b{
  letter-spacing: -.4em;
  font-size: 18px;
  margin-bottom: 0;
  list-style: none;
  padding: 0;
}
.b li{
  letter-spacing: normal;
  display: inline-block;
  width: calc(100%/6);
}
.b li a{
  display: block;
  text-decoration: none;
  position: relative;
  text-align: center;
  padding: 12px 0px;
  text-transform: none;
  color: #1a1a1a;
  text-decoration: none;
}
.c{
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
}
.h-img{
  max-height: 400px;
  min-width: 1200px;
}

img{

max-width: 100%;

}

h1{

margin-top: 0;

}

.a{

width: 1200px;

margin: 0 auto;

}

.a .logo{

width: 100px;

margin-top: 36px;

margin-left: 4%;

}

.header{

max-width: 1200px;

margin: 0 auto;

padding: 0 4%;

background-color: #6fb5ff;

}

.main{

float: left;

width: 72%;

padding: 10px;

background-color: #b3d874;

height:400px;

}

.side{

width: 22%;

margin: 0 auto;

padding: 10px;

background-color: #ff838b;

}

.footer{

text-align: center;

max-width: 1200px;

margin: 0 auto;

padding: 10px;

height: 100px;

background-color: #ffce5b;

}

.b{

letter-spacing: -.4em;

font-size: 18px;

margin-bottom: 0;

list-style: none;

padding: 0;

}

.b li{

letter-spacing: normal;

display: inline-block;

width: calc(100%/6);

}

.b li a{

display: block;

text-decoration: none;

position: relative;

text-align: center;

padding: 12px 0px;

text-transform: none;

color: #1a1a1a;

text-decoration: none;

}

.c{

display: flex;

max-width: 1200px;

margin: 0 auto;

}

.h-img{

max-height: 400px;

min-width: 1200px;

}

３カラムレイアウト

３カラムレイアウトとは３列に並んだレイアウトの事です。

３カラムレイアウトの特徴

３カラムは２カラムよりもコンテンツ量の多いサイトに起用される事が多いです。

こちらもZの法則をうまく利用した形になっております。

左側にはサイトの目次や検索欄をレイアウトし、中央にはメインコンテンツや最新情報などを、右側にはサブで伝えたい内容をレイアウトするのが一般的です。

Yahoo!JAPANなどがこのレイアウトを採用しております。実際に参考サイトを見ていきましょう。

参考サイト

ガンコ本舗

http://www.gankohompo.com/

MEMO

中央には一番伝えたい内容をレイアウト。左側には商品が検索できるようにして、右側にはサブコンテンツであるニュース＆トピックスをレウアウトしてます。このようにコンテンツ量の多いサイトは３コラムレイアウトを採用するといいでしょう。

３カラムレイアウトのサンプル

こちらは先ほどの２カラムにサブを追加しました。なので、２カラムのHTML/CSSに追加で対応すれば大丈夫です。

↓HTML↓

    <div class="c">
      <main class="main">メイン</main>
      <aside class="side">サイド</aside>
      <div class="sub">サブ</div>
    </div>

</div>

↓CSS↓

.sub{
  width: 22%;
  margin: 0 auto;
  padding: 10px;
  order: 1;
  background-color: #ff838b;
}

.sub{

width: 22%;

margin: 0 auto;

padding: 10px;

order: 1;

background-color: #ff838b;

}

このようにサブを追加しただけで３カラムになります。

合わせて、CSSにはorderを追加しました。左から順番に１、２、３となります。なので、メインのCSSにはorder: 2;サイドのCSSにはorder: 3;をそれぞれ追加する事で、簡単に３カラムにする事ができるのです。

フルスクリーン型レイアウト

フルスクリーン型のレイアウトとは、メインビジュアルに画面いっぱいにレイアウトする事です。サイトを訪れた時に画面いっぱいに画像や動画が表示されるサイトは、このフルスクリーン型を採用してます。

フルスクリーン型レイアウトの特徴

フルスクリーン型は画像や動画などをインパクトに伝えるとこができます。

そのため、ホテルや工務店などのサイトで起用される事が多いです。

参考サイト

佳ら久

https://www.gora-karaku.jp/

MEMO

写真で良さが伝わるサイトには効果的です。多くの情報に触れるとサイトユーザーは困惑する傾向にあるので、シンプルに伝えたい内容がある場合は、フルスクリーン型を採用するといいでしょう。

フルスクリーンレイアウトのサンプル

↓HTML↓

  <div id="home" class="a">
    <header class="header">
      <div t-logo>
      <h1><a href="#"><img class="logo" src="img/logo.png" alt="会社ロゴ"></a></h1>
      </div>
      <nav>
        <ul class="b">
          <li><a href="#">menu1</a></li>
          <li><a href="#">menu2</a></li>
          <li><a href="#">menu3</a></li>
          <li><a href="#">menu4</a></li>
        </ul>
      </nav>
    </header>
    <div class="e">
      <div class="c">
        <h2 class="d">HelloWorld</h2>
        <p>HTMLレイアウト</p>
        <a class="button" href="#">詳しく見る</a>
      </div>
    </div>
  </div>

</div>

<nav>

</ul>

</nav>

</header>

<h2 class="d">HelloWorld</h2>

<p>HTMLレイアウト</p>

<a class="button" href="#">詳しく見る</a>

</div>

↓CSS↓

.logo{
width: 100px;
height: 40px;  
margin-top: 14px;
}
.header{
  display: flex;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 4%;
  justify-content: space-between;
}
.a{
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.b{
  display: flex;
  font-size: 18px;
  text-transform: uppercase;
  margin-top: 30px;
  list-style: none;
}
.b li{
  margin-left: 30px;
}
.b li a{
  text-transform: none;
  color: #1a1a1a;
  text-decoration: none;
}
.c{
  text-align: center;
  justify-content: center;
}
.c p{
  font-size: 16px;
  margin: 10px 0 42px;
}
.d{
  font-size: 32px;
  font-weight: normal;
}
.button{
  font-size: 18px;
  background-color: #ff838b;
  color: #fff;
  border-radius: 5px;
  padding: 18px 32px;
  text-decoration: none;
}
#home{
  background-image: url(img/sea.jpg);
  background-color: #f6f5f4;
  min-height: 100vh;
}
#home .d{
  text-transform: none;
}
.e{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo{

width: 100px;

height: 40px;

margin-top: 14px;

}

.header{

display: flex;

max-width: 1100px;

margin: 0 auto;

padding: 0 4%;

justify-content: space-between;

}

.a{

background-size: cover;

background-position: center top;

background-repeat: no-repeat;

}

.b{

display: flex;

font-size: 18px;

text-transform: uppercase;

margin-top: 30px;

list-style: none;

}

.b li{

margin-left: 30px;

}

.b li a{

text-transform: none;

color: #1a1a1a;

text-decoration: none;

}

.c{

text-align: center;

justify-content: center;

}

.c p{

font-size: 16px;

margin: 10px 0 42px;

}

.d{

font-size: 32px;

font-weight: normal;

}

.button{

font-size: 18px;

background-color: #ff838b;

color: #fff;

border-radius: 5px;

padding: 18px 32px;

text-decoration: none;

}

#home{

background-image: url(img/sea.jpg);

background-color: #f6f5f4;

min-height: 100vh;

}

#home .d{

text-transform: none;

}

.e{

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

}

2分割レイアウト

分割レイアウトとは、画像や動画などのコンテンツを画面いっぱいにレイアウトして横並びに表示させる事です。

２分割レイアウトの特徴

２つのコンテンツ内容を同時に同ボリュームで伝える事ができます。

また、スマホになると縦並びに配置するようになります。

参考サイト

どこでも待合室

https://dokodemo.app/ja/

MEMO

スクロールせずに複数の情報を表示できるので、シンプルにわかりやすく、ある程度の情報量を伝えたい内容がある場合は２分割レイアウトを採用すればいいでしょう。

サンプル

HTML

  <div id="home" class="a">
    <header class="header">
      <div t-logo>
      <h1><a href="#"><img class="logo" src="img/logo.png" alt="会社ロゴ"></a></h1>
      </div>
      <nav>
        <ul class="b">
          <li><a href="#">menu1</a></li>
          <li><a href="#">menu2</a></li>
          <li><a href="#">menu3</a></li>
          <li><a href="#">menu4</a></li>
        </ul>
      </nav>
    </header>
    <div class="e">
      <div class="c">
        <h2 class="d">HelloWorld</h2>
        <p>HTMLレイアウト</p>
        <a class="button" href="#">詳しく見る</a>
      </div>
    </div>
  </div>

</div>

<nav>

</ul>

</nav>

</header>

<h2 class="d">HelloWorld</h2>

<p>HTMLレイアウト</p>

<a class="button" href="#">詳しく見る</a>

</div>

CSS

.logo{
width: 100px;
height: 40px;  
margin-top: 14px;
}
.header{
  display: flex;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 4%;
  justify-content: space-between;
}
.a{
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.b{
  display: flex;
  font-size: 18px;
  text-transform: uppercase;
  margin-top: 30px;
  list-style: none;
}
.b li{
  margin-left: 30px;
}
.b li a{
  text-transform: none;
  color: #1a1a1a;
  text-decoration: none;
}
.c{
  text-align: center;
  justify-content: center;
}
.c p{
  font-size: 16px;
  margin: 10px 0 42px;
}
.d{
  font-size: 32px;
  font-weight: normal;
}
.button{
  font-size: 18px;
  background-color: #ff838b;
  color: #fff;
  border-radius: 5px;
  padding: 18px 32px;
  text-decoration: none;
}
#home{
  background-image: url(img/sea.jpg);
  background-color: #f6f5f4;
  min-height: 100vh;
}
#home .d{
  text-transform: none;
}
.e{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo{

width: 100px;

height: 40px;

margin-top: 14px;

}

.header{

display: flex;

max-width: 1100px;

margin: 0 auto;

padding: 0 4%;

justify-content: space-between;

}

.a{

background-size: cover;

background-position: center top;

background-repeat: no-repeat;

}

.b{

display: flex;

font-size: 18px;

text-transform: uppercase;

margin-top: 30px;

list-style: none;

}

.b li{

margin-left: 30px;

}

.b li a{

text-transform: none;

color: #1a1a1a;

text-decoration: none;

}

.c{

text-align: center;

justify-content: center;

}

.c p{

font-size: 16px;

margin: 10px 0 42px;

}

.d{

font-size: 32px;

font-weight: normal;

}

.button{

font-size: 18px;

background-color: #ff838b;

color: #fff;

border-radius: 5px;

padding: 18px 32px;

text-decoration: none;

}

#home{

background-image: url(img/sea.jpg);

background-color: #f6f5f4;

min-height: 100vh;

}

#home .d{

text-transform: none;

}

.e{

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

}

タイル型レイアウト

タイル型は写真やコンテンツを規則正しく並べるレイアウトです。

タイル型レイアウトの特徴

多くの情報を一度に見せる事ができるので、ショッピングサイトやブログなどによく取り入れられております。

綺麗にレイアウトする事で見やすいサイトができる上、写真や動画を多く並べるため、見栄えがすごくよくなります。

参考サイト

株式会社　未来ガ驚喜研究所

https://miraiga-lab.com/

MEMO

ひとつひとつのコンテンツを写真で紹介する事で、見栄えがよくなりクリックもされやすいです。たくさんの写真や動画で伝えたい内容があるならタイル型レイアウトを採用するといいでしょう。

タイル型レイアウトのサンプル

↓HTML↓

<div class="grid">
  <div class="item">
    <img src="img/image.png" alt="img">
    <p>テキストテキスト</p>
  </div>
  <div class="item">
    <img src="img/image.png" alt="img">
    <p>テキストテキスト</p>
  </div>
  <div class="item">
    <img src="img/image.png" alt="img">
    <p>テキストテキスト</p>
  </div>
  <div class="item">
    <img src="img/image.png" alt="img">
    <p>テキストテキスト</p>
  </div>
  <div class="item">
    <img src="img/image.png" alt="img">
    <p>テキストテキスト</p>
  </div>
  <div class="item">
    <img src="img/image.png" alt="img">
    <p>テキストテキスト</p>
  </div>
  <div class="item">
    <img src="img/image.png" alt="img">
    <p>テキストテキスト</p>
  </div>
  <div class="item">
    <img src="img/image.png" alt="img">
    <p>テキストテキスト</p>
  </div>
  <div class="item">
    <img src="img/image.png" alt="img">
    <p>テキストテキスト</p>
  </div>
</div>

<p>テキストテキスト</p>

</div>

<p>テキストテキスト</p>

</div>

<p>テキストテキスト</p>

</div>

<p>テキストテキスト</p>

</div>

<p>テキストテキスト</p>

</div>

<p>テキストテキスト</p>

</div>

<p>テキストテキスト</p>

</div>

<p>テキストテキスト</p>

</div>

<p>テキストテキスト</p>

</div>

↓CSS↓

.grid{
  display: grid;
  gap: 26px;
  grid-template-columns:repeat(3, minmax(240px,1fr));
  margin-top: 6%;
}

.grid{

display: grid;

gap: 26px;

grid-template-columns:repeat(3, minmax(240px,1fr));

margin-top: 6%;

}

grid-template-columns:repeat(3, minmax(240px,1fr));
このコードで写真の配置並列数を決める事ができます。今は３としているので、横に５つ並べたい場合は５とすれば５つ横に並びます。

おまけ

ここまで５つの型をご紹介しました。ここからはさらに、もう一つレイアウトをご紹介します。そこまで採用されているレイアウトではありませんので、取り入れなくても大丈夫です。

斜めレイアウト

採用されているサイトは多くないですが、一部を斜めにレイアウトするだけで印象が変わります。

斜めレイアウトの特徴

躍動感や斬新性を伝える事ができます。

参考サイト

mc-digitalrealty

https://www.mc-digitalrealty.com/

MEMO

斜めにする事でスクロールする楽しさが出てきます。あまり多用しすぎたり角度をつけすぎたりすると見づらいサイトになってしまいますので、注意が必要です。

斜めレイアウトのサンプル

↓HTML↓

  <div class="f"></div>
  <div class="e">
   <p>テキスト</p>
   <p>テキスト</p>
   <p>テキスト</p>
   <p>テキスト</p>
   <p>テキスト</p>
  </div>

</div>

↓CSS↓

.f {
  padding-top: 50px;
  position: relative;
  z-index: 0;
}
.f::before{
  content:"";
  position: absolute;
  bottom: 50px;
  border-style: solid;
  border-width: 0 0 100px 100vw ;
  border-color: transparent transparent #fff;
}

.f {

padding-top: 50px;

position: relative;

z-index: 0;

}

.f::before{

content:"";

position: absolute;

bottom: 50px;

border-style: solid;

border-width: 0 0 100px 100vw ;

border-color: transparent transparent #fff;

}

フルスクリーン型のレイアウトに、こちらのHTML/CSSを追加すれば簡単に斜めにレイアウトする事ができます。

まとめ

いかがでしたか？
今回は、「HTMLのレイアウト５つの型」についてご紹介しました。
これでHTMLのレイアウトに迷わずにサイト作成する事ができますよ。
ぜひ参考にしてみてくださいね。

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。