ニュースや雑誌のCSSレイアウトを使用して素敵なWebページを作ろう

CSSを使っている私たちにとっては、楽しみな時間です。CSSグリッドとFlexboxの出現により、ページレイアウトのまったく新しい世界が開かれました。
 
そして、これらのツールの興味深い使い道の1つは、ニュースや雑誌スタイルをWebサイトへ統合することです。多くの場合、他のジャンルよりも複雑でユニークなレイアウトがあります。それは非常に創造的なものにつながりました。
 
今日は、ニュースインデックスページの興味深いレイアウトと、記事のレイアウトを紹介します。CodePenで簡単に作成方法を確認できます。
 
 
Great Grid
CSSグリッドのニュースページの代表的な例です。12列のレイアウトで、最初の行の3分の2を占める大きなストーリーが上にあります。そこから、下の3分の1から3分の2にストーリーと、右側の3分の1のリストが交互に表示されます。素晴らしいバランスを作り出し、各ストーリーを際立たせます。
 
See the Pen
News Layout by Marc Müller (@mkmueller)
on CodePen.
https://static.codepen.io/assets/embed/ei.js
 
Artistic Touch
このような新しいCSS技術は、多くの場合、従来の印刷レイア

リンク元