【基本編】占ツクCSS作成で知っておくと便利なこと

 

占ツクCSSは、コピー＆ペーストだけで作るなら理解しなくてもデザインを組めます。

けれど、コードの意味が解った方が、より作りやすくなるし、複雑で高度なデザインを作れるようになります。

CSSとは？

CSSとは「Cascading Style Sheets」の略です。

日本語でスタイルシートとも呼ばれます。

サイトのデザインをカスタマイズするための言語です。

CSSの基本形

セレクタ{
プロパティ: 値;
}

この表を見ながら、実際にCSSの意味を考えてみましょう。

【例】
body{
background-color: #000000;
color: #ffffff;
}

これを訳すと、こうなります。

全体の{
背景色を: 黒色に;
文字色を: 白色に;
}

CSSの全てのカッコが、このように変える場所を指定する仕組みになっています。

セレクタについては、HTMLという言語と組み合わせて考えることになるので、別でHTMLについての解説も書く予定です。

CSSの書く順番

CSSの書く順番には、意味があります。

body{
background-color: #ffffff; /* 白背景 */
color: #000000; /* 黒文字：反映されない */
}
body{
color: #888888; /* 灰色文字：反映される */
}

このように、下に書いた方のコードが優先されます。

一般的には、最初に全体の広い範囲を設定して、下に個別の詳細設定をしていきます。

最初に個別の設定をすると、後から全体の設定をしたときに、全体の設定が優先されてしまいます。

CSSのコメント

/* これはコメントです */

/* ここで囲まれた文字は
CSSに影響を与えません。
改行もできます。 */

このように/と*で囲まれた文字は、CSSの中で無視されます。

これはコメントと呼ばれています。

占ツクCSSの仕様

占ツクのCSSは、一般的なCSSと少し違う部分があります。

元々のCSS知識がない人には影響がないと思いますが、知識がある人にとってはつまずくポイントになるかもしれません。

• クォートが使えない
• 疑似要素がが使えない

他にもあるかと思いますが、今のところ確認しているのはこの２点です。

なんのこっちゃ、と思った人には影響がないので、スルーで大丈夫です。