サイトを構築していて、特定のh2だけにクラスを指定して、見た目を変えたいときにどのように設定すればいいのか、わからなかったので調べてみた。
誤: .article h2 .title
正: .article h2.title
普段なら、クラスの間に半角スペースを入れて記述しているのですが、セレクタの後に続けてクラスを記述すると、そのセレクタだけにCSSが適用されます。
これがわからず、なぜCSSが効かないのか、
随分と手間取ってしまいました。(汗)
WEBサイト制作で調べたことのメモ
投稿日:
サイトを構築していて、特定のh2だけにクラスを指定して、見た目を変えたいときにどのように設定すればいいのか、わからなかったので調べてみた。
誤: .article h2 .title
正: .article h2.title
普段なら、クラスの間に半角スペースを入れて記述しているのですが、セレクタの後に続けてクラスを記述すると、そのセレクタだけにCSSが適用されます。
これがわからず、なぜCSSが効かないのか、
随分と手間取ってしまいました。(汗)
本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。
執筆者:kobato
関連記事
最後の要素だけスタイルを適用させたくないときには、疑似要素を使って指定するのが定番。CSSにもいろんな書き方があるけど、便利な方法を見つけたのでメモしておく。 兄弟要素の最後の要素だけスタイルを適用し …
今からレスポンシブサイトを作る時のメディアクエリとブレイクポイント【2017年度版】
新しくサイトを作ることになった。 もちろん、レスポンシブ対応で。 そこで改めて、ブレイクポイントを考えてみことにした。 Googleでは「モバイルファースト」を推奨している。さらに「モバイルファースト …
文字にグラデーションカラーをつけるといえば、イラストレーターなどで画像を用意してからサイト内に配置というのがお約束だったんだけど、CSSだけで実現できるようになりました。 先日の勉強会で習ったばかりの …
floatの解除方法はいくつかありますが、 clearfixを使う方法が1番使い勝手がよいのでメモ。 floatを設定すると、要素が浮くことになり、 高さが消失してしまいます。 きちんとfloatを解 …
『IcoMoon』のWeb-FontをWebページに実装する方法
オリジナルのアイコンフォントを簡単につくれる『IcoMoon』。 自作のSVGアイコンづくりで活用していたけど、 Web-fontも使えるので実装の方法を確認しておく。 『IcoMoon』へアクセスし …
2024/01/16
CSSが更新されない!CSSのキャッシュを自動で読み直すWEBサイト更新テクニック
2023/08/04
CSS★疑似要素にFontawesomeのアイコンフォントを表示させるには…