初心者のためのホームページ作り 第58号

Web作成支援

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

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

<第58号> 今週のおさらい
                   毎週金曜日配信 What's New 2003/7/11
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
   ■ HTML講座  第7回 --- スタイルシート
   ■ XHTML講座 第19回 --- コンテンツの配置 その4

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

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

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

形式記述法とその利点
インライン方式

<p style="font-size:medium">

利点

  • 要素に直接スタイルできる
  • 一番優先されるため、他のスタイルに影響されない
  • 特定の要素のみ適用できる
エンベッド方式

ヘッダに埋め込む

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

利点

  • そのページにある全部の p要素に適用できる
  • 編集が比較的楽に行える
  • HTML構文が簡素にできる
リンキング方式

外部文書として読み込ませる

p { font-size: medium }

利点

  • 複数のページに利用することができる
  • サイト全体のメンテナンスが容易に行える
  • HTML構文が非常に簡素にできる

スタイルシートの作成

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

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

スタイルシートの構造

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

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

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

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

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

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

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

z-index属性の利用

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

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

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

visibility属性の利用

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

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

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



Valid XHTML 1.1! Copyright(C) 2002-2003 初心者のためのホームページ作り臨時制作委員会 wfb-org@jcom.home.ne.jp