2-2. 要素の位置や大きさを変えるレイアウトの実装

1.完成イメージとデモ

完成イメージ

左がPC、右がスマホです。

デモ

CodePen

2.HTML実装

<div class="kv">
    <div class="kv-texts">
        <h1 class="kv-texts-title">タイトルが入ります。</h1>
        <p class="kv-texts-p">説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p>
    </div>
</div>

背景画像は class="kv" に css の background で設定します。
テキスト関係はまとめて absolute で位置を指定したいので class="kv-texts" にまとめて、Title と Paragraph をその中に書きます。

3.CSS実装（PC編）

PCから実装していきます。
スマホからでも問題ないので、それぞれ試してみて個人のやりやすい方から実装していきましょう。

.kv {
    position: relative;
    width: 100%;
    height: 600px;
    background-image: url(.bg_img.jpg);
    background-position: center center;
    background-size: cover;
}
.kv-texts {
    position: absolute;
    left: 4%;
    top: 17%;
}
.kv-texts-title {
    margin: 0;
    font-size: 34px;
    font-weight: bold;
}
.kv-texts-p {
    margin: 0;
    padding-top: 20px;
    font-size: 22px;
    line-height: 1.4;
    width: 520px;
}

absolute の要素の位置（left, right, top, bottom）を指定する時は%指定がオススメです。親の要素に対して比率で配置されるのでどのブラウザサイズでも見ても綺麗に配置され要素が飛び出しづらくなります。

4.CSS実装（スマホ編）

メディアクエリを使ってスマホのみ適用されるCSSを書いていきます。

@media all and (max-width: 767px) {
    .kv {
        height: 600px;
        background-position: left center;
    }
    .kv-texts {
        top: 19%;
        width: 64%;
    }
    .kv-texts-title {
        font-size: 28px;
    }
    .kv-texts-p {
        padding-top: 15px;
        font-size: 18px;
        width: 100%;
    }
}

以上で実装は終わりです。

もし、HTML,CSSの書き方でわからない部分があったら「はじめてのWebデザイン『HTML・CSS』入門」を参考にしてみてください。