Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8582

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

$
0
0

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

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

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

環境

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

  • macOS Catalina :10.15.6
  • Chrome:85.0.4183.102

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

やりたいこと
テキスト1行_説明付き.png

解決策

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

HTML

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

CSS

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

参考:APIリファレンス

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

やりたいこと

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

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

タグ内スペース_説明付き.png

解決策

white-space: pre;を指定する

HTML

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

CSS

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

参考:APIリファレンス

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

やりたいこと

テキストとSVGアイコンを同じ行に表示するときに、テキストとアイコンの上下方向の位置を揃えたい
アイコン位置揃え_説明付き.png

解決策

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

HTML

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

CSS

.text-with-icon{line-height:30px;}.icon-wrapper-alignment{line-height:30px;/* テキストと同じline-heightにする */}.icon{vertical-align:middle;/* 上下中央に配置する */}

参考:APIリファレンス

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

やりたいこと

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

svgアイコンの色指定.png

解決策

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

HTML

<divclass="text-info-color">新規作成</div><divclass="icon-wrapper"><divclass="icon text-info-color"><svgwidth="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"><pathfill="currentColor"d="..."></path></svg></div></div>

CSS

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

参考:APIリファレンス

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

やりたいこと

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

ボタン両端揃え_説明付き.png

解決策

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

HTML

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

CSS

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

参考:APIリファレンス

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

やりたいこと

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

ポップアップあり.png

解決策

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

HTML

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

CSS

.menu{visibility:hidden;position:absolute;}.menu-item{line-height:40px;}

JavaScript

constbuttonMenu=document.getElementById('button-menu')constmenu=document.getElementById('menu')buttonMenu.addEventListener('click',()=>{// ボタンの座標を取得するconstbuttonPosition=buttonMenu.getBoundingClientRect()// メニューの座標を設定するconststyle=menu.style;style.visibility='visible'style.top=`${buttonPosition.top+window.scrollY}px`style.left=`${buttonPosition.right+20}px`})

参考:APIリファレンス

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

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

画像だめ_説明付き.png

画像OK2_説明付き.png

画像OK1_説明付き.png

解決策

object-fitを利用する

HTML

<!-- 縦横比が変わってしまう --><imgclass="img-fill"src="images/hot-air-balloon-5390487_1920.jpg"><!-- 縦横比を維持 --><imgclass="img-contain"src="images/hot-air-balloon-5390487_1920.jpg"><!-- 縦横比を維持(はみ出る部分はトリミング) --><imgclass="img-cover"src="images/hot-air-balloon-5390487_1920.jpg">

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リファレンス

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

やりたいこと

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

オーバーレイ元_説明付き.png

オーバーレイあり_説明付き.png

解決策

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

HTML

<divclass="overlay"></div>

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リファレンス


Viewing all articles
Browse latest Browse all 8582

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>