Web備忘録でタグ「CSS」が付けられているもの
ウェブページのテンプレートにて･･･
<link rel="stylesheet" href="/common/css/<MTTopLevelFolder><$MTFolderBasename$></MTTopLevelFolder>.css" type="text/css" />
--
<body id="p<MTTopLevelFolder><$MTFolderBasename$></MTTopLevelFolder>" class="<$MTPageBasename$>">
上記を設定することにより、カテゴリ・ページ毎のCSS設定がやりやすくなる。
<link rel="stylesheet" href="/common/css/<MTTopLevelFolder><$MTFolderBasename$></MTTopLevelFolder>.css" type="text/css" />
--
<body id="p<MTTopLevelFolder><$MTFolderBasename$></MTTopLevelFolder>" class="<$MTPageBasename$>">
上記を設定することにより、カテゴリ・ページ毎のCSS設定がやりやすくなる。
a:hover でのナビゲーションの画像表示の変更方法
一枚のナビゲーション画像を、通常時とロールオーバー時で表示を切り替える方法として、サンプル用画像として、この画像を使用。
今回は上半分を通常時、下半分をロールオーバー時用として作成。（画像ロード時の切り替え時のタイムロスを少なくするため）
サンプル html(body内)
<ul>
<li class="testClassName1"><a href="#">ナビメニュー１</a></li>
</ul>
サンプル css
<style type="text/css">
<!--
.testClassName a {
display: block; /* a をブロック化し、 */
width: 100px; /* 幅の設定と */
height: 50px; /* 高さの設定 */
background: url(naviImg.gif) no-repeat center top; /* 通常時の背景画像（上半分）の設定 */
text-indent: -1000em; /* テキストをマイナスインデントで飛ばす */
}
.testClassName a:hover {
background: url(naviImg.gif) no-repeat center bottom; /* ロールオーバー時の背景画像（下半分）の設定 */}
-->
</style>
サーバによっては、共有 SSL を使用時に URL が「https://hogehoge.secure.co.jp/www.kosaki.name/myformpage/index.html」等になる場合がある。
その為、そのままでは CSS が適用されなかったり、セキュリティーアラートが出現したり、問題が発生する。
以下、その対処方法（注意点）。
Browsershots
「Browsershots」を使用すると、「Linux，Windows，Mac」「Safari，Firefox，IE」などの各種OSとブラウザでのページの表示状態を確認する事ができる。
テキストを画像に置き換える場合は CSS で background に画像を指定するが、この「jQir」を使うと簡単なコードだけでテキストを画像に置き換えることが出来る。
必要な Javascript
Javascript を使用し、CSSを動的に切り替え、その情報が cookie により保存される。
使用 Javascript
下記のいずれかを使用
下記のソースを<head>～</head>内に挿入することで、IE6 以下などのブラウザでも IE7 などのWeb標準に準拠（ある程度）した表示をさせてくれる、すばらしいライブラリ。
（IE7と同じような xhtml/css の解釈をしてくれる）
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/xx.x/IE7.js" type="text/javascript"></script>
<![endif]-->※赤字の部分を現在のバージョン「2.0(beta)」に変更（2008/1/12現在）
バージョンでわかる通り、今のところ ベータ
-
Firefox1.5~ で背景置換が設定されたリンクをクリックした時に、長い点線の枠が出現
#xx a { outline: none; }⇒ タブキーでフォーカス時の現在位置が分からなくなる
-
タブキーのフォーカス対策
a { overflow: hidden; }⇒ Mac IE でリンクが消える
-
解決方法
a { /*\*/ overflow: hidden; /**/ }
モバイルサイト
