カテゴリー︎： 【CSS】
webページの改修依頼で、CSSを修正してはまったこと。
まずは、htmlをいじりCSSを修正したんだけど
なぜか、修正範囲が反映されな。。。
htmlのソースをチェックしたところ
結局、修正したcssは後に読み込まれるデータにより
上書きされていたことが判明。。。
初歩的なミスでした。
近年レスポンシブデザインが主流となり、cssも複雑になっていき
あれこれ、ごにょごにょcss書いているのですが、
ちょうどいい機会なので【CSSの継承について】おさらいする。
| 優先順位 | セレクタ | 記述例 |
| 1 |
!important記述 「!important」はのついたスタイルは詳細度に関係なく最優先されます。上書きができない時には、どこかに記述している可能性があります。 「!important」を頻繁に使用するということは、CSSの設計を破綻させる可能性があるため、使わないほうがよいですが、あくまでも「!important」は最後に使う切り札のようなものです。 しかし、「!important」の使い方次第で制作側の思いどうりにCSSをコントロールできるので、使いすぎには注意してCSS設計を心がけましょう。
|
body{ font-size:100% !important; } |
| 2 |
インラインスタイルシート記述 HTMLの中に直接、スタイルを記述することです。 本来、HTMLは文章構造を記述するもので、CSSは外部ファイルとして読み込むのが推奨されています。 またインラインで書くと、HTMLをいじることになり編集作業にも手間がかかるので、できれば避けたい記述方法です。 しかし、HTMLメールなどは、外部ファイルを読み込めないので、インラインスタイルシート記述で記述するのが普通です。 |
<p style="font-size:20px;">HTML内に直接記述</p> |
| 3 |
IDセレクタ記述 IDとは１ページで一回だけ使用できるもなので、詳細度が高いです。 IDを１ページで２回以上使ったとしても、Webページ上（見た目）変化はないですが、HTMLの文法上では間違いということです。 |
#main {
font-size:30px;
}
|
| 4 |
クラスセレクタ記述 classセレクタはIDセレクタより詳細度は低いが、１ページ内で何度も使用することができます。 |
.font_color {
color:green;
}
|
| 4 |
属性セレクタ記述 属性セレクタとは、特定の属性・属性値を持つ指定要素です。 |
[class="font_color"] {
color:red;
} a[target="_blank"] {color:blue;}
|
| 4 |
擬似クラス記述 未訪問のリンク⇒ :link 訪問済のリンク⇒ :visited カーソルが乗っている要素⇒ :hover クリック中の要素⇒ :active フォーカスされている要素⇒ :focus などがあります。 |
a:link {color:blue;} a:visited {color:red;} a:hover {color:pink;} a:active {color:green;} input:focus {background:gold;}
|
| 5 |
要素型セレクタ 要素名で指定した要素のことを指します。 h1要素、h2要素 , p要素, span要素。。。などです。 |
h1 {
color:black;
font-size:15px;
}
p {
color:white;
font-size:14px;
}
|
5 |
擬似要素 擬似要素セレクタとは、要素の直前と直後のことです。 または、要素の最初の一行、要素の最初の一文字のこと。
|
blockquote:before {
content: "【";
}
blockquote:after {
content: "】";
} p:first-line {color:blue;} p:first-letter {color:blue;} |
6 |
ユニバーサルセレクタ
ユニバーサルセレクタは全ての要素に対して使われます。webブラウザスタイルをリセット(初期化)できます。 詳細度は最も低いので一番最初に設定して、後から他のセレクタで上書きする使い方が一般的です。 |
* {
margin: 0;
padding: 0;
}
|