CSS

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

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

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

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

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

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

【Web制作】selectの表示を「選択してください」に変更する方法

コンタクトフォームで使われるselectの初期値を「選択してください」に変更する方法のご紹介です。 selectの表示を「選択してください」に変更する方法 結論としてはoptionタグの中にhidden属性を入れることです。 ...
CSS

【CSS】 プラス「+」記号の意味と使い方

CSS(またはSass)における「+」(プラス)記号の意味と使い方などについて解説してみます。 CSSにおけるプラス(+)記号とは何か? プラス(+)記号は「隣接セレクタ」と呼ばれるセレクタの一つです。 その名の通り、「...
Mac

小さくなったデベロッパツールの画面を元に戻すMacのショートカットキー

デベロッパツールが意図せず小さくなってしまって、全然元に戻らず焦りましたが、無事に元のサイズに戻すことができましたので解決法を掲載しておきます。 デベロッパーツールの文字サイズの拡大と縮小(Macの場合) 拡大:command...
CSS

【CSS】ヘッダーのナビメニューを上下中央寄せにする方法

ヘッダーのナビメニューを上下中央寄せにする方法をご紹介します。 ナビメニューに限らずとある要素の左右中央寄せはできても、上下中央寄せとなると少し難易度が高まります。 この記事ではヘッダーのナビメニューを作るときによく使われる方...
CSS

【Swiper】ページネーションのカスタマイズ方法

Swiperのデフォルトのページネーションは前後のスライド矢印のようにカスタマイズ可能です。 この記事ではごくごく基本的なカスタマイズ方法をご紹介します。 なおSwiperそのものの実装方法や使い方については以下の記事を参照下...
CSS

【Swiper】前後のスライド矢印のカスタマイズ方法

Swiperでデフォルトで用意された前後のスライド矢印をカスタマイズして変更する方法をご紹介します。 なお基本的なSwiperそのものの実装方法についてはこちらの記事を参照下さい。 【2022最新】スライダープラグイン Swi...
Mac

【2022】【Big Sur】Macで「開発元を検証できないため開けません」のアプリを開く方法

Macで「開発元を検証できないため開けません。」と警告するダイアログが出た時の対処法を紹介します。 解決法 解決法は二種類です。 「Controlキー + クリック」でメニューを開き、メニューの中の「開く」を選択...
タイトルとURLをコピーしました