【ISSUE】ちょっとCSS触り始めた方へ
2024年12月23日 22:38
2021年に触ったCSSをざっと書いていきます。
自分自身が「なんとなくCSSわかる」ぐらいの感覚なので、調べながら書いてました。
なので比較的新しい技術が多いかと思いますので、これから書き始めた人や、最近触ってなかったって人には参考になるかと思います。
ざっと羅列していきます。
レイアウト決める時の味方。神様。
例えばカードコンポーネントを3カラムで作りたいな〜みたいな時に良い。
CSSだけなくUIフレームワークにも大抵採用されているので概要は知っといて損なし。
ただし、ブラウザ間で非対応もあったりするので注意。
いろいろ計算してくれるプロパティ。フォントとかにつかうと画面サイズに合わせて変わるので便利。
https://coliss.com/articles/build-websites/operation/css/how-calc-works-by-ire.html
gridでよく使うcalcみたいなやつ。便利です。よく使いました。
auto-fitとかもよく使う
https://coliss.com/articles/build-websites/operation/css/how-to-use-css-minmax.html
慣れないうちは使いづらく感じるんですが、慣れるとこれがないとしんどい。
こんなやつですね。
:before / :after
:not() / :first-child
:first-of-type
とかはよく使いました。兄弟要素の最初にだけスタイルを当てる場合など。
https://qiita.com/manabuyasuda/items/86f9bf68f80ad7ce5104
いわゆるmaterialUIとか、vuetifyとか。
これはvuetifyの公式から引用したものですが、どれか1種類理解するとあとは似たような感じです。
CSSの引き出しとして書けるようになっておくと仕事の幅広がると思います。
styledComponents / emotion あたりは知っておいて損なし
CSSフレームワークの中では高いシェア。これも簡単に触っておいて理解しておくとよし
いいなーと思えば続けて採用すれば良いと思います。
適当につけない。いまさらですが。
https://eclair.company/media/difference-between-margin-and-padding/
たんにwidthよりも優れたシーンがあるので。いまさらですが。
これないとしんどい場面多かった。
display: flex
で囲ったあとなの要素をinline的に扱いたい場合に良いと思います。
便利な固定ヘッダー。これあったらJS要らなかった。
bugがあるみたいな書き込み見ましたが、仕様の問題であってbugではないので、読んで理解すれば問題なし。
これだけで実現できるのはすごい。
あたりまえだけど。大事ですよね。サイズとかも個人的にはしたい。
CSSは基礎さえ理解しておけば取り回しが効くのでちょっと触って知っておく。みたいなスタンスは有効やなって思います。
お役に立てれば幸いですm_ _m
[cv:issue_marketplace_engineer]
診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。