CSS備忘録-背景画像を複数指定-

背景画像として指定できる画像は1要素辺りひとつしかないので、ひとつの領域に複数の背景画像を適用するためには、ひとつの領域に複数の要素を重ねあわせる(セル画を重ねていくイメージ)ようにして実現します。

考え方としては、サンプル1のように背景画像を適用した要素のいっぱいに、さらに背景画像を適用した要素を内包させます。

サンプル1ではbodyに画像1、div要素に画像2を適用し、(当たり前ですが)divを内包するbodyとして記述します。body、divのスタイル指定はサンプルのソースを参照してください。

画像1


画像2

上記の方法を応用するとサンプル2のように、ウィンドウ幅を変更しても上下左右、左上、右上、左下、右下が崩れないフレームのような領域を作ることも出来ます。サンプル2では装飾フレーム用に上下左右、左上、右上、左下、右下毎に8個のdiv要素を重ね合わせています。

aとulの関係

最近、参考書を買ったり立ち読みしたり、Web上で検索したりしてCSSのサンプルを見ているのですが、リンクメニューの例示では必ずと言っていいほど

CSSの記述

ul{スタイル}

ul li {スタイル}

ul li a {スタイル}

ul li a:hover {スタイル}

HTMLの記述

<ul>

  <li><a href="xxx">リンク1</a></li>

  <li><a href="yyy">リンク2</a></li>

  <li><a href="xxx">リンク3</a></li>

</ul>

と言うように、ulとliを使っています。

単にリンクの外観指定だけならば

CSSの記述

a {スタイル}

a:hover {スタイル}

HTMLの記述

<a href="xxx">リンク1</a>

<a href="yyy">リンク2</a>

<a href="xxx">リンク3</a>

と言う風にすれば同様の効果は得られるのに、なぜわざわざulとliを使う必要があるのか疑問に思っていました(逆にulとliを使う方がリスト特有のスタイルを解除しなくてはいけないので手間がかかります)。

僕は標準ブラウザとして、今はIEでなくてOpera8.5を使っています。

Operaでは(IE、NNでもできますが)、Webページが使用しているスタイルを解除して、テキストブラウザ風の表示等に簡単に切り替えることが出来ます。

テキストブラウザ風にしてみると、リンクメニューをulで書く理由が良く分かりました。

ul、liを使わなかった場合

Link Menu
Top
Information
Links
Contact us

ul、liを使った場合

Link Menu

• Top
• Information
• Links
• Contact us

要はリンクメニューというのは、そのサイトを案内するためのリンクリスト、現実世界で言う所の目次に当たるわけです。

「魚本」のfontタグとh1タグの例にもありますが、HTMLの本来の意味で考えると、ulとliを使ってメニュー「リスト」として定義しているって事ですね。

ulで閉じていないリンクメニューは、単なるaタグの羅列なだけであって、HTML的に言うと「メニュー」でもなんでもないわけです。

実際は、作成したWebページは人間が見るわけで、h1タグを使っていなくても、他の文字より大きな文字で書いてあれば標題だと分かるし、リンクが並んでいればリンクメニューなんだなと分かるわけなんですが、サーチエンジン(Webクローラ)のような機械(プログラム)相手ではそうは行かなかったりします。

<meta name="Keywords" content="xxx・・・・">でWebクローラに読ませるキーワードを指定できますが、最近のサーチエンジンではmetaタグより、サイトの内容、特にtitleやh1～h6に書かれている物を重視して分類するそうです。

正確にタグの意味通りにHTMLを記述していると、的確なサーチにかかりやすくなるので、その分サイト来訪者を増やす結果になるのかもしれません。

単純に画像が並んでいるだけのデザインの場合でも

スタイルの記述

h2 {display: none;}

HTMLの記述

<h2>街の風景</h2>

<img src="xxx1" alt="街の風景1">

<img src="xxx2" alt="街の風景2">

<h2>公園</h2>

<img src="yyy1" alt="公園1">

<img src="yyy2" alt="公園2">

<img src="yyy3" alt="公園3">

<h2>空</h2>

<img src="zzz1" alt="空1">

<img src="zzz2" alt="空2">

とすると、良いのかもしれません。

HTMLの本来の意味を守ることは、読み手への恩恵だけでなくて、書き手への恩恵もあるって事ですね。

フィッシュ&チップス

CSSは大して知らないので、ちゃんとした本を買ってきました。

・オライリー CSS完全ガイド

オライリーのPerl本は通称「ラクダ本」(表紙がラクダ)と言うそうなので、CSSの場合は差し当たり「魚本」とでも言うのでしょうか。

オライリーは所謂IT分野の専門書としてはかなり有名でして、内容もかなりボリュームがあるので、まだ斜め読みでしか読めていませんが、さしあたり覚えたこと。

a {font-size: 32px;}

table.foo a {
font-size: 20px;
}
とすると、

通常のaタグのフォントサイズを32pxにする。但し、fooクラスのtable内にあるaタグのフォントサイズは20pxにする。という意味になる。

CSSをちゃんと知っている人にとっては、何をいまさらなのかもしれないですが、自分にとっては画期的、目から鱗な内容でして、これを使えば今まで書いていたスタイルシートがかなりシンプルに書けるのではないかと思います。

と、Tips的な読み方しかしないのなら、こんな専門書は要らないわけで、もうちょっとちゃんと読まなければいけません(悪い癖です)。

第一章ではお決まりのように、CSSが策定されるに至った経緯が書いてあるわけですが、ちょっと耳が痛くなる事も。

ほとんどのサイトではマークアップがテーブルとfont要素でほぼ占められている。これらはWebに表示されるものの意味を実際に伝えるものではない。構造という面から見て、これらのページはでたらめに並べられた文字列となんら変わらない。

例示としても書かれているのですが、例えば見出しとして大きい文字を書きたいと言う時に、h1タグを使わずにfontタグのsize属性で指定したり、レイアウト調整のために複雑なtable組みを使ったりなんかは往々にやってしまう事で、CSSを学ぶと言う事は、HTMLが持つ本来の意味である「構造化された意味を持つ文書」と言うのを再確認する事にも繋がるのではないかと思います。

入門書として適切かどうかは分かりませんが、理論から実践、ブラウザによる対応状況も随時記載されているので、長く付き合える本だと思います。

CSS備忘録-リンク表現色々-

リンク(aタグ)のスタイル指定で、サンプルのように、様々なリンク表現が出来る。

基本は下記の4つの状態それぞれで文字色や文字装飾を変えてる事によって表現を変える。linkとhoverのスタイルに変化を持たせる事によって、視覚的な変化を作りやすい。

a:link	・・・	通常(未訪問)状態
a:visited	・・・	通常(既訪問)状態
a:active	・・・	選択状態 ここで言う"選択"とは、文字列が選択された状態の事で、後述するカーソルで選択された状態とは別。
a:hover	・・・	カーソルが上に来た状態

以下、サンプルのポイント(詳細はサンプルのソースを確認の事)

サンプル1	「color:」により各状態の色変化で選択状態を表現
サンプル2	horver時のみ「background-color:」を指定して、背景色で選択状態を表現
サンプル3	horver時のみ「text-decoration: underline overline;」を指定して、文字の上下に線を表示して選択状態を表現
サンプル4	link時とhover時で、「border:outset」と「border:inset」を切り替えてボタン押下風に選択状態を表現
サンプル5	link時とhover時で、「color:」と「background-color:」の色指定を反転させて選択状態を表現
サンプル6	link時とhover時で、「margin:」のleft位置を変えてリンク表示位置を動かして選択状態を表現

CSS備忘録-スクロールバーをカスタマイズ-

IE5.5以降のブラウザであれば下記のようにbodyタグのスタイル指定を行うと、スクロールバーの外観を変更することが出来る。

body
{
  scrollbar-face-color:    #ffffff; /* スクロールメイン部分 */
  scrollbar-highlight-color:  #a9a9a9; /* 右と上のバー外周部分 */
  scrollbar-shadow-color:    #a9a9a9; /* 右と下のバー外周部分 */
  scrollbar-arrow-color:    #a9a9a9;
  scrollbar-darkshadow-color:  #ffffff;
  scrollbar-base-color:    #ffffff;
  scrollbar-3d-light-color:  #ffffff;
}

上記のように指定すると、サンプルの様な外観になる。

各部の「#FFFFFF」等の記述は、その部分の色を示している。

HTMLファイルに上記スタイルを埋め込む場合は<head>～</head>内に

<style type="text/css">
<!--
  body
  {
    scrollbar-face-color:    #ffffff; /* スクロールメイン部分 */
    scrollbar-highlight-color:  #a9a9a9; /* 右と上のバー外周部分 */
    scrollbar-shadow-color:    #a9a9a9; /* 右と下のバー外周部分 */
    scrollbar-arrow-color:    #a9a9a9;
    scrollbar-darkshadow-color:  #ffffff;
    scrollbar-base-color:    #ffffff;
    scrollbar-3d-light-color:  #ffffff;
  }
-->
</style>

と、記述する。

また、styleタグを使わないで、下記のように直接bodyタグにスタイルを埋め込むことも出来る。

<body style="scrollbar-face-color:#ffffff;scrollbar-highlight-color:#a9a9a9;・・・中略・・・">

尚、外部ファイルにて指定する場合はこちらを参照の事。

CSS備忘録-外部ファイルでスタイル指定-

WEBページを作成する時、スタイル指定を下記のように<head>～</head>内に直接書き込んでも良いのだが

<style type="text/css">
<!--
～スタイル指定～
-->
</style>

サイト内に複数のHTMLコンテンツがある場合、外部ファイルでスタイル指定をしておく事によって、内容は変えないがページの外観(背景色とか文字サイズとか)だけを変える時等、外部ファイルのみを編集すれば一括でスタイル指定を変更できるので、スタイル指定は外部ファイルで行うと便利だ。

まず、TEXT形式でファイルを作成し適当なスタイル指定を記述する。この時HTMLファイル内に記述するように<style type="text/css">～</style>を記述する必要はない。

ここでは仮にbodyタグのスタイル指定をstandard.cssというファイルに記述した事とする。

standard.css内の記述

body
{
  background-color:      #ffffff;
  font-family:        Verdana, 'ＭＳ Ｐゴシック';
}

standard.cssで指定したスタイルをHTMLファイルに適用するには<head>～</head>内に下記のように記述する。

    <link rel="stylesheet" href="standard.css" type="text/css">

「href="standard.css"」の部分は外部ファイルのパスを記述するので、例えばHTMLファイルパスが「home/html/index.html」、standard.cssが「home/css/standard.css」の場合は「href="../css/standard.css"」となる。