CSSの記号一覧 #.>+~$@など 23種の記号の意味を徹底解説！

CSSファイルを見ると様々な記号が出てきます。記号一つ違うだけでまったく意味が変わり、崩れの元です。

.ピリオド、#シャープ、>大なり、+プラス、~チルダ、$ドル、@アットなど、CSSに登場する23種類の記号の意味を徹底的に解説します！

CSSセレクタで使うことが多いので下記も読んでおくと理解度アップですよ！

*アスタリスク

すべての要素を示すセレクタ

*{font-size: 85%;}

a,div,h1,body,span,p,input,ul,liなどなど、すべてのセレクタを一度に指定することができます。

ただし「CSSが効かない！」と勘違いするもとになるので、初心者のうちは使わないことをオススメします。

属性セレクタにて「～を含む」とき

a[href*="map"]{width:100%;}

「href属性内にmapを含んでいるaタグに指定したい！」というときに使います。

calcのかけ算

div{width: calc(10% * 3);}

数値を指定するときに四則演算できるようになるcalcにおいて「×」を表す記号です。

コメントアウト

/*ここに自由に記載*/

CSS内で「/*」と「*/」の間に書いた文字はないものとして扱われます。これをコメントアウトと呼びます。

このコメントアウトはメモやタイトルとして使ってもいいですし、CSSを一時的に効かなくさせるときにも使います。

ただし、コメントアウトのテキストもCSSの容量を増やすため使いすぎには注意です。

同様にhtmlのコメントアウトは<!--コメントアウト-->であり、CSSのコメントアウトとは異なるため注意しましょう。

.ピリオド、ドット

classセレクタ

.example{margin: 10px;}

classを指定することができます。htmlのclass属性で指定したワードとセットで使います。

上記の場合は「class="example"」を指定しています。

小数点

div{opacity: .5;}

数値の値として小数点を表します。1未満の数値の場合「0.5」のように書きますが、この「0」を省略して「.5」と書くことができます。

URLのパス

div{background: url(../images/○○);}

htmlでも使うパスです。「../」点2つは一つ上のファイルに上がることを指します。

「./」点1つだと上がらず同列のファイルを指すので注意です。

ファイル名と拡張子をつなぐ

div{background: url(images/top.jpg);}

ファイル名.拡張子のようになります。

#ハッシュ（シャープ）

idセレクタ

#example{margin: 10px;}

idを指定することができます。htmlのid属性で指定したワードとセットで使います。

上記の場合は「id="example"」を指定しています。

色を示す16進数

p{color: #333;}

色を指定する方法の一つに0~9,A~Fの16字を6つ利用して指定する方法があります。このとき頭に#をつけます。

ちなみに6つの文字の前半と後半の3文字が同じとき省略し3文字にできます。

空白、スペース

子孫セレクタ

ul li{line-height: 1;}

親以上に「ul」をもつ「li」のように、子孫要素を示します。

liの中にliがあった場合、そのliにもCSSが効きます。

CSSの値の連続指定

div{margin: 10px 20px 30px 40px;}

CSSによっては複数のCSSを一行で指定することができます。そのとき値の間に空白をいれます。空白をいれなくも効くことがありますが思わぬ崩れを起こす場合がありますのできちんと空白をいれましょう。

margin-top,margin-right、margin-bottom,margin-leftはmarginで1行で指定できます。

その他

CSSにおいて空白は大きな意味があり、なんとなくでつけると意味が変わってきます。

その一方で意味がかわらない場合もあります。

わからないうちはくっつけるものはくっつける、離すものは離すと覚えておきましょう。

>大なり、グレーターザン

直下の子セレクタ

ul>li{line-height: 1;}

親に「ul」をもつ直下の子要素「li」のように、直下の子要素を示します。

liの中にliがあった場合、そのliにはCSSが効きません。

ちなみに「<（小なり）」は使えません。

+プラス

隣接している唯一の弟セレクタ

h2 + p{margin-top: 0;}

兄が「h2」で、そのすぐ下の「p」のように、隣接しているひとつの弟を示します。

h2とpのあいだに他のタグがある場合、pにCSSは効きません。

またh2のpの次のpにも効きません。

calcの足し算

div{width: calc(50% + 10px);}

数値を指定するときに四則演算できるようになるcalcにおいて「+」を表す記号です。

~波線、チルダ

後にある弟セレクタ

h2 ~ p{margin-top: 0;}

兄が「h2」で、それ以降の「p」すべてのように、以降の弟を示します。

h2とpのあいだに他のタグがあっても、pにCSSが効きます。

またh2のpの次のpにも効きます。

:コロン

擬似要素

div::before{content: "○○";}

疑似要素はそのタグそのものではなく、その前後や一部を変化させる要素です。

よく使うのは「::before」「::after」です。要素の前後にhtmlを追加させるようなことができます。

擬似要素は「::」コロンが2つつきます。一応コロン一つでも機能しますが、2つが正式なものです。

擬似クラス

li:first-child{margin-top: 0;}

疑似クラスは「一番最後なら」「マウスが乗っていたら」のように、セレクタに条件を指定するものです。

こちらは「:」コロン一つです。

CSSと値をつなぐ

div{margin: 0;}

CSSを指定するには「CSS:値」のように左にCSS、右に値、それの区切りとしてコロンを使います。

URLの一部

div{background: url(https://○○);}

URLを絶対パスで書くとき「https」のあとにつきます。

;セミコロン

一つのCSSの終わり

div{margin: 0;}

CSSを指定するには「CSS:値;」のように値の最後にセミコロンをつけます。これで一つのCSSの指定が終わりということです。

改行では終わらないので注意です。

ちなみに最後のCSSの後ろにはセミコロンがなくても機能しますが、CSSを追加するときのミスにつながる可能性があるので、セミコロンは必ずつけるクセをつけましょう。

,コンマ（カンマ）

CSSセレクタにて複数指定の区切り

h1,h2,h3{font-weight: normal;}

CSSでは同じCSSの値を指定するとき、一度に複数のセレクタに指定できます。

このときコンマで区切ります。

一番最後にコンマがつくと効かないので注意です。

空白で区切っては「子孫要素の指定」と意味が変わります。

同様にメディアクエリの条件でも区切ることがあります。

rgb指定の区切り

div{background: rgb(242,151,151);}

色の指定の仕方にrgbやrgbaで指定する方法があります。

このときの区切りは空白ではなくコンマです。

font-familyの複数指定の区切り

body{font-family: "メイリオ", Meiryo, "sans-serif";}

font-familyでは複数指定することができます。端末によっては表示できないフォントもありうるためです。

頭のほうが優先され、なければ次、次となります。

同様にbackgroudを複数指定するときの区切りとしてコンマを使います。

()カッコ

擬似クラスで値の指定

li:nth-child(2n){margin-top: 0;}

疑似クラスにはカッコがありその中にさらに条件となる数式などを記載できるものがあります。

上記の場合では2の倍数ごとにCSSを指定できます。

メディアクエリの条件を囲う

 @media (min-width:800px){}

ブラウザの幅を条件とするメディアクエリの場合は、その条件をカッコで囲います。

backgroundのurl指定

div{background: url(images/○○);}

backgroundではurlをカッコで囲います。

カラーコードrgbの指定

div{background: rgb(242,151,151);}

色をrgbで指定する場合、その数値をカッコで囲います。

calcの指定

div{width: calc(100% - 30px);}

数値を四則演算できるcalcではカッコ内で計算します。このカッコ内に「;」セミコロンなどはいれてはいけません。

{}中カッコ

CSSセレクタに対するCSS指示を囲う

div{margin: 0;}

中カッコ内にあるCSSがセレクタに対して効きます。

セレクタに対するCSSは複数指定することが可能です。

メディアクエリでも同様に中カッコを使います。

セレクタのカッコと勘違いしないようにインデントをつけることをオススメします。

[]大カッコ

属性セレクタの条件を囲う

a[href]{color: red;}

「hrefがあるa」のように指定できるのが属性セレクタです。その条件となる部分を大カッコで囲います。

=イコール

属性セレクタにてhtml属性と値をつなぐ

input[type="text"]{margin:0;}

「typeがtextのinput」のように指定できるのが属性セレクタです。

html属性とその値をつなぎます。

"ダブルクォーテーション

'シングルクォーテーションでも同じ意味ですが、自分でどちらを使うか決めておいた方がいいでしょう。

属性セレクタにて値を囲う

input[type="text"]{margin:0;}

ダブルクォーテーションで囲うのは値（右側）です。html属性（左側）ではないので注意です。

font-familyやcontentの全角値を囲う

body{font-family: "メイリオ", Meiryo, "sans-serif";}
div::before{content: "前へ";}

CSS内で全角が出てきたらダブルクォーテーションで囲むと覚えましょう。

ちなみに半角英数なら囲まなくてもOKです。

^キャレット

属性セレクタにて「～から始まる」とき

a[href^="https://"]{color: red;}

指定したhtml属性の値の頭が一致しているとき機能します。

上記の場合は「href属性がhttps://で始まっているa」という指定です。

これでhttp://を省いたり、絶対パスを認識させるということも可能です。

$ドル

属性セレクタにて「～で終わる」とき

a[href$="pdf"]{color: red;}

指定したhtml属性の値の最後が一致しているとき機能します。

上記の場合は「href属性がpdfで終わるa」という指定です。

拡張子を判定したいときに便利です。

@アットマーク

メディアクエリ

@media (min-width:800px){}
@print{}

メディアクエリはCSSにおける条件の指定です。

ブラウザ幅が一定以下のとき、印刷時など指定できます。

文字エンコーディング

@charset "utf-8";

CSSファイルの先頭に記載し、このファイルはutf-8で記載することを宣言します。

文字化けの回避にもつながります。

!エクスクラメーションマーク、びっくりマーク

important

div{margin: 0 !important;}

CSSには優先度がありますが、その優先度を最大にするものです。

/スラッシュ

backgroundを一行で書く時のbackground-sizeの手前

div{background: url(img.jpg) no-repeat center center / cover}

backgroundはbackgroundに関する複数のCSSを1行で指定できます。

他のCSSでは空白であけますが、background-sizeだけは手前にスラッシュを入れて区切ります。

calcのわり算

div{width: calc(100% / 3);}

数値を指定するときに四則演算できるようになるcalcにおいて「÷」を表す記号です。

URLの一部

div{background: url(../images/○○);}

URLにおいてスラッシュはフォルダやファイルの区切りを表します。

%パーセント

単位

div{width: 100%}

単位として使うもので親を100％として子のサイズの割合を指定します。

-マイナス、ハイフン

マイナス値

div{margin: 10px -10px;}

CSSによってはマイナス値を指定することができます。

CSSや値の名前の一部

div{justify-content: space-between;}

CSSや値の名前の一部にはハイフンがしばしば書かれます。

空白だと意味が変わりますし、つなげると読みづらいためハイフンでつながれています。

calcのひき算

div{width: calc(100% - 30px);}

数値を指定するときに四則演算できるようになるcalcにおいて「－」を表す記号です。

任意のクラス名の一部

.aaa-1{margin: 0;}

クラス名は半角英数のほかにハイフン、アンダーバーが使えます。空白をいれると意味が変わるため空白代わりにハイフンを使うことがあります。

_アンダーバー

任意のクラス名の一部

.bbb_2{margin: 0;}

クラス名は半角英数のほかにハイフン、アンダーバーが使えます。空白をいれると意味が変わるため空白代わりにアンダーバーを使うことがあります。

まとめ

量が多いためまとめません。ページ一番上の目次で確認してください。

記号や空白にはそれぞれ意味があります。

これらの意味をしっかり理解してCSSを記載していきましょう。

以上、CSSの記号23種を解説しました。