メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

プレーンテキスト版バックナンバー

◆ HTML講座 --- スタイルシート

スタイルシートは、ページを彩るためのプレゼンテーション機能を持たせる設定を行います。基本的には非HTMLデータとなるものですが、利用の方法によって、直接 HTML文中に記述することができます。

以下に、利用法とその利点について解説します。

<style type="text/css">
  <--
    p { font-size: 1em }
  -->
</style>

■ スタイルシートの作成

実際にスタイルシートを作成する場合、事前にレイアウトの設計を行う必要があります。どのような要素をどのようにレイアウトしたいのか、どのように見せたいのかを十分に検討します。

実際に紙の上でそのレイアウトのラフ図を作っておくと、スタイルシートの設計が比較的楽に行えることでしょう。

スタイルシートの構造

  p { font-size: medium }
  p  =  セレクタ（選択部）
　{ 〜 } =  宣言部

　宣言部の構造
　font-size = 属性（プロパティ）
　medium    = 値（属性値 value）

セレクタには、スタイルを定義させたい要素名を設定します。その設定するスタイルは、宣言部の中で記述されます。宣言部では、スタイルシートであらかじめ定義されている属性と、その値を記述することで、スタイル表現を実現します。

スタイルシートで設定する要素は、ヘッダ部内で記述されるタグ以外のすべてで適用することが可能です。ブロックレベル、インラインレベル要素にそれぞれ単独で設定できますが、宣言部で記述する属性の中には、ブロックレベル、インラインレベル要素に設定できるものとできないものがあります。

スタイルシートを利用したサンプル　（詳しい HTML構文は、今週のマガジン 「第58号」を参照してください。）

◆ XHTML1.1講座 --- コンテンツの配置 その４

今回のコンテンツの配置は、絶対位置で指定されたコンテンツのを重ねて表示する方法と、コンテンツの非表示について解説します。

■ z-index属性の利用

コンテンツの位置を絶対位置に指定したときのみ、この属性を利用することができます。それ以外では無効となりますので注意してください。

この属性は、コンテンツの表示の優先度を指定するもので、利用法によってコンテンツを重ねて表示させることができます。この属性の値は、整数と負数が利用できますが、初期値は「0」で、これが標準値となります。

絶対位置指定されたコンテンツの要素に、この属性を設定します。属性値の値の数が大きいほど、優先度が上がります。

■ visibility属性の利用

位置指定に関係なく設定することができます。この属性の主な利用法は、特定の要素を非表示にしてしまうことで、余白を設定する場合には便利かもしれません。あまり利用価値はないと思います。

見せないで実行させるスクリプトなどで利用される場合がありますが、ユーザから見ればあまり気持ちのよいものではありません。当サイトでは、数あるページのうち、サンプルを除いて１箇所だけ利用しています。さて、どこにあるでしょう？

スタイルシートを利用したサンプル　（HTML構文は、今週のマガジン「第58号」を参照してください。）