コーディング

CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【CSS】hoverしたら画像をはみ出さずに拡大させる方法

画像をhoverしたら拡大させる方法がありますが、ボックスの外にはみ出さずに拡大させる方法について書いていきます。 ポイント 一番のポイントは、親要素にoverflowを指定し、値をhiddenにするかしないかです。これにより...
CSS

CSSのnth-child(n)とnth-of-type(n)の違いと使い方

CSSで使うnth-child(n)とnth-of-type(n)は共に「n番目の要素」を指定する、という「使い方」については同じですが、n番目の要素を取得する際の「要素の数え方」においては明確な違いがあります。 ちなみに(n)のn...
CSS

CSSファイルに文字コードUTF-8を設定する方法

CSSファイルに文字コードUTF-8を設定する方法 CSS ファイルに文字コードUTF-8を設定するには、CSSファイルの先頭に @charset を記述し、その後にコードの種類であるUTF-8を指定します。書き方は以下のように記述...
タイトルとURLをコピーしました