CSSを編集するときの書き方入門
ブログの見た目を変えたいときにはCSSファイルを編集する、ということを前回ご紹介しました。
↓前回記事はこちら↓
今回はCSSを編集する際のお作法について、ご紹介したいと思います。
ルールを理解していれば、必要なフレーズを検索するだけでCSSの編集ができるようになります。
【この記事を読むメリット 】
- CSSファイルの書き方がわかる
- ブログのデザイン変更が自分でできるようになる
ルールさえわかれば、あとはコードを調べるだけ！
それでは今回のコンテンツです。
CSSはデザインの設定ファイルである
CSSファイルは、サイトの見た目を決める重要な情報を持っています。
- 文字…大きさ、色、下線、取り消し線、太字 など
- 図形…形、幅、高さ、背景色、配置 など
これらの設定を１つづつ決めておくことで、サイトを見たときのデザインを変えることができるようになっています。
早速書き方のルールをみて行きましょう。
書き方のルール
下記のサンプルを見ながらご説明します。
サンプルコードの見方
a{
color:red;
text-decoration:underline;
}
p{
margin:0px;
margin:10px;
}
まず、「 { 」の前の文字は、対象とする個所を指定しています。
HTMLファイルのaの場所、pの場所について、それぞれこの設定を使用することをここで指示しています。
その下に並んでいる行が、設定です。「:（コロン）」で区切られている前が項目名、後ろが設定になります。
上の場合は、colorがredで、text-decorationがunderlineと設定していることになります。
意味は英語そのまま、赤字下線で表示するというものになっています。
そして最後を「 } 」で閉じれば、これで１ブロックの設定が完了です。
この内容で、pの場所は赤字下線で表示する、という設定ができました。
書き方のおさらい
書き方についてまとめると、要素は以下の３つです。
- どこにルールを適用するかという対象の決定
- どの要素を設定するかという項目の決定
- どのように設定するかという値の決定
これをルールに従って書いてあげればよいわけです。
対象{
項目１:値１;
項目２:値２;
項目３:値３;
}
ポイントを赤字にしています。
- 設定は{}で囲う
- 項目と値は「:（コロン）」で区切る
- 設定が１つできたら「;（セミコロン）」で区切る
設定をしたのに反映されない、というときは、このいずれかが漏れていたり、コードの誤入力であることが大半です。
見直しをしてみるとよいかもしれません。
複数書く時のルール
では、今度は先ほどの２つ目のサンプルを見てます。
p{
margin:0px;
margin:10px;
}
これは間隔を設定する時に使う設定ですが、１つ目の項目と２つ目の項目が同じです。
その場合、下が勝ちますので覚えておいてください。
CSSは Cascading Style Sheets、カスケーディング・スタイル・シートの略称ですが、cascadeは滝を意味しており、その名の通り下に流れていくのです。
こちらの場合も同様です。結果は黄色になります。
CSS内で同じ対象を設定するときは、まとめて記載した方が見やすく設定不備も起こりにくくなります。
p{
color:red;
}
p{
color:yellow;
}
設定のダブりは起こりがち。注意しよう。
基本的なルールはこれだけ
CSSの基本的なルールは以上になります。
このルールを知っておけば、簡単なデザインの変更は自分でできるようになりますので、ぜひ自分のサイトをスタイリッシュにしていただければと思います。
今回もご覧くださり、どうもありがとうございました。
このブログははてなブログで運営しています。
スター・ブックマーク・読者登録いただけると励みになります。
2019.6.20 K
