今回は、投稿ページにおけるCSSの書き方について書こうと思います。
CSSとは？
以前の投稿でも書きましたが、CSSとは、Cascading Style Sheets(カスケーディング・スタイル・シート)の略です。
HTMLで作った文章を装飾したり、文字や図のレイアウトを調整するなど、見た目を指定する時に使います。
詳しくは以下の投稿を参照ください。
例えば以下の文字を赤くします。
この文字が赤くなっていますか？
上記の文字が赤くなっている部分にはclassを追加して書いています。
classとは？
HTMLのタグのにつける目印の1つで、これを付けることでその名前が付いたところだけ色を変えたり、大きさを変えたりと装飾を加えることができます。
なので、同じ装飾でよければ、何度同じclassを使っても問題ないですし、1箇所に「色はこれ」「文字の大きさはこれ」「飾りはこれ」みたいな感じでいくつものclassを持ってくることも可能です。
もちろん、1つのclassに「色」「文字の大きさ」「飾り」の指定をすべて入れ込むことも可能です。…わかりにくいでしょうか？
タグについては以下を参照ください。
classの付け方
私のブログでよく出てくる「カスタムHTML」を使います。
上記の赤文字の部分には「カスタムHTML」の中に以下のように入力しています。
pの後ろにclass=sample1と書いています。これがclassです。
「class=○○○」の「○○○」の部分は好きな名前を付けることができますが、ローマ字ではなく英語名の方が良いといわれています。また、数字から始まるのはだめなのと、複数の単語を組み合わせるときは半角スペースを空けるのはだめです。アルファベットからはじめ、単語を組み合わせる時は、ハイフン(-)やアンダースコア(_)でつなぎましょう。
classを付けたら、いよいよCSSを書いていきます。
どこにCSSを書くの？
CSSは各投稿ページの下に「カスタムCSS」というのがあるのでそこに書き込みます。
今回は色を赤に変えたので以下のように書きます。
.sample1{
color:red;
}
まず、色などを指定したclass名を指定します。
class名の前にはドット(.)を入力するルールがあります。今回はclass名がsample1なので、
.sample1となります。そして、｛｝で囲みます。
今回は色の指定だけなのでcolorと色を指定します。そしてコロン(:)でつなぎ、色(red)を指定します。そして忘れてはいけないのがセミコロン(;)です。
私は色などを指定して「できた！」と思いセミコロンを忘れることがあります。セミコロンを忘れるとCSSが反映されませんので注意しましょう。私は、最近は反映されていないと「あ～、セミコロン忘れているな」と気付くくらいになってきました。
まとめ
これで投稿ページでのCSSの書き方について終わろうと思います。
今後、color以外のプロパティ名についても記事を書いていければと思います。
コメント