【CSS】約1年フロントエンドを開発して見えてきた本当によく使うCSSプロパティまとめ【入門】

# はじめに

1年前、僕が新卒エンジニアとしてデビューした当時はCSSをほとんど書いたことがありませんでした。当時は `padding` と `margin` の違いすらわからず、デザイナーに用意して頂いた Figma を見ても CSS をどう書けばいいかわかりませんでした。特に、CSSプロパティは種類が多く、一体どれを使えばいいのだろうか...となっていた記憶があります。それから1年、デザイナーへの質問やペアプロ等を通じて Figma と同じ表示になるようにCSSを書くことができるようになってきました。

本記事では、約1年フロントエンドを開発して見えてきた、特によく使う最初に覚えておきたいプロパティをまとめました。

# ボックス

HTMLの要素は四角形の領域として表示されます。その四角形の大きさや、要素同士の余白などを調整する際によく使用するCSSプロパティを紹介します。

## `width`, `height`

この2つのプロパティは要素の大きさを指定するためのプロパティです。`width` は幅、`height` は高さを指定します。値は `px` `em` を用いた固定値や、`%` による親との相対的なサイズ等を指定できます。詳しい使い方はここでは省略します。MDNを読みましょう。

https://developer.mozilla.org/ja/docs/Web/CSS/width

https://developer.mozilla.org/ja/docs/Web/CSS/height

また、最小幅を指定する `min-width`, `min-height` や、 最大値を指定する `max-width`, `max-height` も覚えておくと良いでしょう。

## `margin`, `border`, `padding`

この３つのプロパティは余白と境界線に関するプロパティです。

最初に `border` を覚えておくと、`margin` と `padding` の違いが分かりやすいです。`border` は 要素の境界を指定するためのプロパティです。`border-radius` で角を丸くすることができます。

`margin` は `border` よりも外側の余白です。要素と要素の間隔を調節する際に使用します。一方、`padding` は `border` よりも内側の余白です。

それぞれ末尾に  `-top`, `-bottom`, `-right`, `-left` を付けることで特定の方向のみ指定することができます。

https://developer.mozilla.org/ja/docs/Web/CSS/border

https://developer.mozilla.org/ja/docs/Web/CSS/margin

https://developer.mozilla.org/ja/docs/Web/CSS/padding

## `background`

`background` は要素の背景に関するスタイルを指定するためのプロパティです。
特に、`background-color` で色を指定することが多いです。

https://developer.mozilla.org/ja/docs/Web/CSS/background

## ボックスまとめ

ここまでに登場した `width`, `height`, `margin`, `border`, `padding`, `background` を使用した例がこちらになります。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="Exomxez" data-user="wataru86" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wataru86/pen/Exomxez">
  Untitled</a> by Wataru Yamada (<a href="https://codepen.io/wataru86">@wataru86</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

以下のページにボックスに関するより詳細な説明書かれています。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

# テキスト

テキストを装飾するためのプロパティについて説明していきます。

## `font-size`

その名の通り、フォントサイズを指定するためのプロパティです。

https://developer.mozilla.org/ja/docs/Web/CSS/font-size

## `font-weight`

フォントの太さを指定するためのプロパティです。
Qiita では太文字に `600` を指定することが多いです。

https://developer.mozilla.org/ja/docs/Web/CSS/font-weight

## `line-height`

テキストの行間を指定するためのプロパティです。
Qiitaではデフォルトが `1.8` になっており、それ以外の場合のみ、このプロパティを指定します。

https://developer.mozilla.org/ja/docs/Web/CSS/line-height

## `color`

フォントの色を指定するためのプロパティです。 `font-color` ではありません。

ちなみに、 Qiita でよく使用されている緑色は `#55c500` です。

https://developer.mozilla.org/ja/docs/Web/CSS/color

## テキストまとめ

ここまでに登場した `font-size`, `font-weight`, `line-height`, `color`を使用した例がこちらになります。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="wvpeqpm" data-user="wataru86" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wataru86/pen/wvpeqpm">
  Untitled</a> by Wataru Yamada (<a href="https://codepen.io/wataru86">@wataru86</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 配置

要素をどのように配置するか指定するためのプロパティがいくつかあります。
特に、`position` と `display` はよく使用するので、ここで紹介します。

## `position`

`position` は、要素の位置を調整する際に使用するプロパティです。このプロパティの値に `relative`, `absolute`, `sticky` 等を指定し、プロパティ `top`, `right`, `bottom`, `left` と組み合わせます。

https://developer.mozilla.org/ja/docs/Web/CSS/position

例として、 `position: sticky` を指定した例が以下になります。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="ZEvyXYY" data-user="wataru86" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wataru86/pen/ZEvyXYY">
  Untitled</a> by Wataru Yamada (<a href="https://codepen.io/wataru86">@wataru86</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## `display`

最後に `display` プロパティを紹介します。このプロパティを一言では説明することは難しいので、一旦 MDN を見てみましょう。

https://developer.mozilla.org/ja/docs/Web/CSS/display

> display は CSS のプロパティで、要素をブロック要素とインライン要素のどちらとして扱うか、およびその子要素のために使用されるレイアウト、例えば フローレイアウト、グリッド、フレックスなどを設定します。

ちょっとよくわからないですね...

> 正式には、 display プロパティは要素の内側と外側の表示種別を設定します。外側の型は要素のフローレイアウトへの参加方法を設定し、内側の型は子要素のレイアウトを設定します。 display のいくつかの値は、それ自身の個別の仕様書で完全に定義されています。例えば、 display: flex が宣言されたときに何が起こるかの詳細は、 CSS Flexible Box Model 仕様書で定義されています。個々の仕様書については、この文書の最後にある表を参照してください。

どうやらこのプロパティは設定した値に応じて何が起こるかが異なるようです。

ここでは要素の外側に関する `block` `inline`について、そして要素の内側 `flex` と `grid` について簡単に説明します。

### `block`, `inline`

HTMLの要素は「ブロックレベル要素」「インライン要素」の二種類に分類できます。

`div` タグや `p` タグはブロックレベル要素に概要します。

https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elements

> ブロックレベル要素は常に新しい行から始まり、利用可能な全幅を取ります (できる限り左右に伸びます)。

以下のように、ブロックレベル要素 `div` を2つ連続させると、縦に並びます。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="QWagqmW" data-user="wataru86" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wataru86/pen/QWagqmW">
  Untitled</a> by Wataru Yamada (<a href="https://codepen.io/wataru86">@wataru86</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

一方、インライン要素は `a` タグや `span` タグが該当します。

https://developer.mozilla.org/ja/docs/Web/HTML/Inline_elements

> インライン要素は新しい行から始まらず、必要な幅のみを占有します。

以下のように、インライン要素 `span` を2つ連続させると、横に並びます。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="vYpZezV" data-user="wataru86" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wataru86/pen/vYpZezV">
  Untitled</a> by Wataru Yamada (<a href="https://codepen.io/wataru86">@wataru86</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

ここまで読めばもうわかりますよね。 `display: block` を指定するとその要素がブロックレベル要素になり、 `display: inline` を指定すると、インライン要素になります。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="JjMJrzL" data-user="wataru86" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wataru86/pen/JjMJrzL">
  Untitled</a> by Wataru Yamada (<a href="https://codepen.io/wataru86">@wataru86</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### `flex`

`display: flex` **フレックスボックスレイアウト** と呼ばれる、内側の要素に関するレイアウトを指定することができます。

フレックスボックスレイアウトは慣れるまで時間がかかりますが、本当によく使うので頑張って覚えましょう！

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout

試しに `display: flex` を指定してみましょう。
以下の例では `display: flex` を指定した `div` の中に 3つの `div` が入っています。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="KKZqyMa" data-user="wataru86" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wataru86/pen/KKZqyMa">
  Untitled</a> by Wataru Yamada (<a href="https://codepen.io/wataru86">@wataru86</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

デベロッパーツールを開き、`flex` を指定した場所のスタイルを見てみましょう。

![flex.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325392/9cfb64a8-fd7a-b3fc-0a9c-c5df08d7df11.png)

よく見てみると、`display: flex` の左に灰色の四角いボタンがあります。押してみましょう。

![flex2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325392/3a46d46a-8120-8c03-e018-fb1f1db1a838.png)

上の図のようにアイコンをクリックするだけで `flex-direction: column` と `align-items: center` が追加され、内側の要素のレイアウトが変化しました。

このように、フレックスボックスは内側の要素のレイアウトをフレキシブルに指定できます。

### `grid`

`display: grid` も内側の要素のレイアウトを指定するためのものですが、`flex` とはまた異なる方法です。こちらはグリッドレイアウトと呼ばれます。ここでは説明を省きますが、気になったらグリッドレイアウトについて調べてみてください！

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout

# おわりに

今回紹介したプロパティ以外にも重要なプロパティはまだまだたくさんあります。ですが、まずはこの記事で紹介したプロパティを覚えて、関連するプロパティを少しずつ覚えていくといいと思います！

「このプロパティもよく使う」「このプロパティは覚えておいておくと便利」等ありましたらコメントしていただけると助かります。


僕は最近 CSS を思い通りに当てられるようになり、以前よりもフロントエンドの開発が楽しくなりました。この記事を読んで、僕のようにフロントエンド開発が好きな人が増えたら幸いです。

## おまけ

CSSの学習は以下のサイトがとても参考になりました。

https://developer.mozilla.org/ja/docs/Web/CSS

https://saruwakakun.com/html-css/basic

## おまけ2

今回紹介したCSSプロパティでCSSを完全に理解することができます。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="WNdOXVX" data-user="wataru86" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wataru86/pen/WNdOXVX">
  Untitled</a> by Wataru Yamada (<a href="https://codepen.io/wataru86">@wataru86</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

https://qiita.com/ichimonji_haji/items/96fb2e7c482ed77dea07