CSS aタグでhref属性が”.com”で終わるものだけ装飾する
a[href$=".com"] { color: red; } とコーディングすると、href属性が”.com”で終わるaタグのみ、文字色を赤にすることができます。 pointは、「$=」 参考にしたYouTube
2020年
CSS aタグでhref属性に”google”が含まれるものだけ装飾する
a[href*="google"] { color: red; } とコーディングすると、aタグでhref属性に”google”が含まれるものだけ文字色を赤にすることができます。 ポイントは「*」 参考にしたYouTube
CSS aタグでhref属性が”http://www”で始まるものだけ装飾する
a[href^="https://www"] { color: red; } とコーディングすると、aタグでhref属性が”http://www”で始まるものだけ文字色を赤にすることができます。 pointは「^=」 参考にしたYouTube
- 2020.08.14
aタグでhref=”https://google.com”となっているものにCSSを当てる
aタグでhref属性に特定の値を持っているものにだけCSSを当てることができます。 たとえば、 a[href="https://google.com"] { color: blueviolet; } とコーディングすると、 aタグでhref=”https://google.com”となっているものにだけCSSを当てることができます。 参考にしたYouTube
- 2020.08.14
CSS 特定の属性を持っているものだけにCSSを当てる方法
CSSでは特定の属性を持っているものにだけCSSを適用することができます。 たとえば、 a[href] { color: red; } とCSSを書くと、aタグでhref属性を持っているものだけ、CSS（文字色を赤）を当てることができます。 参照したYouTube
- 2020.08.13
2つのクラスがついているタグのみにCSSを適用する方法
2つのクラスがついているタグのみにCSSを当てることも可能です。 たとえば、 .title.big { background-color:pink; } この場合、titleとbigという2つのクラスが付されているところだけ、背景色をピンクにするCSSが適用されます。 index.html style.css ブラウザの表示 参考にしたYouTube
- 2020.08.13
- background-color, body,
CSSでページ全体の背景色を指定する方法 body background-color
CSSでページ全体の背景色を指定するには、bodyタグにbackground-colorをつけます。 body { background-color: pink; } 参考にしたYouTube
CSS widthをcalcを使って指定する方法 width: calc(100% / 3) etc.
CSSでwidthを指定するとき、calcを使って計算された値にすることができます。 たとえば、 width: calc(100% /2 ) と指定すると、ブラウザの横幅の半分にすることができます。 ブラウザの表示↓ width: calc(100% / 3) と指定すると、ブラウザの横幅の1/3の幅にすることができます。 ブラウザの表示↓ ちなみに、MDNリファレンス […]
CSS font-sizeを単位 rem で指定する方法
font-sizeを指定するとき、remという単位を使うことができます。 これは、HTML要素のサイズ（既定は16px）の何倍かという単位です。 たとえば、5remは80pxです。 5rem = HTML要素のサイズ 16px × 5 = 80px となります。 5remの表示（Google Chrome） 3rem は 48pxです。 3rem = 16px × […]
HTMLにCSSを適用する方法3つ
HTMLにCSSを適用する方法は3つあります。 ・外部スタイルシート ・内部スタイルシート ・インラインスタイル 外部スタイルシート これが最もよく使われる方法です。 <head>タグ内に<link>タグを追加し、CSSを読み込みます。 <link rel=”stylesheet” href=”style.css […]