CSS

CSS

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

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

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

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

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

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

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

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

レスポンシブにおいて改行タグbrをCSSで無効にするやり方

PC表示の時に使用していた<br>タグをスマホなどのレスポンシブ表示の時には使いたくない場合、CSSで<br>を無効にすることができます。 CSSで無効にするコード 以下のように記述します。 br...
CSS

CodePenのCSSでExpected newlineというエラーが出た時

CodePenでCSS(Scss構文)を書いていると、 というエラーが出て全くコンパイルされないことがありました。 調べてみたら、CSSのCSS Preprocessor設定でSCSSを選択するべきところをSassを選...
タイトルとURLをコピーしました