現代開発者のためのCSS基礎技術 - Qiita

ウェブアプリケーション開発における、現代的なCSSの基礎技術についてまとめました。 ちまたには「CSSとは何か」を学ぶ教材はたくさんあっても、「CSSをどうやってうまく使うか」についてはあまり詳しく触れられません。 仕様をたくさん記憶したところで、いつになっても開発力はあがらないのです。 本記事は「CSSをうまく使う技術」に焦点をあてて、実際に現代的なウェブアプリケーションに求められるレベルのCSSを書くための知識を紹介します。 特に プログラミング経験はあるもののウェブフロントエンドの経験が浅い方 初級レベルのCSSはある程度理解したものの、次にどうしたらいいかわからない方 にお勧めです。 プロローグ CSSの書き方は一通りではありません。 好きな書き方を自由に選ぶことができます。 これは一見すると良いことですが、裏を返すと最適ではない書き方がたくさんあるということです。 この場において

[ttkazuma]

色々なサイトのソース見るけど、px指定は現役バリバリです

[monomoti]

なんにせよ人のために記事を書くのはえらいこと。お疲れさまです。ありがとうございます。

[oitomo]

ヤギ！

[baronhorse]

なんか一周回って tailwindcssいいなって最近

[roirrawedoc]

前にelm調べてたらこの人の記事ばかり出たんだけどひたすらヤギのまんこ映しててelmの印象まで悪くなりました

[otchy210]

「現代」のというよりむしろ、現代も含んで、そもそも 15 年前あたりで知識が止まってる人が現代に追いつくにはどこから始めたらいいかが詳しく書かれている良記事だった。

[hatest]

CSSの記事に便乗したやぎ写真集の販売

[aktkro]

> BEM記法などの面白みのない原始的な方法がよく使われています。 面白みis何。BEMええやん。

[yoiIT]

やぎに癒やされる

[unagiga]

tableレイアウトの出番か

[gunjo2000]

永久保存

[KoshianX]

おお、網羅的だ。WAI-ARIA はいま手が回ってなかったんだけど、なるほど状態として考えれば積極的に採用すべきだなあ

[k3akinori]

胡乱な知識で断言＆disしちゃうとかやばくね？スクリーンリーダーでもdisplay:none;は存在しないよ。pxを使わないのはRWDではなく保守性の問題。

[ustam]

全部読んでないけど、CSSを汚す雑なおっさんエンジニアにキレてしまった人かな？　CSSは性格出るからね。 CSSを汚すエンジニアは、雑な上に頭が悪い。あまり重要な仕事は任せない方がいいかもな。

[RCHeLEyl]

よく「レスポンシブでCSSするならpx単位使っちゃダメ」って聞くけど、どういう理由？普通にガンガン使っているので、逆に理由が知りたい。

[marmot1123]

ヤギが出てきたところでうーん……

[adwhing]

ぶめぇええええええ🐐

[ifttt]

"さて、実はこの記事を書いているのはバーチャルヤギチューバーのさくらちゃんだよぉぉおおおお！ ぶめぇええええええ🐐" びっくりしたー

[ultimatebreak]

Scoped CSSやCSS Moduleといったものを使わない場合、BEMしか効果のある解決方法がないんだよな...

[nekosann_08]

リセットCSSはinheritを基本にしてほしい。html・body、各セクション及び親要素(class)でスタイリングしたいのです。要素{font-size:100％;}とかだと親の言うことを効いてくれないのです。クラス名が多いのです。

[onesplat]

レベル低そうな奴がさらにレベル低いおっさんを叩く図を見るときつい。しょうもないフリーランスにありがち。少なくともCSS基礎と銘打った記事を書けるレベルではない

[yodelx]

“CSSの書き方は一通りではありません。 好きな書き方を自由に選ぶことができます。 これは一見すると良いことですが、裏を返すと最適ではない書き方がたくさんあるということです。”

[tkrd]

"がんばってなんかいろんな「セレクター」を覚えた方もいるかもしれません。それもあまり使いません。" はい、覚えました。ごめんなさい。

[moro9island]

CSS

[fashi]

「アクセシビリティうんぬんは置いておいて、要素の状態をあらわす標準化された技術だと考える」WAI ARIAの後にカスタムデータ属性来るとWAI ARIA使わなくていいのでは？って気がしてくる

[eagleyama]

長すぎてブクマさせる作戦か

[cankyan]

"文章構造と表示方法を分離させる" この方がWordPressのビジュアルエディタで作成されたページ見たら発狂しそう

[kuroaka1871]

ぶめぇ🐐

[high-low-02-03]

ヤギかわいい

[peketamin]

うーん…ユーティリティクラスの使用はBootstrapでもやってて便利だと思うんだけどなあ。

[akahigeg]

pxのとこは困ったことないからよく分からないな

[ueken65]

読んでる