小学生の頃、新聞を作る課題ってありませんでしたでしょうか。私はありました。それを思い出して…
CSSのグリッドレイアウトを用いて新聞風なデザインをしてみました。
CSSのグリッドレイアウトとは、
display: grid;
grid-template:
"... ..... ..... ..... ..... ..... ..... ..."
"... header header header header header header ..." 30px
"... center2 center1 center1 center1 center1 title ..." 300px
"... center2 center1 center1 center1 center1 title ..." 100px
"... center2 center1 center1 center1 center1 title-sub ..." 150px
"... center3 center3 center3 center3 center3 center3 ..." 300px
"... center4 center4 center7 center5 center5 center5 ..." 150px
"... center4 center4 center6 center6 center6 center6 ..." 150px
"... add1 add2 add2 add3 add4 add4 ..." 300px
" ...footer footer footer footer footer footer ..." 30px
"... ..... ..... ..... ..... ..... ..... ..." 30px
/ auto 300px 300px 300px minmax(300px, 2000px) 100px 100px auto;
上記のような可読性の高いコードをCSSに記載するだけでレイアウトが組める機能です。
従来のFlexBoxなどと比べタグの数を大幅に減らせます。
また以下の例では行っておりませんが、容易にレスポンシブデザインにすることも可能とのことです。
InternetExploreを除くほとんどブラウザに対応しています。
↓以下は最近の私の話題を新聞風にして、実装してみたものになります。↓
※画面サイズに応じて文字が飛びてしまう点、書くことがないという点を踏まえ文字には余白をもたせています。
