今回はサイトの見出しでよく目にする、アイコン付きのコンテンツの作り方について初心者向けに解説していきます。
ウェブデザインを行う上では、王道のレイアウトでは無いでしょうか。
✅HTMLのブロックと構造・・・構造化タグ／div要素／class属性
✅テキストの調整・・・・・・・フォント指定／行間指定／文字間指定／中央揃え
✅アイコンの挿入と調整・・・・・・・・・背景の調整／アイコンのサイズ調整／アイコンの位置調整
✅その他・・・・・・・・・・・コンテンツ内の中央寄せ
それでは早速、コンテンツを作っていきましょう。
HTMLでコンテンツのブロックを作る
ここでは今回作成するコンテンツの構造化タグと、その中で使用するブロックを作成します。
こうすることによりコンテンツ内の整理もでき、SEO対策的にも効果があります。
構造化タグで構造情報を指定する
構造化タグを作ることで、このコンテンツがウェブサイト内で「どの部分に当たるのか」を明確にします。
今回使用する構造化タグは、 <section>タグです。
HTMLコード
<section> </section>
class属性で<section>タグに名前を付ける
<section>タグにclass名を付けて、その他作成する<section>タグとの差別化をします。
こうすることにより、後にCSSで装飾する際に個別に指定することが可能となります。
HTMLコード
<section class="conA"> </section>
<div>要素でパーツブロックを作る
先程作成した構造化タグ内で、「どの部分に当たるのか」を<div>タグを使って明確にします。
HTMLコード
<section class="conA"> <div> </div> </section>
class属性で<div>タグに名前を付ける
<section>タグの時と同様に、class属性で<div>タグに名前を付けます。
HTMLコード
<section class="conA"> <div class="container"> </div> </section>
テキストを作る
ここではコンテンツ内に入るテキストを作っていきます。
テキストブロックの追加
テキストをそのまま入れたいところですが、まずはテキストを入れるためのブロックを作りましょう。
これは先程作った、<section>タグや<div>タグと同じ方法です。
class名は『text』としておきましょう。
HTMLコード
<section class="conA"> <div class="container"> <div class="text"> </div> </div> </section>
見出しを指定をする
それでは、見出しを作っていきます。
<h1>タグは、サイトの題名として使用します。
なので、今回は<h1>タグではなく次の階層の見出しとなる<h2>タグを使用します。
HTMLコード
<section class="conA"> <div class="container"> <div class="text"> <h2>HTML5</h2> </div> </div> </section>
文章を指定をする
次に見出しに続く文章（段落）を作成していきます。
段落には<p>タグを使用します。
HTMLコード
<section class="conA"> <div class="container"> <div class="text"> <h2>HTML5</h2> <p>テキストへのマークアップ言語です。テキストに意味を持たせウェブサイト制作の第一歩を踏み出します。</p> </div> </div> </section>
リンク先を指定をする
このコンテンツに、リンク指定をしておきます。
HTMLコード
<section class="conA"> <div class="container"> <div class="text"> <h2>HTML5</h2> <p>テキストへのマークアップ言語です。テキストに意味を持たせウェブサイト制作の第一歩を踏み出します。</p> <a href="#">MORE...</a> </div> </div> </section>
ブラウザ表示とコード
See the Pen OJyBrVW by PakuPaku (@PakuPaku) on CodePen.
CSSでテキストのデザインを指定する
ここでは先程HTMLで作成したテキストに、CSSで装飾を行なっていきます。
<h2>要素のデザインを調整する
まずは余白（margin）の調整をしましょう。
今回の場合は上側の余白（top）を0とし、下側の余白（bottom）を10pxに指定します。
CSSコード
.conA h2{
margin-top: 0;
margin-bottom: 10px;
}
次にフォントのサイズを調整します。
フォントの調整にはfont-sizeプロパティを使用します。
CSSコード
.conA h2{
margin-top: 0;
margin-bottom: 10px;
font-size: 20px;
}
ブラウザ表示とコード
See the Pen eYpPbzQ by PakuPaku (@PakuPaku) on CodePen.
<p>要素のデザインを調整する
<h2>タグと同様に余白（margin）とフォントサイズの調整を行います。
先程の様に『見出し』では無いので、少し文字は小さめに指定しておきます。
CSSコード
.conA p{
margin-top: 0;
margin-bottom: 20px;
font-size: 14px;
}
そして<h2>タグとの違いは、この<p>タグは文章（段落）であるということです。
ということは、『画面（ブラウザ）のサイズが小さくなった時には、文章が２行になる場合がある』ということです。
そういった場合にでも文章を見やすくする為に、line-heightプロパティを使って文章間の余白を調整しましょう。
CSSコード
.conA p{
margin-top: 0;
margin-bottom: 20px;
font-size: 14px;
line-height: 1.8;
}
単位を入れずに指定を行った場合は、『フォントサイズ×指定した数値』の余白が与えられます。
今回の場合は、フォントサイズの1.8倍の余白が入るということですね。
そして次に文章があまり主張しない様に、opacityプロパティを使って文字を少し透明化していきます。
CSSコード
.conA p{
margin-top: 0;
margin-bottom: 20px;
font-size: 14px;
line-height: 1.8;
opacity: 0.8;
}
ブラウザ表示とコード
See the Pen GRpYPWr by PakuPaku (@PakuPaku) on CodePen.
リンクのデザインを指定する
<a>タグのデザインをCSSで指定していきましょう。
まずはリンクの文字色を青色に装飾します。
CSSコード
.conA a{
color: #5D9AB2;
}
次に<a>タグ（リンク）の下線表示を削除します。
CSSコード
.conA a{
color: #5D9AB2;
text-decoration: none;
}
そしてカーソルを重ねた（ロールオーバー）時に、下線が表示される様に指定します。
CSSコード
.conA a:hover{
text-decoration: underline;
}
この場合は値を『underline』とすることで、ロールオーバー時に下線が引かれる指定となります。
ブラウザ表示とコード
See the Pen ZEbqVyV by PakuPaku (@PakuPaku) on CodePen.
アイコンを挿入する
アイコンを挿入するには、『FontAwesome』を使用します。
以下の記事を参考に、アイコンを挿入してみて下さい。
今回は『HTML5』と『矢印』のアイコンを使用します。
HTMLコード
<head> <script src="https://kit.fontawesome.com/685e79c8d7.js" crossorigin="anonymous"></script> </head> <body> <section class="conA"> <div class="container"> <div class="text"> <span class="fab fa-html5"></span> <h2>HTML5</h2> <p>テキストへのマークアップ言語です。テキストに意味を持たせウェブサイト制作の第一歩を踏み出します。</p> <a href="#">MORE...</a> <span class="fas fa-angle-right"></span> </div> </div> </section> </body>
ブラウザ表示とコード
See the Pen WNQaLMJ by PakuPaku (@PakuPaku) on CodePen.
CSSでアイコンのデザインを指定する
ここでは挿入したアイコンの装飾を行なっていきます。
アイコンのclass属性指定
『HTML5』と『リンク』のアイコンを差別化する為に、HTML5にclass名を指定しておきます。
この時『FontAwesome』のコードに半角スペースを入れることで、class名の指定ができます。
HTMLコード
<head> <script src="https://kit.fontawesome.com/685e79c8d7.js" crossorigin="anonymous"></script> </head> <body> <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> </body>
アイコンと見出しの間隔の調整
この時マージンの指定が表示に反映されるように、アイコンをインラインブロックにします。
そしてmarginプロパティを使って、余白（間隔）の調整を行なっていきます。
今回はアイコンと見出しの間隔を20pxと指定しておきます。
CSSコード
.conA .icon{
display: inline-block;
margin-bottom: 20px;
}
アイコンの大きさ調整
『FontAwesome』の様にコードを使ったアイコンはテキストフォントして扱うことになります。
そこでアイコンの大きさを指定する場合は、font-sizeプロパティ を使用することができます。
今回はアイコンの大きさを40pxと指定します。
CSSコード
.conA .icon{
display: inline-block;
margin-bottom: 20px;
font-size: 40px;
}
アイコンを丸型にする
今回の場合、アイコンを囲む円はフォントサイズの２倍の大きさに指定します。
そこで、アイコンを構成する<span>タグ（ボックス）の横幅と高さを2emと指定します。
emの単位を使うのはブラウザやデバイスの大きさが変わっても、アイコンの大きさの比率を変えたく無いためです。
こういった場合には、相対値を使用すると都合が良いわけです。
CSSコード
.conA .icon{
display: inline-block;
margin-bottom: 20px;
font-size: 40px;
width: 2em;
line-height: 2em;
}
それでは、先程大きさを指定したボックス（<span>タグ）を丸くしていきます。
CSSコード
.conA .icon{
display: inline-block;
margin-bottom: 20px;
font-size: 40px;
width: 2em;
line-height: 2em;
border-radius: 50%;
}
アイコンの左右中央寄せ
背景に対して、アイコンが中央になる様に調整します。
この場合もアイコンは、テキストフォントとして扱うことができます。
そこでtext-alignプロパティを使って、テキストを左右中央寄せする方法を使います。
CSSコード
.conA .icon{
display: inline-block;
margin-bottom: 20px;
font-size: 40px;
width: 2em;
line-height: 2em;
border-radius: 50%;
text-align: center;
}
アイコンの色と背景色の指定
そして背景をグレイに、アイコンを白色に指定します。
CSSコード
.conA .icon{
display: inline-block;
margin-bottom: 20px;
font-size: 40px;
width: 2em;
line-height: 2em;
border-radius: 50%;
text-align: center;
background-color: #ddd;
color: #fff;
}
ブラウザ表示とコード
See the Pen wvKYRZX by PakuPaku (@PakuPaku) on CodePen.
コンテンツ内の調整
それでは最後に、コンテンツ内の要素を中央寄せします。
今回の場合は、アイコン・見出し・文章・リンクが対象です。
この場合全ての要素を構成するclass属性である『conA』と、テキストを構成するclass属性である『text』が対象です。
CSSコード
.conA .text{
text-align: center;
}
ブラウザ表示とコード
See the Pen dyYgwxv by PakuPaku (@PakuPaku) on CodePen.
まとめ
いかがだったでしょうか。
うまくアイコンを挿入してコンテンツはできたでしょうか。
『FontAwesome』を活用することで、ウェブサイト自身は軽くなります。
また、CSSでテキストの装飾についての知識も深くなったのでは無いでしょうか。
コーディングを行う際にはブロックに目が行きがちですが、テキストの装飾も細かく実施することで、とても見易いサイトになります。
今回のスキルは、身につけておいて損はないです。
何回も復習して、身につけることをおすすめします。
また今回のように様々なパーツを作れる様になることで、ウェブ制作のスキルは格段に上がっていきます。
以下の記事を参考にして、一つでも多くのパーツを作れるようになってはいかがでしょうか。
