サイトのトップページです。ご提供可能なサービスの一覧です。各サービスの料金一覧です。お問合せからサイトのアップロードまでの流れです。ご質問や見積もりの依頼はこちらのお問合せフォームよりお願いします。真夜中WEBの制作ブログです。chapter1このデモページの画像を含んだ要素にはそれぞれ以下のスタイルが設定されています。1;※上記background-imageの画像名は環境に合わせて変更してください。このようにテキストコンテンツの区切りとして使うと区切りが明確になりページ構成がわかりやすく、ユーザビリティを意識したページを制作する場合にはもってこいです。chapter2画像が含まれている要素とテキストが含まれている要素が対になって繰り返される形ですが、このままだと画像が含まれているコンテンツ部分は中身のないコンテンツとなっている(画像はbackground-imageで指定しているため)ためコーディング上あまりよろしくないので、例えば画像要素とテキスト要素をarticleで囲って一つの記事として扱い、画像要素の中にhタグで見出しをつければ画像要素が空要素でなくなり、それぞれのarticleに同じスタイルで見出しタグも付くのでセマンティックなアウトラインが描けます。chapter3あとは同じ要領でページに必要なだけのコンテンツを作成していきます。最近はコンテンツが切り替わる部分をCSSで斜めにスタイリングしたり、はたまた曲線でスタイリングしたりと他のサイトと同じにならないように様々なアイディアが盛り込まれていますね。CSS以外にもテキストコンテンツと背景色を合わせた画像を使えばさらに面白い境目が作れそうです。chapter4最後まで読んでいただきありがとうございました。mayonaka-web。