この数値文字参照がすごい! 2008 年版
早いもので今年ももうこの季節である。文字実体参照に比べて覚えづらい数値文字参照、その中でも使用頻度の高いものにスポットを当てる「この数値文字参照がすごい!」の 2008 年版をお届けする。 第 1 位: 〜 (〜) 満場一致。文句なしでぶっちぎりの首位に立ったのはご存知「波ダッシュ」。その ややこしい背景 を考えれば HTML での表記は可能な限り避けて他の表現で代替したいところ。たとえば英語圏では「いつからいつまで」「どこからどこまで」の「から」は en ダッシュ (–) を使うことが多いみたい (ソース: Dash - Wikipedia, the free encyclopedia) なのでそうしてみたり。 とはいえやむを得ずニョロニョロするしかない場合も多い。そんなときはあわてずこの数値文字参照を。その結果、まわりから「なんか汚くね?」と軽く却下されても、来年こそは負
のっちメソッド 2: なりゆき幅で横並び
以前に書いた のっちメソッド: One pixel notched corners の改良版。まずはスクリーン・ショットを。 Gmail の「ラベル」なんかでも使われている、ボックスの四隅が 1 px 欠けた疑似角丸的な表現。これを CSS のみで実現するテクニックが「のっちメソッド」なわけだが、幅が固定のボックスにしか適用できなかった。そこで上図のように内容に応じて縮む「なりゆき幅」を実現するのが今日のお題。 まずはマークアップ。それぞれのボックスはブロックかインラインかを問わず二重の要素でラップされている必要がある。例えばこんな感じ: <ul> <li><a href="#">HTML/XHTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <ul> CSS では、まず float
横並びにしたリスト項目の区切り
こんなふうに、横並びにしたリスト項目の間に区切りを表示させたいときにどうするか? すべての項目に区切りを表示させてしまうと区切りがひとつ多くなってしまうので、なんらかの工夫が必要になってくるわけです。 <ul> <li><a href="/">Home</a></li> <li><a href="/archives/">Archives</a></li> <li><a href="/portfolio/">Portfolio</a></li> <li><a href="/about/">About</a></li> </ul> 上記のようなマークアップを例に、CSS でリスト項目を float: left; または display: inline; で横に並べ、各項目の左側にボーダーまたは背景画像で区切りを配置する場合を考えてみます。 おそらくもっともスマートなのは、いったんすべての項目に
CSS のみで吹き出し
hail2u.net - Weblog - Pure CSS な吹き出し に触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。 Demo: CSS のみで吹き出し マークアップは 2 重の要素があれば OK。ここではそれぞれ bubble と body というクラスを付与した div と p を例に説明する: <div class="bubble"> <p class="body">Speech!</p> </div> CSS の最低限必要な部分のみを抜き出すと以下のとおり。これは背景が黒いボックスの下に左向きのしっぽを出す場合の例: .bubble { float: left; /* または position: absolute; */ border-left: 10px solid black; border-bottom
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
