閉じる

基本のCSSの書き方

CSSとは?

CSS(スタイルシート)について簡単に説明します。

CSS(Cascading Style Sheets)とは、HTMLページの文字の色や大きさ、レイアウト、デザインなどスタイルを定義するものです。

他には、モバイル等、多くのデバイスや画面サイズの表示切り替えも行えます。
スタイルシートとも呼ばれています。

CSSを簡単に言うと、

ホームページの表示、見栄えを良くするものです。

HTMLの各要素に対して、デザイン要素を適用する際に使用します。

CSSの記載方法

ここでは一般的なCSSを元に、書き方、基本設定方法を紹介致します。

セレクター

上記は、h2タグと.sampleの記載例です。

上は、

h2タグに、margin(マージン)を上下左右10px、

設定してあります。

下は、

sampleというclass(クラス)に、#ff0000のカラー

を設定しています。

CSSの書き方と要素

ホームページの表示を整えるCSSですが、3つの要素から成り立ちます。

 

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

上記のh2を例にすると、

h2はセレクターといいます。

h2{ }内の、

marginをプロパティ、10pxを値(設定値の事)と言います。

同様に、

.sample{ }内の、

.sampleはセレクター、colorをプロパティ、#ff0000を値(設定値の事)と言います。

プロパティ–は、どのような内容の装飾を設定するか、値 は、 どの程度の値を設定するかと覚えればよいでしょう。

CSSの書き方の注意点

CSSの書き方の注意点ですが、

まず、

プロパティと値は、{}で囲みます。

次に、

プロパティと値の間に、:を記載し、

必ず、

値の最後に、;を付けます。

初めての方は、この;を付けないで反映されないケースが良くみられます。

注意しましよう。

CSSプロパティはいくつでも設定できる

CSSのセレクターには、プロパティはいくつでも設定できます。

先ほどの、h2タグは、marginしか設定されていませんでしたが、フォントサイズを21pxに大きくしたい場合は追記します。

h2 {
margin:10px ;
font-size:21px;
}

プロパティごとに改行するルールはありません。

一行にまとめてもOKです!

h2 { margin:10px ; font-size:21px;}

ページ上部へ戻る