CSS

CSS

CSSだけでsvgファイルの色を変更する方法

Web制作をしていると「このsvgファイルの別の色を用意したい」という場合があります。 よくインラインsvgをCSSで変える方法が紹介...
CSS

【CSS】flexの子要素をheight: 100%;にしつつalign-items: center;にしたい場合のやり方

display: flex;とalign-items: center;を指定すると子要素は縦に揃いますが、height: 100%;を指定し...
CSS

【CSS】transitionでプロパティを複数指定したいときの書き方

今回はtransitionでプロパティ(transition-property)を複数指定したいときの書き方を解説します。 tra...
CSS

【CSS】テキストの両端を超簡単に揃える方法

今回はテキストの両端を揃える方法を紹介します。超簡単です。 テキストの両端を揃える方法 CSSにはテキストの両端を揃えるtext...
CSS

【CSS】flexboxの子要素を均等幅にする方法

今回はflexbox内の子要素をコンテンツ量に関わらず均等幅にする方法を紹介します。 flexboxの子要素を均等幅にする方法 ...
CSS

スマホ実機(iOS Safari)でborder-radiusが効かないときの対処法

ブラウザのエミュレーターで確認するとborder-radiusがちゃんと効いているのに、スマホ実機(iOS Safari)で確認すると効いて...
CSS

【CSS】flexboxで要素やボタンを下端(底辺)に揃えたい時のやり方

カード型のデザインを実装していると、下のボタンをいちを揃えたいみたいな場合が結構あります。 今回はこんな感じで要素やボタンを下...
CSS

【CSS】リストで①や②などの丸数字を使う方法

CSSで<ol>に丸数字(①や②みたいなやつ)を使いたいことがありました。 「これってCSSだけでできるんだっけ?」と思っ...
CSS

CSSでWebフォントを使う方法【@font-faceの使い方】

今回はCSSの@font-faceを使ってローカルにダウンロードしたWebフォントを使う方法を解説します。 @font-faceを...
CSS

【CSS】flexboxの要素を任意の位置で改行する方法

flexboxの中の要素はflex-wrap: wrap;で改行できますが、これって要素がいっぱいあってこれ以上入らない場合に改行するプロパ...
CSS

【CSS】bodyタグにoverflow-x:hiddenが効かない原因と対処法

bodyにoverflow-x: hiddenをかけるとブラウザ表示では非表示にできましたが、スマホエミュで見ると全然非表示にされていません...
CSS

【CSS】display:table-cellの要素がなぜかwidth:100%にならない時の対処法

訳あってdisplay: table-cellのまま横幅いっぱいにしたいけど、なぜかwidth: 100%を指定しても効かないということがあ...
CSS

HTMLのtextareaの高さや幅を固定して拡大を禁止する方法

今回はHTMLでユーザーがtextareaの幅や高さを拡大するのを禁止して、固定する方法を解説します。 textareaの幅も高さ...
CSS

CSSのbackground-positionで右や下から基準で指定する方法

今回は上の画像のように配置したいときに、background-positionを右や下から基準で指定する方法を紹介します。 bac...
CSS

CSSだけで背景画像を暗くしたりimg画像を暗くする方法!

今回はCSSのbackground-imageを使って表示した背景画像や、<img>タグを使って表示した画像を暗くする方法を紹介...
CSS

【Sass】@at-rootと@extendの便利な使い方!BEM設計を崩さずに@extendする

今回は何かと敬遠されがちなSassの@extendと、忘れられてそうで案外そうでもない@at-rootの便利な使い方を紹介します。 本...
CSS

【CSS】background-attachment:fixedがスマホだけ効かない原因と対処法

background-attachment: fixed;を使って背景画像を固定しようとしていました。 しかし、PCではうまく固定され...
CSS

【CSS】position: fixedが効かない場合の原因と対処法

「position: fixed;を使って画面に固定したいのになぜかできない...absoluteみたいな配置になってしまう」という現象でハ...
CSS

CSSだけでボタン風のラジオボタンを作る方法【クリックで色が変わる】

今回はクリック時に色が変わるボタン風のラジオボタンをCSSだけで作る方法を紹介します。 サンプルはこんな感じ↓(クリックで色が変わりま...
CSS

PCとスマホで別のCSSを読み込む(CSSを切り替える)最も簡単な方法

「PCでは『pc_style.css』を読み込みたいけど、スマホでは『sp_style.css』を読み込みたい...」みたいな感じで、PCと...