打消し線の色を変える
CSS で打ち消し線を表示するには text-decoration に line-through を指定しますが、打ち消し線の色と文字の色を 個別に設定することができません。
打ち消し線と文字の色を別にするには、 次のように <span> を入れ子にします。 外側の <span> で「打ち消し線と文字の色」、 内側の <span> で「文字の色」を設定します。
span.del {
color: red ;
text-decoration : line-through ;
}
span.del span {
color: black ;
}
<span class="del"><span>test</span></span>
これで 打ち消し線と文字の色を別にすることができます。
<TEXTAREA> の縦サイズ
<TEXTAREA> で rows を指定しても IE と Firefox では見た目が違ってしまいます。
例えば次のように定義します。
<textarea rows="3" cols="20">
1.ABCDE
2.あいう
3.アイウ</textarea>
rows を 3 にしていますが、Firefox では 次の赤線で囲んだように 3 行分以外に スペースが空いてしまいます。
不思議に思っていたのですが、 どうやらこのスペースは、横スクロールバーのための予定地だったようです。 スタイルシートで横スクロールバーを出してみます。
textarea {
overflow-x : scroll ;
}
次のようになります。
Firefox はこの状態で 3 行分の縦サイズになりました。 逆に IE の方は横スクロールバーの分 隠れてしまいました。
自動改行させる場合（デフォルト）は、横スクロールがなくても 横に長くなった分は、次の行に改行されるだけなので 横スクロールバーを“なし”に設定してみます。 （ついでに縦スクロールバーを“必須”にしてデザインを合わせます）
textarea {
overflow-x : hidden ;
overflow-y : scroll ;
}
次のようになりました。
IE と Firefox で同じ縦サイズになりました。
横に長くなっても折り返すだけなので問題ありません。
自動改行させない場合はこの方法は使えません。
wrap を off にしてみます。
<textarea rows="3" cols="20" wrap="off">
1.ABCDExxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
2.あいう
3.アイウ</textarea>
横に長くなった分が隠れてしまうだけでなく IE 側にスペースができてしまいました。
スタイルシートで使える色の指定方法
HTML では #RRGGBB と名前で 色を指定することができます。
<body bgcolor="#ffffff" text="black">
スタイルシートでは他の指定方法も使えます。
まず HTML と同じ指定。
<span style="color:red">名前で指定</span> <span style="color:#ff0000">#RRGGBBで指定</span>
#RGB の 3桁で指定することもできます。
<span style="color:#f00">#RGBで指定</span>
#3fb と指定した場合 #33ffbb と同じ色になります。
rgb(R,G,B)での指定です。
0 〜 255 を 10 進数の数値で指定することができます。
<span style="color:rgb(255,0,0);">rgb(R,G,B)で指定</span>
rgb(R%,G%,B%)での指定です。
パーセンテージで 0 〜 100 で指定することができます。
<span style="color:rgb(100%,0%,0%);">rgb(R%,G%,B%)で指定</span>
CSS の visited を利用してブラウザの訪問履歴をチェックする
CSS の visited を利用してブラウザの訪問履歴を取得されうるユーザは 76 % 以上に上る - Slashdot.jp
というような記事があったのですが、理屈はわかるものの 具体的な実装方法が思いつかないので 調べてみました。
getComputedStyle や currentStyle 辺りを使って visited の色に変更されているかを確認するようですね。
下のサイトなどを
参考に IE6 にも対応する形で作ってみました。
気になる人は HTML ソースを見てください。
（動作確認 IE6 Firefox3.6 ）
【参考サイト】
getComputedStyle について調べてたら深みにハマったのでメモ - IT戦記
Yahooo! JAPAN のリンクをいくつか貼ってみました。 「訪問済みチェック」をクリックしてみてください。 URL の方をクリックすると、そのページにジャンプします。
訪問済みチェック → http://www.yahoo.co.jp/
訪問済みチェック → http://gourmet.yahoo.co.jp/
訪問済みチェック → http://realestate.yahoo.co.jp/
訪問済みチェック → http://variety.yahoo.co.jp/
ちなみに次期バージョンの Firefox では対策されるそうです。
CSS の 擬似要素 :after と :before
CSS に :after と :before という擬似要素があります。 名前の通り、擬似的に要素を作ってくれるのですが その応用範囲は広すぎるので、 簡単に「これまではできなかった例」で、紹介します。
次のように <li> タグの :before に “【”を、 :after に “】”を content 属性として指定します。
li:before {
content : "【"
}
li:after {
content : "】"
}
あとは次のように普通にリストを作成します。
<ol> <li>起</li> <li>承</li> <li>転</li> <li>結</li> </ol>
次のような結果になります。
対応していないブラウザもあるので、画像で表示しています。
このように“【】”で囲むことができました。
デザインを CSS だけで定義したくても どうしてもデザインのためのタグを書かなければならないときがあります。
例えば、前回の「吹き出し」も、尖った部分を作るには 次のように、メッセージ部分と別のタグを書く必要がありました。
<div class="balloon"> <p>メッセージ部分</p> <div class="arrow">↓</div> </ol>
多くのブラウザで擬似要素がサポートされれば、 デザインのための要素を書くことはグッと減るはずです。 当然 IE6 も・・・。
CSSだけで三角形を表示する
CSSだけを使って三角形を表示する方法があるようです。 なかなかに目からウロコなテクニックです。
Using borders to produce angled shapes (CSS tutorial)
ポイントは太い枠線の使い方です。 太い幅の、上側と左側のように隣り合う枠線を別の色で塗ります。
.triangular {
border-left : solid 20px red ;
border-top : solid 20px blue ;
}
これを表示すると↓のようになります。
←↑は枠線
左上の部分が斜めになっています。 これを利用するわけです。
.triangular {
width : 0px;
line-height : 0% ;
font-size : 0px ;
border-left : solid 20px red ;
border-top : solid 20px blue ;
}
こんな感じで幅を消すと↓のようになります。
片方の色を背景と同じにすると↓のようになります。
左側・上側・右側を上手く使うと ↓のようになります。
これは次のような指定をしています。
.triangular {
width : 0px;
line-height : 0% ;
font-size : 0px ;
border-left : solid 10px white ;
border-top : solid 20px gray ;
border-right : solid 10px white ;
}
「吹き出し」の尖った部分などにも使えそうです。
こんな矢印も作れます。
ヒントっぽいスタイル
私には、「ヒント（ヘルプ？）付き」の表現は、 なんとなく、緑色で点線の下線のイメージがあります。
CSSには、点線の下線がないので、枠線スタイルを 利用して表現してみます。
<style>
.hint {
border-bottom : 1px dashed green ;
cursor : help ;
color : green ;
}
</style>
<span class="hint" title="ヒントっぽい？">ヒント</span>
実行例です。
ヒント
なんとなくヒントっぽく見えないでしょうか？
