CSSをカスタマイズしようと思ったときに賢威ではよく「＠」や「＞」を使います。

これ、CSSの標準機能なのですが、これらの意味がわからないとカスタマイズしようにもできませんので、ここでしっかり理解しておきましょう。

「＠」の意味

”＠（アットマーク）”は文字コードを指定したり表示されている画面サイズにより適用するCSSを変えたりと大変便利なやつです。

@charset

@charset “Shift_JIS”; と書けばこのファイルはShift_JISで書かれていますよとサーバに教えることができます。

文字化け対策でCSSファイルの１行目に必ず書きます。コメントなどを記載した場合でもこめんとよりも先に記載しないと意味ないです。（賢威を使っている人は特にここは書き換える必要はないでしょう）

@media

メディア対応の指定をします。

たとえば、

@media screen, print {
h1 {
　　font-size: 14pt;
　}
}

と書けば、画面表示と印刷時の両方のH１のフォントサイズを14ptで表示と印字ができます。

また、

@media only screen and (max-width :1200px)
{
ここにCSSを記述します
}

なんて書くと、表示している画面が1200pxの場合にのみ適用するCSSを記述できます。

PCでウィンドウサイズを変更したり、スマホで表示された場合にのみ適用するなどに使います（便利）

昨今のグーグル先生の「モバイルフレンドリー」対策には必須のカスタマイズといえます。

@import

@importをしようして他のCSSファイルを読み込めます。
使い方はHTMLファイルで間に記述します。

<head>
省略
<style type="text/css">
<!--
　@import url(CSSファイルへのURL);
-->
</style>
</head>

「>」の意味

「＞」は直下セレクタや子セレクタと呼ばれるやつで、たとえば

/*CSS*/

div>p {
color:blue;
}

と書くと、divの中のpだけが文字色が青になります。

<div>
<p>ここの文字が青になります</p>
<span>
<p>ここは適用されません</p>
</span>
</div>

１つ目の

~

の文字は青になりますが、２つ目は適用されずデフォルトの黒のままになる理由は「>」が直下セレクタと呼ばれていることを思い出していただければ理解できるかと思います。

あくまで、div直下にあるpタグだけに適用されるのが

div>p{~}

という書き方です。

上の例で、１つ目のｐタグと２つ目のｐタグの両方に適用させたい場合はどう書けばよいのかというと

div p {~}

こう書けばdivの中の全てのpタグに適用させることができます。