# はじめに

2021年に触ったCSSをざっと書いていきます。

自分自身が「なんとなくCSSわかる」ぐらいの感覚なので、調べながら書いてました。
なので比較的新しい技術が多いかと思いますので、これから書き始めた人や、最近触ってなかったって人には参考になるかと思います。

ざっと羅列していきます。

## gridLayout

レイアウト決める時の味方。神様。
例えばカードコンポーネントを3カラムで作りたいな〜みたいな時に良い。
CSSだけなくUIフレームワークにも大抵採用されているので概要は知っといて損なし。

ただし、ブラウザ間で非対応もあったりするので注意。

## calc

いろいろ計算してくれるプロパティ。フォントとかにつかうと画面サイズに合わせて変わるので便利。

https://coliss.com/articles/build-websites/operation/css/how-calc-works-by-ire.html

## minmax

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

## UIフレームワーク

いわゆるmaterialUIとか、vuetifyとか。

![img](/mosaic-code.jpg)

これはvuetifyの公式から引用したものですが、どれか1種類理解するとあとは似たような感じです。

## CSS in JS

CSSの引き出しとして書けるようになっておくと仕事の幅広がると思います。
styledComponents / emotion　あたりは知っておいて損なし

## tailWind

CSSフレームワークの中では高いシェア。これも簡単に触っておいて理解しておくとよし

いいなーと思えば続けて採用すれば良いと思います。

## margin padding

適当につけない。いまさらですが。

https://eclair.company/media/difference-between-margin-and-padding/

## max-width / min-height　とか

たんにwidthよりも優れたシーンがあるので。いまさらですが。

## flex-inline

これないとしんどい場面多かった。
`display: flex` で囲ったあとなの要素をinline的に扱いたい場合に良いと思います。

## position: sticky

便利な固定ヘッダー。これあったらJS要らなかった。
bugがあるみたいな書き込み見ましたが、仕様の問題であってbugではないので、読んで理解すれば問題なし。

![img](/mosaic-code.jpg)

これだけで実現できるのはすごい。

https://coliss.com/articles/build-websites/operation/css/css-position-sticky-how-it-really-works.html

## 色の定数化

あたりまえだけど。大事ですよね。サイズとかも個人的にはしたい。

## さいごに

CSSは基礎さえ理解しておけば取り回しが効くのでちょっと触って知っておく。みたいなスタンスは有効やなって思います。

お役に立てれば幸いですm_ _m
[cv:issue_marketplace_engineer]

# はじめに

2021年に触ったCSSをざっと書いていきます。

自分自身が「なんとなくCSSわかる」ぐらいの感覚なので、調べながら書いてました。
なので比較的新しい技術が多いかと思いますので、これから書き始めた人や、最近触ってなかったって人には参考になるかと思います。

ざっと羅列していきます。

## gridLayout

レイアウト決める時の味方。神様。
例えばカードコンポーネントを3カラムで作りたいな〜みたいな時に良い。
CSSだけなくUIフレームワークにも大抵採用されているので概要は知っといて損なし。

ただし、ブラウザ間で非対応もあったりするので注意。

## calc

いろいろ計算してくれるプロパティ。フォントとかにつかうと画面サイズに合わせて変わるので便利。

https://coliss.com/articles/build-websites/operation/css/how-calc-works-by-ire.html

## minmax

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

## UIフレームワーク

いわゆるmaterialUIとか、vuetifyとか。

```js
    <v-container
      v-for="align in alignments"
      :key="align"
      class="grey lighten-5 mb-6"
    >
      <v-row
        :align="align"
        no-gutters
        style="height: 150px;"
      >
        <v-col
          v-for="n in 3"
          :key="n"
        >
          <v-card
            class="pa-2"
            outlined
            tile
          >
            One of three columns
          </v-card>
        </v-col>
      </v-row>
    </v-container>
```

これはvuetifyの公式から引用したものですが、どれか1種類理解するとあとは似たような感じです。

## CSS in JS

CSSの引き出しとして書けるようになっておくと仕事の幅広がると思います。
styledComponents / emotion　あたりは知っておいて損なし

## tailWind

CSSフレームワークの中では高いシェア。これも簡単に触っておいて理解しておくとよし

いいなーと思えば続けて採用すれば良いと思います。

## margin padding

適当につけない。いまさらですが。

https://eclair.company/media/difference-between-margin-and-padding/

## max-width / min-height　とか

たんにwidthよりも優れたシーンがあるので。いまさらですが。

## flex-inline

これないとしんどい場面多かった。
`display: flex` で囲ったあとなの要素をinline的に扱いたい場合に良いと思います。

## position: sticky

便利な固定ヘッダー。これあったらJS要らなかった。
bugがあるみたいな書き込み見ましたが、仕様の問題であってbugではないので、読んで理解すれば問題なし。

```css
.some-component{
    position: sticky;
    top: 0;
} 
```

これだけで実現できるのはすごい。

https://coliss.com/articles/build-websites/operation/css/css-position-sticky-how-it-really-works.html

## 色の定数化

あたりまえだけど。大事ですよね。サイズとかも個人的にはしたい。

## さいごに

CSSは基礎さえ理解しておけば取り回しが効くのでちょっと触って知っておく。みたいなスタンスは有効やなって思います。

お役に立てれば幸いですm_ _m
[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

はじめに

gridLayout

続きは、単価診断を受けたエンジニア限定で公開中（30秒）

続きは、
単価診断を受けたエンジニア限定で公開中（30秒）