スタイルシートについて

これまでHTMLのタグについていくつか見て来ました。

でも,今のところデザインやレイアウトに関係しそうなのはimgタグやbrタグくらいです。

 

たとえば,文字の色を赤と指定したり,センタリング(中央に表示)などは出て来ていません。

HTMLも時代とともに変化して来ましたが,最近の基本的な方針として次のようなものがあります。

◆ HTMLのタグでは何を表示するかだけ指定

◆ デザインはCSSで指定する

という流れです。何もかも一緒にするよりはっきり分かれている方が便利なのです。

たとえば,あるサイトの文字の色を全部青にしたい時,全部のタグの属性で文字の色が青というのを指定していくのは大変なのは想像がつくと思います。でも,サイトではとりあえず文字の色は青です,と指定できれば他の色にしたい時にも変更が楽ですよね。

 

突然CSSとか聞いた事がない略号が出て来て戸惑ったかもしれません。

CSS(Cascading Style Sheets)です。

このcascadingは階段状に流れる滝みたいな意味があるらしいStyle Sheet(スタイルシート)は

スタイルは姿,格好でシートは一枚の紙やシーツのような布の事です。

どうイメージするかが難しいですが,表示の仕方(見栄え)を指定する書式という感じです。

 

とりあえず今日は一つだけ基本的な書き方の一つを紹介します。

<body>

これは<p style=”color:red”>赤文字</p>です

</body>

colorのあとは:(コロン)です。=ではありませんのでご注意ください。

前後を省略しましたがこれを組み込んだHTMLファイルをブラウザで開くと,

stylered

「赤文字」が段落を意味するpタグで囲まれているため前後で改行します。

が,pタグに属性名styleが追加されていますね。

これがこのタグに付与するスタイルシートの記載になります。

内容がcolor:redで色を赤にという意味になるので上記のような表示になるんですね。

 

次回は別のスタイルについても勉強しましょう。

 

今日のまとめ:

 

CSS(スタイルシート)の指定はstyle属性を用いて

style=”color:red”

のようにする。

 

コメントを残す

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