HPのファーストインプレッションを高めるためには、Webデザインの向上が欠かせません。とはいえ、HTMLとCSSの知識がなければ、なかなかHPをカスタマイズするのも難しいかもしれません。
今回は、最小限のCSSコードを使用して既存のHPのデザインをグッと向上させるコードをご提供＆解説していきます。
最終的に作りたいデザイン
今回作りたいデザインはこちら。よくあるボックス形式のデザインです。情報をカテゴリーごとに上手くまとめて配置することで、ユーザービリティ及びデザイン性がグッと向上します。
ポイントとしては、イメージ画像＋タイトル＋簡易説明＋タグ を付けることで、より伝わりやすく・見やすいデザインになっていることです。
なるべく分かりやすいように、ステップごとに解説を進めますが、面倒な人は、ページの最後にある【コピペ用】からコピー＆ペーストして使用してください。
Step１ グリッドを作る
まずは、大枠のグリッド（マス目）を作る必要があります。cssの「sample-plan-container」は、グリッドを作るクラス名です。
グリッドは、divタグなどを利用して「開始」と「終了」の間に別のHTMLタグを挟む必要があります。 下記の例では、すべてdivタグを利用して作っていますが、間に挟むタグは他にもあります。
<div class="sample-plan-container">/*開始*/
<div class="tags quick"><!---1--->
/*ここに何かのテキスト*/
</div>
<div class="tags savings"><!---2--->
/*ここに何かのテキスト*/
</div>
<div class="tags flexible"><!---3--->
/*ここに何かのテキスト*/
</div>
</div>/*終了*/例えば、以下のような例です。
<div class="sample-plan-container">/*Start*/
<a href="#" class="tags quick"><!---1--->
</a>
<a href="#" class="tags savings"><!---2--->
</a>
<a href="#" class="tags flexible"><!---3--->
</a>
</div>/*End*/上記の例では、cssクラス「sample-plan-container」の間に、aタグを挟んでいます。aタグを挟むことで、HP上ではリンクとして認識されるため、どこか別のページに遷移させることができます。
デザインによっては、非常に有効な手段です。
Step２テキストを追加する
次は、中身のテキストを追加していきます。下記の例では、ボックス内の「ヘッダー画像」と「見出し / サブ見出し」、「簡単な説明テキスト」を追加した例です。
<div class="sample-plan-container">
<div class="tags quick"><!---1--->
<img class="plan-img" src="--" alt="ヘッダー画像1" width="370" height="190">
<ul>
<li><h4>Point 1</h4></li>/*見出し*/
<li>Point1の簡易説明<p>○○○○○○○○○○○○</p></li>/*サブ見出し*/
<li>こちらのプランは○○○○するだけなのでシングルの方に最適です。</li>
</ul>
</div>
<div class="tags savings"><!---2--->
<img class="plan-img" src="--" alt="ヘッダー画像2" width="370" height="190">
<ul>
<li><h4>Point 2</h4></li>/*見出し*/
<li>Point2の簡易説明<p>○○○○○○○○○○○○</p></li>/*サブ見出し*/
<li>こちらのプランは○○○○するだけなのでシングルの方に最適です。。</li>
</ul>
</div>
<div class="tags flexible"><!---3--->
<img class="plan-img" src="--" alt="ヘッダー画像3" width="370" height="190">
<ul>
<li><h4>Point 3</h4></li>/*見出し*/
<li>Point3の簡易説明<p>○○○○○○○○○○○○</p></li>/*サブ見出し*/
<li>こちらのプランは○○○○するだけなのでシングルの方に最適です。。</li>
</ul>
</div>
</div>あとは中身を適宜、変更して使用してください。
【コピペ用】- HTMLコード
<div class="sample-plan-container">
<div class="tags quick"><!---1--->
<img class="plan-img" src="" alt="Point1" width="370" height="190">
<ul class="inner-data">
<li class="shead"><h4>Point 1</h4></li>
<li class="sub">Point1の簡易説明<p>○○○○○○○○○○○○</p></li>
<li>こちらのプランは○○○○するだけなのでシングルの方に最適です。</li>
</ul>
</div>
<div class="tags savings"><!---2--->
<img class="plan-img" src="" alt="Point2" width="370" height="190">
<ul class="inner-data">
<li class="shead"><h4>Point 2</h4></li>
<li class="sub">Point2の簡易説明<p>○○○○○○○○○○○○</p></li>
<li>こちらのプランは○○○○するだけなのでシングルの方に最適です。。</li>
</ul>
</div>
<div class="tags flexible"><!---3--->
<img class="plan-img" src="" alt="Point3" width="370" height="190">
<ul class="inner-data">
<li class="shead"><h4>Point 3</h4></li>
<li class="sub">Point3の簡易説明<p>○○○○○○○○○○○○</p></li>
<li>こちらのプランは○○○○するだけなのでシングルの方に最適です。。</li>
</ul>
</div>
</div>
【コピペ用】- CSSコード
/*グリッドの大枠*/
.sample-plan-container{
display: grid; /*グリッド*/
grid-template-columns: repeat(3 , 1fr); /*3列可変*/
grid-template-rows: 500px;/*縦の長さ500px*/
grid-column-gap: 30px;/*横幅の空白*/
grid-row-gap: 0;/*縦幅の空白*/
}
.sample-plan-container>div{
position: relative;
background: #F8F8F8;
}
/*見出し・サブ見出し*/
.inner-data{
padding: 20px 15px;/*テキスト部分の余白*/
color: #0E2754;
}
.inner-data>li.shead>h4{
color: #9E0000;
}
.inner-data>li.sub{
font-size: clamp(1.6rem, 2vw + .3rem, 2rem);/*テキスト可変*/
font-weight: bold;
}
.inner-data>li.shead,
.top_sec1-plan-inner-data>li.sub{
text-align: center;/*中央*/
}
.inner-data>li.shead{
display: block;
width: 80%;/*見出し・サブ見出しの横幅*/
border-bottom: solid 1px black;/*見出しの下線*/
padding-bottom: 10px;
margin: 0 auto;
margin-bottom: 10px;
}
.inner-data>li.sub{
margin-bottom: 10px;
}
/*タグ*/
.tags:before{
font-size: clamp(1rem, 2vw + .3rem, 1.6rem);/*テキスト可変*/
font-weight: bold;
display: inline-block;
padding: 0 20px;
position: absolute;
top: 0;
left: 0;
height: 35px;
background: rgba(252,196,61,.7);
color: #0E2754;
line-height: 35px;
text-align: center;
}
/*タグ-テキスト*/
.quick:before{
content: "即日対応";
}
.savings:before{
content: "節約引越し";
}
.flexible:before{
content: "柔軟な対応";
}