ファーストビュー 【初心者向け】無料教材からパターンを2つ紹介 (1/2)

サイトの一番顔になるであろうファーストビュー。

呼び方は「ファーストビュー 」とか「キービジュアル」とかいろいろ呼び方があるみたいですが、とにかくサイトを開くと最初に目に入る部分です。

いろいろなパターンがあってバリエーションに富んでいますが、サンプルとして無料教材から2つ紹介します。

基本的なパターンを理解すれば、その他の応用パターンにも適応できると思います。

人物画像をbackground-imageで配置するパターン

お馴染みの「未経験からWebデザイナーへ」の教材。

とてもレベルの高いコーディング に感じましたが、多少ググればなんとか初心者でも理解できます。

これは私も初めてのパターンでしたが、人の画像をbackground-imageで背景として配置して、position: absolute; で位置を固定するやり方です。

実際にブラウザで確認したり、コーディングデータは下記から確認ができます。

「未経験からWebデザイナーへ　中級編１」

要素の構成は下記の画像の通り。

titleAreaに、上からsubtitle/title/date/button(btn) が並んでいます。

その横の人物の画像は、imgタグではなく、background-imageで挿入されています。

構成としては、下記の形で、mvに背景色、mv__innerのbackground-imageに人物画像となっています。

２つめのパターンは次回にします。

次はslickを使ったスライドショーのパターンです。