【厳選8個】フロントエンド開発でちょっとした時に役立つCSS Tips集

Webアプリのフロントエンド開発をしているときによくあるケースのCSSのTips集です。

私はWebエンジニアをしていてCSSもたまに書くのですがたまにしかないため、「こういう時どうやってCSSを書けばいいんだっけ？」となることが多く、都度、調べています。

自分の備忘録的な目的でまとめていますが、もし同じような問題に遭遇してやり方がわからないという方のお役に立てれば幸いです。


**環境**

以下の環境で確認をしています。(2020年9月時点で最新版の環境です。)

- macOS Catalina ：10.15.6
- Chrome：85.0.4183.102


## 1. 一行に収まらない長さのテキストの場合は「...」で切る

**やりたいこと**
![テキスト1行_説明付き.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513800/ce6ffdaa-891b-58f3-5779-3f4fdc8650fc.png)


**解決策**

テキストのスタイルに`overflow-x: hidden;`、`text-overflow: ellipsis;`、`white-space: nowrap;`を指定する



**HTML**

```html
<div class="cut-long-text">
  一行に収まらない長さのテキストの場合は、途中でテキストを切って「...」で表示する
</div>
```



**CSS**

```css
.cut-long-text{
  overflow-x: hidden;      /* はみ出る部分は非表示 */
  text-overflow: ellipsis; /* はみ出る部分を...で表示 */
  white-space: nowrap;     /* 行の折り返しをしない */
}
```



**参考：APIリファレンス**

- [MDN overflow-x](https://developer.mozilla.org/ja/docs/Web/CSS/overflow-x)
- [MDN text-overflow](https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow)
- [MDN white-space](https://developer.mozilla.org/ja/docs/Web/CSS/white-space)





## 2. タグ内の最後のスペースを表示する

**やりたいこと**

```html
<div>I agree to </div><a>Terms of Service</a>
```

のように、テキストの後ろにaタグのリンクテキストをつなげる場合。
この場合、toの後ろにスペースを入れたい。
(よくあるケースとしては下にある図のように、利用規約部分だけをリンクにしたい。)

![タグ内スペース_説明付き.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513800/128238ca-4f78-724d-b973-b93c64d78b20.png)



**解決策**

`white-space: pre;`を指定する



**HTML**

```html
<div>
  <div class="text-show-space">I agree to </div><a>Terms of Service</a>
</div>
```



**CSS**

```css
.text-show-space {
  white-space: pre;
}
```



**参考：APIリファレンス**

- [MDN white-space](https://developer.mozilla.org/ja/docs/Web/CSS/white-space)





## 3. 文字とアイコンの位置を揃える

**やりたいこと**

テキストとSVGアイコンを同じ行に表示するときに、テキストとアイコンの上下方向の位置を揃えたい
![アイコン位置揃え_説明付き.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513800/34eb5117-aca5-d0ba-b870-624bc4e30c03.png)



**解決策**

アイコンの`line-height`をテキストと同じ高さに指定し、`vertical-align: middle; `を指定する



**HTML**

```html
<div class="text-with-icon">新規作成</div>
<div class="icon-wrapper-alignment">
  <div class="icon">
    <svg width="16px" height="16px" aria-hidden="true" >
			...
    </svg>
  </div>
</div>
```



**CSS**

```css
.text-with-icon {
  line-height: 30px;
}

.icon-wrapper-alignment {
  line-height: 30px;      /* テキストと同じline-heightにする */
}

.icon {
  vertical-align: middle; /* 上下中央に配置する */
}
```



**参考：APIリファレンス**

- [MDN line-height](https://developer.mozilla.org/ja/docs/Web/CSS/line-height)
- [MDN vertical-align](https://developer.mozilla.org/ja/docs/Web/CSS/vertical-align)





##4. SVGアイコンの色をCSSから指定する

**やりたいこと**

SVGアイコンの色をCSSで指定したい
(テキストの色が状態によって変わるのでそれに合わせてアイコンの色も変えたい場合など)

![svgアイコンの色指定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513800/e488faa6-a87f-9200-3329-8eb1982d2f1b.png)



**解決策**

svgアイコンのfillやstrokeの値に`fill="currentColor"`を指定する



**HTML**

```html
<div class="text-info-color">新規作成</div>
<div class="icon-wrapper">
  <div class="icon text-info-color">
    <svg width="16px" height="16px" aria-hidden="true" focusable="false" data-prefix="fas"
         data-icon="plus-circle" class="svg-inline--fa fa-plus-circle fa-w-16" role="img"
         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path fill="currentColor"
            d="...">
      </path>
    </svg>
  </div>
</div>
```



**CSS**

```css
.text-info-color {
  color: turquoise;
}
```



**参考：APIリファレンス**

- [MDN SVG Attribute reference > color](https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/color)



##5. 両端にボタンを配置する

**やりたいこと**

Flexboxを使ってボタンを両端に配置したい

![ボタン両端揃え_説明付き.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513800/fa1fb9da-dc09-be40-988d-6719a38df466.png)



**解決策**

ボタンを囲む親要素に`justify-content: space-between`を指定する



**HTML**

```html
<div class="flex-container">
  <button>キャンセル</button>
  <button>OK</button>
</div>
```



**CSS**

```css
.flex-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
```



**参考：APIリファレンス**

- [MDN justify-content](https://developer.mozilla.org/ja/docs/Web/CSS/justify-content)



##6. ポップアップメニューを表示する

**やりたいこと**

ボタンを押したらそのすぐ横にポップアップメニューを表示したい。そのような場合のpositionの指定方法。

![ポップアップあり.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513800/f5d5a98d-a8f5-d817-e5c0-79a46ad4778c.png)



**解決策**

getBoundingClientRectでボタンの位置を取得して、ポップアップメニューの位置をabsoluteにする



**HTML**

```html
<button class="button" id="button-menu">メニュー</button>
<div class="box menu" id="menu">
  <div class="menu-item">新規作成</div>
  <hr>
  <div class="menu-item">削除</div>
  <hr>
  <div class="menu-item">設定</div>
</div>
```



**CSS**

```css
.menu {
  visibility: hidden;
  position: absolute;
}

.menu-item {
  line-height: 40px;
}
```



**JavaScript**

```js
const buttonMenu = document.getElementById('button-menu')
const menu = document.getElementById('menu')

buttonMenu.addEventListener('click', () => {
  // ボタンの座標を取得する
  const buttonPosition = buttonMenu.getBoundingClientRect()

  // メニューの座標を設定する
  const style = menu.style;
  style.visibility = 'visible'
  style.top = `${buttonPosition.top + window.scrollY}px`
  style.left = `${buttonPosition.right + 20}px`
})
```



**参考：APIリファレンス**

- [MDN Range.getBoundingClientRect()](https://developer.mozilla.org/ja/docs/Web/API/Range/getBoundingClientRect)



##7.  画像の縦横比を変えずに表示する

**やりたいこと**
画像を縦横比を変えずに表示させたい。

![画像だめ_説明付き.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513800/335cb4a0-b9b3-5cf3-669c-3c0abad5b8ec.png)

![画像OK2_説明付き.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513800/b2609a54-698e-d222-2ba8-cceb4f894a0f.png)

![画像OK1_説明付き.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513800/b7a0c615-e83b-b3d1-d4de-e7e55ff9c866.png)


**解決策**

object-fitを利用する



**HTML**

```html
<!-- 縦横比が変わってしまう -->
<img class="img-fill" src="images/hot-air-balloon-5390487_1920.jpg">

<!-- 縦横比を維持 -->
<img class="img-contain" src="images/hot-air-balloon-5390487_1920.jpg">

<!-- 縦横比を維持(はみ出る部分はトリミング) -->
<img class="img-cover" src="images/hot-air-balloon-5390487_1920.jpg">
```



**CSS**

```css
.img-fill{
  object-fit: fill;    /* 縦横比が変わる */
  width: 300px;
  height: 300px;
}

.img-contain{
  object-fit: contain; /* 縦横比を維持 */
  width: 300px;
  height: 300px;
}

.img-cover{
  object-fit: cover;   /* 縦横比を維持(はみ出る部分はトリミング) */
  width: 300px;
  height: 300px;
}

```



**参考：APIリファレンス**

- [MDN object-fit](https://developer.mozilla.org/ja/docs/Web/CSS/object-fit)



##8. 画面全体を半透過でオーバーレイする

**やりたいこと**

ローディングやモーダルダイアログなどを出したいときに、背景となる画面全体を半透過でオーバーレイする

![オーバーレイ元_説明付き.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513800/2679d606-4294-0dbf-2a54-17a8450fd2a7.png)

![オーバーレイあり_説明付き.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513800/17a3058c-e552-43b2-f6e2-448ab185ede0.png)



**解決策**

疑似要素(::before)を使用する



**HTML**

```html
<div class="overlay"></div>
```



**CSS**

```css
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.overlay::before {
  content: "";
  display: inline-block;
  height: 100vh;
  width: 100vw;
}
```



**参考：APIリファレンス**

- [MDN ::before](https://developer.mozilla.org/ja/docs/Web/CSS/::before)