案件受注へ向け最後の詰めに、新たなLP(ランディングページ)の模写を始めました。
そのLPがこちら↓
これは「ランディングページ集めました」というサイトから選びました。
（このサイトはSSL化されていないみたいなのでリンクは貼りませんが。）
なぜこのLPにしたかというと、jQueryでの動きもほどほどにあり簡単すぎず難しすぎないと思ったからです。
さて、このLPのメインビジュアル(背景画像)は、横幅に合わせて高さ(height)が変わるんですよね↓
(画像は適当に変えてあります)
これ意外と難しいんです。
heightの可変としてよくあるのは、横幅が変わると中身のテキストが改行されてheightも自然に伸び縮みするというものですが、
今回は中身がロゴとボタンしかない。
それなのに横幅に合わせてheightも伸び縮みします。
height:○○%やheight:autoとやってもうまくいきません↓
かといってheight:○○pxとやっても高さが固定されてしまいます。
ではどうやるかというと、
私はこのようにやりました↓
解説していきます。
heighをレスポンシブ(高さ可変)にする方法「paddingハック」。
heightをレスポンシブ(高さ可変)にするには、「paddingハック」というテクニックを使います。
先ほどのコードでいうと、
headerにpadding-top:70%を指定することで、その部分は常に親要素の横幅の70%の割合で高さが伸び縮みします。
これは、「上下左右どのpaddingに%を指定しても、親要素の横幅に対して割合が決まる」という特性を利用したものです。
padding部分には背景画像も反映されるため、これで横幅に合わせて縦も70%で伸び縮みする背景画像の出来上がりです。
(background-size:coverを指定してあります。)
ただし、padding-topなのでもちろんロゴとボタンは下の方に押しやられてしまってます。
だから、ロゴとボタンはposition:absoluteで配置します↓
これで、横幅に合わせて高さも伸び縮みするメインビジュアルの完成です。
※Bootstrapを使えばもしかしたらもっと簡単に出来るかもしれません。
ロゴの横幅も可変にしたい時。
position:absoluteした要素も、width:○○%とすると親要素の○○%の幅になるので、
ロゴ画像(img)が入ってるh1にwidth:20%を指定すると、親要素であるheaderの20%で伸び縮みします↓
ただし、そのままではロゴ画像(img)は伸び縮みせずh1からはみ出すだけなので↓
imgにmax-width:100%と指定すると、親要素であるh1に合わせて画像も伸び縮みします。
max-widthとしたのは、画像本来の横幅よりは大きくならない為です。
今回は以上です。
※paddingハックはこちらの本（367ページ）に書いてありました↓
テックアカデミーが初心者向け副業コースを始めました↓
コメント