CSS Tips スタイルシートチップス

　スタイルシート関係のTipsというか、自分用のメモ書きです。

メモ

外部スタイルシート　▲

外部スタイルシートを読み込むにはheadタグの中で指定します。ひとつのスタイルシートを使い回しできます。

　スタイルを指定するにはclassを使います。

<p class="classname">外部スタイルシートで記述したクラスの名前を書く</p>

htmlファイルの中に記述する　▲

htmlファイルの中で記述することもできます。headタグでまとめて記述する時には、styleタグを理解しないブラウザのためにコメントタグで囲んでおきます。

　文中にこんな記述も可能。

<span style="font-size:200%;">ここはでかいぞ</span>
<div style="font-size:200%;">ここはでかいぞ</div>
<p style="font-size:200%;">ここはでかいぞ</p>

コメント　▲

「/*」と「*/」の間はコメントとして無視されます。こんな感じ。

/*これがコメントだ。*/

漢字コード　▲

外部スタイルシートの場合、呼び出し側のhtmlと漢字コードがそろっている必要がある。これがそろっていないと、IEの場合スタイルシートを無視してしまうのだ。

漢字コードなので、すべてが英文で書かれていれば問題はない。しかし、「/*本文*/」の用にコメントを入れていると動作しないので注意。

リンクのアンダーラインを消す　▲

a:link {text-decoration:none;}/*リンク*/
a:visited{text-decoration:none;}/*一度行ったリンク*/
a:active {text-decoration:none;}/*リンクを押した瞬間*/
a:hover {text-decoration:none;}/*リンクにマウスを載せたとき*/

　上の方法はHTML全体のa要素に適用される。「このリンクだけ適用したい」なんて時はこんな方法がある。

<a href="aaaa.html" style="text-decoration:none">ここをクリック</a>

　他にも、こんな指定もできる。a要素にこんな風にtestというクラスを作って…。

a.test:link {text-decoration:none;color:Blue;}/*リンク*/
a.test:visited{text-decoration:none;color:grey;}/*一度行ったリンク*/
a.test:active {text-decoration:none;color:green;}/*リンクを押した瞬間*/
a.test:hover {text-decoration:none;color:red;}/*リンクにマウスを載せたとき*/

　としておいて、リンクの方はclassでtestを指定する。

<a href="aaa.html" class="test">ここをクリック</a>

　上の方法だとリンク部分にいちいちクラスを埋め込む必要があるので、こんな感じの指定の方が楽かも。この場合、divタグのクラス「sidemenu」を一括で変更できる。

div.sidemenu a:link {text-decoration:none;color:Blue;}/*リンク*/
div.sidemenu a:visited{text-decoration:none;color:grey;}/*一度行ったリンク*/
div.sidemenu a:active {text-decoration:none;color:green;}/*リンクを押した瞬間*/
div.sidemenu a:hover {text-decoration:none;color:red;}/*リンクにマウスを載せたとき*/

<div class="sidemenu">
<p><a href="111.html">ここはサイドメニュー</a></p>
<p><a href="222.html">ここはサイドメニュー</a></p>
</div>

字下げ/余白　▲

{ style="margin-left:30px" }

margin指定は外側の余白の指定で、この内側にpaddingが来る。marginもpaddingもtop、right、bottom、leftの順番で指定する。

文字の大きさ　▲

{ style="font-size:120%" }

　さて、実は文字の大きさはpt（ポイント）やらpx（ピクセル）やらいろんな単位で指定できる。ところが、ptやpxなどで指定すると、IEでは文字の大きさを変更できなくなってしまう。これはIEのバグだという説が有力なようだが、以前から指摘されているのにバージョンがあがっても修正されないということは、ビル君の「ポリシー」なのではないかと個人的に思っている。

　また、同じ12ptのはずなのに、Windowsで見た文字とMACで見た文字はまるで大きさが違う（MACの方が大きい）のである。pt指定がよく使われているが、あれはMACで見ると無惨な状態なのだ。

　というわけで、無難な指定方法は「%」である。%指定にすると、IEでも文字の大きさを変更できるし、Windows/MACでも文字の大きさはおおむねそろうのだ。

強敵justify　▲

　文字をブロックのようにきれいに揃えるのがtext-align: justify。でも、このスタイルシート、まともに動作するブラウザってあるのかな？

　IEではこれが拡張されて、さらにtext-justifyをつけ、2段構えで指定する。

text-align: justify;
text-justify: distribute-all-lines;

　IEでは最初のtext-align: justifyでjustifyするぜと宣言し、次のtext-justify: distribute-all-lines;でどんなそろえ方にするか指定する。このそろえ方の指定には次のようなものがある。

auto（規定値）
newspaper（英文向け）
inter-word（単語間のみによる調整）
distribute-all-lines（最後の行も調整する）
inter-ideograph（単語間と文字間による調整）
inter-cluster（アジア言語向け）
distribute（タイ言語向け）
kashida（アラビア語向け）
　どれを使えばいいの？　ということで調べてみたら、日本語の場合はinter-ideographがよいとあちこちに書いてある。

　が、それを信じたらいけない。text-justifyはIEでしか通用しないスタイルシートだが、Macintosh版のIEではとんでもない表示になってしまう。見ただけでもう読む気が失せる、というほどひどい。

　下のデーブルでそれぞれ指定している。Macintosh版IEがお手元にある人はみてやってください。きっと驚きます。少なくともMacintosh版IE5.17ではどのtext-justify指定もまともに表示できず、テーブルをはみ出してしまう。ここにキャプチャーをおくので見てほしい。

　読めたもんじゃないのであった(;_;)

auto：どれを使えばいいの？　というところで調べてみたら、日本語の場合はinter-ideographがよいとのこと。それを信じたらいけない。
これ、Windows版のIEが拡張したヤツらしい画のMacintosh版のIEではとんでもない表示になってしまう。見ただけでもう読む気が失せる、というほどひどい。
newspaper：どれを使えばいいの？　というところで調べてみたら、日本語の場合はinter-ideographがよいとのこと。それを信じたらいけない。
これ、Windows版のIEが拡張したヤツらしい画のMacintosh版のIEではとんでもない表示になってしまう。見ただけでもう読む気が失せる、というほどひどい。

inter-word：どれを使えばいいの？　というところで調べてみたら、日本語の場合はinter-ideographがよいとのこと。それを信じたらいけない。
これ、Windows版のIEが拡張したヤツらしい画のMacintosh版のIEではとんでもない表示になってしまう。見ただけでもう読む気が失せる、というほどひどい。 distribute-all-lines：どれを使えばいいの？　というところで調べてみたら、日本語の場合はinter-ideographがよいとのこと。それを信じたらいけない。
これ、Windows版のIEが拡張したヤツらしい画のMacintosh版のIEではとんでもない表示になってしまう。見ただけでもう読む気が失せる、というほどひどい。

inter-ideograph：どれを使えばいいの？　というところで調べてみたら、日本語の場合はinter-ideographがよいとのこと。それを信じたらいけない。
これ、Windows版のIEが拡張したヤツらしい画のMacintosh版のIEではとんでもない表示になってしまう。見ただけでもう読む気が失せる、というほどひどい。 inter-cluster：どれを使えばいいの？　というところで調べてみたら、日本語の場合はinter-ideographがよいとのこと。それを信じたらいけない。
これ、Windows版のIEが拡張したヤツらしい画のMacintosh版のIEではとんでもない表示になってしまう。見ただけでもう読む気が失せる、というほどひどい。

distribute：どれを使えばいいの？　というところで調べてみたら、日本語の場合はinter-ideographがよいとのこと。それを信じたらいけない。
これ、Windows版のIEが拡張したヤツらしい画のMacintosh版のIEではとんでもない表示になってしまう。見ただけでもう読む気が失せる、というほどひどい。 kashida：どれを使えばいいの？　というところで調べてみたら、日本語の場合はinter-ideographがよいとのこと。それを信じたらいけない。
これ、Windows版のIEが拡張したヤツらしい画のMacintosh版のIEではとんでもない表示になってしまう。見ただけでもう読む気が失せる、というほどひどい。

　対応するには、text-justifyを使わないか、Macintoshだったらtext-justifyのかからないCSSを読み込ませる、という手しかない。スクリプトの見本を示しておく。処理はごく単純で、Windowsだったらwin.cssを読み込ませ、そのほかはmac.cssを読ませている。text-justifyはIEでしか通用しない（他のブラウザでは無視される）ので、ほんとはMacintosh版IEだけはじけばよい。

なお、「text-align: justify;」はNetscapeでも理解するはずだが、ちゃんと両端揃え処理をしないので実質上ないも同然なのだった。

出典：http://studio.recurrent.co.jp/~shimokura/js/lesson3/lesson3_1.html（こちらを元に判定部を簡略化しました）

<script language="javascript">

</script>

見出し用サンプル

　ちょっと見だし用のスタイルシートを作りたくなって、いくつか作ってみました。これが以下のサンプルで使っているスタイルシートです。

大見出しのサンプルね .big06　背景に画像を使ってrepeatしてます。

小見出しのサンプル .sml01　これはIEとネスケでは見え方が違います。IEでは●の点線に見えますが、ネスケ系では■の点線に見えます。失敗です。

小見出しのサンプル .sml02　これは画像を使っていて、それを左に固定しています。文字と画像の位置あわせが難しそう。

コラムタイトル
ここになんだかんだコラムを書くのである。いろいろいろいろ書くのである。それはそれは書くのである。とことん書くのである。ホントか？　ま、いっか。お腹空いたなぁ。お金ないなぁ。暮らしは楽にならないなぁ。ここは.column01。

コラムタイトル
ここになんだかんだコラムを書くのである。いろいろいろいろ書くのである。それはそれは書くのである。とことん書くのである。ホントか？　ま、いっか。お腹空いたなぁ。お金ないなぁ。暮らしは楽にならないなぁ。ここは.column02。

コラムタイトル
ここになんだかんだコラムを書くのである。いろいろいろいろ書くのである。それはそれは書くのである。とことん書くのである。ホントか？　ま、いっか。お腹空いたなぁ。お金ないなぁ。暮らしは楽にならないなぁ。ここは.column03。

コラムタイトル

ここになんだかんだコラムを書くのである。いろいろいろいろ書くのである。それはそれは書くのである。とことん書くのである。ホントか？　ま、いっか。お腹空いたなぁ。お金ないなぁ。暮らしは楽にならないなぁ。ここは.column04。

コラムタイトル
ここになんだかんだコラムを書くのである。いろいろいろいろ書くのである。それはそれは書くのである。とことん書くのである。ホントか？　ま、いっか。お腹空いたなぁ。お金ないなぁ。暮らしは楽にならないなぁ。ここは.column05。

CSS Tips

目次

メモ

見出し用サンプル