色々なサイトで見受けられる大きな画像が画面いっぱいに広がり スクロールしても写真が動かず他の部分が動くレイアウトがあります。 一般的にこういったレイアウトをヒーローヘッダーと呼ばれるそうです。 HTMLとCSSでヒーローヘッダーを簡単に記述することが出来ますので記述します。 body { background:url(任意の画像パス); /*画像を常に天地左右の中央に配置*/ background-position:center center; /*画像を繰り返し表示しない*/ background-repeat: no-repeat; /*コンテンツの高さが画像の高さより大きい時、動かないように固定*/ background-attachment: fixed; /*表示するコンテナの大きさに基づいて、背景画像の調整*/ background-size: cover; /*背景画像が読み

ユーザーがあなたのホームページにたどり着いたとき、ページを開くまでに少しだけ時間があり、あなたが何をしているのか伝え、もっとページを見てもらえるように工夫することができます。しかし多くのサイトでは、訪問ユーザーに好印象を持ってもらう機会を逃しています。 ヒーローヘッダーをどのように他の要素から目立たせるか、詳しく確認していきましょう。 ヒーローヘッダーに必要な要素とは？ ヒーローヘッダーにデザイン要素を取り入れる方法はたくさんあり、新商品を紹介したり、ブランドが何をしているのかシンプルな文で説明する必要があります。多くのヒーローヘッダーに利用されている要素は以下のとおりです。 目を引く見出しタイトル、ヘッドライン Call-To-Action　ボタン 印象的な背景イメージや動画 埋込み型の説明ビデオまたはアニメーション 特集コンテンツを紹介するカルーセル ブランディング要素 – ロゴやスロ