今回は色んなサイトを制作しているときに使用したり、使用を検討したスタイルの指定から、変わったものを取り上げてみます。
●丸付き数字
一般の文書では良く見る丸付き数字ですが、webの世界ではあまり使えませんでした。
以下の文は一文字目が丸付き数字です。
———————————-
① 写真はjpgが向いている。
② イラストはpngが向いている。
③ 悩んだら両方保存する。小さい方を使えばいい。
———————————-
上の様に書いた場合、日本では比較的シェアの高い環境（WindowsとiOS）では問題なく表示されています。
ですが、他の環境（他のOSで使用するブラウザ次第）では文字化けになっている事があります。
これ、直接「①」と書かずに「&#」から始まる文字列を使って「①」(①)と書くと、表示出来る環境が大きく広がります。
実用上は問題ないでしょう。
ですが、文字としての丸付き数字は20までしかありません。
そこで、cssで丸を付けるようにすると、30でも40でも100でも1000でも行けるわけです。
実例は下記サンプルをご覧ください。
どんなスタイルを使っているかは、下記サンプルのソースをご覧ください。
サンプルを見る
実際にはうまく丸にするには、文字サイズや桁数に応じた調整が必要です。
しかもブラウザによって挙動が違うという。
サンプルではChrome用に違うcssを記述しています。（Chromeだけはそのままだと縦長になるため）
で、Chrome用のcssハックを入れたら、iPhoneのSafariで副作用が出たので、Retina用のスタイルを入れて、Safariは元と同じ指定になるようにしています。
cssの指定は、後の指定で前にある指定を上書きできるので、「想定外の物まで影響を受けた」ら、それだけを戻す事が出来るわけです。
サンプルには「一文字目を丸付きにする」という事例がありますが、これはHTMLを触らずにcssだけで解決を図ったというレアなケースが元です。
なお、誰もやらないと思いますが、数字ではなく■のような一部の記号を相手にした場合、Firefoxではうまく動作しません。
（一部の記号に対してFirefoxでは一文字目の判定が誤動作するため。丸を実現するcssとは関係ない。■から始まる行が並んでいるとき、行頭の■だけ色を変えるといったケースでも、Firefoxだけ色が変わらないという事に。）
●回して目立たせる
文章や見出しで注目してほしい所があるとします。
普通は色を付けるとか、マーカーのように背景に色を付けるといった事を行います。
しかし、様々な事情で異なる対応をする事もあります。
あるときは最後に☆を付加しました。
もちろん、これだけでは別に目立ちません。
そこで、これに動きを付ける事に。
サンプルを見る
（ページ自体は先のサンプルと同じです）
これも、実際には回す文字の種類やサイズによって微調整が必要です。
適当にやると文字の中心と回転の中心が異なってしまいます。
まぁ、これを利用する機会というのはほとんど無いような気がしますね。
●色んな時代のバナー
ホームページのデザインは時代によって変化しています。
その変化をバナー広告で表してみました。
サンプルを見る
（これもページ自体は先のサンプルと同じです）
と言っても、本当にその当時のバナーを出している訳ではありません。
（1995年は弊社の創業前というのは置いといて）
その当時風のバナーを現代のcssで作っています。
どうでもいい事ですが、html自体は全てのバナーで同一です。
（テキストリンクまでバナー用htmlで再現という技術の無駄遣い）
この小ネタはhtmlが同一でも、cssだけでまるで違うものが作れるという事例です。
●実は縦でも良い
最近のcssではレスポンシブの為にメディアクエリを使うのが一般的です。
@media only screen and (max-width: 480px){
}
のような感じで、横幅に応じてスタイルを切り替えるのに使われています。
でも、これ、別に横幅専用の機能ではありません。
縦でも機能します。
@media screen and (max-height: 800px) { /* 高さが足りない時 */
}
みたいな指定をした事があります。
これは下にあるサムネイルをクリックすると上にある大きな画像が切り替わるというページで、高さが足りないとサムネイルが隠れるという事態に対し、操作性を確保するため、高さが足りない時はサムネイルを小さくするという処理を入れたときのものです。
要は()の中には判定基準になるものなら、何を入れても良いわけです。
上の丸付きで使った「-webkit-min-device-pixel-ratio」なんかも判定基準の一つです。
「判定基準になるもの」自体はそんなに色々ありませんが、面白いものとして表示領域が縦長か、横長かを判定するものがあります。
例によってサンプルをご覧ください。
サンプルを見る
（例によってこれもページ自体は先のサンプルと同じです）
どんな時に使うのかは微妙ですね。あまり実用例を見た事はありません。
●非互換とバグ
プログラムにはバグと呼ばれる不具合が付きものです。
ゲームの場合、「裏技」と呼ばれるものの中には、このバグを利用したものがあったりします。
で、ブラウザもプログラムである以上バグと無縁という訳にはいきません。
これもサンプルをご覧ください。
サンプルを見る
（毎度のことながらページ自体は先のサンプルと同じです）
ＩＥが特定の条件で不思議な動作をしています。
常に起きるバグというのは、簡単に見つかるので修正も早いのですが、発生条件が限られる場合は、なかなか見つからないため、長らくそのままになる傾向があります。
おせっかい親切にバグ報告をする場合、細かい条件も添えて報告すると良いでしょう。
１１９に電話して「すぐ来て下さい」で電話を切ったら、何らかの手段で場所は何とか判っても余計な時間がかかりますし、誰かが倒れて救急車が必要なのか、火事で消防車が必要なのかすら判りません。
ですので、そんな電話は珍しいのでしょうが、ネットの世界の問い合わせなんかだと普通に「見れません」の１行だけのメールが来て、何処の誰が何を見て言っているのかすらわからないなんて事が珍しくないと、あるクライアントの人が愚痴をこぼしていました。
（業種にもよるのでしょうが、弊社にはそういう「難解」な問い合わせは来ていないようです）
というわけで、今回はスタイルシートについて取り上げてみました。
