CSS

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と...
CSS

Sassを使うメリットとは?使い方と本当に必要な5つの機能を解説

今回はCSSを拡張した言語「Sass」について解説します。 Sassって何? どんなメリットがあるの? 使い方は?...
CSS

gulpでSassが自動コンパイル(watch)できないときの対処法

gulpをインストールしてSassをwatchで自動コンパイルしようとしていたのですが、エラーが出てうまくできない、調べても解決法がなかなか...
CSS

【クリック率が上がる!】AFFINGER風の光るボタンをCSSだけで作る方法

今回はWordPressテーマ「AFFINGER5」風のキラッと光るボタンをCSSだけで作る方法を紹介します。 他にもいくつかパターン...
CSS

CSSだけで三角形を作る方法と、その原理を解説してみた【使い所も紹介】

今回はCSSだけで三角形を作る方法と、なぜ三角形が作れるのかという原理を解説します。 最後に三角形を使い道も紹介します。 CSS...