カテゴリ:css :: webデザイナーの為のブログ

xhtml+cssでプルダウン式ナビゲーションを作る際、 その部分が他のコンテンツと重なることになるわけだが、 その対象がFlashである場合、ブラウザによっては問題が起こる。 Flashの配置位置はブラウザが勝手に決めてしまい、z-indexプロパティで変更することができない為だ。そこで役に立ちそうな記事を発見。自分もまだ試してないけど、検討してみる価値はあるかも。

• http://www.koikikukan.com/archives/2006/03/17-021717.php
• http://web-conte.com/blue/200610/23_1952.php

web標準に準拠したスマートなXHTML・CSSコーディングをポリシーとしている私ですが、プロとしてやっていくからには理想ばかり追求していられないわけです。XHTML・CSSコーディングはもちろんやりますが、その他にもテーブルレイアウトや、構文的にメチャクチャなページの更新とかもやってます（個人的には修正したいけど、規模が大きいサイトだとそういうわけにもいかないわけで、歯がゆい思いをしてます…）。

新規案件でXHTML・CSSを使いサイト構築する場合でもいろいろと制約が多いんですよね。基本的にはweb標準に準拠したXHTML・CSSコーディングを行うわけなんですが、基本的には背景画像を使用してはいけないなんて決まりがある。背景に指定した部分は印刷されないのがその理由。自分なんかは文字や挿絵が印刷できれば良いので印刷用CSSを作成するのがベストだと思うんですが、一般ユーザーはブラウザの表示まま印刷したいと考えるらしい。そういうわけで、見出しやナビゲーションバーなどもimg要素を使用することに。ま、この方法だとCSS側の指定が減るわけでIE5.0などのブラウザでも安定した表示ができるからターゲットブラウザが多い場合は楽なんだけど。

というわけで、仕事としてXHTML・CSSコーディングをする際のポイント（製作会社のスタイルにもよりますが）こんな感じでしょうか。

• ブラウザ表示のままの印刷に対応させるため背景画像は基本的に使用せず、img要素を使う。
• positionプロパティは印刷に影響与える（safariで確認）ので使用を避ける。
• swfはjavascriptから書き出す（アクティブ化対策）。
• altは画像に表示されているものを忠実に。
• 文言の全角半角統一を確認。

新しい技術は個人的に勉強するしかないかぁ～。。。

Web DesigningでCSS特集なるものをやっていたので、今回は「外部スタイルシートはいくつに分けたほうが良いか？」というお話。

いわゆる、よくあるコーポレートサイトでは合計3つほどCSSファイルを用意すれば十分だと思う。内訳はこんな感じ。

• common.css
  ヘッダー、フッターやタグの初期設定を記述したCSSファイル
• index.css
  TOPページ用CSSファイル
• content.css
  ２階層目以降のページ用CSSファイル

実際に各ページが読み込むのは、common.cssとindex.cssまたはcontent.cssの2つ。（読み込み順はcommon.cssが先にくるようにする）

ヘッダーやフッター、ナビゲーションなどは全てのページに共通する部分が多いためcommon.cssは全てのページに読み込ませる。

index.cssはTOPページ専用CSS。トップページのメイン部分は他のページと大きくデザインやレイアウトが異なる場合が多いため独立させたほうが良い。

content.cssは２階層目以降のページ用CSSファイル。１０ページほどのベーシックなコーポレートサイトではTOPページ以外のページの基本的な構造は共通しているので、１つのCSSファイルでまかなう。ページごとにスタイルを変えたい場合は、各要素にidを指定する。body要素にページごとのidを振ると便利。

少し前までは、フォント用CSS、レイアウト用CSSというように事細かにCSSファイルを分割しているサイトよく見かけたが、かえってメンテナンス性が低下するのでおすすめしない。

また、ページ毎にCSSファイルを用意するのもおすすめしない（特集ページなど独立したデザインの場合は除く）。CSSは複数のページで使いまわすことで、デザインの一元管理ができるわけで、それに加えおのずとデザインが統一されるというメリットもある。

と、ここまで話しましたが、これはあくまで一例です。デザイン要素が少なければ、common.cssだけのほうが良い場合もありますし、サイトの規模が大きくなればカテゴリごとにCSSを分けたほうがいい場合もあります。その他、印刷用CSSや特定のブラウザ用CSSを加えるのも良いと思います。

/*印刷用CSS*/
<link rel="stylesheet" href="print.css" type="text/css" media="print" />


/*IE5用CSS （条件分岐コメントを使用） */
<!--[if  IE 5]>
<link rel="stylesheet" href="ie5.css" type="text/css" />
<![endif]-->

条件分岐コメントは以前は使用を避ける傾向がありましたが、最近は使うサイトが増えてきたように思います。先を見据え、common.cssやindex.cssはハックを一切使わない正しい形式にし、IE5などハックが必要なブラウザには個別にCSSを読み込ませたほうが合理的なためだと思います。必要なくなれば、オーサリングツールで一括置換すれば簡単に取り除けますしね。

いままではナビゲーションボタンを作成する際、img要素を利用しそれをjavascriptでロールオーバー処理していましたが、ここ数年CSSを使ったロールオーバー処理がよく採用されています。その理由として挙げられるのが、手軽さとソースの合理性でしょう。

javascriptを全く使用しないので、html（xhtml）とcssの知識だけで制作可能なので、敷居が比較的低い（最もjavascriptを使用した方法はdreamweaverを使えばもっと簡単なのですが…）。そして、ソースの合理性。文書構造としてみれば、本来メニューにはボタンという概念は必要ないわけです。cssではimg要素を使用しなくてもボタンを作成できるので、xhtmlとcssの本質である文書構造とデザインの分離が可能になるわけです。

ここから本題となるわけですが、”cssでボタンを作成する際ベストな手法”。極論を言えば、ボタンの画像は背景だけ用意しておき、テキストはプレーンな状態がベストです。”display:none”、”text-indent:-9999px”でテキストを消す手法はスパムとして扱われる可能性があるためです。そのためか最近はプレーンなテキストを利用する手法を採用しているサイトを良く見かけます。

しかし、上記のようなデメリットがありつつも、テキストも画像化されたボタンを使いたい人も多いかと思います。では、この場合どの手法を採用するのがベストなのか？個人的には”text-indent:-9999px”でテキストを消す手法がベストだと思います。この手法だと余計なタグを使用しなくて済むからです。それでは実際に簡単な例を紹介。

/*htmlソース*/
<a href="sample.html">ボタン</a>


/*cssソース*/
a {
   display:block;
   width:100px;
   height:25px;
   background-image:url(btn.gif);
   text-indent:-9999px;
   overflow:hidden;
}

この方法が一番シンプルなソースでボタンが作成可能だと思います。簡単に解説しますとdisplay:block;でa要素をブロック要素化し、width、heightプロパティを有効化しています。background-imageで任意の画像を指定。text-indent:-9999px;でテキストを消しています。IEやOperaなどのブラウザではこれで正常に動作するのですが、firefoxではボタンを押した際、余計なアウトラインが表示されてしまいます。ここでoverflow:hidden;と指定してやることで意図する表示になります。

”display:none”を使う手法だと、a要素の中にspan要素を包含し、そのspan要素に対して”display:none”を指定してテキストを消すので、余計なタグを追加する必要があります。また、この方法だと、音声ブラウザでその部分が読み飛ばされるのでオススメできません。

横一列に並ぶリスト（インライン要素）にCSSを使い背景画像を指定したいケースがあると思うけど、ブラウザの実装上（特にIE）避けている人が多いかと思います。背景画像を指定する際、画像分の高さ（height）を指定したいところだけどインライン要素にはheightは指定できない（W3Cの仕様です）。なので、paddingを使用し高さを確保します。

ここで問題となるのがIEのバグ。win IE6（標準・互換両モード）はインライン要素にpadding-bottomを指定しても上手く反映されない（top,left,rightは反映される）。つまり、テキスト部分より下側にpadding領域が生成されないため、テキストより大きめの画像を縦中央揃えにすると画像の下側がカットされてしまう。このバグを回避するには2つ方法（他にもあるかもしれないです。）があるので紹介します。

と、その前にサンプルソースをご覧下さい。

/* htmlソース */

<div id="links">
	<span><a href="#">あいうえお</a></span>
	<span><a href="#">かきくけこ</a></span>
	<span><a href="#">さしすせそ</a></span>
</div>

/* CSSソース */ /* icon.gifは29×29pxです。 */

* { margin:0; padding:0; }
#links { margin:50px; padding-bottom:7px; }
#links span { padding:8px 0 7px 35px; background:url(icon.gif) no-repeat 0 0; }
#links span a { font-size:14px; }

上記サンプルがその方法の一つです。HTML自体はいたって単純な物（本来ulを使うべきところですがサンプルということで…）。padding:8px 0 7px 35px;とfont-size:14px;で画像分（上下padding + 文字サイズ = 画像サイズ）のスペースを確保しているわけですが、win IEではこの方法だと下パディングが確保されません。このバグを回避するのがpadding-bottom:7px;の部分。インライン要素を囲う親に下パディングを指定してやります（インライン要素に指定した下パディングと同量もしくはそれ以上）。そうすることでIEでも反映されます。

もう一つは、スペーサー（透明画像）をいれる方法。HTMLサンプルの<div id="links">直下かリストの末尾に入れます。スペーサーには背景画像と同等の高さを指定します（幅は1pxでOK。）。これだけでOK。親要素（#links）には特別指定はいらないです。気をつけるべきところあえて挙げるのであれば、画像とテキストの縦位置でしょうか。vertical-align:top;に指定しておけば問題はず。

ちなみに、win IE5.01にはインライン要素（画像は可）にpadding（上下左右）を適用することができないため、事実上、背景画像は指定できないと思う。

CSSのセレクタの一つに属性セレクタという物がある。

/* case 1 */
#container[class]{
   margin:10px;
}

/* case 2 */
#container[class="subPage"]{
   margin:50px;

/* case 3 */
#container{ //IE用
   margin:30px;
}
#container[id]{ //firefox,opera,safari用
   margin:50px;
}

case 1ではid属性「container」が指定された要素に何かしらのclass属性が指定されている要素のみ対してプロパティを指定している。case 2ではcase 1の条件に加えてclass属性に「subpage」が指定されている要素のみに対してプロパティを指定している。

属性セレクタはIE6やIE5には対応していないので、当サイトではそれを利用してIE6とIE5には異なる属性を指定（CSSハック）している。手順は先にIE向けにスタイルを定義して、その後属性セレクタを使用してスタイルを上書きし、IE以外のブラウザにスタイルを適用させる。（case 3）

しかしこのCSSハックは文法的には正しいのに世間一般では使われていない。何故かと思い調べてみたら、どうやらmacIEも属性セレクタには対応してないのが原因っぽい。どういうことかと言うと、macIEが属性セレクタに対応していないということは、winIE用のCSSハックがmacIEに適用されてしまうということ。macIEとwinIEが同じバグを抱えている保証は無いため支障が出てしまう。

というわけで、当サイトはmacIEでの表示は保証できません。あしからず。ちなみに、winIE用のCSSハックはIE7の表示に多大な影響を与える可能性があるので（自分の旧サイトがそうでした）、今後は控える、もしくはIE７で表示確認したほうが良いかと思います。

--追記--
CSSハック対象をwinIE5,6のみにしたい場合は子セレクタハックや隣接セレクタハックが有効な模様（これらはmacIEには対応している為）。

/* case 4 子セレクタ */
#container > ul{
   margin:10px;
}

/* case 5 隣接セレクタ */
h2 + p{
   margin:5px;
}

case 4はID属性「container」の子であるul要素のみに適用されるスタイルです。あくまでも子だけに有効で子孫には適用されません。case 5 はh2要素と隣合うp要素のみに適用されます。

当サイトではCSS講座も行っていますので是非ご覧下さい。

ユーザービリティやアクセシビリティを意識して、フォントサイズ切り替え機能を実装するサイトが増えてきましたが、どうやって作るのか分からない人も多いかと思いますので制作方法を紹介。

当サイトではjavascript + cssでフォントサイズ切り替え機能を実現していますので、ある程度javascriptとcssの知識があることを前提として説明していきます。

フォントサイズ切り替え機能の概要を説明しますと…

1. ユーザーがフォントサイズ切り替えボタンを押す
2. 押したボタンに対応するデータをクッキーに保存し、ページリロード処理
3. クッキーの情報を元に、対応するフォント用のスタイルシートを読み込む

といった感じです。では実際のソースを見てみましょう。まずXHTML(HTML)から。ちなみに、このサンプルは実際サイトで使っているものと違うものなので、コピペしても動作の保証はしません。あくまで大まかな流れとしてとらえてください。

■XHTML

//ヘッダー内に以下の一行を追加（この部分がフォント用CSSに置き換わる）
//このファイル内にクッキーの有無の判定やクッキーの書き込み処理を定義
//（複数スタイルシートを読み込む際はこのファイルを優先させる必要があるので最後に書く）
<script src="http://sample.com/common/js/fontsize.js" type="text/javascript"></script>



//body内のフォント切り替えボタンにしたい部分にonClickイベントハンドラを追加
//fontsize.js内のfontChange関数を実行

<p>文字の大きさ</p>
<ul>
<li onClick="fontChange('big')">大</li>
<li onClick="fontChange('medium')">中</li>
<li onClick="fontChange('small')">小</li>
</ul>

■javascript( fontsize.js内に記述 )

//イベントハンドラから受け取った値を元にクッキーに値を書き込む関数

function fontChange(str){
	var targetFile;
	switch(str){
	case "small":
		targetFile="http://sample.com/common/css/font_small.css";
	break;
	case "medium":
		targetFile="http://sample.com/common/css/font_medium.css";
	break;
	case "big":
		targetFile="http://sample.com/common/css/font_big.css";
	break;
	default:
		alert("error");
	break;
	}
	//フォント用CSSのファイル名をクッキーの値として保存
	//フォント切り替え機能をサイト全体適用するためpathに/（ルート）を指定
	document.cookie="fontstyle="+targetFile+";path=/;";
	window.location.reload(); //ページをリロードして設定を反映。
}



//以下はページが読み込まれる際必ず実行される処理

var name="fontstyle";
var cookie=document.cookie; //クッキーを取得
if(-1==cookie.indexOf(name)){ //クッキーがなければsmallを指定（デフォルト）
	var file='http://sample.com/common/css/font_small.css';
}else{
	var pos_s=cookie.indexOf(name)+name.length+1; //クッキーの値の開始位置
	var pos_e=cookie.indexOf(";",pos_s); //クッキーの値の終了位置
	if(-1==pos_e){ //末尾にセミコロンがあるか？
		var file=cookie.slice(pos_s); //無い
	}else{
		var file=cookie.slice(pos_s,pos_e); //有る
	}
}
//クッキーの値に対応するCSSを読み込む。
document.write('<link rel="stylesheet" href="'+file+'" type="text/css" />');

■CSS

//font_small.css内

#content p{ font-size : 10px ; }
#content h2{ font-size : 12px ; }

//font_big.css内

#content p{ font-size : 14px ; }
#content h2{ font-size : 16px ; }

//font_large.css内

#content p{ font-size : 12px ; }
#content h2{ font-size : 14px ; }

と、だいたいこんな感じになります。

このケースではcontent部分のpとh2のフォントサイズを切り替えてますが、臨機応変に指定してください。

今回はフォントサイズ切り替え機能として取り上げましたが、CSSで指定するプロパティを変更すれば、背景色や文字色、レイアウトなども変更が可能です。

CSSでレイアウトする時問題になるのが、ブラウザ間のCSSの実装の差異（バグなど）だが、つまずきやすいポイントを簡単にまとめてみた。また、CSSレイアウトの基本的なテクニックも紹介。

CSSレイアウトの基礎

• レイアウトする際は管理し易いように、positionかfloatに統一する。（ブラウザの実装上floatを推奨）
• 不用意にpositionやfloatを使わず、なるべくmarginやpaddingで対処する。
• win、macではフォントの大きさが異なるので、ある程度ゆとりを持たせてデザインする。
• marginは前後または親子の要素間で相殺する場合としない場合がある（IE6互換以下ではこれに関するバグが多い）ので、思い通りにレイアウトできない場合はpaddingでの指定を試すのもありかも。

Opera8.x バグ

• #container #nav #flash{display:block}
  というように文脈的セレクタ記法だと、javascript（DOM）が正常に動作しない可能性あり。この場合は単純に、
  #flash{display:block}
  と置き換えることで動作する。（プルダウンナビを作る時はまった。。。）

IE6 バグ

• XHTMLでページを記述する際、xml宣言を行うと（正確にはDOCTYPE宣言より先行して何らかの文字を入れると）互換モード（IE5.xに近いモード）になってしまう。（文法的にはxml宣言を行うほうが正しいので指定したほうがいい。IE5をターゲットブラウザにするのであれば宣言するデメリットは無いわけだし。）

IE5、IE6互換モード バグ

• CSSの正式な仕様ではwidthは純粋に内容自体の幅を示すのに対し、IE6互換モード、IE5.xでは「内容+パディング+枠線」を示す。
• smarll、largeなどの相対フォントサイズが他のブラウザより大きい。px指定などで回避する。（javasciprtで文字サイズの変更をできるようにするのが好ましい。）
• 先に挙げたようにmarginの相殺に関するバグが多く見られる。
• floatされる要素の親要素にもwidthを指定しないと（CSS２の仕様では親にはwidthを指定しなくてもOKだったはず。）不具合が起こるの可能性あり。

IE5.01 バグ

• テキストを非表示にして画像だけを表示させたい時に使うテクニックの一つに
  text-indent:-9999px;
  が挙げられるが、この指定をa要素に対して行うと、背景画像とリンク領域がテキストと一緒に画面の外に追いやられてしまう。
• インライン要素（テキスト）にマージン、パディングが適用されない。

firefox1.5 バグ

• IE5.01と同様にtext-indent:-9999px;をa要素に指定した場合、これをアクティブな状態にすると不要な枠が表れる。

mac IE バグ

• clearを指定している要素にfloatを指定しても無効化される。wrappingするなどの対策が必要。
• positionとfloatを併用すると大きくレイアウトが崩れる恐れ有り。

今まで機能していなかった、フォントサイズ切り替え機能をついに実装。画面右上のメニューから3段階の調整が可能です。

ちなみにこの機能の実現方法は簡単なもので、フォント用のスタイルシートを別途用意しておき、javascriptでクッキーの値を読み取り動的にスタイルの切り替えをしています。

簡単といえど、cookieの扱いに慣れてない為若干手間取りました。。。あと、当初はＤＯＭでＨＴＭＬの属性値を切り替えてリロード無しでフォント切り替えをしたかったのだけど、何故かＯＰＥＲＡしかまともに動かなかったので、やむなくリロードで切り替える方法にしました。

IE7になって、PNG24の対応や、CSSの解釈が大幅に改善されたので、表現の幅が広がり嬉しい反面、従来のサイトの動作チェックで頭を抱えることになるだろう。

自分の場合、今までは属性セレクタを使いCSSハックを行って、各ブラウザと互換をとっていたわけだが、この場合、IE6以前のバグが修正されていないとIE７では表示に不具合を生じてしまう。属性セレクタハックがIE７では使えない為だ（逆に属性セレクタが正式にサポートされたわけだが…）。

こうなると、IE7用のハックを適用するか、HTMLに余分にタグを追加するか、もしくは今まで以上にCSSレイアウトを考慮してデザインをする必要が出てくる。

そろそろIE5.xは切っちゃっていいかな。。。

ちなみにa要素にvertical-alignをmiddle,top,bottomのいずれかを指定することで、ハックしなくても解決できました。（汗