たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個

モダンなCSSレイアウトでは、ほんのわずかなコードを書くだけで、実用的なスタイリングを実現できます。 この記事では、たった1行でよく見かけるWebレイアウトを表現できるテクニック10個をご紹介します。 上下中央揃え: place-items: center まずCSSでもっとも頭を悩ませる、上下中央揃えを詳しくみてみましょう。ここでは、plae-items: centerを使えば、思ったよりに簡単に実現できます。 まず、display: gridを記述したら、一緒にplace-items: centerを同じ要素に追加します。place-itemsは、align-itemsとjustify-itemsを同時にスタイリングできる簡略化表記、ショートハンドです。centerに設定することで、align-itemsとjustify-itemsの両方がcenterとして設定されます。 .paren

[otchy210]

凄技っていうか、flexbox と grid を中心とした正しい使い方の紹介じゃない？

[localnavi]

色々スゴイ。ただ、これらのスタイル指定は（IE11は確実に対象外として）どのブラウザのどのバージョンまで対応してるのか、まで書いてもらえると安心して使える（または使わない決断ができる）のだが。

[mon_sat]

こういうの知れば知るほど、レイアウトについてはCSSフレームワークも利用せずにやりたいことはできるのだとわかる。とはいえ素のCSSだけで書く機会が今後あるのかというとそれもなあ…個人的なものでもなかなかね

[teru-7]

diplay: grid;

[minase_mira]

girdって結構色々できるんだ

[soratomo]

display grid とか flexとか 対応ブラウザはモダン系

[tmae]

大事そう

[kuroaka1871]

メモメモ

[deztecjp]

15年前の知識で止まっている身からすると、当時、CSSに対して出ていた不満はおおよそ正当で、CSSの仕様が充実することが問題解決の道だったんだな、と。貧弱なCSS2.1の枠内で満足すべきと考えていたのは間違いだった。

[guru_guru]

リキッドめんどくせえな、と思ってたらもうこれでいいじゃん、って感じになっとる。

[fujibay1975]

メモメモメモ

[eartht]

ブラウザ対応の問題で新しいのを積極的に使う機会はなかなかないが、そもそも記事中のが新しいのかどうかも知らない…。知らんウチに便利なのが日々増えとるんじゃろうなぁ

[MasaoBlue]

数年前までは大体の項目暗記してるつもりだったけど、最近めっきり自分でCSS書くことが減ってその間にいろんなのが増えて追いてかれてしまった

[spark7]

もう過去は切ってgridに移行した方がよさそうやね

[toaruR]

動画がわかりやすい(*´д｀*)

[tetsu23]

配置系。

[mayumayu_nimolove]

人間が必要なくなる準備をしておかないと

[u491u415]

メモ