CSS超初心者のおサルさんレベルの僕が、基本的な部分をイチからお勉強をしながら、かみくだいてわかりやすい言葉を探して書いていきます。
おサルさんだとしたらコモンマーモセットでありたいものです。
CSSの書き方
CSSの基本的な書き方は、
セレクタ 中カッコ開 プロパティ コロン 値 セミコロン 中カッコ閉
となります。
ちょっとイメージがわきずらいので、記号を使ってみると、
セレクタ{プロパティ:値;}
という順番で書きます。少しだけそれっぽくなりました。
セレクタ？プロパティ？値？
これは、なにを？どうに？どうやって？というイメージ。
- セレクタ・・・段落わけをしてくれるpタグや見出しタグh1,h2,h3など→なにを？
- プロパティ・・・文字の色を変えるcolor、背景の色を変えるbackground-colorなど→どうに？
- 値・・・色のコード、大きさの数字、高さの数字など→どうやって？
例えば、見出しタグh1を赤にしたい場合
h1 {color:red;}
と、なります。
wordpressのスタイルシートってので見たことあるぞ？って形になりました。
{ }（中カッコ）の中身は、：（コロン）でつないでいきます。
この変更をしてくれたらオッケーですよ！となったら、；（セミコロン）を使ってよろしくおねがいします！と、言って終わりにします。
会話にすると、
例えばトマトに関する本を出版したいとしたら
本の表紙のタイトルについて「タイトルの文字を、赤くしてください。」
と伝えるイメージ。
この会話をアメリカの方に英語にしてお願いしようとすると、
・・・
あ、僕はドントイングリッシュなので、わかりませんが・・・
コンピューターさんにお願いをしようとすると
h1 （本の表紙のタイトルの文字について） { （ 「 ） color (タイトルの文字を) : ( 、 ) red (赤くしてください) ; (。) } ( 」 )
h1{color:red;}
となります。
文字の色を赤く変更〜実践〜
実際にやってみます！
まずはスタイルシートをひらいて、一番下のところにh1{color:red;}と打ち込みます。
そして、新規投稿を作り、本文に「見出しの色をトマトの赤に変更」と入力し、h1タグ囲います。
さあ、反映されているでしょうか！
見出しの色をトマトの赤に変更
という文字が赤くなりました。
やりました！！！
はじめてコピペじゃなく、自分で変更ができました！
後日談〜CSSが反映されない〜
ちなみに、正しく記述がされていないと、反映がされません。まったくの無反応。
例えば、；で閉じるところを：にしてしまっていたり。
僕は、この文字を赤くすることですらできませんでした。
最初はこれを入力していました↓
h1｛color:red;｝
これを打ち込んでも全然反映がされない。。。
やっぱり僕には無理なんだー！！！！！
と、思ったものの、やると決めたことを投げ出すのか自分！！！と言い聞かせ、
CSS 反映されない
というキーワードで検索。
キャッシュがたまっていると、反映がされないことがあります。履歴を消しましょう！
という記事がみつかり、Chromeの履歴を削除！
なーんだこんな簡単なことに何時間も頭を抱えていたのかよ！てな感じで再びプレビュー。
が、しかし！！！
反映されないじゃん・・・
しかし！粘りに粘って、ひとつひとつのパーツを他のもともと記述されているものと組み替えたりしながらテストを繰り返した結果。
｛ ｝こいつらが原因でした。なんということか、こいつらを全角で入力していたんです。
半角での打ち方を知らなかったんですねー。
めちゃめちゃ恥ずかしいことですが、日本語で「を変換して｛としていたんです。。。
だって、英数で入力をすると[]ってなるじゃないの。
そこで、macで半角の｛｝ってどうやって打つんですか？と調べた結果
shifutキーを押しながら[]ということがわかり、さっきの
h1｛color:red;｝をh1{color:red;}と書き直したところ、なんとか反映がされるようになりました。
今までCSSをコピペに頼っていたために気付くことのできない部分でした。
これで、なんとか基本の書き方はわかりました。もっともっとお勉強していきます。
どうも、ありがとうございました。
にほんブログ村