文系おじさんのWeb用語案内 vol.2【CSS】

ウェブ全般

どうもこんにちわハワーユー。
日本史が好きな文系おじさんだよ。
好きな乱はもちろん大塩平八郎の乱だよ。
平八郎ってマジでロックだよね。

今日案内(あない)するWeb用語は、CSSだよ。よろしくね。

CSSとは

CSSは「Cascading Style Sheets|カスケーディング・スタイルシート」の略だよ。
「Cascading」については特に気にしなくて問題ないよ。

ojisan

YMOとかCCBとかAKBとかアルファベット3文字の音楽グループは多いけど、CSSは音楽はやらないよ。
Romanticが止まらなくなっちゃうからね。

ojisan

CSSは何をするかというと、見栄えを決めるんだよ。
HTMLでマークアップした文書に、色をつけたり、サイズを決めたり、形を変えたり、レイアウトしたりするのが、CSSの役割なんだよ。

※「HTMLでマークアップ」については、前回の記事をみてみてね。

CSSの書き方

CSSは、例えばこんなふうに書くよ。

ojisan

まず、pのところ。
pは前回で紹介した、HTMLのタグだよ。
CSSでpタグに対してデザイン(スタイリング)するには、p{}と書いて、{}の中にその内容を書くんだよ。
ここでは「色は赤!フォントサイズは24px!」と指定しているよ。

ojisan

改行とか余白は、ただ見やすくするためだよ。

class

もうひとつ見てみるよ。

ojisan

新しい表現が出てきたね。
まず「.box」だけど、先頭の「.」が大事だよ。
「.box」=「class名がboxの要素」ということだよ。
なんのこっちゃ。

ojisan

「class」は、要素に名前をつけるためのものだよ。
HTMLにpタグがひとつしかなかったら、p{}の指定でOKだね。
でもそういうことは、ほとんどないよ。
要素がいっぱいあって、それぞれ別の指定をしたいときに、HTMLでは、こんなふうに名前をつけてやるよ。

ojisan

この状態で、boxという名前がついた最初のpにだけ指定したいとき、.box{}となるわけだよ。
ちなみに p.box{} って書いてもOKだよ。

CSSプロパティ

上の例で、background-color とか text-align とかは、「CSSプロパティ」と呼ばれているよ。
だいたい直感的に、何を指定するプロパティなのか分かる名前になってるからありがたいね。

ojisan

プロパティはいろいろあるから調べてみるといいよ。
CSS3という最新バージョンでは、アニメーションできるプロパティも用意されているんだよ。

ボックスモデル

テキストをpとかdivでマークアップすると、それは「ブロック」になって四角の領域をつくるんだよ。
このブロックをCSSから操作して、レイアウトしたりするわけだよ。

で、そのためのプロパティがCSSには用意されているよ。

ojisan

ブロックのサイズを決めたり、

  • width … 幅の指定
  • height … 高さの指定

余白や境界線をとったり、

  • padding … 余白
  • margin … 余白
  • border … 境界線

こういったプロパティがあるんだよ。

ojisan

これをふまえて、ボックスモデルの説明をするよ。
Seeing is believing. 図を出すよ。

ボックスモデル

ボックスモデル

幅と高さが決まって、その外にpaddingがあって、その外にborderがあって、その外にmarginがあるんだよ。
backgroundプロパティで指定される背景色や背景画像は、padding領域まで影響するよ。
例えばこういうCSSを書いたりするよ。

ojisan

ちなみにCSS3では、このボックスモデルの解釈を変更して、widthにpaddingやborderまで含めてもOKな、「box-sizing」というプロパティがあるよ。
進化ってすごいね。


今日はここまでにしておくよ。
レイアウトの仕方ひとつとってもCSSは奥が深いから、いろいろ書いて覚えていくといいよ。

ojisan

次回は、【サーバ】についての説明か、私が生まれて初めて詠んだ俳句の紹介か、どちらかだよ。

ojisan

それじゃあ、たまにはあったかいお風呂にゆっくり浸かって疲れをとるようにね。

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。