ホームページ制作の札幌真夜中WEBのトップページです 全国からご依頼承ります。

chapter1

このデモページの画像を含んだ要素にはそれぞれ以下のスタイルが設定されています。

height:100vh;
background-image: url('../image/example.png');
background-size: cover;
background-attachment:fixed;
background-repeat: no-repeat;
background-position: center center;
z-index: 1;

※上記background-imageの画像名は環境に合わせて変更してください。

このようにテキストコンテンツの区切りとして使うと区切りが明確になりページ構成がわかりやすく、ユーザビリティを意識したページを制作する場合にはもってこいです。

chapter2

画像が含まれている要素とテキストが含まれている要素が対になって繰り返される形ですが、このままだと画像が含まれているコンテンツ部分は中身のないコンテンツとなっている(画像はbackground-imageで指定しているため)ためコーディング上あまりよろしくないので、例えば画像要素とテキスト要素をarticleで囲って一つの記事として扱い、画像要素の中にhタグで見出しをつければ画像要素が空要素でなくなり、それぞれのarticleに同じスタイルで見出しタグも付くのでセマンティックなアウトラインが描けます。

chapter3

あとは同じ要領でページに必要なだけのコンテンツを作成していきます。
最近はコンテンツが切り替わる部分をCSSで斜めにスタイリングしたり、はたまた曲線でスタイリングしたりと他のサイトと同じにならないように様々なアイディアが盛り込まれていますね。
CSS以外にもテキストコンテンツと背景色を合わせた画像を使えばさらに面白い境目が作れそうです。

chapter4

最後まで読んでいただきありがとうございました。