CSS

CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

超簡単！CSSで円を作る方法と中央揃えで中に文字を書く方法

今回はCSSで円を作る方法と、円の中に中央揃えで文字を書く方法を紹介します。 CSSで円を作る方法 円は<div>タ...
2019.04.27
CSS
CSS

【画像で解説】WordPressでグローバルメニューを設置する方法

今回はWordPressでグローバルメニューを設置する方法を紹介します。 記事後半では各メニューの並び替えと削除の方法、メニューを入れ...
2019.04.18
CSS
CSS

【CSSだけ】counterを使ってサクッとカウンターを作る方法

今回はCSSでサクッとカウンターを作る方法を紹介します。<ol>は使いません。 慣れると20秒くらいで作れるようになります...
2019.04.15
CSS
CSS

【jQuery不要】CSSだけ！途中から追従するスティッキーヘッダーを簡単に作る方法（サンプル付）

スティッキーヘッダーはjQueryで実装するのが定番ですが、知らない間にCSSだけでも簡単に作れるようになっていたみたいなので紹介します。 ...
2019.04.09
CSS
CSS

【レスポンシブ対応】HTMLとCSSで作る！はてなブログのグローバルメニュー10選+（調整可能）

今回ははてなブロガーに向けて、HTMLとCSSだけで作れるグローバルメニューのデザインを10+個紹介します。全部コピペOKです！ レス...
2019.04.01
CSS
CSS

CSSのnth-of-type(n)やnth-child(n)を使って”特定の範囲内だけ”指定する方法

nth-of-type(n)やnth-child(n)は「nの倍数番目」や「n番目以降」の要素を指定する際に便利ですが、今回は「特定の範囲内...
2019.01.22
CSS