実践!HTMLとCSS!コンテンツ作成の効率化と左右逆レイアウト

実践!HTMLとCSS!コンテンツ作成の効率化と左右逆レイアウト

今回は以前作成したコンテンツである左に画像、右にテキストに配置したレイアウトを簡単に右に画像、左にテキストとレイアウトを変えていく方法を初心者向けに解説していきます。

この方法は一度作成したコンテンツの内容とレイアウトを変えるだけという簡単な方法ですが、サイトの見栄え(統一感)を崩すことなく作成できるので、非常に使用頻度の高い方法と言えます。

期待できるスキルアップ

✅コンテンツ作成の効率化

✅レシポンシブ対応とブロックの逆並び指定方法

✅コンテンツ幅統一化によるウェブサイトのデザイン統一化

また今回解説する方法は、以前作ったコンテンツを元に解説しています。

なので、以前作成した以下のコンテンツを準備しておいて下さい。

それでは新たなコンテンツを作成していきましょう。

Advertisement

コンテンツブロックを作成する

ここでは実際にブロックを作成するのですが、以前作成したコンテンツをコピーして再利用することにより効率化を図ります。

それでは早速、以前作成したコンテンツのコードをコピーして複製しましょう。

このコピーしたコンテンツは、ブラウザで確認すると2つ並んで表示されます。

そしてこのHTMLとCSSのソースコードを修正していくことで、新たなコンテンツが一つ出来上がっていくのです。

効率化につながりますよね。

それでは、この複製したHTMLのソースコードを修正していきましょう。

まずは<selection>タグのクラス名を『conB』から『conC』に変えます。

HTMLコード

<section class="conC">
<div class="container">
<div class="photo"></div>
<div class="text">
<h2>コーディングなら『ぱくぱく』におまかせ</h2>
<p>HTMLやCSSの初心者の方なら、まずは『ぱくぱくブログ』で勉強できます。何から始めれば良いのか分からない方も『ぱくぱくブログ』は安心の無料配信です。</p>
<a href="#">ぱくぱくブログを詳しく見る
<span class="fas fa-angle-right"></span>
</a>
</div>
</div>
</section>

ここでクラス名を変えたことにより、元々指定してあったCSSが解除されることになります。

再度CSSで装飾指定を行う方法は、後の『コンテンツCのデザインを指定する』で解説します。

CSSの指定はCSSを修正する時に行うとして、今はとりあえずコンテンツの<h2>タグと<p>タグ、<a>タグの内容を修正します。

HTMLコード

<section class="conC">
<div class="container">
<div class="photo"></div>
<div class="text">
<h2>実践的なコーディングで技術を深める</h2>
<p>基礎を学んだら実践的なコーディング技術を身に付けることで、WEBデザイナーとしての一歩を踏み出しましょう。基礎では見えなかった細かな調整が見えてきます。</p>
<a href="#">実践的な技術はこちら
<span class="fas fa-angle-right"></span>
</a>
</div>
</div>
</section>

CSSを使ってコンテンツCのデザインを指定する

CSSを複製する

次にHTMLのソースコードを変えたことによって、対応しなくなったCSSを『conC』に対応する様に修正しましょう。

こちらでも、HTML同様にCSSをコピーして再利用します。

CSSコード

.conB.h2{
    margin-top: 0px;
    margin-bottom: 10px;
    font-size: 20px;
}
.conB p{
    margin-top: 0px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.8;
}
.conB a{
    display: inline-block;
    padding: 10px 30px;
    border: solid 3px;
    background-color: #bf6a7a;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}
.conB a:hover{
    background-image: linear-gradient(
        rgba(225,225,225,0.2),
        rgba(225,225,225,0.2)
    );
}
.conB{
    background-color: #5d9ab2;
    color: #fff;
}
.conB .photo{
    min-height: 200px;
    background-image: url(img/pc.jpeg);
    background-position: center;
    background-size: cover;
}
@media(min-width: 768px){
    .conB .container{
        display: flex;
    }
    .conB .photo{
        flex: 3;
    }
    .conB .text{
        flex: 2;
        padding: 50px;
    }
}
.conB .text{
    padding: 20px;
}

CSSのセレクタを修正する

そして複製したCSSのセレクタを『conB』を『conC』に変えます。

CSSコード

.conC.h2{
    margin-top: 0px;
    margin-bottom: 10px;
    font-size: 20px;
}
.conC p{
    margin-top: 0px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.8;
}
.conC a{
    display: inline-block;
    padding: 10px 30px;
    border: solid 3px;
    background-color: #bf6a7a;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}
.conC a:hover{
    background-image: linear-gradient(
        rgba(225,225,225,0.2),
        rgba(225,225,225,0.2)
    );
}
.conC{
    background-color: #5d9ab2;
    color: #fff;
}
.conC .photo{
    min-height: 200px;
    background-image: url(img/pc.jpeg);
    background-position: center;
    background-size: cover;
}
@media(min-width: 768px){
    .conC .container{
        display: flex;
    }
    .conC .photo{
        flex: 3;
    }
    .conC .text{
        flex: 2;
        padding: 50px;
    }
}
.conC .text{
    padding: 20px;
}

これで新しく作ったコンテンツにも、CSSが適用されましたね。

新たなコンテンツ用にCSSを修正する

ここからは新たなコンテンツを装飾する為に、CSSを修正していきましょう。

背景色と文字の色の設定

コンテンツCでは背景色を白、文字の色を黒で指定したいと思います。

そこで以下のコードの行を削除し、デフォルトの値に戻します。

削除するCSSコード

.conC{
    background-color: #5d9ab2;
    color: #fff;
}

画像の設定

今回は新たに背景画像を準備します。

背景画像のファイル名は『study.jpg』

そしてこの画像ファイルは以前使用していたimgフォルダへ保管します。

CSSコード

.conC.h2{
    margin-top: 0px;
    margin-bottom: 10px;
    font-size: 20px;
}
.conC p{
    margin-top: 0px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.8;
}
.conC a{
    display: inline-block;
    padding: 10px 30px;
    border: solid 3px;
    background-color: #bf6a7a;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}
.conC a:hover{
    background-image: linear-gradient(
        rgba(225,225,225,0.2),
        rgba(225,225,225,0.2)
    );
}
.conC .photo{
    min-height: 200px;
    background-image: url(img/study.jpg);
    background-position: center;
    background-size: cover;
}
@media(min-width: 768px){
    .conC .container{
        display: flex;
    }
    .conC .photo{
        flex: 3;
    }
    .conC .text{
        flex: 2;
        padding: 50px;
    }
}
.conC .text{
    padding: 20px;
}

ボタンの見た目の大きさを揃える

<a>タグで作成したボタンの枠線は白色の為、背景色で隠れてします。

このままでは、以前作成したコンテンツのボタンより小さく見えてしまいます。

そこで今回は、この枠線にbox-shadowプロパティを使って影を付けることで枠線の存在を表現します。

CSSコード

.conC.h2{
    margin-top: 0px;
    margin-bottom: 10px;
    font-size: 20px;
}
.conC p{
    margin-top: 0px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.8;
}
.conC a{
    display: inline-block;
    padding: 10px 30px;
    border: solid 3px;
    background-color: #bf6a7a;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 0 0 1px #888;
}
.conC a:hover{
    background-image: linear-gradient(
        rgba(225,225,225,0.2),
        rgba(225,225,225,0.2)
    );
}
.conC .photo{
    min-height: 200px;
    background-image: url(img/study.jpg);
    background-position: center;
    background-size: cover;
}
@media(min-width: 768px){
    .conC .container{
        display: flex;
    }
    .conC .photo{
        flex: 3;
    }
    .conC .text{
        flex: 2;
        padding: 50px;
    }
}
.conC .text{
    padding: 20px;
}

上下に余白を挿入する

今の状態だと直近のコンテンツと隙間なく隣り合っている為、ここに余白を入れていきます。

今回のコンテンツはレスポンシブ対応なので、大小それぞれの画面の大きさで指定しておくことが必要です。

ブラウザが768px以上の時は上下に40pxを、768px以下の時は2pxの余白を指定します。

CSSコード

.conC.h2{
    margin-top: 0px;
    margin-bottom: 10px;
    font-size: 20px;
}
.conC p{
    margin-top: 0px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.8;
}
.conC a{
    display: inline-block;
    padding: 10px 30px;
    border: solid 3px;
    background-color: #bf6a7a;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 0 0 1px #888;
}
.conC a:hover{
    background-image: linear-gradient(
        rgba(225,225,225,0.2),
        rgba(225,225,225,0.2)
    );
}
.conC .photo{
    min-height: 200px;
    background-image: url(img/study.jpg);
    background-position: center;
    background-size: cover;
}
@media(min-width: 768px){
    .conC .container{
        display: flex;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .conC .photo{
        flex: 3;
    }
    .conC .text{
        flex: 2;
        padding: 50px;
    }
}
.conC .container{
    padding-top: 2px;
}
.conC .text{
    padding: 20px;
}

画像の横幅を固定して並び順を変更する

ここでは大きな画面で横に並べた画像を固定して、テキストの横幅のみが変化する様に指定します。

更に画像を右に、テキストを左にレイアウトしていきます。

画像の横幅を固定してテキストと並べる

画像の横幅を固定して、テキストの横幅のみが変化する様に指定していきます。

そこで、今回は<div class=“photo”>のflexを『0 0 400px』と修正します。

また、<div class=“text”>のflexは『1』のままにしてあるので、400pxを取り除いた範囲で横幅を変化させながら表示されます。

CSSコード

.conC.h2{
    margin-top: 0px;
    margin-bottom: 10px;
    font-size: 20px;
}
.conC p{
    margin-top: 0px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.8;
}
.conC a{
    display: inline-block;
    padding: 10px 30px;
    border: solid 3px;
    background-color: #bf6a7a;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 0 0 1px #888;
}
.conC a:hover{
    background-image: linear-gradient(
        rgba(225,225,225,0.2),
        rgba(225,225,225,0.2)
    );
}
.conC .photo{
    min-height: 200px;
    background-image: url(img/study.jpg);
    background-position: center;
    background-size: cover;
}
@media(min-width: 768px){
    .conC .container{
        display: flex;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .conC .photo{
        flex: 0 0 400px;
    }
    .conC .text{
        flex: 2;
        padding: 50px;
    }
}
.conC .container{
    padding-top: 2px;
}
.conC .text{
    padding: 20px;
}

画像とテキストの並び順を逆にする

親要素のコンテナボックス<div class=“container”>に、flex-directionプロパティで値を『row-reverse』で指定します。

 これで、画像とテキストを逆にレイアウトすることができます。

CSSコード

.conC.h2{
    margin-top: 0px;
    margin-bottom: 10px;
    font-size: 20px;
}
.conC p{
    margin-top: 0px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.8;
}
.conC a{
    display: inline-block;
    padding: 10px 30px;
    border: solid 3px;
    background-color: #bf6a7a;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 0 0 1px #888;
}
.conC a:hover{
    background-image: linear-gradient(
        rgba(225,225,225,0.2),
        rgba(225,225,225,0.2)
    );
}
.conC .photo{
    min-height: 200px;
    background-image: url(img/study.jpg);
    background-position: center;
    background-size: cover;
}
@media(min-width: 768px){
    .conC .container{
        display: flex;
        flex-direction: row-reverse;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .conC .photo{
        flex: 0 0 400px;
    }
    .conC .text{
        flex: 2;
        padding: 50px;
    }
}
.conC .container{
    padding-top: 2px;
}
.conC .text{
    padding: 20px;
}

コンテンツの横幅を調整する

横に並べた画像とテキストは、デフォルトの状態では横幅いっぱいに表示されてしまいます。

そこでまずは、max-widthプロパティで横幅の最大値を1000pxで指定します。

更に margin-leftとmargin-rightの値を『auto』と指定して左右に同じ大きさの余白が入る様に調整します。

CSSコード

.conC.h2{
    margin-top: 0px;
    margin-bottom: 10px;
    font-size: 20px;
}
.conC p{
    margin-top: 0px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.8;
}
.conC a{
    display: inline-block;
    padding: 10px 30px;
    border: solid 3px;
    background-color: #bf6a7a;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 0 0 1px #888;
}
.conC a:hover{
    background-image: linear-gradient(
        rgba(225,225,225,0.2),
        rgba(225,225,225,0.2)
    );
}
.conC .photo{
    min-height: 200px;
    background-image: url(img/study.jpg);
    background-position: center;
    background-size: cover;
}
@media(min-width: 768px){
    .conC .container{
        display: flex;
        flex-direction: row-reverse;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .conC .photo{
        flex: 0 0 400px;
    }
    .conC .text{
        flex: 2;
        padding: 50px;
    }
}
.conC .container{
    padding-top: 2px;
}
.conC .text{
    padding: 20px;
}

この時その他のコンテンツも同じ方法(プロパティと値)で横幅を揃えることで、サイト全体に統一感を持たせることができます。

まとめ

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

うまくコンテンツは作成できたでしょうか。

今回のHTMLとCSSのコードと完成した内容は以下の様になっていますか?

ブラウザ表示とコード

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

今回は既に作っているコンテンツのコードをコピーして使うことで、サイト制作の効率をグンと上げる方法を解説しました。

この様にコンテンツを作成する前に、『再利用できるコードがあればそのまま使える』ということを意識すれば時短にもつながるのではないでしょうか。

どんどんコンテンツやパーツを作って、コーディングに慣れていきましょう。

実践!関連記事

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