HTML&CSSのサンプル紹介【シングルカラムレイアウト編】

みやしも WEB制作

今回は、WEBサイトの制作でも使いやすい”シングルカラムレイアウト”を例にした、HTML&CSSのサンプルを紹介してゆきます。



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

  • HTMLやCSSの基礎を学んでいる方
  • コピペ可能なサンプルを探している方
  • WEBサイトのコーディングを学習中の方



▼この記事を書いたひと

フリーランスのみやしも(@miyashimo_eng)です。プログラミングやWEB制作に関するIT情報を、幅広くお届けしてゆきます。

サンプルのデザイン・前提条件について

今回は、次のようなWEBページのデザインを前提にしたHTML&CSSのサンプルを紹介してゆきます。

HTMLサンプルの見本
WEBページのデザイン
画像やテキストを差し替えるだけでもかんたんなWEBページが作れますよ!

HTML&CSSの前提について

今回紹介するHTML&CSSのサンプルは、次のような前提にしたがって作成しています。



▼サンプルの前提

  • レスポンシブWEBデザインに対応する
  • サンプルにはHTML&CSSのみを使用する
  • リセットCSSに”HTML5 Doctor CSS Reset”を利用する

リセットCSSについて

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

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

▼HTML5 Doctor CSS Reset

HTML5 Doctor CSS Reset

上記のリセットCSSと組み合わせて使うのが推奨です!

レイアウトの組み方について

今回のサンプルの内容は、いずれも同じHTML&CSSの『型』にしたがってコーディングしています。レイアウトの組み方について詳しく知りたい方には、次の記事もオススメです。

HTML&CSSのコーディング全般で役に立つ情報です!

レイアウトで使えるHTML&CSSのサンプルを紹介する

レイアウトで使えるHTML&CSSサンプル紹介

それではサンプルの紹介を行います。今回は、先ほどのデザインに基づいた以下のHTML&CSSサンプルを紹介してゆきます。



▼HTML&CSSのサンプル

  1. シンプルな見出しとテキスト
  2. 画像+テキストのレイアウト
  3. テキスト+画像のレイアウト
  4. 丸い画像とテキストの横並びレイアウト
  5. 背景写真とテキスト

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

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;
}
シンプルな内容ですが、『.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;
}
画像とテキストを横並びに配置するために、『.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;
}
先ほどのサンプルと逆順のレイアウトです。コンテンツを自然な流れで表示させるために、スマホの場合は『画像⇒テキスト』に、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;
}


正方形の画像でも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%;
    }
}
背景写真はHTMLの全体を包む『.wrapper』に設定するとブラウザ幅いっぱいに表示できます。テキストの表示は2列にしていますが、1列や3列にするなど、お好みで調整もできます。

WEB制作おススメ情報まとめ

このほかWEB制作で役立つおススメの情報をまとめて紹介してゆきます。

WEBデザインに『Adobe XD』を使おう【無料】

WEBサイトのデザインには、無料から使える『Adobe XD』の利用がオススメです。つぎの記事では、XDのプランや基本的な使用方法について詳しく確認できます。

HTML&CSSをインターネットに公開する方法

PC上で作成したHTMLやCSSなどのファイルをインターネット上に公開するには、FTPソフトを使ってサーバーにアップロードする必要があります。



FTPソフトには『FileZilla(ファイルジラ)』が、サーバーには『XSERVER(エックスサーバー)』が扱いやすくてオススメです。これらを組み合わせた作業方法について、つぎの記事で確認できます。

一人での学習に限界を感じたら...

ひとりで問題解決するのが難しい...!独学での作業に限界を感じてしまった...!、という方には、つぎのサービスがオススメです。

侍エンジニアプラス

月額2,980円のサブスク型だから、お手ごろで試しやすい。Q&A掲示板・マンツーマンレッスンを通して、プロのエンジニアにいつでも質問できます。『挫折しない環境で安心して学習を継続したい!』という方におススメです。


▼公式サイト

SAMURAI ENGINEER Plus+

デイトラ

『1日1題90日』の学習ステップが特徴的なオンラインスクール。業界最安級で利用しやすく、Twitterでの評判も好調です。『短期集中でゼロからしっかりスキルを身につけたい!』という方におススメです。


▼公式サイト

デイトラ|1日1題を90日で

WEB制作やプログラミングなどのITスキルは独学でも習得できますが、いずれも挫折しやすく、ハードルの高いやり方です。

学習サービスは必ずしも成功を保証してくれる訳ではありませんが、目標に向かって行動する自分のための、挫折リスクを避けるための自己投資という意味でおススメできます。いずれも良いサービスですので、効果的な学習のためにもご検討下さいませ。

この記事のまとめ

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



▼今回紹介したサンプル

  1. シンプルな見出しとテキスト
  2. 画像+テキストのレイアウト
  3. テキスト+画像のレイアウト
  4. 丸い画像とテキストの横並びレイアウト
  5. 背景写真とテキスト



WEBサイト・ホームページ制作のために、ぜひ参考にして頂きたい情報です。このほか当ブログでは、WEB制作に関する多くの情報を掲載しています。あわせてご活用くださいませ。



▼関連記事を探す

WEB制作の記事一覧

今回は以上となります。最後までお読みいただき、ありがとうございました!

関連記事

最新記事