CSSとは? はてなブログのデザインCSSを初心者が使ってみる

こんにちは。レモンティーです。


今回はCSS入門についてです。

CSSというのはざっくり言うとサイトを飾るための道具です。

HTMLで文章や画像やリンクがつくれますが
それだけだととても簡素な見た目になります。

そこで飾り付けるためにCSSを使うわけです。

よってCSSは基本的には
二つの情報からできています

①どこを
②どんな風に

飾るか、です。シンプルですね。
①をセレクタといい
②をプロパティといいます

たとえばこんな風に書きます

a{ color:black; }

a というのはaタグのことです
color:black; は色を黒にする…ですね。

なのでこれは
①全てのaタグの
②色を黒にする
という意味です。

これをデザインCSSに書けば
これが…
f:id:sawalemontea:20171124060050p:plain
こうなります
f:id:sawalemontea:20171124065220p:plain


公式?のデザインを使わせてもらっているので
それ関連のことが8行目までになにやら書かれていますが
スルーしてそのまま書けばOKです。
f:id:sawalemontea:20171124065628p:plain

(なお、はてなブログ以外で使うときについては記事の最後に。)

さて、このままだとセレクタの指定で少し困りそうです。

というのも、タグ単位ではなく「ここだけ」指定したい…
ということがあると思います。

そんな時はHTMLのほうでidを指定して解決します。

例えばこんな感じです

これは、テキストのほうで

<p id="TestID">例えばこんな感じです</p>

のようにidを指定し、

CSS

#TestID{color:blue; 
font-family:serif;}

と書いています。


セレクタをidで指定する場合は、#記号を使います。

これで特定の箇所だけ変更できました。

しかしまだ問題があります。
idはページ内で被ってはいけないので
複数の場所を飾りたい場合に困ってしまいます。

そんな時はHTMLでclassを設定して指定すれば解決します。

例えばこんな感じです。

複数箇所を飾れます

これは、変えたい場所のpタグに

<p class="test"></p>

のようにクラスを設定して、CSS

.test{color:red; border:solid 3px blue;}

と書いています。
セレクタをclassで指定する場合はclass名に . をつけます。


これでセレクタの指定にちょっと幅がでたので
プロパティを知ればいろんなことができるようになりました。

さらに便利なセレクタの指定や、
色を変える以外のいろいろなプロパティについては
このブログではここ↓にまとめてあります。

sawalemounity.hatenablog.com

これで本題はおしまいです。

ここからCSSはてなブログ以外で使うときについて触れます。

その場合どこに書けばよいかというと、主に3パターンあります。
(1)CSSファイルを作って読み込み
(2)headにstyleタグをつくってそこに書く
(3)HTMLタグに属性として書く
です。

(1)については、残念ながら私は詳しくないのですが…たぶん公式テーマがやってますね。
デザインCSSの2行目に@importとあるのがそれだと思われます。

(2)はページの<head>に<style>タグを作ってそこに書く方法です。実はこのページもこれです。一回しか使わないCSSをわざわざデザインCSSに描きに行くのもアレなので記事に↓のように書いています。

<head>
<style>
#TestID{color:blue; 
font-family:serif;}
.test{color:red; border:solid 3px blue;}
</style>
</head>


(3)これは

例えばこんな感じです

↑は

<p style="color:green;">例えばこんな感じです</p>

と書いています。
わかりやすいですが冗長になりがちな印象ですね。

こう考えるとはてなブログのデザインCSSはけっこう便利ですね。

今回はこれでおしまいです。

sawalemounity.hatenablog.com

sawalemounity.hatenablog.com

sawalemounity.hatenablog.com