超初心者のための Web作成特別講座

第4回 スタイルシートの意味

用意されたテンプレート(template)の内容を書き換えることで、見やすくすてきなWebページができるようになってきました。ここで、すこし利用してきたスタイルシートの意味について、解説しておきます。テンプレート(template)の範囲を超えて、自分でもっと魅力的なWebページを作りたくなった時に、きっと役立つと思います。

ページリンクの方法

画像説明

Webページで、必要不可欠な機能として、ハイパーリンク(Hyper Link)があります。 これは、文字列や画像をクリックすると、別のページに移動する機能です。

形式は  <a href="とび先">文字列</a> となり、表示される文字列のところをクリックすると、とび先のページに移動します。
このとき、とび先としては、

   1) http:// で始まる フルURL
      例)“http://www.kayoo.org”
   2)そのページからの相対的な位置で示したhtmlファイル名
      例)“Page1.html”   “../abc/page2.html”

 の形式で書くことができます。1)の方法があるので、自分で開発したWebページから、世界中のサーバで公開されているページにLinkできることが、Webを発展させてきた特徴の一つでしょう。

 文字列の部分を画像にするには<img src=”xxx.jpg” >のようにすれば、いれ変わります。
また、とび先としてpage3.html#aaa のように、ファイル名の後に#名前をつけると、そのページ内の<a id="aaa"></a>と記述されている任意の行から表示させることができます。とび先が #名前だけになっていると、同じページ内での移動という意味になります。1ページが画面に収まらないほど長い場合などによく使われます。

 皆さんのtemplateの例では、sabumenuが以下のようになっており、

画像説明
<div class="submenue"><!-- begin サブメニュー-->
 <ul>
  <li><a href="#1">page1 節1</a></li>
  <li><a href="#2">page2 節2</a></li>
  <li><a href="#3">page3 節3</a></li>
 </ul>
</div> <!-- end サブメニュー-->
ページ内の<a id="1"></a> <a id="2"></a><a id="3"></a>の部分【節の始まり】に移動されることになります。 ここで、

  <ul>
    <li>項目1</li>         ・項目1
    <li>項目2</li>    =>  ・項目2
    <li>項目3</li>         ・項目3
  </ul>

は、箇条書きの書式であり、これもWebではよく使われることを覚えておいてください。

〔メインメニュー〕でもハイパーリンク

ハイパーリンクは、メインメニューで以下のように使われています。

<h1>タイトル</h1>
<div class="mainmenu"> <!--begin メインメニュー-->
 <a href="index.html">ホーム</a>
| <a href="page1.html">page1 表題(章)</a>
| <a href="page2.html">page2 表題(章)</a>
| <a href="page3.html">page3 表題(章)</a>
| <a href="page4.html">サイトマップ</a>
</div> <!--end メインメニュー -->
</div> <!--end ヘッダー-->
 本質的なところは、<a href="pageX.html"> ~ </a>の部分ですが、Webでは、タグの部分は表示されず、<br>のように明示的に改行を示さなければ、勝手に改行はされませんので、画面のへの表示は、
画像説明
になります。

 それぞれの文字列は、<a>タグでくくられていますので、文字列をクリックすると、それぞれフォルダ内の別のhtmlファイル(Webページ)に移動することになります。

タグへのスタイル設定

では、スタイルの部分を細かく見てみましょう。templateの上部に

<style type="text/css">
<!--
body {width:900px;background-color:white;}
p {line-height:130%; vertical-align:top;}
h1 {padding: 15px 5px 15px 10px; color:gray; }
h2 {margin-top:30px; padding: 3px 3px 0px 10px; color:green; border-left:solid 5px green; }
h3 {padding: 8px 3px 3px 0px; color:dimgray; border-bottom: 1px solid dimgray; }
a {color:steelblue; }
 …………
 …………
-->
</style>
の部分がありますね。これがそれぞれのタグ(body, p, h1, h2, h3, a)に囲まれた、文字や画像の大きさや色を決めています。
 例えば、先の<a>タグについては、 a {color:steelblue; } とされているので、この文字の色を変更したいときは、steelblueの部分を他の色に書き換えればいいことになります。<a>タグは、メインメニュでもサブメニューでも使っているので、両方が同じように変更されることに注意が必要です。

任意の名前のスタイルと<div class="名前">

 タグに共通ではなく、別々に指定したい場合は、以下のように .(ピリオド)をつけた任意の名前のスタイルを定義し利用します。

.header {padding:5px 0px; border-bottom:1px solid silver; }
.footer {border-top:1px solid silver; clear:both; padding:5px 0px 10px 0px; }
.mainmenu {padding: 5px 0px 5px 5px; }
.submenue {width:200px; line-height:150%; padding-right:10px;}
.contents {width:690px; padding:0px 3px 0px 0px;float:right;}
.column {width:690px; margin-bottom:5px; margin-top:10px; clear:both; }

このスタイルの定義に対して

   <div class="名前">     名前の例は、header, footerなど
     HTMLの記述
   </div>
  

で囲むと、この範囲の色や文字が、指定のスタイルになります。

<div class="名前"></div>は対応が間違っていなければ、入れ子(<div class="名前1">の中に、別の<div class="名前2">を組み込むこと)が可能です。その場合は、内側の<div class="名前2">が有効になります。

<div class="名前"></div>で囲まれた部分は、以下のような幅(width)と高さ(heigrt)をもった1つのBOXのようになっていて、margin, border, paddingというキーワードを使って、以下のようにデザインすることができます。
borderは、BOXをまとめる額縁のようなもので、前後左右で別々に色を付けたり、幅を変えたりすることができます。またmargin, paddingは、空白の部分で、これまた、前後左右で別々に幅を指定することもできます。

画像説明

margin, border, padding の指定は、<body><p><h1><h2><h3>などのタグに対する指定でも利用できますし、同様の意味をもっています。
例えば、<h2>タグのスタイルは
h2 {margin-top:30px; padding: 3px 3px 0px 10px; color:green; border-left:solid 5px green; }
となっており、margin:の上部(margin-top:)のみを30ピクセル、padding:は、上右下左(時計回り)で3, 3, 0, 10ピクセル、border:は左(border-left:)のみ、線(solid)で幅5ピクセルで、緑(green)、文字の色(color:)も緑(green)と定義されています。

これらの空白の取り方については、見やすさを考えてデザインされていますので(変更すると全体のバランスが崩れ調整に時間がかる)、初学者のうちは値を変更しないほうがいいと思いますが、文字の色や線の太さ、背景色(background-color:)などは、いろいろ変更すると、ページのイメージが変わると思います。いろいろ試してみてください。

少し高度なスタイル

◆ 右寄せ(または左寄せ)表示
 このtemplateでは、float:right; float:left;という、比較的高度な方法を利用しています。
これは、このブロックは、right右(または左left)に表示のスペースがあれば、右寄せでBOXを表示せよという意味で、画面のサイズが小さい場合で、右寄せするのに十分なスペースがない場合は、前のBOXの下に表示されます。

 HTMLをみて、サブメニューの部分が下のほうにあるのに、画面では左上部に表示されることを不思議に思った人もあるでしょう。これは、全体(body)が900pxで定義されているのに、コンテンツ部分contentsが690px右寄せで定義されているため、空いている左の210pxの部分にsubmenuの200pxが収まったからです。ついでに、前のBOXが右寄せや左寄せで、表示されていて、表示のスペースがあっても、無視して下に表示する場合は、clear:both; のように記述しておきます。


◆ 動画の表示
<video>タグを使用すると、動画が簡単にWebぺージで表示できるようになったことをご存知でしょうか。写真の場合は、以下のように<img>タグで示しますが、これを新しく<video>タグに書き直すだけです。

■写真の場合
<img src="images/page1.jpg" width=“400" alt="画像説明" />

■動画の場合
<video  src=“images/movie1.mp4 ” width=“400”
      type=“video/mp4” controls=“control”></video>


ただし、いくつかの要件があります。まず、

 1)動画は初心者でも扱いやすく、汎用性のある.mp4形式で用意すること
   (別の形式で録画されたものを.mp4形式に変換するツールやサービスが無償で利用できます)。
 2)動画のサイズやファイル容量をできるだけ小さくすること。
 3)指定のフォルダ(ここではimages)に名前を付けて(ここではmovie1.mp4)保存すること。

です。

<video>タグでは、いろいろな指示ができますが、とりあえずは、上記のように 横幅(width)は、400px程度としておき、あとは、type=“video/mp4” controls=“control” ></video>と続けてください。画面に映像のはじめの場面が静止画で表示され、コントロールバーをクリックすると、動画が再生されます。スマホなどで映像を取り、簡単な編集をして作品に組み込むと、魅力的な作品に仕上がるでしょう。