ブラウザによって使うCSSファイルを分けてみよう！ の巻

わかさとでは　半透明PNGをスタイルシートで使用しています。背景画像が透けて見えてますよね？この効果を出すためです。
ところが　この半透明PNGが　IE（InterNetExplorer）6.0以下では　正常に表示されません。こういうのが本当に多いんで困ってるんですが　IEだけは特別な書き方でスタイルシートを記述する必要があります。今後　IE　7.0以降では普通に記述して使えるという話ですが　まだ試してみてないし　IE6.0以下がまだまだ多いと思われますので　ご紹介します。
このブラウザ判定は　スタイルシートだけでなく色々使う場面はあると思いますので　応用も利くかと思います。覚えて損はないですよ♪

まず　前回ご紹介したinsertタグで読み込んでいる　ヘッダファイルのソースを見ていただきましょう。ここをクリックしてください。
このソース内の以下の部分にご注目ください。

<if $browser_name == 'IE'>&nbsp;&nbsp;<link rel='stylesheet' href='/ie_default.css' type='text/css' /><else>&nbsp;&nbsp;<link rel='stylesheet' href='/ff_default.css' type='text/css' /></if>

この<if $browser_name == 'IE'>という部分が　「条件分岐」です。単純に英語と思って捉えていただければ分かりやすいかと思います。
この場合
　　もしブラウザの名前がIEだったら（if&nbsp;$browser_name&nbsp;==&nbsp;'IE'）　　　　ie_default.cssを読み込み
　　それ以外だったら（else）
　　　　ff_default.cssを読み込みなさい
という命令となります。この　if　を用いた条件分岐は　Excelとかを利用されている方も　馴染みがあるかもしれませんね。プログラムというレベルではなくても　英語的に理解できればOKです。
（※ちなみに　ホムペネットでは　PCブラウザと携帯ブラウザはサーバー側で自動的に判別され　PCの場合は指定されたHTMLファイルを　携帯の場合は指定されたHTMLファイル名の前に i_ が付いたファイルを表示するようになっています。（PCで　index.html　の場合　携帯では　i_index.html　の内容が表示される。）ですから　携帯用のURLを別に用意する必要はありませんし　携帯用の表示をこの　ifタグで記述する必要もありません。）

このようにHTMLの中に　条件分岐を記述することができると　あらゆるケースで使えます。どのようなケースで使えるかというと　例えば・・・

1. 24時間以内に更新した記事に[New]アイコンを付けたい
2. 画像のデータがあるときだけ<img>タグを出力したい
3. 掲示板で管理人の専用アイコンを使いたい
4. URLが入力された場合だけリンクを表示したい

などなど・・・。この　ifタグをマスターすると　やれることの幅は一気に広がります。具体的なHTMLソースは　できるだけ　ご紹介していく予定ですが　こういう時はどう書けばいいの？という疑問点がありましたら　助け合い掲示板　でご相談ください。HTMLソースをコピペできるような形で　お答えしていきたいと思います。

ホムペネットで使える独自タグは　これまでご紹介してきた<whiledata>タグと<insert>タグとこの<if>タグのみです。この3つのタグを使って　わかさとのコンテンツは全て作成することができます。
あっ　あとフラッシュを作成するときの<swfscript>タグがありました。これは　また後日ご説明します。

次回は･･･[リンク集]（管理人が登録するタイプ）を作ってみよう　です。いよいよ　具体的なページを作っていくことになりますよ〜。