HTMLとCSS

4回目 「CSSを使ってみる」

CSSのおさらい

早いものでもう4回目になります。このコーナ。
CSSについては初回で説明いたしましたが、このページから入った方や初回の説明を忘れてしまった方のために、
もう1度おさらいします!

CSSとは?

“Cascading Style Sheets”の略。HTMLテキストを装飾・整理する役割もを持ちます。
HTMLテキストと同じテキスト内で組むことは基本はなく、全く別のテキストにCSSテキストを組むことになります。

CSSを組んで見る

例えばここにとある一文があります。

吾輩は猫である。名前はまだない

「この文章を大きくして色を変えたいなー」と思ったとして、まずはCSSなしでHTMLテキストを以下のように組んでみます。

<font size= “5” color= “#DF0101″>
吾輩は猫である。名前はまだない
</font>

となります。
これをCSSで同じ効果を持つように組んでみます。
ますHTML要素の方、タグは<font>ではなく範囲を示す<span>を使います。そしてspanのなかにclassを定義づけます。
筆者は装飾用途によってクラス名は頭を捻ってつけているのですが、今回はぶっちゃけてその他とし、
class=”etc” とします。すると…

<span class=”etc”>吾輩は猫である。名前はまだない</span>

となります。これでHTMLテキスト部分は終了です。次にCSSの方に行きます!

CSSの入力の仕方は意外とわかりやすいです。

.定義づけしたクラス{
装飾情報:装飾情報;
}

といった書き方を大体します。
早速、夏目漱石の一文を装飾します。

.etc{
font-size: 24px; …文字の大きさを調整しています。size5と24pxは同じ大きさです。
color:#DF0101; …文字の色を変更しています。基本的に16進数で色を調整します。
}

と、これで終了!はじめのうちは覚えるのは容易ではないと思われますが、
ある程度慣れてくれば大体はなんとかなります。
いつもどおりふわっとした説明ではありますがCSSはこんなふうに使うんだよ、ということで頭に入ってくれたら幸いです。

若干今回は長くなりました。
ご覧いただきありがとうございます。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)