BLOG
ブログ・お知らせ
  • TOP
  • BLOG
  • HTMLレイアウトのサンプル紹介!!【HTML&CSS最速攻略】

HTMLレイアウトのサンプル紹介!!【HTML&CSS最速攻略】

 2020.05.17  ブログ  みやしも
WEBサイトのコーディングで役立つHTML&CSSのサンプルを探しています!!


今回は、『シングルカラムレイアウト』のWEBページ制作で使えるHTML&CSSのサンプルを紹介してゆきます。実用的なレイアウトパターンのもとに、コピペで使えるサンプルをご用意しました。



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

  • HTMLやCSSの基礎を学んでいる方
  • コーディングに要領やスピード感を得たい方
  • 実際のWEBサイトのコーディングを行っている方



▼この記事を書いた人

筆者のみやしも.jpg


Twitter -  @miyashimo_eng


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


HTMLレイアウトのサンプルを紹介します

今回は『シングルカラムレイアウト』構成のサイトを例に、HTMLのCSSのサンプルを紹介してゆきます。



▼今回紹介するHTMLレイアウトのサンプル

  • シンプルな見出しとテキスト
  • 画像+テキストのレイアウト
  • テキスト+画像のレイアウト
  • 丸い画像とテキストの横並び


シンプルな構成によるHTML&CSSのサンプルですが、画像やテキストを差し替えれば、誰でも簡単なWEBサイトが作れる様になります!


今回のHTML&CSSサンプルは、次のような方針に従って作成しています。



▼HTML&CSSサンプルの方針

  • レスポンシブWEBデザインに対応しています
  • 各サンプルはHTMLとCSSだけで表現されています
  • グリッドレイアウトにはflexboxを使用します
  • JavaScriptは使用していません


レイアウトの基本も抑えておこう


今回紹介するHTML&CSSのサンプルは、以前に当ブログで紹介したレイアウトの『型』を前提に作成しています。サンプルはコピペするだけで利用できる様になっていますが、HTML&CSSを学んでいる方は、こちらの記事も併せて読むのがおススメです。



▼併せて読みたいおススメ記事

おすすめ

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


HTML&CSSコーディング全般で役に立つとても有効な手法です。ぜひ参考にしてみて下さいね。

リセットCSSを入れておこう

リセットCSSは『Chrome』や『Safari』などのブラウザが持っているデフォルトのCSSの設定を打ち消して、まっさらな状態でCSSを書ける状態を作るためのCSSです。



今回紹介するサンプルではHTML5 Doctor CSS ResetというリセットCSSを使って初期状態を作っています。



HTML5 Reset Stylesheet.jpg



▼HTML5 Doctor CSS Reset

http://html5doctor.com/html-5-reset-stylesheet/

※クリックすると別タブで開きます


本サンプルを使ってWEBサイトを作ろうと考えている方は、リセットCSSと組み合わせて使うのが推奨です。

レイアウトサンプル集


シンプルな見出しとテキスト

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



シンプルに、見出しとテキストを表示させるためのHTMLサンプルです。



▼HTML

<section class="wrapper">
    <div class="container">
        <div class="content">
            <h2 class="heading">MESSAGE</h2>
            <p>テキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
    </div>
</section>



▼CSS

/* container */
.wrapper{
    width:100%;
}
.wrapper .container{
    max-width:1000px;
    margin:0px auto;
    padding:80px 0px;
}
/* content */
.wrapper .content {
    padding:50px;
    text-align:center;
}
.wrapper .content .heading{
    margin:0px 0px 40px 0px;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
}



▼POINT

シンプルな内容ですが、『.wrapper』や『.container』は余白や背景の設定が出来る様に残しましょう。表示するテキストの量にもよりますが、marginやpaddingによる横幅調整を忘れずに。


画像+テキストのレイアウト

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



シンプルな『画像+テキスト』の組み合わせによるレイアウト。WEBサイトで頻繁に見かけるレイアウトではないでしょうか。



▼HTML

<section class="wrapper">
    <div class="container">
        <div class="content">
            <div class="content-item">
                <img src="img/sample-1.jpg" class="image">
            </div>    
            <div class="content-item">
                <div class="text">
                    <h2 class="heading">VISION</h2>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            </div>
        </div>
    </div>
</section>



▼CSS

/* container */
.wrapper{
    width:100%;
    background-color:#fafafa;
}
.wrapper .container{
    max-width:1000px;
    margin:0px auto;
    padding:80px 0px;
}
/* content */
@media (min-width: 992px) {
    .wrapper .container .content {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.wrapper .content-item {
    width:100%;
}
@media (min-width: 992px) {
    .wrapper .content-item {
        width:50%;
    }
}
.wrapper .image{
    display:block;
    max-width:100%;
    margin:0px auto;
}
.wrapper .text{
    padding:50px;
}
.wrapper .text .heading{
    margin:0px 0px 40px 0px;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
}



▼POINT

画像とテキストを横並びに配置するために、『.content』にフレックスボックスを設定しています。スマホ表示時は縦に並べ、PC表示時は横に並べるレスポンシブの調整のために、メディアクエリ(@media)を組み合わせて使います。


テキスト+画像のレイアウト

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



先ほどの『画像+テキスト』の組み合わせを逆向きにしたパターンのレイアウトです。


▼HTML

<section class="wrapper">
    <div class="container">
        <div class="content">
            <div class="content-item">
                <img src="img/sample-2.jpg" class="image">
            </div>    
            <div class="content-item">
                <div class="text">
                    <h2 class="heading">SERVICE</h2>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            </div>
        </div>
    </div>
</section>



▼CSS

/* container */
.wrapper{
    width:100%;
    background-color:#fafafa;
}
.wrapper .container{
    max-width:1000px;
    margin:0px auto;
    padding:80px 0px;
}
/* content */
@media (min-width: 992px) {
    .wrapper .container .content {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
/* PC時のみ順番を入れ替える */
@media (min-width: 992px) {
    .wrapper .content {
        flex-direction:row-reverse;
    }
}
.wrapper .content-item {
    width:100%;
}
@media (min-width: 992px) {
    .wrapper .content-item {
        width:50%;
    }
}
.wrapper .image{
    display:block;
    max-width:100%;
    margin:0px auto;
}
.wrapper .text{
    padding:50px;
}
.wrapper .text .heading{
    margin:0px 0px 40px 0px;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
}



▼POINT

単純に先ほどの逆順となるレイアウトですが、コンテンツを自然な流れで表示させるために、スマホ表示時は『画像⇒テキスト』に、PC表示時は『テキスト⇒画像』の順に表示される様に調整を行っています。『flex-direction』を使い、PCの時だけ要素の並び順を逆転させるのがポイントです。


丸い画像とテキストが横並びのレイアウト

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



丸い画像とテキストが横並びになったレイアウトです。柔らかな印象を与える丸いデザインは、プロフィールなどの人物紹介などに向いています。



▼HTML

<section class="wrapper">
    <div class="container">
        <div class="content">
            <h2 class="heading">ABOUT US</h2>
            <div class="list">
                <div class="list-item">
                    <img src="img/sample-3-2.jpg" class="image">
                    <div class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
                </div>
                <div class="list-item">
                    <img src="img/sample-3-1.jpg" class="image">
                    <div class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
                </div>    
                <div class="list-item">
                    <img src="img/sample-3-3.jpg" class="image">
                    <div class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
                </div>
            </div>
        </div>
    </div>
</section>



▼CSS

/* container */
.wrapper{
    width:100%;
}
.wrapper .container{
    max-width:1000px;
    margin:0px auto;
    padding:80px 0px;
}
/* content */
.wrapper .content .heading{
    margin:0px 0px 40px 0px;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
}
@media (min-width: 992px) {
    .wrapper .content .list {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.wrapper .content .list-item {
    margin:50px 0px;
    padding:0px 50px;
    text-align:center;
}
@media (min-width: 992px) {
    .wrapper .content .list-item {
        margin:0px;
        width:calc(100% / 3);
    }
}
.wrapper .content .list-item .image{
    display:block;
    width:100%;
    max-width:300px;
    margin:0px auto 20px auto;
    border-radius:100%;
}
.wrapper .content .list-item .text{
    line-height:1.8rem;
    font-size:0.8rem;
    color:#666666;
}



▼POINT

正方形の画像を使い、border-radiusを50%に指定して丸形に。画像とテキストを含む『.list-item』はフレックスボックスを使ってスマホ表示時は縦に、PC表示時は横にレイアウトします。また、横幅をキッチリ3等分にするために、calc() 関数を使って横幅の計算をしています。


背景写真とテキスト

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



シンプルな見出しやテキストの表示に、背景写真を組み合わせたレイアウトです。



▼HTML

<section class="wrapper">
    <div class="container">
        <div class="content">
            <h2 class="heading">STORY</h2>
            <div class="list">
                <div class="list-item">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
                <div class="list-item">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
            </div>
        </div>
    </div>
</section>


▼CSS

/* container */
.wrapper{
    width:100%;
    background-image:url(../img/sample-4.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center center;
}
.wrapper .container{
    max-width:1000px;
    margin:0px auto;
    padding:80px 0px;
}
/* content */
.wrapper .content .heading{
    margin:0px 0px 40px 0px;
    color:#ffffff;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
}
@media (min-width: 992px) {
    .wrapper .content .list {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.wrapper .content .list-item {
    padding:30px;
    line-height:1.8rem;
    color:#ffffff;
    text-align:center;
}
@media (min-width: 992px) {
    .wrapper .content .list-item {
        width:50%;
    }
}



▼POINT

背景写真はHTMLの全体を包む『.wrapper』に設定するとブラウザ幅いっぱいに表示する事が出来ます。どの様なブラウザ幅でも画像が収まる様、『background-size:cover』を設定するのを忘れずに。テキストの表示は2列にしていますが、1列や3列にするなどお好みで調整を


組み合わせてオリジナルデザインを作ろう

今回はシングルラカムレイアウトを前提に、HTML&CSSサンプルの紹介をさせて頂きました。



各サンプルはWEBページの『セクション(部品)』の単位を意識した作り込みになっており、余白やコンテンツの表示幅などのレイアウトも含めて、非常にカスタマイズ性の高いサンプルになっています。



コピペだけで使えますが、HTML&CSSを理解して使いこなせば、よりオリジナリティの高いサイトを作る事も出来ると思います。


HTMLやCSSの学習を進めつつ、WEBサイトのアレンジにもぜひトライしてみて下さいね!!