Perl Perl_3 css

2015年01月16日

! Perl - CSS 利用 02 CSS の記述と色 (0x14e)

目次 - Perl Index

Theme

Perl について、復習を兼ねて断片的な情報を掲載して行く連載その 0x14e 回。

CGI.pm で、「カスケーディングスタイルシート」( Cascading Style Shieets : CSS ) の指定方法を確認する。

(0x14c) では、「カスケーディングスタイルシート」の概要を確認し、(0x14d) では、スタイルの記述方法の基礎を確認しました。

今回は、Getting Started - MDN から "Why use CSS ?" ( なぜ使うのか CSS を ? ) を確認します。

文書と表示を分離する

(0x14c) で確認した様に、CSS は「文書」( documents ) の内容とその「表示方法」( style ) を分離します。

文書と表示方法を分離することで、スタイル ( 表示方法の指定 ) の「重複を避け」つつ「メンテナンスを簡単に」出来ます。また、「同じ内容を異なるスタイルで異なる目的に」利用することも可能になります。

スタイルの変更と状況による選択

もし、あなたの Web サイトが数千におよぶページをもっていた場合に、マークアップ言語によるページ単位のスタイル設定を行っていたとしたら、そのスタイルの変更は一大事業になります。

しかしながら、そこであなたが CSS を利用していれば、それはたったひとつのファイル、つまり、スタイルを共有するためのスタイルシートを変更するだけで完了します。

また、Web サイトの利用者がページを印刷しようとした場合に、CSS を利用していれば、印刷時には印刷に適した専用のスタイルを提供することも可能になります。

例外はありますが、通常 HTML はスタイルではなく文書の内容を記述するために利用されるマークアップ言語であり、CSS は文書の内容ではなくスタイルを記述するための言語として利用するということです。

CSS とマークアップ言語のスタイル機能は併用しない

HTML の様なマークアップ言語は、多くの場合スタイルを指定する方法を提供しています。

例えば、HTML の「 b 」タグを使えばテキストを太字に出来ますし、「 body 」タグへの指定によってページの背景色を指定することも出来ます。

しかしながら、通常 CSS を利用する場合は、こうしたマークアップ言語のスタイル指定機能の利用は避けて、スタイルの情報がひとつの場所 ( スタイルシートのファイル ) にあるようにします。

そうでなければ、CSS を利用する利点の多くが失われるということです。

スタイルシートの作成

Why use CSS? - MDN では、実際のスタイルシートの作成に際し、次の例示がされています。

1. "What is CSS" で作成した HTML ファイル「 doc1.html 」と同じディレクトリ内に別のテキストファイルを作成します。これがあなたのスタイルシートになります。ファイル名は style1.css です。

2. 作成した CSS ファイル内に次の 1 行をコピー・ペーストして保存します。



strong {color: red;}

HTML ファイルをスタイルシートにリンクする

スタイルシート「 style1.css 」を作成したら、次に、HTML ファイル「 doc1.html 」を編集して、スタイルシートとリンクさせます。

1. 次のコードのハイライトされた行を「 doc1.html 」の中に追加します。



<!DOCTYPE html>

<html>

  <head>

  <meta charset="UTF-8">

  <title>Sample document</title>

  <link rel="stylesheet" href="style1.css">

  </head>

  <body>

    <p>

      <strong>C</strong>ascading

      <strong>S</strong>tyle

      <strong>S</strong>heets

    </p>

  </body>

</html>

2. ファイルを保存してブラウザの表示をリフレッシュ ( 再読み込み ) するとスタイルシートが頭文字の色を赤色にします。次の様に:

! Perl - CSS 利用 02 CSS の記述と色 (0x14e)

スタイルシートが認識する色の名前

スタイルシートは、「赤色」以外の様々な色の名前を許容します。

例えば、基本的な orange, yellow, bule, green を許容します。他には、もっとエキゾチックな色の名前 chartreuse や fuchsia, また burlywood 等も許容します。

これらの色名は、一般に「キーワード」と呼ばれます。スタイルシートでは、このキーワードの他に「 RGB 立方体座標方式」または「 HSL 円柱座標方式」による色指定が利用可能です。

「 RGB 立体座標方式」は 16 進数値「 #nnnnn 」または関数「 rgb() 」や関数「 rbga() 」を利用する方式で、「 HSL 円柱方式」は関数「 hsl() 」と関数「 hsla() 」を利用する方式です。

例えば、キーワード「 red 」は次の様になります。



/* "RGB 立体座標方式" の赤色 */

strong {color: #ff000;}

strong {color: rgb(255, 0, 0);}



/* "HSL 円柱方式" の赤色 */

strong {color: hsl(0, 50%, 50%);}

ちなみに、関数による指定を利用する場合は、宣言が 1 文の場合でも末尾に「 ; 」( semi colon ) が必要です。CSS の色指定に関する詳細は以下を参照してください。

CSS Color value - MDN

0x14e -> 0x14f へ

次回は、「 DOM 」( Document Object Model ) を確認します。

参考情報は書籍「初めての Perl 第 6 版」を中心に perldoc, Wikipedia および各 Web サイト。それと詳しい先輩。

目次 - Perl Index

同じカテゴリー（Perl）の記事

Perl mp2 翻訳 Web コンテンツ圧縮の FAQ (d228)
Perl mp2 翻訳既知のブラウザのバグの回避策をいくつか (d227)
Perl mp2 翻訳 Perl と Apache でのキュートなトリック (d226)
Perl mp2 翻訳テンプレートシステムの選択 (d225)
Perl mp2 翻訳大規模 E コマースサイトの構築 (d224)
Perl mp2 翻訳チュートリアル (d223)