30days

メインビジュアル 【デイトラ解説】

こんにちは、Web制作フリーランスで活動しているヒロ(@hirokiweblax)です。

毎日1セクションのデイトラ解説です。
本日はメインビジュアルをやっていこうと思います!

本日のポイント

・backgroundの使い方
・position:absolute/fixedの使い方
・ボタンの作り方

ピクセルパーフェクト、レスポンシブは行ってないので、コーディング時の参考ぐらいに思ってくれれば幸いです。
ご質問があれば答えますのでDMでお問い合わせください。@hirokiweblax

完成形の確認

完成形

HTML

<div id="mv">
  <div class="title">
    <h2>一番伝えたい事を書く</h2>
    <p>リードリードリード</p>
  </div> 
  <div class="btn"><a href="#">お問い合わせ</a></div>
</div>

 

CSS

#mv {
  background-image: url(img/main.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 700px;
  position: relative;
}

#mv .title {
  position: absolute;
  top: 259px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
}

#mv h2 {
  font-size: 68px;
  font-weight: bold;
}

#mv p {
  font-size: 38px;
  font-weight: bold;
  margin-top: 42px;
}

#mv .btn a {
  position: absolute;
  top: 479px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  color: white;
  font-size: 38px;
  font-weight: bold;
  padding: 28px 81px;
  background-color: #3F51B5;
  border-radius: 12px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

背景画像の指定

メインビジュアルのセクション全体に背景画像をつけます。

以下のコードの部分です。

#mv{
  background-image:url(img/main.png);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

 

パスの指定は以下のリンクを確認しましょう!
デイトラ1stで学んでいると思うので知っている前提で進めます。

ここからがメインビジュアル作成のポイントとなります。

background-size:cover;を指定してください。
この値を指定することで画面幅いっぱいに画像が広げることができます。

このままだと画像の左上が固定されて表示されるので、
画面幅を小さくした時に右側が見切れてしまいます

画像の中心を常に表示されるように
background-position:center center;を書きましょう。

background-repeat:no-repeat;はcoverの時はあまり関係ありませんが、つけときましょう。

殆どのメインビジュアルはこの方法で作るので確実に覚えてください!

#mv{
  background-image:url(img/main.png);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

 

そしてもう一つメインビジュアルで使う方法があります。
これはpaddingで比率を保って常に画像全体を表示させますが、高さが変化してしまうので注意してください。

以下のリンクで作り方を確認しておきましょう。

主なメインビジュアルの作り方は上記の2つになります。

使い分けのポイントとしては
画像は見切れるけど高さを変化させない
→ 今回の方法
画像全体を常に表示で高さが変化する
→ リンク先のpaddingを使う方法

文字の場所を指定する

文字の場所を指定するためにはposition:absolute;を使います。
こちらもProgeteで学んでいると思うので簡単に説明します。

#mv {
  position: relative;
}

#mv .title {
  position: absolute;
  top: 259px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
}

 

.titleというクラスをつけたブロックでテキストを囲っているので、
このブロックをabsoluteで場所の指定をします。

#mvにはposition:relative;をつけましょう。

topの値はヘッダーの下にメインビジュアルが被っているので
ヘッダーの一番上から値を測ってください。(あとで解説します)

そして左右中央揃えにするために、以下を指定しましょう。

#mv .title{
  left: 50%;
  transform: translateX(-50%);
  text-align:center;
}

 

ポジションの解説は以下のリンクから

ボタンの作り方

ボタンを作るポイントとしては以下の三点かと思います。

aタグに
inline-blockを指定
paddingをつける
hover時に透過させる

#mv .btn a {
  display: inline-block;
  color: white;
  font-size: 38px;
  font-weight: bold;
  padding: 28px 81px;
  background-color: #3F51B5;
  border-radius: 12px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

 

基本的な作り方は以上なので、あとは表現を増やすだけかと思います。

ヘッダー固定

最後にヘッダーを固定するという指定があったので固定してあげます。

headerにposition:fixedをつけてください。
同じようにコーディングしてきた人は以下のようにレイアウトが崩れるかもしれません、、、

headerに2つプロパティを加えていただければ修正されると思います。

header {
  width: 100%;
  z-index: 100;
}

メインビジュアルとヘッダーが被る理由は理解しておく必要があるので解説します。

display:fixed;をつけると、他の要素から浮いて干渉されなくなります
メインビジュアルが上に詰まり、ヘッダーのレイヤーが下になってしまったので画像のようになりました。
z-indexを指定してすることで、ヘッダーのレイヤーを前面で表示させるようにしましょう!

メインビジュアルの画像は半透明のようですね。

よくある間違いですが、positionを指定しないとz-indexは使えません。使いたいときはposition:relative;でも指定しといてあげましょう。

これで完成です!

まとめ

メインビジュアルは背景画像の指定の仕方を覚えればOKです。
今回出てきた2つの方法は覚えておきましょう。

本日のポイント

・backgroundの使い方
・position:absolute/fixedの使い方
・ボタンの作り方

補足

Codepen

See the Pen
GapoNV
by hiro (@hirog)
on CodePen.

See the Pen
GapoNV
by hiro (@hirog)
on CodePen.

・ショートハンド集(backgroundのショートハンドがあります)
https://webliker.info/css-short-hand/