プロが実践するモダン CSS の書き方入門テクニック20選まとめ

海外サイトTutorialzineで公開された「20 Protips For Writing Modern CSS」の著者 Danny Markov より許可をもらい、翻訳転載しています。 この記事では、CSSスタイリングで実践したい、便利な20種類のテクニックをご紹介しています。CSSをはじめたばかりの初心者のひとにも合った内容も多く、あまり知られていない少しだけ高度で、より実践的なCSSテクニックまで学ぶことできます。これらのテクニックを利用することで、今後のウェブ制作をよりスムーズに、快適に行うことができるでしょう。 コンテンツ目次 1. 縦方向のマージン幅に気をつけよう。 2. レイアウトに Flexbox を利用しよう。 3. CSS リセットをしよう。 4. Border-box をすべてに適用しよう。 5. イメージファイルは背景に適用しよう。 6. リストテーブル用ボーダー

[macky1207]

おれはぷろじゃないのかもしれない...

[ultimate-ez]

やはり海外はライトにIEを切り捨てられるのが羨ましい。日本のIEサポートは長期的にはユーザーも不幸にするので、私も積極的にIE切り捨てを進めているけど、日本の偉い人は保守的なのでなかなか思うようには進まない。

[ttkazuma]

「2.レイアウトに Flexbox を利用しよう。」解散。

[chocodoughnut]

縦方向のマージンはうまくききませんってのは語弊ありそう

[hachiame]

イメージファイルは背景で読み込むと早くなるのかな？

[nagoya123]

プロが実践するモダン CSS の書き方入門テクニック20選まとめ

[daizo3]

メモ:もしかしたらお仕事で使うかもしれんし。

[hedeyoshi]

そのリセットの書き方はいまでは強引すぎだろう

[Rishatang]

なんでこんなスッカスカな浅い内容の記事がこれだけブクマされるのか…

[wwolf]

14の意味がわからん。英語圏では重要なことなのだろうか。

[rascal0403]

週末に読み込み

[chibairodori25]

なにこれ！

[triamquium]

cssの基本的なテクがまとめられている

[hackapellmanda]

職場着いたらいじってみよう

[ksakae1216]

よい。保存！

[KAZ99K]

reset.cssはYUIのを自分カスタマイズして使ってる/画像は背景にするとaltも無い意味の無いものになるのでp class="img"にimgタグ入れるようにしてimgは常にwidth:100%:とし、置く場所ごとにp.imgをpxや%指定してレスポンシブ対応してる

[leoneko514]

そんなにアンダースコア君を嫌わなくても良いじゃないか！（半泣き

[Kmusiclife]

100vhやcalcはくっそ便利だよね。

[shintarowfresh]

画像ってCSSで背景にした方が表示の制御は圧倒的に楽なんだけども、パフォーマンスどうなん？

[shinagaki]

“a”

[nacon]

✳︎はエラーが起きるからリセットの時は全部のタグを入れたものをクリアしていたけど、今は大丈夫なのかな？

[pokotanu]

“より滑らかな動きを表現できるtransform()プロパティを利用するのが理想的”

[winterfall]

わりとよく使うCSSテクニック集

[k3akinori]

リセットに*はborder-boxくらいにしか使えない。あとimgを背景画像にするのは最悪手。

[takamatumoto7]

メモ