ブログにも役立つHTMLの話 その3~スタイルシート

スポンサーリンク
ウェブ制作イメージ
イメージ
ブログにも役立つHTMLの話 その2~作ったファイルをパソコンに表示してみる」では、全てのウェブページはhtmlでできていること、そしてそのウェブページを装飾するのがスタイルシートであることを書いた。今回はウェブページを制作するうえで必要なスタイルシート(CSS、cascading style sheets)について書いてみようと思う。この記事シリーズのタイトルにある通り、htmlの知識の中でブログで最も役立つのはこのスタイルシートの知識だろう。

スタイルシート(CSS、cascading style sheets)とは?

スタイルシートとは文字通り、ウェブページ(html)のスタイルを決めるものである。ウェブページのタイトルやナビゲーションメニュー、本文、フッターの各位置を決めたり、文字の大きさや色を決めたりするのがスタイルシートの主な役割だ。これによって、メモ帳で書いたような一枚の文章ファイルが、ネット上では装飾された見やすいページに変身する。
“シート”というからには、何かファイルを用意するのだろうと思うのが普通だが、これはあながち間違っていない。そのことはあとで書くことにする。

では具体的に、前回用意したデモhtmlの一部を見てみたい。このhtml全体を見るには、前回の記事をご参照あれ。
<footer>
<div style="text-align: center;">~フッター~<br>
&copy;デモサイト</div>
</footer>
この部分はウェブページのフッター(footerタグで囲まれている)部分を表示するためのhtmlで、これがスタイルシートの一般的で簡単な記載法だ。実際にネット上に反映される文字「~フッター~(改行タグ)&copy;デモサイト」部分を、左右センタリングするよう指示している。
装飾したいテキストをdiv、またはspanタグで囲み、その中にstyle=""と書いて具体的指示を書く。位置に関する指示の場合は主にdivタグを、文字の装飾に関する指示の場合は主にspanタグを使用する。さらにウェブページの役割を意味するheader、footerタグや見出しを意味するhタグなど、ほとんどのタグに書くことが出来る。

このように実際反映される場所のタグに直接書き入れることを「インライン」方式という。

他方、各スタイルシートを別のファイルにまとめ、本文のhtmlファイルとスタイルシートのファイルをリンクさせることでも、スタイルシートの役割を反映させることが出来る。上述の“シート”という言葉があながち間違っていない、というのは、このことである。

そして、現在ネット上にアップロードされているhtmlファイルでは、後者の外部ファイルによるスタイルシートが主流だ。出来るだけファイルの容量を軽くしてページ読み込みスピードを上げようとする昨今、インラインで記入するとそれだけ容量が重くなって読み込みスピードが遅くなってしまうからである。

外部ファイルによるスタイルシートの記載方法

外部ファイルによるスタイルシートは、記事本体のhtmlファイルとリンクさせなくてはならない。なので、以下下線の一文をheadタグの中に記入する。前回までに書いた通り、実際画面に反映されるのはbodyタグ内の「本日は良い天気です。」というテキストだけだ。
<head>
<link href="外部スタイルシートのファイル名.css" rel="stylesheet" type="text/css">
</head>
<body>
~以下本文~
<span id="style1">本日は</span><span class="style2">良い天気です。</span>
</body>
そして外部スタイルシートのファイルは以下のように書く。
一行目の@charsetは本体のhtmlファイルがutf-8で記載しているとき、ここで文字コードを統一する。本体がsift-jisなら、外部スタイルシートの1行目には「@charset "shift_jis";」と記入する。
@charset "utf-8";

/* 例1 */
#style1 {
color: #999999;
font-size: 15px;
}

/* 例2 */
.style2 {
color: #red;
}
ここで仮に「style1」と名前を付けた部分(例1)に注目してほしい。これは「セレクタ」といい、本文ファイルの位置と外部スタイルシートの具体的指示を結びつける名前だ。名前の前には#をつける(idの場合)。
そして{~}までが装飾の指示である。color(文字色)やfont-size(フォントサイズ)はプロパティといい、コロン(:)以降に値を書く。外部スタイルシートにはひとつだけではなく、たくさんの指示を書くことが多い。そのためセレクタ名ごとに装飾の指示をしておいて、htmlファイルではidでその指示を呼び出すことになる。

このようにセレクタ名はidで呼び出すが、idは1ファイルに一つしか使用することが出来ない。同じ装飾を随所に使用したい時はclassを用いる(例2)。外部ファイルではセレクタ名の前につける#のかわりにピリオド(.)をつける。

まとめ

これまでを簡単にまとめると、以下の通りとなる。
  1. スタイルシートの書き方には2通りあり、html内に直接書くインライン方式と、外部スタイルシートをhtmlファイルとリンクさせる方法がある。
  2. 外部スタイルシートの場合、装飾する文字などにidまたはclassで外部ファイルのセレクタ名書いておき、外部ファイルから指示を呼び出すようにする。
  3. スタイルシートはプロパティという指示があり、目的ごとに多数ある。例として文字の色はcolor、文字のサイズはfont-sizeなど。その他背景、幅、高さなど、プロパティの数は多数ある。

ちなみにBloggerでも簡単に自分の希望のスタイルシートを書き込むことが出来る。記事本文作成画面で、タイトル下の「作成」「HTML」ボタンから「HTML」ボタンをクリックすれば、htmlファイルと同じ形式で書き込むことが出来、ちょっとしたインラインのスタイルシートなら本文内に書くことが可能だ。
また別途外部に記入する際はファイルを用意する必要はない。ガジェットから「HTML/Javascript」を選び、そこに書き込んで保存後、そのガジェットを記事本文下に置いておけばよい。
スポンサーリンク

ブログランキング

ブログランキング・にほんブログ村へ

0 件のコメント :

コメントを投稿

TOP