harada
[PhpStorm/WebStorm] Emmet記法で簡単にナンバリングしたダミー要素を生成する
Emmet記法では$を利用することで、自動でナンバリングすることができます。 draggableというclassのdivに囲まれた要素を10個作ってナンバリングさせる .draggable{テスト$}*10 ↓ [Tab…Sassの「@at-root」を利用して上のclass名を参照しながら下のclass名を同じ位置にする
Sassの「@at-root」と「#{&}」を利用することで、記述した上のclass名を参照しつつも、下のclass名を上と同じ位置にするということができます。・・・とてもややこしいですね。 実際の展開例をご紹介…Sassの「&」を利用して親クラスを便利に参照する（3）
#{&}のように記述することで、親クラス名を引っ張ってきて小クラス名をつけることもできます。 .scss ファイル .sample { #{&}Child { background:red; } } ↓ …Sassの「&」を利用して親クラスを便利に参照する（2）
前回はSassファイルで「&」を利用して、親クラスと&以下に記述したクラスを繋ぐ方法をご紹介しました。 今回は、囲っているクラスの上位に新しいクラスを指定して記述する方法をご紹介します。 .scss ファ…Sassの「&」を利用して親クラスを便利に参照する（1）
Sassのファイルで利用する「&」はこれまで主に下記のように親クラスと繋ぐ役割として利用してきたのですが、親クラスの代わりとして実はもっと様々なことに利用できるようです。 今回は代表的なセレクタの連結として利用す…2つの要素の関係によって特定の指定をするセレクタ「>」「+」「~」
classに限らず要素そのものを指定してもいいのですが、ここでは以下のclass指定をしたと仮定して説明します。 <div class=”sampleA”> <div class=”sampleB”&g…CSSだけでオープン・クローズできるアコーディオンを表示する
jQueryを利用せずとも、CSSだけでクリックで開け閉めできるアコーディオン表示を実現できるようです。 CSS .listAccordion label { background: #f6f6f6; padding: …