CSS

CSS

【CSS】z-indexやabsoluteを使わずに見出しの左右に線を入れる方法

z-indexやabsoluteを使わずに見出しの左右に線を入れる方法をご紹介しています。
CSS

【CSS】一番シンプルかつ少ない工数で確実に画面中央寄せにしたままテキストを左揃えにする方法

一番シンプルかつ少ない手数で画面中央寄せ、かつテキストを左寄せにする方法
CSS

SCSSにおけるアンパサンド(&)の意味と使い方

SCSSでアンパサンド(&)は必須レベルで使いますが、使い方をそもそも知らないと意図した通りにスタイルが反映してくれないことが多々ある経験をした人は多いかと思いますので、そもそもの意味と基本的な使い方についてご紹介したいと思います。 ...
CSS

【CSS】ボタンやリンクをクリックしている時に色変化などさせる方法

ボタンやリンクにホバーした時だけでなく、クリックしている時も背景色や文字の色などを変化させる方法をご紹介します。 結論としては:activeという擬似クラスを使います。 ボタンやリンクをクリックしている時に色変化などさせる方法...
CSS

【CSS】擬似要素の中身を可変にする

擬似要素の中身を柔軟に変えたい場合のやり方をご紹介します。 擬似要素の中身を可変にする方法 まずは例をご覧ください。 See the Pen Untitled by Takuma (@takushin0202...
CSS

【CSS】placeholderの色とサイズを変更する

placeholderの色の変更 ::placeholder、とだけ指定すれば変更ができます。 HTML <input type="text" placeholder="氏名"> CSS ::pl...
CSS

【CSS】transformで複数の値を指定する時の正しい書き方

transformでrotateやtranslateを複数の値を指定する時に、正しい書き方をしなかったために挙動がおかしくなってしまった経験のある人はたくさんいるかと思い、ここのその正しい書き方を掲載しておきます。 transfor...
CSS

【CSS】input要素に擬似要素をつけたい時の対処法

コンタクトフォームでよく使うinput要素に擬似要素を使用したいと思ったのですが、結論から言うとinput要素のような置換要素(終了タグがない要素)には擬似要素は使えません。 そんな場合の対処法をご紹介します。 input要素...
CSS

【CSS】Selectの矢印を擬似要素で作成した時、クリックしても反応しない場合の解決法

セレクト要素に対して擬似要素などで矢印や三角などを自分で用意した時、その矢印をクリックしてもセレクトの選択メニューが開かずに困ったので、解決法をご紹介します。 ちなみにselectタグそのものには擬似要素が使えないので、今回のお話は...
CSS

【CSS】transitionでプロパティを複数指定したい時

transitionはallで済ますことが多いですが、明確にどのプロパティを変更したいか複数指定する時の書き方をご紹介します。 解決策 transition: color .3s, background-color .3s; ...
タイトルとURLをコピーしました