ヒーローイメージとは、ウェブサイトのヘッダー部分に表示される画像を示します。
すなわち、サイト訪問者が一番最初に目にするデザインとなります。
この様にヒーローイメージは、ウェブサイトの印象を決める大切なパーツとなります。
今回はそんなヒーローイメージの作り方を、初心者向けに解説していきます。
✅HTMLのブロックと構造・・・構造化タグ／div要素／class属性
✅テキストの調整・・・・・・・フォント指定／行間指定／文字間指定／中央揃
✅画像の調整・・・・・・・・・画像の背景化／画像サイズ調整／画像位置調整
✅その他・・・・・・・・・・・FlexBox
ブロックを作る
構造化タグで構造情報を指定する
まずは構造化タグを使って、ブロックを作りましょう。
今回はheader部分にヒーローイメージを作りたいと思っていますので、<header>要素を使用します。
HTMLコーディング例
<header> </header>
<div>要素でパーツのブロックを作る
更に後々、ヘッダー部分にはナビゲーションバーなどのパーツを設置するかも知れません。
なので、ヒーローイメージ用のブロックも<div>要素を使ってここで準備しておくとにしましょう。
HTMLコーディング例
<header> <div> </div> </header>
class属性でブロックの名前を付ける
そして<div>要素で作ったブロックにはclass名を使用して、パーツの名前を付けておきましょう。
今回は『headerimg』とでも命名しておきましょう。
HTMLコーディング例
<header> <div class="headerimg"> </div> </header>
それではここまでのコードとブラウザの表示が、どの様になっているか確認しておきましょう。
See the Pen XWmzjdy by PakuPaku (@PakuPaku) on CodePen.
ブラウザ上には何も表示はされませんが、目には見えないブロックが２つ存在していることになっています。
テキストを作る
これから、ヒーローイメージの画像に重ねる為のテキストを作成していきます。
今回はHTMLを使用して『PakuPakuBlog』を見出し、『ウェブデザイン情報のブログ』をキャッチコピーとして指定します。
そしてコーディングしたテキストを、これからCSSを使用して装飾していきましょう。
見出し指定をする
<h1>要素を使用して、ウェブサイトの題名（見出し）となるテキストを作成します。
HTMLコーディング例
<header> <div class="headerimg"> <h1>PakuPakuBlog</h1> </div> </header>
キャッチコピーを指定する
<p>要素を使用して、ウェブサイトのキャッチコピー（段落）となるテキストを作成します。
HTMLコーディング例
<header> <div class="headerimg"> <h1>PakuPakuBlog</h1> <p>ウェブデザイン情報のブログ</p> </div> </header>
それではここまでのコードとブラウザの表示が、どの様になっているか確認しておきましょう。
See the Pen vYNWgmb by PakuPaku (@PakuPaku) on CodePen.
フォントを指定する
ここからはCSSを使って先程作ったテキスト（見出しと段落）の装飾をしていきましょう。
まずは、font-familyプロパティを使ってフォントを変えていきます。
また今回はページ内テキストを全て同じフォントで統一したいと考えているので、セレクタは『body』とします。
See the Pen PoPOWEo by PakuPaku (@PakuPaku) on CodePen.
行間の指定をする
今回は行間の指定にmargin（余白）の調整をすることとします。
<h1>の下側に10pxの余白を指定し、その他の上下余白は0pxと指定して無駄な余白は省いておきます。
See the Pen xxwPgmy by PakuPaku (@PakuPaku) on CodePen.
テキストの中央揃え
テキストを中央揃えする為には、text-alignプロパティを使用します。
中央寄せなので、値には『center』を使用します。
また、ヒーローイメージ内のテキストを中央寄せしたいので、セレクタは『.headerimg』となります。
See the Pen yLYPMYv by PakuPaku (@PakuPaku) on CodePen.
ブラウザの幅に合わせてフォントサイズを変える
フォントサイズを変える為には、font-sizeプロパティを使用します。
次にスマホなどで開いた場合に、ディスプレイサイズが320pxまで小さくなることを想定します。
そこでテキストサイズが、このディスプレイサイズに合わせて変化する様にCSSで指定していきます。
この様な場合はpxの様な絶対値の単位ではなく、相対値の単位を使用します。
今回はviewportという単位を使用します。
<h1>要素のフォントサイズを、画面の横幅320pxの時に24px相当へ指定したいと思っています。
この場合に、使用する単位は『vw』となります。
『vw』は、画面の横幅を100vwとする単位です。
逆に1vwは、画面の横幅の100分の1の大きさとなります。
では画面の幅が320pxの時は何vwかというと、1vw=3.2pxとなります。
今回使用するフォントサイズ24pxは何vwに相当するかというと、24px÷3.2px=7.5vwとなります。
See the Pen xxwPqLo by PakuPaku (@PakuPaku) on CodePen.
キャッチコピーに関しては、18pxで指定しています。
ブラウザの幅に合わせて文字間を調整する
文字間の幅調整を行う時は、letter-spacingプロパティを使用します。
このプロパティは、文字の左側にスペースを空ける為のプロパティです。
そしてこちらも、フォントサイズ同様に画面サイズに合わせて変化する様に指定します。
今回は相対単位の『em』を使用することにしましょう。
もう一つポイントがあります。
右側にスペースを空けていくと、最後の文字にもスペースが空いてしまいます。
こうなると、せっかく中央揃えしたテキストも0.2emズレてしまうことになります。
そこでテキスト先頭にmargin-leftプロパティを使用して、0.2emの余白を与え調整します。
See the Pen NWGwgGW by PakuPaku (@PakuPaku) on CodePen.
画像の設定
ここでは作ったブロックの背景に画像を指定します。
そして背景となった画像の調整を行います。
背景に画像を指定する
ブロックの背景に画像を指定する場合には、background-imageプロパティを使用します。
今回はheaderimgの背景に画像を指定したいので、セレクタは『headerimg』となります。
See the Pen JjYOJWv by PakuPaku (@PakuPaku) on CodePen.
画像の調整
ここでは、背景画像の大きさ（サイズ）と位置調整（ポジション）を行なっていきます。
まずは画像のサイズを指定しましょう。
画像のサイズを指定するには、background-sizeプロパティを使用します。
画面の大きさに合わせて、背景の大きさも変わる様に指定したいと思っています。
この場合は、値に『cover』を指定します。
そして次に画像の位置です。
画像の位置調整にはbackground-positionプロパティを使用します。
今回は中央に画像がくるように指定します。
そこで値には、『center』を使用します。
See the Pen OJyOjxm by PakuPaku (@PakuPaku) on CodePen.
✅ブラウザ画面の横幅いっぱいに画像を表示する為にmarginを0に指定
✅ブラウザ画面の縦幅いっぱいに画像を表示する為にheightを100vwに指定
最低限の高さを確保する
今回のヒーローイメージでは、最低の高さを450pxまでにしたいと考えています。
要は高さ450pxまでしか、イメージが縮小しない指定をしたいということです。
この場合に使うプロパティはmin-heightです。
See the Pen LYpOXrg by PakuPaku (@PakuPaku) on CodePen.
テキストを背景の中央に配置する
今度は<h1>要素と<p>要素を共に、背景の上下左右に対して中央に調整します。
この場合<h1>要素と<p>要素を一つのブロックに指定し、そのブロックを中央に調整する方法を使います。
まずはHTMLの<div>要素を使って、<h1>要素と<p>要素を一つのブロックに指定します。
そしてそのブロックにはclass名を今回は『header-content』と指定します。
HTMLコーディング例
<header> <div class="headerimg"> <div class="header-content"> <h1>PakuPakuBlog</h1> <p>ウェブデザイン情報のブログ</p> </div> </div> </header>
次に今回はCSSでFlexBoxを使用します。
FlexBoxは指定した要素がflexコンテナとなり、その子要素となるflexアイテムを自由にレイアウトできるプロパティです。
まずは親となる要素、『headerimg』へ『display: flex;』とコーディングします。
そして垂直方向を中央になるように『align-items: center;』と指定します。
次に水平方向が中央になるように『 justify-content: center;』と指定します。
See the Pen mdeqaMP by PakuPaku (@PakuPaku) on CodePen.
テキストを白色にする
背景に対して文字が黒いと見づらいので、今回は文字の色を白に指定しましょう。
ヒーローイメージの中の文字は全て白色にしたいので、セレクタは『.headerimg』へ指定します。
そして文字の色を変える為にcolorプロパティを使用します。
色の値には『#ffffff』を使用します。
See the Pen qBOVLwd by PakuPaku (@PakuPaku) on CodePen.
まとめ
いかがだったでしょうか。
ヒーローイメージと言っても、様々な要素やプロパティを駆使して作成していることがよく分かります。
今回のようにパーツを一つづつ作れるようになると、コーディング技術の幅が広がるのではないでしょうか。
一つでもパーツを多く作れる様になる為にも、以下の記事も参考にしてはいかがでしょうか。
