その2~作ったファイルをパソコンに表示してみる」では、全てのウェブページはhtmlでできていること、そしてそのウェブページを装飾するのがスタイルシートであることを書いた。sheets)について書いてみようと思う。この記事シリーズのタイトルにある通り、htmlの知識の中でブログで最も役立つのはこのスタイルシートの知識だろう。sheets)とは?スタイルシートとは文字通り、ウェブページ(html)のスタイルを決めるものである。ウェブページのタイトルやナビゲーションメニュー、本文、フッターの各位置を決めたり、文字の大きさや色を決めたりするのがスタイルシートの主な役割だ。これによって、メモ帳で書いたような一枚の文章ファイルが、ネット上では装飾された見やすいページに変身する。“シート”というからには、何かファイルを用意するのだろうと思うのが普通だが、これはあながち間違っていない。そのことはあとで書くことにする。具体的に、前回用意したデモhtmlの一部を見てみたい。このhtml全体を見るには、前回の記事をご参照あれ。center;">~フッター~<br>&copy;デモサイト</div></footer>この部分はウェブページのフッター(footerタグで囲まれている)部分を表示するためのhtmlで、これがスタイルシートの一般的で簡単な記載法だ。実際にネット上に反映される文字「~フッター~(改行タグ)&copy;デモサイト」部分を、左右センタリングするよう指示している。装飾したいテキストをdiv、またはspanタグで囲み、その中にstyle=""と書いて具体的指示を書く。位置に関する指示の場合は主にdivタグを、文字の装飾に関する指示の場合は主にspanタグを使用する。ウェブページの役割を意味するheader、footerタグや見出しを意味するhタグなど、ほとんどのタグに書くことが出来る。このように実際反映される場所のタグに直接書き入れることを「インライン」方式という。他方、各スタイルシートを別のファイルにまとめ、本文のhtmlファイルとスタイルシートのファイルをリンクさせることでも、スタイルシートの役割を反映させることが出来る。上述の“シート”という言葉があながち間違っていない、というのは、このことである。現在ネット上にアップロードされているhtmlファイルでは、後者の外部ファイルによるスタイルシートが主流だ。出来るだけファイルの容量を軽くしてページ読み込みスピードを上げようとする昨今、インラインで記入するとそれだけ容量が重くなって読み込みスピードが遅くなってしまうからである。外部ファイルによるスタイルシートは、記事本体のhtmlファイルとリンクさせなくてはならない。以下下線の一文をheadタグの中に記入する。前回までに書いた通り、実際画面に反映されるのはbodyタグ内の「本日は良い天気です。」というテキストだけだ。class="style2">良い天気です。</span></body>そして外部スタイルシートのファイルは以下のように書く。一行目の@charsetは本体のhtmlファイルがutf-8で記載しているとき、ここで文字コードを統一する。"shift_jis";」と記入する。#red;}ここで仮に「style1」と名前を付けた部分(例1)に注目してほしい。これは「セレクタ」といい、本文ファイルの位置と外部スタイルシートの具体的指示を結びつける名前だ。名前の前には#をつける(idの場合)。{~}までが装飾の指示である。color(文字色)やfont-size(フォントサイズ)はプロパティといい、コロン(:)以降に値を書く。外部スタイルシートにはひとつだけではなく、たくさんの指示を書くことが多い。そのためセレクタ名ごとに装飾の指示をしておいて、htmlファイルではidでその指示を呼び出すことになる。このようにセレクタ名はidで呼び出すが、idは1ファイルに一つしか使用することが出来ない。同じ装飾を随所に使用したい時はclassを用いる(例2)。外部ファイルではセレクタ名の前につける#のかわりにピリオド(.)をつける。まとめこれまでを簡単にまとめると、以下の通りとなる。スタイルシートの書き方には2通りあり、html内に直接書くインライン方式と、外部スタイルシートをhtmlファイルとリンクさせる方法がある。外部スタイルシートの場合、装飾する文字などにidまたはclassで外部ファイルのセレクタ名書いておき、外部ファイルから指示を呼び出すようにする。スタイルシートはプロパティという指示があり、目的ごとに多数ある。例として文字の色はcolor、文字のサイズはfont-sizeなど。その他背景、幅、高さなど、プロパティの数は多数ある。タイトル下の「作成」「HTML」ボタンから「HTML」ボタンをクリックすれば、htmlファイルと同じ形式で書き込むことが出来、ちょっとしたインラインのスタイルシートなら本文内に書くことが可能だ。別途外部に記入する際はファイルを用意する必要はない。ガジェットから「HTML/Javascript」を選び、そこに書き込んで保存後、そのガジェットを記事本文下に置いておけばよい。Favoriteを発信していく、とあるSOHO会社運営者です。ura-no-ura.com。