【デモ】flexboxレスポンシブデザイン＆サンプル
レスポンシブで横並びに
このページはあくまでデモページなのでflexboxレイアウト以外の部分は必要最低限のレイアウトにしています！
また、実際のホームぺージ制作では画像の遅延読み込みを行っていますが、出来る限り“imgタグ”自体は触らないようにしておきたかったので画像が表示が遅いかもしれません。
ウィンドウサイズが1280px以下でタイトルが3行になるので、折り返し指定を行っています。さらに、896px以下で子要素をflexbox横並び、480px以下で再度子要素内を縦並びという風に指定しています。今回は孫要素・ひ孫要素まで配置しています。後からの修正は面倒な場合があるので、先にレスポンシブに対応する際にどのようにflexboxを組むか考えて配置する方が良いかと思います。
タイトルは2行までが推奨。3行になると見栄えが悪くなります。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。