実践!HTMLとCSS!コンテンツの横並びとレスポンシブ対応

アイコン入りのコンテンツを横並びにして、レシポンシブ対応する方法を今回は初心者向けに解説していきます。

ウェブサイトを制作する為には、少なからずとも効率化は必要となります。

そこで今回は効率良くコンテンツを作る方法から、レスポンシブに対応する方法を中心に解説していくことにします。

ここで初心者の方向けに、『レシポンシブとは』について簡単に図解解説しておきます。

このように、『画面の大きさによってレイアウトを変えて見せる。』これがレシポンシブ化の概要です。

それでは、順番に解説していくことにしましょう。

期待できるスキルアップ

✅効率よくコンテンツを増やす方法

✅コンテンツを横並びにする方法

✅レシポンシブ対応

解説に入る前に、まずは前回作成したアイコン入りのコンテンツを準備しておきましょう。

アイコン入りのコンテンツを作成する方法

HTMLを効率良くコンテンツを増やす

ここでは以前作成したコンテンツを複製し、その内容を修正して効率よくコンテンツを増やしていきます。

HTMLコードをコピーしてコンテンツを複製する

以前作成したコンテンツをコピーして、コンテンツを3つに増やしていきましょう。

以下のコードをコピーして、コンテンツを3つに増やしてみましょう。

HTMLコード

<section class="conA">
<div class="container">
<div class="text">
<span class="fab fa-html5 icon"></span>
<h2>HTML5</h2>
<p>テキストへのマークアップ言語です。テキストに意味を持たせウェブサイト制作の第一歩を踏み出します。</p>
<a href="#">MORE...</a>
<span class="fas fa-angle-right"></span>
</div>
</div>
</section>

ブラウザ表示とコード

See the Pen xxwBRow by PakuPaku (@PakuPaku) on CodePen.

HTMLのコンテンツの内容を修正する

それでは複製したHTMLの内容を修正していきましょう。

まずは<h2>要素の内容を修正していきます。

複製した<h2>要素の内容を、それぞれ以下のように修正します。

ブラウザ表示とコード

See the Pen OJyqbeQ by PakuPaku (@PakuPaku) on CodePen.

次に<p>要素内を、<h2>要素の内容と同様の方法で修正します。

ブラウザ表示とコード

See the Pen RwWdoXg by PakuPaku (@PakuPaku) on CodePen.

最後に『CSS3』と『JavaScript』アイコンへ修正します。

こちらはコードを変えるだけで、アイコンを修正出来ます。

方法については、以下の記事を参考にしてみて下さい。

ブラウザ表示とコード

See the Pen zYvboQY by PakuPaku (@PakuPaku) on CodePen.

いかがでしょうか。

HTMLのソースコードをコピーして内容を修正するだけ、でかなりの効率化を図ることが出来ます。

またアイコンについても、コードを入れ替えるだけで済んでしまいますね。

CSSでコンテンツを横並びにする方法

今回コンテンツを横並びにする為に、『FlexBox』を使っていきたいと思います。

この『FlexBox』はウェブサイトの制作では現在、主流の手法となっています。

CSSでFlexBoxを適用する

それでは早速、CSSを使ってコンテンツにFlexBoxを指定してみましょう。

『container』内の要素を横並びにする為に、CSSへ以下のコードを追加します。

CSSコード

    .conA .container{
        display: flex;
    }

ブラウザ表示とコード

See the Pen RwWdKox by PakuPaku (@PakuPaku) on CodePen.

いかがでしょうか。

簡単にコンテンツを横並びに出来たのではないでしょうか。

CSSを使ってレスポンシブ対応

ここからはレスポンシブ対応を行う方法について解説していきます。

先程指定したFlex Boxですが、これはある程度大きな画面で横並びになるように指定します。

そして、ある程度小さな画面では縦並びにする指定とします。

この場合重要となるのが、『ある程度の大きさ』の部分です。

早速この『ある程度の大きさ』を指定する場合の指定方法を解説します。

CSSコード

@media (min-width: 768px){
}

このコードにより、画面サイズ(ブラウザの横幅)が768px以上の場合にコードの内容が適用されるようになります。

ポイント

① @mediaは条件を満たすデバイスで読み込まれた場合を指定します。

② min-withで、最低の横幅を指定しています。

③ 最低の横幅が768px以上のデバイスの指定を可能としています。

④ 最低の横幅が768pxまで以外の場合はこの指定を反映しません。

横幅が768px以上の場合に指定されるコードを書き込んでいきます。

コーディングしたコードは、以下のようになります。

CSSコード

@media (min-width: 768px){
    .conA .container{
        display: flex;
    }
    .conA .text{
        flex: 1;
    }
}

横幅が768px以上の場合はFlex Boxが適用されます。

また更に、Flex Boxの大きさの比率を画面幅に対して1:1:1で表示されるように指定します。

ブラウザ表示とコード

See the Pen bGVZWRo by PakuPaku (@PakuPaku) on CodePen.

CSSを使ってコンテンツの最終調整

それでは最後の仕上げです。

CSSをでコンテンツの余白調整

ここでは、コンテンツ同時の余白を調整していきます。

画面の大きさで比率を調整しているので、marginでは調整せずにpaddingで調整していきます。

要は小さい画面の時と、大きな画面の両方のレイアウトの間隔を確保したいのです。

CSSコード

.conA .text{
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 60px;
}

ブラウザ表示とコード

See the Pen vYNPaBx by PakuPaku (@PakuPaku) on CodePen.

CSSで見出しとテキストの中央揃え

見出しとテキストは中央揃えで表示する為に、コンテンツの親要素へ中央寄せを指定します。

テキストを中央寄せする為には、text-alignプロパティでcenterを指定します。

先程、余白を調整したCSSコードへ追記します。

CSSコード

.conA .text{
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 60px;
    text-align: center;
}

ブラウザ表示とコード

See the Pen bGVZjGK by PakuPaku (@PakuPaku) on CodePen.

まとめ

いかがだったでしょうか。

無事にコンテンツの横並びとレシポンシブ対応は出来たでしょうか。

今回のように一つのコンテンツを作ってから複製することで、効率よく2つ目以降のコンテンツも作成することができます。

あとは最終的にコンテンツ同士の余白を調整することで見栄えの良いサイトを作成することができます。

いくつものパーツ(コンテンツ)を作成できるようになれば、ウェブサイトもスムーズに作れるようになることでしょう。

WEB制作カテゴリの最新記事