Web制作

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そのものの実装方法についてはこちらの記事を参照下さい。 【2022最新】スライダープラグイン Swi...
Mac

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

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