WEB STUDY

ウェブ制作に役立つ知識を発信しています。

ウェブ制作でよく使うレイアウトや要素をご紹介

まず初めに共通のHTMLとCSSをご紹介!

共通のHTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div class="container">
    <main class="main">
        <div class="main-inner">
            <section class="block">
                <div class="block-inner">
                    <div class="block-head">
                        <h2>タイトル</h2>
                    </div>
                    <div class="block-body">
                        ここに今回必要なコードを記述する
                    </div>
                </div>
            </section>
        </div>
    </main>
</div>
</body>
</html>

共通のCSS

* {
    box-sizing: border-box;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    list-style: none;
    margin: 0;
    padding: 0;
}
img {
    height: auto;
    max-width: 100%;
}
.block {
    padding: 65px 0;
}
.block-inner {
    margin: 0 auto;
    width: 92%;
    max-width: 800px;
}
.block-head {
    margin: 0 0 25px;
}
.block-head h2 {
    font-size: 18px;
    font-weight: bold;
}

head内に記述するCSSとウェブフォントの呼び出しコード

※こちらEnlighter JSにてコードを記述するとエラーが発生するためCode Penの埋め込みで案内いたします。

See the Pen head内記述コード by Syo Yanai (@h1-tech) on CodePen.

こういったレイアウトは頻出する!
覚えておいて損はないレイアウト集!

PCでは2列横並び、スマホでは1列になるレイアウト

See the Pen Test by Syo Yanai (@h1-tech) on CodePen.

PCでは3列横並び、スマホでは1列になるレイアウト

See the Pen Test by Syo Yanai (@h1-tech) on CodePen.

PCでは4列横並び、スマホでは2列になるレイアウト

See the Pen 4カラムレイアウト by Syo Yanai (@h1-tech) on CodePen.

画像とテキストが横並びで交互に配置、スマホでは縦にレイアウト

See the Pen 画像とテキストの横並びレイアウト by Syo Yanai (@h1-tech) on CodePen.