Debug:
Array
(
    [0] => 1282064255|WEB DESIGN,CSS|画像なしで吹き出しみたいなもの,cute-baloon-without-images|　この頃は、リッチなツールチップ（バルーンヘルプ）が増えてきたように思います。中には、派手すぎて逆に分かりづらかったりするものもありますが、まぁそういうので遊んでみるのもたまには良いかなと思います。``　自分なりに実装するとしたら、どのようなものが良いか考えてみました。``
    `
  1.  シンプルであること
    2. `
  2.  軽快であること
    3. `
  3.  吹き出しっぽく見せたいな
    4. `
  4.  角丸コーナーが良いな
    5. `
  5.  出来ればドロップシャドウぐらいは付けたい
    6. `
``という感じで、矛盾をはらんだリストですが、これを実装するにはどんなが良いか考えてみました。``
    `
  1.  シンプルであること　→　画像ファイルを使わずにやれるか？
    2. `
  2.  軽快であること　→　フェードなどのエフェクトはなしで
    3. `
  3.  吹き出しっぽく見せたいな　→　あのニョロっとした尻尾みたいなのをどうやって作るか？
    4. `
  4.  角丸コーナーが良いな　→　CSS3に対応していないIEはどうするか？
    5. `
  5.  出来ればドロップシャドウぐらいは付けたい　→　同上
    6. `
``　いつものようにCSS3のサポートが貧弱なIEが足かせとなります。でも、IEでも同じように見せるために四苦八苦するのがweb開発の面白いところでしょう。画像を使わずに、角丸コーナーやドロップシャドウ効果を付けるには、IEのVMLやfilter機能を使うのが良いでしょう。``　角丸コーナーは、[g]VMLのroundrect[/g]を使って実現できます [参考記事： VMLやSVGを用いた角丸コーナー ]。ドロップシャドウは、IEのフィルター機能のひとつであるBlurを使うことでOKです[参考記事： IEでCSS3のドロップシャドウを使いたい]。問題は、吹出しには必須とも言える、あのしっぽみたいなやつですが、これはCSSのボーダー属性を使うことで可能です。トリッキーな（でも正統派）手法ですが、これに関して、レファレンスともいうべきサイトがあります。このサイトは、以前から知っていていつか利用しようと思っていたんですが、ようやくお世話になる時が来ました[にこっ/]``　とりあえず、試験的なモデル（プロトタイプ）を作ってみて、それが意図したように実現可能であれば、それを自動化すべくスクリプト化という流れが良いでしょう。プロトタイプが、よさげな感じに仕上がったのでスクリーンショットをば。`119.8:596:615:485:500:cutePop:center:1:1:なかなか良い感じでは。FirefoxですがIEでもほぼ同じ。:0:``　
実際のデモのページはこちら。
``　で、かなり手抜きですが、これを元にスクリプト実装したのが以下。`
実際のデモのページはこちら。
``　ppBlogで、これらをどれくらい採り入れるかは未定ですが、引き出しは多ければ多いほど良いでしょう[署名/]|martin|1|1|||

    [1] => 1280874963|WEB DESIGN,CSS|IEでもCSS3ドロップシャドウのアップデート,IE-compatible-CSS3-dropShadow|　こんばんは、martinです。以前、IEでもCSS3のドロップシャドウ（text-shadowやbox-shadow）を使いたいということで、それを可能にするスクリプトを書きました。``　で、コメントで、IE7以下では、text-align:centerを指定すると影がすごくズレるというご指摘をいただきました（IE8では問題ない）。調べてみると、どうも「text-align:centerの指定が内包されるボックス要素にも適用されてしまう」という、懐かしいIEのバグが原因のようなので、それを修正しました。ついでに、画面のリサイズ（window.onresize）にも対応させました。以下のスクリーンショットのように、Firefox3.6など今時のブラウザに引けを取らない感じで、ボックスシャドウやテキストシャドウが可能になります。`110.8:630:649:485:500:Firefox3:center:1:1:Firefox3.6でのスクリーンショット。ChromeやOperaでもほぼ同じ。:0:`107.9:704:472:500:335:IE7-compatible:center:1:1:IE8で、後方互換モード（IE7相当）表示。遜色ないレベルで再現。:0:``
実際のデモのページはこちら。→http://p2b.jp/demo/CSS3dropshadow.html
``　使い方は簡単で、CSS3なページのHEAD要素内に、IE（IE9未満）だけ読み込むような外部JavaScript（実態はHTCファイル）を記述するだけです。最新版を添付しておきますね。``
` <!--[if lt IE 9]>`  <script type="text/javascript" src="path/to/css3shadow.htc"></script>` <![endif]-->`
``　デモページにもありますが、box-shadowのinset（内側ドロップシャドウ）や複数のtext-shadow指定にも対応しています。``74.6:642:365:500:284:Box-shadow-inset:center:1:1:IE7互換モードでの表示。まぁ悪くない。:0:``　スクリプト自体はそんなに凝ってるわけではないのですが、あまり気合の入った指定をしなければ、それなりに動いてくれるかなと思います [署名/]|martin|1|1|||

    [2] => 1265740927|WEB DESIGN,CSS|OLリスト要素の番号を制御したい,any-numbering-listing|[style]`h3{margin: 2em 0 2em 1em; border-left: solid 20pt gold; border-bottom: solid 1px gold; font: 600 14pt 'メイリオ', sans-serif; text-align: left;padding-left: .3em;}`[/style]`　久しぶりのエントリーです。自分のもので恐縮ですが、ウェブログの方のエントリーで著作物の引用をしようとした際に、オリジナルがそうであったのでリスト番号付きで文章を引用しようと思いました。引用したい文章は、143節から150節までなので、OL要素を用いてリスト番号を付けようかなと。しかし、任意の番号からリスト番号を割り当てる方法を知らなかったので(普通は、1,2,3,...と割り振られる)、調べたついでにエントリーとして残しておきます。``　HTML4.01 strictより古い(あるいはTransitional)仕様では、(非推奨ながら)OL要素にstart属性があるので、下の例のように任意の番号から始めることができます。``
<ol start="143">` <li>パリ</li>` <li>ストラスブール</li>` <li>ブリュッセル</li>` <li>ロンドン</li>`</ol>
``　しかしながら、HTML4.01 strict ～ XHTML1.0 strictでは、このstart属性が(なぜか)廃止されています。CSSで指定可能だからなのか、その辺りの背景は知りませんが、とにかく廃止されています。ppBlogでは、基本的にXHTML1.0 strict相当でHTMLソースを生成しているので、あまり気楽にはstart属性を使えません(例えば、W3CのValidatorにかけると誤った使用とのエラー表示になる)。なので、どういう指定方法があるのか調べてみました。``
XHTML1.0 strict での対応
``　大きく2通りのやり方があると思います。ひとつはCSSのみでの制御。もうひとつはJavaScriptを用いての制御です。具体的なサンプルを見てみましょう。このサンプルでは2通りでのやり方を載せています。``　　　　　　→http://p2b.jp/demo/any-numbering-ordered-list1.html``　CSS2.1のみで任意のリスト番号を指定することができますが、counter-resetや擬似要素の:beforeなどを使う必要があり、IE7以下では対応していません。まだまだIE6/7を無視できない現状、気軽に使えませんし、何より使い方が分かりづらい。``29.7:702:367:500:261:shot1:center:1:1:CSSのみで制御。リスト番号が文字に埋もれて見にくい。:0:``　また、CSSのみでの制御では、上のスクリーンショットにあるように、リスト内容が長く折り返しが生じる場合、li:beforeによって挿入されたリスト番号が文章に埋もれてしまい、視認性に欠けます。``　2つ目は、JavaScriptで制御する方法です。比較的簡単に実装でき、どのブラウザも対応しています。また、下のショットのように、CSSのみでやる場合と違って、リスト番号はOL要素本来のリスト表示を使うので、リストの数字が文章に埋もれることはないです。``30.3:752:345:500:229:shot2:center:1:1:JavaScriptで指定。リスト番号は文章と独立していて視認性に優れる。:0:``　スクリプトが無効な環境でも、リスト番号自体は表示されるのでCSSのみでの方法より良いのではと考えます(もっとも番号は1から振られますが)。`
function numberingStart(){` document.getElementById("js-way").start = 143; // LI要素のstart属性を指定`}
``
HTML5での対応
``　さて、HTML5では、どうやらOL要素のstart属性は復活しそうな感じです。なので、HTML5にしてしまえば、とても簡単に実装できます。このエントリーの最初に書いたように記述すればOKです。HTML5化ですが、乱暴にいえば、冒頭のDOCTYPE宣言を以下のようにすれば良いです。``
<!DOCTYPE html>  /* HTML5のDOCTYPE宣言はすごくシンプル */
``　簡単ですね。そのうちppBlogもHTML5化予定ではあります。HTML5でのサンプルを挙げておきます。ValidなHTML5です。``　　　　　　→http://p2b.jp/demo/any-numbering-ordered-list2.html``　ちなみに、CSSのみでのやり方では、counter-reset, li:beforeなどを用いてますが、これらのプロパティーは、OL要素に限らずH2要素など、いろんな要素に使用可能です。``　　　　　　→参考 http://www.w3.org/TR/CSS2/generate.html#counters``　最後にですが、最初に挙げたウェブログでのエントリーでは、JavaScriptで指定してます。記事のテキストエリアで以下のように記述しています。``
`[script]`oParts.start(function(){ o('#Buddha').$.start = "143"; });`[/script]
```
まとめ
``　XHTMLなページが多い現状、廃止されたOL要素のstart属性は使うのに抵抗がある。代用としてCSS2.1のcounter-resetなどで実現できるが、その指定はややこしく、またstart属性の完全な代用ではないし、何よりIE6/7が未対応。JavaScriptでstart属性を指定するやり方は、ややトリッキーではあるが、すべてのブラウザで意図通りに指定可能である。``　次世代のHTML5なページにすれば、OL要素のstart属性が問題なく使えるようだし、現状のブラウザでも問題ない。|martin|1|1|||

    [3] => 1261370235|WEB DESIGN,CSS|タグクラウドの日本語文字の改行を制御したい,tagcloud-with-word-break-and-white-space|　こんばんは。以前、フォーラムで`
「タグボックス(いわゆるタグクラウド)に含まれる日本語のキーワードが途中で改行されることがありますが、これを防ぐ方法はありますか？」
`という質問があったように記憶しています(探し出せませんでしたが･･･)。``　その時は、「日本語折り返しの制御はなかなか難しいかもですねぇ」みたいに答えていたと思いますが、ちょっとやってみたところ`解決できたのでエントリーとして残しておきます。``　まずは、以下のショットを。これはppBlogを含めた多くのブログで見かける[g]タグクラウド[/g]ですが、日本語の文字列が途中で改行されて、一瞥しただけではキーワードが認識しにくくなっています。このサンプルのタグクラウドは、まだエントリー数が少ないのでそうでもないですが、タグの数が多くなると、結構みづらくなるのではと思います。`14.5:210:280:0:0:shot1:center:1:0:日本語文字列は半端に改行されている。:0:``　そこで以下のショットのように改善したいです。`14.6:210:302:0:0:shot2:center:1:0:日本語文字が途中で改行されていないことが分かる。:0:``　これはスタイルシート(CSS)をうまく使うことで解決できます。IE系なら、IE5の時代からword-breakというW3Cのワーキングドラフトに含まれる仕様を先行実装しているので、これを使えば少なくともIE5-7では意図した結果が得られます。この値の指定をkeep-allにすればOKです。これで日本語の単語が途中で改行されることはなくなります。でも、これはFirefoxが対応していません。さらには、IE8ではbreak-allの挙動がIE5-7と違うようで、Safari/Chromeと同じように振舞うようです。その結果、keep-allを指定しても、日本語の単語は途中で改行され得ます(参考：「CSS 3におけるテキストの自動改行と禁則処理の定義」)。``　なのでword-breakに頼らずに別の仕様をあたることにします。``　ラッキーなことにどのブラウザでも対応しているものがありました。white-spaceです。``
` 
white-spaceプロパティは、ソース中の半角スペース・タブ・改行の表示の仕方を指定する際に使用します。 
` 
引用元: white-space－スタイルシートリファレンス
`
``　空白だけでなく、改行の表示にもかかわっているのがポイントですね。ppBlogでは、タグクラウドはだいたい以下のようなソースを出力します。``
<ul class="sidebar-tags">` <li><a href="#" rel="tag" style="font-size: 11px;">DOM storage</a></li>` <li><a href="#" rel="tag" style="font-size: 11px;">Flex</a></li>` <li><a href="#" rel="tag" style="font-size: 12px;">CSS</a></li>` <li><a href="#" rel="tag" style="font-size: 13px;">フーリエ級数</a></li>` <li><a href="#" rel="tag" style="font-size: 11px;">PHP</a></li>` <li><a href="#" rel="tag" style="font-size: 15px;">トラベラーズ</a></li>` <li><a href="#" rel="tag" style="font-size: 11px;">ppBlogTips</a></li>` <li><a href="#" rel="tag" style="font-size: 29px;">ppBlog</a></li>` <li><a href="#" rel="tag" style="font-size: 11px;">無限級数</a></li>` <li><a href="#" rel="tag" style="font-size: 11px;">Ajax</a></li>` <li><a href="#" rel="tag" style="font-size: 21px;">アップデート</a></li>` <li><a href="#" rel="tag" style="font-size: 29px;">JavaScript</a></li>` <li><a href="#" rel="tag" style="font-size: 11px;">Firefox</a></li>` <li><a href="#" rel="tag" style="font-size: 11px;">アマゾン</a></li>` <li><a href="#" rel="tag" style="font-size: 11px;">ゴールドバッハの予想</a></li>`</ul>
``これに対して、スタイルシートの指定は以下のようにすれば、うまく行きます。``
`ul.sidebar-tags li { `  display: inline;`  white-space: nowrap; /* これがポイント！ */`  padding-right: 3px;`  zoom: 1; /* これはIE7以下向け */`}
``　基本的には、white-space: nowrap;で事足りますが、これだけだと、IE7以下で表示が崩れるので、IE7以下の[g]hasLayout[/g]を有効にするためにzoom:1という指定をしています。これはほかのブラウザでは無視されます。``　では、具体的なサンプルを見てみましょう。→http://p2b.jp/demo/tagCloud.html``　ちなみに、タグクラウドという名称の由来は、雲(=クラウド, cloud)みたいだからです。なのでサンプルでは、雲のイラストを付けてみました。パワーポイントで円や直線、3角形を組み合わせて適当に作成したんですが、思わずに良い出来栄えになりました[にこっ/]|martin|1|1|||

    [4] => 1209722736|WEB DESIGN,CSS|CSSを使ったボタンデザイン,css-cute-button|[style]`.button-safari {`  background-image: url(/demo/Images/safari-left.png);`}`.button-safari button {`  background-image: url(/demo/Images/safari-right.png);`}``.button-wii, .button-wii button {`  height: 30px; line-height: 30px;`  background-image: url(/demo/Images/wii-left.png);`}`.button-wii button {`  background-image: url(/demo/Images/wii-right.png);`}``.button-japonais, .button-japonais button {`  height: 32px; line-height: 32px;`  background-image: url(/demo/Images/japonais-left.png);`}`.button-japonais button {`  background-image: url(/demo/Images/japonais-right.png);`  color: snow;`}`[/style]`　こんにちは。日本にいるのと同じ感覚で、職場の自分の机上にアップル社の[g]iPhone[/g]を置いていたらいつの間にか盗まれていたmartinです。まだ購入して2ヶ月も経ってなかったと思うけどなぁ。こちらでは、たとえ自分のデスクに置いていても、それが貴重品であれば「どうぞご自由に持っていって下さいませ」ということになるらしい。おかげ様で、今ではトイレに行く際にも、いちいちノートパソコンを隠すようにしています。人を見たら泥棒と思えなんて実践したくはないけど、この国ではしょうがないです。愚痴ったところで、正式版で実装予定のボタンのデザインについてメモしておきます。最終的に目指すのは以下のようなボタンです。``
`
`
`
`
`
``　ppBlogのベータ版1.7.3では、Ajax向けのコメント展開ボタンやコメントフォーム表示ボタンをAタグとSPANタグとを組み合わせて、いわゆるSliding doors と呼ばれるよく知られたテクニックを用いて実現していました。``　参考サイト````バージョン1.6までは、素直にBUTTONタグを使っていたんですが、これだとデザイン上の制約があるなぁ、と思ってました。各種ブラウザでBUTTONタグに対するpaddingの解釈も違うしなぁというのもあって。でも、デザインに関してこれらの点はクリアできることが分かりました。個人的に、BUTTONタグを使う際にデザイン上のネックであった点を挙げてみると、``
    `
  1.  IEで、ボタン内のテキスト左右に指定を無視したパディングが取られること。
    2. `
  2.  Firefoxで、BUTTON要素内に入れたSPAN要素周りのパディング(マージン？)をなくすことが出来ない。
    3. `
``で、これの回避方法が分からなかったというのもあり、A要素とSPANとを用いていたんですが、解決しました。まず、1番目の実例から。以下のような記述の実際例を下に挙げます。スクリーンショットのように、IEではボタンが横長（縦方向もですが）になり、パディングの指定を無視してるのが分かります。（注：以下に挙げるサンプルは、インライン指定になってますが、これはあくまで説明のためで、最終的にはクラス指定などを用いたスタイルシート指定になります）```
<button style="padding: 0;">山のフドウ</button> /* パディングをゼロに */　
```
``0.6:184:32:0:0:shot1:center:1:1:左がFirefox、右がIE7。:0:``　では、このIEでのパディングをなくすにはどうすれば良いか？ ググればいくらか出てきますが(この辺を参考に)、結論から言えば、以下のようにoverflow: visible;を追加すれば良いです。IE8では廃止が予定されている悪名高きhasLayout絡みだとは思いますが･･･。この方式では、この指定によって他のブラウザが影響を受けないのがグーです。``
<button style="padding: 0; overflow: visible;">山のフドウ</button> /* 左右のパディングをゼロに */　
``
```　２番目のネック、FirefoxでBUTTON要素の入れ子要素に余分な余白が付く件ですが、これも実例で。次のようにスタイルを指定します。期待するのは、BUTTON要素の背景色である赤が見えずに、入れ子のSPAN要素に適用した背景色の黄のみが見えることです。SPAN要素に display:block 指定をすることでSPANの高さを親要素のBUTTONの高さと一致させていることに注目。```
<button style="background: red; height: 24px; border: none; margin: 0; padding: 0; overflow: visible;  white-space: nowrap;">`  <span style="background: yellow; height: 24px;  line-height: 24px; display: block;">雲のジュウザ</span>`</button>
``　さて、実例を見てみましょう。``
``
``少なくともFirefox2.0.0.14では(Firefox3 beta 5でも同様)、意図しない余白が左右と上に現れ、BUTTONタグの背景色の赤色が見えると思います。他のブラウザでのスクリーンショットを以下に。IE6だと下の部分にパディングが現れるかもしれません（下に赤いラインが入る）。``1.8:316:28:0:0:shot2:center:1:1:左から順にFirefox2.0x、IE7、Opera9.27、Safari3.1.1:0:``　珍しくIE7が他のモダンなブラウザと肩を並べています[にこっ/]　で、このFirefox特有の振る舞いを回避する方法ですが、この構造（BUTTON要素にSPAN要素を入れ子にする）を維持したいのであれば、スタイルシートに以下の指定を追加します。これは色々試してようやく辿りついた方法ですが、左右の余白までは消すことは出来ません。。```
button::-moz-focus-inner { border-width: 0 !important; }
``　どうせなら他のブラウザみたく左右の余白も消し去りたいです。ではどうするか？ Sliding doorsのテクニックは使いたいので、入れ子構造は必須です。実は、簡単で、BUTTONタグの中に別の要素を入れ子するのではなく、BUTTONタグを入れ子の対象にしてやれば良いです。具体的には、以下のような感じになります。```
<div style="background: red; height: 24px; margin: 0; padding: 0;">` <button style="background: yellow; height: 24px; line-height: 24px; border: none; overflow: visible;">海のリハク</button>`</div>
``　実際のサンプルは下。DIV要素は別にP要素でも構いませんが、BUTTON要素にはブロック要素も含めることが出来るので、そんな場合はインライン要素のみを包括できるP要素では役不足になります。``
`
` `
`
``　おや？ 余白が消えたのはいいですが、今度はBUTTONタグを囲ったDIV要素の背景色の赤が、ズラッと端まで伸びてます。これはDIVがブロックレベルの要素なので当然の振る舞いです。これを回避するには、具体的な横幅を指定するというのがありますが、長さが予め分かっていて決め打ちなら良いのですが、このブログでの使用例のように(コメント数に応じて)長さが変わることもあります。こんなときはどうするか？　よくあるのはフロートを使うやり方。具体的には、DIV要素に``
<div style="background: red; height: 24px; margin: 0; padding: 0; float: left;">
``とfloat: left;を追加します。この修正をしたのが以下。``
` `
`
``正しくレンダリングされていればBUTTONタグの黄色の背景色と黒い文字しか見えないはずです。これでオッケーですね。``うん？　ちょっと待ったぁー（ねるとん紅鯨団風に）。フロートをかませば確かにいいけど、ボタンをセンタリングとかしたいときってどうするの？ うーん、確かにフロートを使用すると、この辺りの扱いが難しくなります。フロートを使わないで出来るやり方はないのか？ ちゃんとあります。CSSには、ブロックレベルの要素をあたかもインライン要素のように扱える指定があって以下のやつです。そのまんまの名前が付いてます。``
display: inline-block;  /* 正当な指定。インラインブロックとして振る舞う */`display: -moz-inline-box;     /* Firefox2.xは上に未対応なので独自のやつで。 */`zoom: 1; *display: inline;    /* hasLayoutをかまし、さらにIEだけにinline指定。 */`
``　何だかちょいと入り組んでます。これは説明が必要ですね。1段目は、まっとうな指定でこれに対応しているのは、Opera9.2xとSafari3x、Firefox3.x、そして条件付きでIEです。Firefox2.xは未対応ですが、独自の-moz-inline-boxで対応できます。さて「条件付きで」IEにも効くと書きましたが、これはどういうことかというと、もともとインライン要素のもの（SPANとかSTRONGとか）に対しては、これを指定するとインラインブロックとして振る舞いますが、もともとブロックレベルの要素(DIVとかPとかH3とか)に対してはこの指定は無効です(それどころか振る舞いが更におかしくなる)。ではどうするか？　うまいやり方があって、IEでは、hasLayoutを有効にして、かつdisplay: inline;という指定をするとほぼdisplay: inline-block; と同じ振る舞いをします。DIV要素はもともとはhasLayoutが無効なので、zoom:1;(常にhasLayoutが有効になる)を指定します。その上でdisplay: inline;という指定をしますが、これだと他のブラウザ向けの指定を上書きしてしまうので、IEしか解釈しないように、頭にスター（＊）を付けます（スターハック。IE７では効かなくなった* htmlのスターハックとは別物です）。この修正を施したものを見てみましょう。扱いづらいフロート属性はもはや不要です。``
`
` `
`
``　ちゃんとセンタリングも出来ますね。``　以上の指定でようやく各ブラウザでの差異を吸収できて、ボタンタグを使う準備ができました。IE6は、これらでも完璧にはならないけど、まぁいいか。前置きが長くなりましたが、こうやってパディングやマージンの指定がきちんと効くやり方（最初はゼロを指定してそれがきちんと適用されるか）を抑えておけば、後は、それを弄るのは簡単です。次のページで、背景画像を利用したボタン効果を見ることにします。と、思いましたが、疲れたのはとりあえず今日はここまで。デモページへのリンクを貼っておきます。``　http://p2b.jp/demo/cute-buttons.html|martin|1|1|||

    [5] => 1207919519|WEB DESIGN,CSS|画像のドロップシャドウ ～ テスト|　この辺に落ち着こうかな。``16.4:350:263:0:0:オオハシ:center:1:1:従来のノーマルタイプ。キャプションは画像の下に表示されます。:0:`
`16.4:350:263:0:0:オオハシ:center:1:1:ポラロイド風。キャプションが画像のボーダー内に含まれるパターン:1:`
`16.4:350:263:0:0:オオハシ:center:1:0:ドロップシャドウあり、ボーダーなしのパターン:0:`
`16.4:350:263:0:0:オオハシ:center:0:1:ドロップシャドウなし、ボーダーありのパターン:0:`
`16.4:350:263:0:0:オオハシ:center:0:0:ドロップシャドウもボーダーもなしのパターン。:0:``　今回の試行で分かったことは、IE7のみに適用されると思っていたCSSハックが、実はOpera9.xにも有効だったこと。```
*+html body div.shadow { margin-bottom: -15px; } /* just for IE7 */
``　何かOpera9.27での表示がおかしいなと思ったら、このハックがOperaにも適用されていました（追記：XML宣言するとOperaにも通ってしまうみたいです）。なので、純粋にIE7のみをターゲットとしたい場合は、以下のようにすると良いらしい。```
*:first-child + html div.shadow { margin-bottom: -15px; } /* just for IE7 */
``　ちょっとググった感じでは、IE6とIE7とを一緒にハック対象とする方法が分からなかったんだけど、個別に書かないとダメかなぁ。``　近々、ドロップシャドウのまとめ記事を書こうかと思っています。|martin|1|1|||

    [6] => 1151614610|WEB DESIGN,CSS|メイリオのススメ|たまにはCSSの話でも。あ、前の記事のオートポスト添付、060630が最新版です。lib.jsの最新版も同梱してます。SafariでもAjaxコメントが開くようにしたりとか、角丸スクリプトをちょい修正したりとか。``　Windowsの次期バージョンであるVistaには、日本語向けに新しく「[g]メイリオ Meiryo[/g]」が標準フォントとして搭載されるそうですが、Windows標準の日本語フォントでは初めてClearTypeに対応しているんじゃないでしょうか。``　マックOSXで日本語を含んだページを見るたんびに、何てフォントが綺麗なんだ！って思った方は自分だけではないはず。これは、アンチエイリアス処理を施してフォント境界のギザギザ(ジャギー)を目立たなくしているからスムーズに見えるんだと思うのですが、何でマックに出来てウィンドウズに出来ないんだ！と思ってしまいます(マック使いの方、失礼)。まぁ、来週の月曜にはマックブック(くろ)が自分の手元にも届くわけですが。。``　で、この進化したフォントのメイリオを今のWindowsXPにも入れてみて、とりあえず次世代の雰囲気を味わいたいですよね。ググればいくらでも出てくるのですが、結構いろんなとこで配布しています（こことか）。純正の開発バージョンということらしいですが。インストールの仕方は各ブログを見ていただくとして、なかなかいい感じです。小さいサイズでもきちんとエイリアス処理が効いて(ClearType有効時)、これまでの、情けないくらいギザギザのMS P ゴシックなどよりは、はるかに見やすく、これでマックと肩を並べられるかもです。``　ちょっとだけ気になる点は、アンチエイリアス処理が微妙な文字があることです。例えば、このブログの3つほど前の記事のタイトルに「更新」という文字を含んでいますが、この「更」の字の最後の一筆が何だかジャギーじゃないですか？　これは自分のPCのグラフィックの問題なのか、それともXPに入れているからなのか分かりませんが。``　あとは、カタカナの文字高が漢字のそれと同じだったり。通常、カタカナは全体のバランスを考えて、ひらがなのサイズと合わせているものですが。まぁ、この辺りはデザイナーのポリシーもあるんでしょう。慣れない内は、「何かカタカナでかくない？」って思います。``　ほかには、文字幅が若干広くなるので、もしブログなどのスタイルシート(CSS)で、このメイリオをフォント指定すると、ページのデザインによっては表示が崩れる可能性もあるかと思います。``　百聞は一見に如かずなので、各OSでのスクリーンショットを載せておきますね。`
`8.6:311:212:0:0:osx-shot:center:1:1:マックOSXでのショット。更新の「更」に注目。スムーズですね。:``5.4:311:212:0:0:win-mspgothic:center:1:1:次がウィンドウズのMS P ゴシックでのショット。ギザギザですねぇ。:``10.3:311:212:0:0:win-meiryo:center:1:1:これが次世代フォント「メイリオ」。総じてキレイ。だけど「更」に注目。マックに比べるとまだか？カタカナのサイズにも着目:``　いかがでしょうか。メイリオは確かに明瞭ですが、「更」の字はまだジャギーな感じは否めません、マックに比べると。自分のPCだけの問題なら良いのですが。ズームアップした画像もどうぞ。``1.3:89:70:0:0:osx-zoom:left:1:1:マックOSX:``0.8:89:70:0:0:win-meiryo-zoom:left:1:1:メイリオ。まぁまぁ。:``0.5:89:70:0:0:win-mspgothic-zoom:left:1:1:MS P ゴシック。論外(笑)。:`
`　どうでしょうか。何だかケチを付けてしまいましたが「メイリオ」が魅力的なフォントであることに変わりはありません。皆さん、現行のパソコンにもMeiryoフォントをインストールしましょう。``　以下、余談になりますが、最初メイリオを見たとき、自分が中学生ぐらいのときに実家にあった東芝のワープロ「ルポ Rupo」のフォントを思い出しました。それに似ているよなと。昔は、パソコンなんてなくて文書作成はワープロでしたからね。あの頃が全盛期だったよなぁ、ワープロ。で、この東芝ルポのフォントというのが、明朝体でもゴシック体でもなく、何だかその中間のスタイルだったんですよね。軒並み、他社がこぞって明朝体を採用していたのに何でだろうと思ったものです。ブラザーの明朝体なんか、特にきれいだなぁと感じたものです。同じ24ドット(!)でもこんなに違うんだって、妙に感心したり。最初はルポのフォントに不満を持っていましたが、その内に、まぁ、これはこれでオリジナリティーがあってよいかもと思うようになりました。古き良き思い出ですね [署名/]`
``
追記
`「東芝ルポ　フォント」でGoogleで検索したら、一番上のサイトに、上述フォントのショットがありました。そうそうこんなんでした[にこっ/]→http://rupo.nanzo.net/tosfont.html|martin|1|1|JavaScript||

    [7] => 1147959219|WEB DESIGN,CSS|CSSのみによる展開メニューとか|ppBlogのRC2リリースはもうすぐです。で、こういうプログラムを作っていると派生的に、使えそうなCSSのテクニックだとかJavaScript/Ajax関連の技術も身に付くもんです。なのでメモも兼ねて汎用性がありそうなのは、ここに書いておこうと思います。``39.3:714:389:500:272:CSSmenu:left:1:1:CSSのみで3階層目までのメニュを実現:``　ネットを検索すれば、CSSのみによる(JavaScriptを用いない)展開型のメニューはいくらでも出てきます。厳密には、IE6に限ってはCSSのサポートが時代遅れなので、IEだけは仕方なくJavaScriptで制御というパターンが多いのですが。``　で、この手のウェブに転がっているPure CSS展開型メニューは、「2階層目」までのやつが殆どではと思います。この2階層目までの展開メニューはppBlogの管理画面でも使っていますが、今回のバージョンアップにあたり、3層目まで展開するやつが欲しくなったので、そんなやつを作りました。原理的には、何階層まででも作ることが可能ですが、階層構造がややこしくなるので、実用上は3階層までというのが妥当なところでしょう。具体的にデモを見てみましょう。``　→http://p2b.jp/demo/CSS_menu1.html``　因みに、残念ながらこのままではIE6では動きませんので、IEに限ってはJavaScriptの助けを借りることになります。IE7βでは、一応は動いてくれますが、ときにトリッキーな動作をします。まぁベータ版ですから。FirefoxやSafari、Operaなどのモダンなブラウザであれば、問題なく動くのではと。ソースも非常にシンプルですので興味がある方は色々アレンジしてみて下さい。``　で、未だに大多数のユーザーが使っているであろうIE6を無視してしまうのは、さすがに心もとないので、JavaScriptで制御する訳ですが、それは次回に。|martin|1|1|||

    [8] => 1127227173|WEB DESIGN,CSS|IEで固定座標を指定する方法|さて、アナウンスしていたようにIEでposition: fixed;を実現する手法について簡単にまとめておきます。まぁこのテクニックもIE7が出るまでのつなぎです。やり方は大まかには2通りあって、純粋にCSS(スタイルシート)のみで指定する方法とJavaScript(正確にはMS独自のDynamic property ダイナミックプロパティーと呼ばれるもの)を使うやり方です。``まず、1.CSSのみの方法から``１．基本的な考え方は、HTML(あるいはBODY)タグのスクロールバーを非表示にして、かわりにDIVタグ(HTMLならBODYタグ)のスクロールバーを表示させる方法です。具体的な記述は以下のようになります。`
`html {`  overflow: hidden;`}`body {`  height: 100%;`  overflow: auto;`}`
``　次に、固定表示したいDIVタグ(タグは何でも良いが)ですが、IE以外のモダンなブラウザであれば、例えば<div id="fixme">を固定したいなら`
`div#fixme {` position: fixed;`}`
`とするところを、IEでは絶対座標にしてあげればいいです。`
` position: absolute;`
`基本的にはこれで事足ります。具体的なデモを見てみましょう。``　　　→ie-fixed-position1.html``　なお、ソースを見てもらえれば分かりますが、最初に通常のスタイルシートを指定して、後からIEだけが認識するコメント構文を用いて、IE7未満のIEブラウザだけがこのコメント部分のCSSを解釈するようにしています。ちなみに[if lt IE 7]のltは less than ですね。`
`<!--[if lt IE 7]> `　このコメント部分はバージョン7未満のIEしか解釈しない`<![endif]-->`
``実際には外部ファイルとしてCSSを用意して、この条件コメント構文で読み込ませるのがメンテナンス的にも良いでしょう。``　では、次はダイナミックプロパティーを用いたやり方を紹介します。``２．Dynamic propertyはマイクロソフトの独自拡張なので、まぁ眉唾っぽいところもありますが、IE限定と割り切れば便利なものです。expression というやつを利用します。上のデモと同じことをするには、やはり条件コメント文の中で以下のようにします。`
`<!--[if lt IE 7]> `<style type="text/css">` #fixed {`  position: absolute;`  top: expression(eval(document.documentElement.scrollTop+50));`  left: 100px;` }`</style>`<![endif]-->`
``では、まずはこれだけ指定したデモを見てみましょう。``　　　→ie-fixed-position2.html``デモを(IEで)見ると何だか固定しているはずのDIVがスクロール毎にガタガタとちらつきますね。これは格好悪いです。同じ現象は、例えばJavaScriptを駆使してsetTimeoutで固定座標(フロートメニュー)を実現するスクリプトでも見られます(まぁこれはタイムラグがその要因ですが)。これは回避したいです。でちゃんと方法があります。次のようにします。`
`body {`  background: url(null) fixed;`}`
``このように、ただBODYタグの背景画像を固定表示するだけでOKです。ここでは画像ファイルは指定していませんが、お好きな画像を指定しても良いです。ポイントは fixed を指定することです。では、これも指定したデモを見てみましょう。``　　　→ie-fixed-position3.html``今度はうまく「きっちりと」固定してくれていると思います。``　いかがでしょうか？ ２通りの方法を示しましたが、ポイントはIEだけに別のスタイルシートを指定するということです。ここでは条件コメント文を用いてIEだけを分岐させました。他にもIEだけ認識すれば良いという部分では、有名なテクニックとしては[g]アンダースコアハック[/g]というものがありますが、これは同じスタイルシートに場違いな指定が入り乱れるのでおススメしません。大元のスタイルシートは標準に沿って書いておき、CSS2をきちんとサポートしたIE7が出てきたらこのコメント部分を削除する、というのがスマートではないでしょうか。|martin|1|1|||

)
ppBlog official

ppBlog 1.9.0

Powerful Personal-publishing Tool

[ カテゴリー » WEB DESIGN ]

エントリー 9 件中 1-5 件を ボックス表示 ⇔ リスト表示

  

12

画像なしで吹き出しみたいなもの

2010/8/18

カテゴリー » WEB DESIGN » CSS

category-icon

　この頃は、リッチなツールチップ（バルーンヘルプ）が増えてきたように思います。中には、派手すぎて逆に分かりづらかったりするものもありますが、まぁそういうので遊んでみるのもたまには良いかなと思います。

　自分なりに実装するとしたら、どのようなものが良いか考えてみました。

  1. シンプルであること
  2. 軽快であること
  3. 吹き出しっぽく見せたいな
  4. 角丸コーナーが良いな
  5. 出来ればドロップシャドウぐらいは付けたい

という感じで、矛盾をはらんだリストですが、これを実装するにはどんなが良いか考えてみました。

  1. シンプルであること　→　画像ファイルを使わずにやれるか？
  2. 軽快であること　→　フェードなどのエフェクトはなしで
  3. 吹き出しっぽく見せたいな　→　あのニョロっとした尻尾みたいなのをどうやって作るか？
  4. 角丸コーナーが良いな　→　CSS3に対応していないIEはどうするか？
  5. 出来ればドロップシャドウぐらいは付けたい　→　同上

　いつものようにCSS3のサポートが貧弱なIEが足かせとなります。でも、IEでも同じように見せるために四苦八苦するのがweb開発の面白いところでしょう。画像を使わずに、角丸コーナーやドロップシャドウ効果を付けるには、IEのVMLやfilter機能を使うのが良いでしょう。

　角丸コーナーは、VMLのroundrectGを使って実現できます [参考記事： VMLやSVGを用いた角丸コーナーLink ]。ドロップシャドウは、IEのフィルター機能のひとつであるBlurを使うことでOKです[参考記事： IEでCSS3のドロップシャドウを使いたいLink ]。問題は、吹出しには必須とも言える、あのしっぽみたいなやつですが、これはCSSのボーダー属性を使うことで可能です。トリッキーな（でも正統派）手法ですが、これに関して、レファレンスともいうべきサイトがありますLink 。このサイトは、以前から知っていていつか利用しようと思っていたんですが、ようやくお世話になる時が来ました:)

　とりあえず、試験的なモデル（プロトタイプ）を作ってみて、それが意図したように実現可能であれば、それを自動化すべくスクリプト化という流れが良いでしょう。プロトタイプが、よさげな感じに仕上がったのでスクリーンショットをば。
cutePop
なかなか良い感じでは。FirefoxですがIEでもほぼ同じ。
　

実際のデモのページはこちら。Link

　で、かなり手抜きですが、これを元にスクリプト実装したのが以下。

実際のデモのページはこちら。Link

　ppBlogで、これらをどれくらい採り入れるかは未定ですが、引き出しは多ければ多いほど良いでしょう

   

— posted by martin at 01:57 am   commentComment [2]  pingTrackBack [0]

IEでもCSS3ドロップシャドウのアップデート

2010/8/4

カテゴリー » WEB DESIGN » CSS

category-icon

　こんばんは、martinです。以前、IEでもCSS3のドロップシャドウ（text-shadowやbox-shadow）を使いたいということで、それを可能にするスクリプトを書きましたLink 。

　で、コメントLink で、IE7以下では、text-align:centerを指定すると影がすごくズレるというご指摘をいただきました（IE8では問題ない）。調べてみると、どうも「text-align:centerの指定が内包されるボックス要素にも適用されてしまう」という、懐かしいIEのバグが原因のようなので、それを修正しました。ついでに、画面のリサイズ（window.onresize）にも対応させました。以下のスクリーンショットのように、Firefox3.6など今時のブラウザに引けを取らない感じで、ボックスシャドウやテキストシャドウが可能になります。
Firefox3
Firefox3.6でのスクリーンショット。ChromeやOperaでもほぼ同じ。
IE7-compatible
IE8で、後方互換モード（IE7相当）表示。遜色ないレベルで再現。

実際のデモのページはこちら。→http://p2b.jp/demo/CSS3dropshadow.htmlLink

　使い方は簡単で、CSS3なページのHEAD要素内に、IE（IE9未満）だけ読み込むような外部JavaScript（実態はHTCファイル）を記述するだけです。最新版を添付しておきますね。

 <!--[if lt IE 9]>
  <script type="text/javascript" src="path/to/css3shadow.htc"></script>
 <![endif]-->

　デモページにもありますが、box-shadowのinset（内側ドロップシャドウ）や複数のtext-shadow指定にも対応しています。

Box-shadow-inset
IE7互換モードでの表示。まぁ悪くない。

　スクリプト自体はそんなに凝ってるわけではないのですが、あまり気合の入った指定をしなければ、それなりに動いてくれるかなと思います

   

— posted by martin at 07:36 am   commentComment [7]  pingTrackBack [0]

OLリスト要素の番号を制御したい

2010/2/10

カテゴリー » WEB DESIGN » CSS

category-icon

　久しぶりのエントリーです。自分のもので恐縮ですが、ウェブログの方のエントリーLink で著作物の引用をしようとした際に、オリジナルがそうであったのでリスト番号付きで文章を引用しようと思いました。引用したい文章は、143節から150節までなので、OL要素を用いてリスト番号を付けようかなと。しかし、任意の番号からリスト番号を割り当てる方法を知らなかったので(普通は、1,2,3,...と割り振られる)、調べたついでにエントリーとして残しておきます。

　HTML4.01 strictより古い(あるいはTransitional)仕様では、(非推奨ながら)OL要素にstart属性があるので、下の例のように任意の番号から始めることができます。

<ol start="143">
 <li>パリ</li>
 <li>ストラスブール</li>
 <li>ブリュッセル</li>
 <li>ロンドン</li>
</ol>

　しかしながら、HTML4.01 strict ～ XHTML1.0 strictでは、このstart属性が(なぜか)廃止されています。CSSで指定可能だからなのか、その辺りの背景は知りませんが、とにかく廃止されています。ppBlogでは、基本的にXHTML1.0 strict相当でHTMLソースを生成しているので、あまり気楽にはstart属性を使えません(例えば、W3CのValidatorLink にかけると誤った使用とのエラー表示になる)。なので、どういう指定方法があるのか調べてみました。

XHTML1.0 strict での対応

　大きく2通りのやり方があると思います。ひとつはCSSのみでの制御。もうひとつはJavaScriptを用いての制御です。具体的なサンプルを見てみましょう。このサンプルでは2通りでのやり方を載せています。

　　　　　　→http://p2b.jp/demo/any-numbering-ordered-list1.htmlLink

　CSS2.1のみで任意のリスト番号を指定することができますが、counter-resetや擬似要素の:beforeなどを使う必要があり、IE7以下では対応していません。まだまだIE6/7を無視できない現状、気軽に使えませんし、何より使い方が分かりづらい。

shot1
CSSのみで制御。リスト番号が文字に埋もれて見にくい。

　また、CSSのみでの制御では、上のスクリーンショットにあるように、リスト内容が長く折り返しが生じる場合、li:beforeによって挿入されたリスト番号が文章に埋もれてしまい、視認性に欠けます。

　2つ目は、JavaScriptで制御する方法です。比較的簡単に実装でき、どのブラウザも対応しています。また、下のショットのように、CSSのみでやる場合と違って、リスト番号はOL要素本来のリスト表示を使うので、リストの数字が文章に埋もれることはないです。

shot2
JavaScriptで指定。リスト番号は文章と独立していて視認性に優れる。
　スクリプトが無効な環境でも、リスト番号自体は表示されるのでCSSのみでの方法より良いのではと考えます(もっとも番号は1から振られますが)。
function numberingStart(){
 document.getElementById("js-way").start = 143; // LI要素のstart属性を指定
}

HTML5での対応

　さて、HTML5では、どうやらOL要素のstart属性は復活しそうな感じLink です。なので、HTML5にしてしまえば、とても簡単に実装できます。このエントリーの最初に書いたように記述すればOKです。HTML5化ですが、乱暴にいえば、冒頭のDOCTYPE宣言を以下のようにすれば良いです。

<!DOCTYPE html>  /* HTML5のDOCTYPE宣言はすごくシンプル */

　簡単ですね。そのうちppBlogもHTML5化予定ではあります。HTML5でのサンプルを挙げておきます。ValidなHTML5です。

　　　　　　→http://p2b.jp/demo/any-numbering-ordered-list2.htmlLink

　ちなみに、CSSのみでのやり方では、counter-reset, li:beforeなどを用いてますが、これらのプロパティーは、OL要素に限らずH2要素など、いろんな要素に使用可能です。

　　　　　　→参考 http://www.w3.org/TR/CSS2/generate.html#countersLink

　最後にですが、最初に挙げたウェブログでのエントリーでは、JavaScriptで指定してます。記事のテキストエリアで以下のように記述しています。

[script]
oParts.start(function(){ o('#Buddha').$.start = "143"; });
[/script]

まとめ

　XHTMLなページが多い現状、廃止されたOL要素のstart属性は使うのに抵抗がある。代用としてCSS2.1のcounter-resetなどで実現できるが、その指定はややこしく、またstart属性の完全な代用ではないし、何よりIE6/7が未対応。JavaScriptでstart属性を指定するやり方は、ややトリッキーではあるが、すべてのブラウザで意図通りに指定可能である。

　次世代のHTML5なページにすれば、OL要素のstart属性が問題なく使えるようだし、現状のブラウザでも問題ない。

— posted by martin at 03:42 am   commentComment [0]  pingTrackBack [0]

タグクラウドの日本語文字の改行を制御したい

2009/12/21

カテゴリー » WEB DESIGN » CSS

category-icon

　こんばんは。以前、フォーラムで

「タグボックス(いわゆるタグクラウド)に含まれる日本語のキーワードが途中で改行されることがありますが、これを防ぐ方法はありますか？」

という質問があったように記憶しています(探し出せませんでしたが･･･)。

　その時は、「日本語折り返しの制御はなかなか難しいかもですねぇ」みたいに答えていたと思いますが、ちょっとやってみたところ解決できたのでエントリーとして残しておきます。

　まずは、以下のショットを。これはppBlogを含めた多くのブログで見かけるタグクラウドGですが、日本語の文字列が途中で改行されて、一瞥しただけではキーワードが認識しにくくなっています。このサンプルのタグクラウドは、まだエントリー数が少ないのでそうでもないですが、タグの数が多くなると、結構みづらくなるのではと思います。
shot1
日本語文字列は半端に改行されている。
　そこで以下のショットのように改善したいです。
shot2
日本語文字が途中で改行されていないことが分かる。

　これはスタイルシート(CSS)をうまく使うことで解決できます。IE系なら、IE5の時代からword-breakというW3Cのワーキングドラフトに含まれる仕様Link を先行実装しているので、これを使えば少なくともIE5-7では意図した結果が得られます。この値の指定をkeep-allにすればOKです。これで日本語の単語が途中で改行されることはなくなります。でも、これはFirefoxが対応していません。さらには、IE8ではbreak-allの挙動がIE5-7と違うようで、Safari/Chromeと同じように振舞うようです。その結果、keep-allを指定しても、日本語の単語は途中で改行され得ます(参考：「CSS 3におけるテキストの自動改行と禁則処理の定義Link 」)。

　なのでword-breakに頼らずに別の仕様をあたることにします。

　ラッキーなことにどのブラウザでも対応しているものがありました。white-spaceです。

white-spaceプロパティは、ソース中の半角スペース・タブ・改行の表示の仕方を指定する際に使用します。

引用元: white-space－スタイルシートリファレンスLink

　空白だけでなく、改行の表示にもかかわっているのがポイントですね。ppBlogでは、タグクラウドはだいたい以下のようなソースを出力します。

<ul class="sidebar-tags">
 <li><a href="#" rel="tag" style="font-size: 11px;">DOM storage</a></li>
 <li><a href="#" rel="tag" style="font-size: 11px;">Flex</a></li>
 <li><a href="#" rel="tag" style="font-size: 12px;">CSS</a></li>
 <li><a href="#" rel="tag" style="font-size: 13px;">フーリエ級数</a></li>
 <li><a href="#" rel="tag" style="font-size: 11px;">PHP</a></li>
 <li><a href="#" rel="tag" style="font-size: 15px;">トラベラーズ</a></li>
 <li><a href="#" rel="tag" style="font-size: 11px;">ppBlogTips</a></li>
 <li><a href="#" rel="tag" style="font-size: 29px;">ppBlog</a></li>
 <li><a href="#" rel="tag" style="font-size: 11px;">無限級数</a></li>
 <li><a href="#" rel="tag" style="font-size: 11px;">Ajax</a></li>
 <li><a href="#" rel="tag" style="font-size: 21px;">アップデート</a></li>
 <li><a href="#" rel="tag" style="font-size: 29px;">JavaScript</a></li>
 <li><a href="#" rel="tag" style="font-size: 11px;">Firefox</a></li>
 <li><a href="#" rel="tag" style="font-size: 11px;">アマゾン</a></li>
 <li><a href="#" rel="tag" style="font-size: 11px;">ゴールドバッハの予想</a></li>
</ul>

これに対して、スタイルシートの指定は以下のようにすれば、うまく行きます。

ul.sidebar-tags li { 
  display: inline;
  white-space: nowrap; /* これがポイント！ */
  padding-right: 3px;
  zoom: 1; /* これはIE7以下向け */
}

　基本的には、white-space: nowrap;で事足りますが、これだけだと、IE7以下で表示が崩れるので、IE7以下のhasLayoutGを有効にするためにzoom:1という指定をしています。これはほかのブラウザでは無視されます。

　では、具体的なサンプルを見てみましょう。→http://p2b.jp/demo/tagCloud.htmlLink

　ちなみに、タグクラウドという名称の由来は、雲(=クラウド, cloud)みたいだからです。なのでサンプルでは、雲のイラストを付けてみました。パワーポイントで円や直線、3角形を組み合わせて適当に作成したんですが、思わずに良い出来栄えになりました:)

— posted by martin at 01:37 pm   commentComment [2]  pingTrackBack [0]

CSSを使ったボタンデザイン

2008/5/2

カテゴリー » WEB DESIGN » CSS

category-icon

　こんにちは。日本にいるのと同じ感覚で、職場の自分の机上にアップル社のiPhoneGを置いていたらいつの間にか盗まれていたmartinです。まだ購入して2ヶ月も経ってなかったと思うけどなぁ。こちらでは、たとえ自分のデスクに置いていても、それが貴重品であれば「どうぞご自由に持っていって下さいませ」ということになるらしい。おかげ様で、今ではトイレに行く際にも、いちいちノートパソコンを隠すようにしています。人を見たら泥棒と思えなんて実践したくはないけど、この国ではしょうがないです。愚痴ったところで、正式版で実装予定のボタンのデザインについてメモしておきます。最終的に目指すのは以下のようなボタンです。

　ppBlogのベータ版1.7.3では、Ajax向けのコメント展開ボタンやコメントフォーム表示ボタンをAタグとSPANタグとを組み合わせて、いわゆるSliding doors Link と呼ばれるよく知られたテクニックを用いて実現していました。

　参考サイト

バージョン1.6までは、素直にBUTTONタグを使っていたんですが、これだとデザイン上の制約があるなぁ、と思ってました。各種ブラウザでBUTTONタグに対するpaddingの解釈も違うしなぁというのもあって。でも、デザインに関してこれらの点はクリアできることが分かりました。個人的に、BUTTONタグを使う際にデザイン上のネックであった点を挙げてみると、

  1. IEで、ボタン内のテキスト左右に指定を無視したパディングが取られること。
  2. Firefoxで、BUTTON要素内に入れたSPAN要素周りのパディング(マージン？)をなくすことが出来ない。

で、これの回避方法が分からなかったというのもあり、A要素とSPANとを用いていたんですが、解決しました。まず、1番目の実例から。以下のような記述の実際例を下に挙げます。スクリーンショットのように、IEではボタンが横長（縦方向もですが）になり、パディングの指定を無視してるのが分かります。（注：以下に挙げるサンプルは、インライン指定になってますが、これはあくまで説明のためで、最終的にはクラス指定などを用いたスタイルシート指定になります）

<button style="padding: 0;">山のフドウ</button> /* パディングをゼロに */　
shot1
左がFirefox、右がIE7。

　では、このIEでのパディングをなくすにはどうすれば良いか？ ググればいくらか出てきますが(この辺Link を参考に)、結論から言えば、以下のようにoverflow: visible;を追加すれば良いです。IE8では廃止が予定されている悪名高きhasLayoutLink 絡みだとは思いますが･･･。この方式では、この指定によって他のブラウザが影響を受けないのがグーです。

<button style="padding: 0; overflow: visible;">山のフドウ</button> /* 左右のパディングをゼロに */　

　２番目のネック、FirefoxでBUTTON要素の入れ子要素に余分な余白が付く件ですが、これも実例で。次のようにスタイルを指定します。期待するのは、BUTTON要素の背景色である赤が見えずに、入れ子のSPAN要素に適用した背景色の黄のみが見えることです。SPAN要素に display:block 指定をすることでSPANの高さを親要素のBUTTONの高さと一致させていることに注目。

<button style="background: red; height: 24px; border: none; margin: 0; padding: 0; overflow: visible;  white-space: nowrap;">
  <span style="background: yellow; height: 24px;  line-height: 24px; display: block;">雲のジュウザ</span>
</button>

　さて、実例を見てみましょう。

少なくともFirefox2.0.0.14では(Firefox3 beta 5でも同様)、意図しない余白が左右と上に現れ、BUTTONタグの背景色の赤色が見えると思います。他のブラウザでのスクリーンショットを以下に。IE6だと下の部分にパディングが現れるかもしれません（下に赤いラインが入る）。

shot2
左から順にFirefox2.0x、IE7、Opera9.27、Safari3.1.1

　珍しくIE7が他のモダンなブラウザと肩を並べています:)　で、このFirefox特有の振る舞いを回避する方法ですが、この構造（BUTTON要素にSPAN要素を入れ子にする）を維持したいのであれば、スタイルシートに以下の指定を追加します。これは色々試してようやく辿りついた方法ですが、左右の余白までは消すことは出来ません。。

button::-moz-focus-inner { border-width: 0 !important; }

　どうせなら他のブラウザみたく左右の余白も消し去りたいです。ではどうするか？ Sliding doorsのテクニックは使いたいので、入れ子構造は必須です。実は、簡単で、BUTTONタグの中に別の要素を入れ子するのではなく、BUTTONタグを入れ子の対象にしてやれば良いです。具体的には、以下のような感じになります。

<div style="background: red; height: 24px; margin: 0; padding: 0;">
 <button style="background: yellow; height: 24px; line-height: 24px; border: none; overflow: visible;">海のリハク</button>
</div>

　実際のサンプルは下。DIV要素は別にP要素でも構いませんが、BUTTON要素にはブロック要素も含めることが出来るので、そんな場合はインライン要素のみを包括できるP要素では役不足になります。

　おや？ 余白が消えたのはいいですが、今度はBUTTONタグを囲ったDIV要素の背景色の赤が、ズラッと端まで伸びてます。これはDIVがブロックレベルの要素なので当然の振る舞いです。これを回避するには、具体的な横幅を指定するというのがありますが、長さが予め分かっていて決め打ちなら良いのですが、このブログでの使用例のように(コメント数に応じて)長さが変わることもあります。こんなときはどうするか？　よくあるのはフロートを使うやり方。具体的には、DIV要素に

<div style="background: red; height: 24px; margin: 0; padding: 0; float: left;">

とfloat: left;を追加します。この修正をしたのが以下。

正しくレンダリングされていればBUTTONタグの黄色の背景色と黒い文字しか見えないはずです。これでオッケーですね。

うん？　ちょっと待ったぁー（ねるとん紅鯨団Link 風に）。フロートをかませば確かにいいけど、ボタンをセンタリングとかしたいときってどうするの？ うーん、確かにフロートを使用すると、この辺りの扱いが難しくなります。フロートを使わないで出来るやり方はないのか？ ちゃんとあります。CSSには、ブロックレベルの要素をあたかもインライン要素のように扱える指定があって以下のやつです。そのまんまの名前が付いてます。

display: inline-block;  /* 正当な指定。インラインブロックとして振る舞う */
display: -moz-inline-box;     /* Firefox2.xは上に未対応なので独自のやつで。 */
zoom: 1; *display: inline;    /* hasLayoutをかまし、さらにIEだけにinline指定。 */

　何だかちょいと入り組んでます。これは説明が必要ですね。1段目は、まっとうな指定でこれに対応しているのは、Opera9.2xとSafari3x、Firefox3.x、そして条件付きでIEです。Firefox2.xは未対応ですが、独自の-moz-inline-boxで対応できます。さて「条件付きで」IEにも効くと書きましたが、これはどういうことかというと、もともとインライン要素のもの（SPANとかSTRONGとか）に対しては、これを指定するとインラインブロックとして振る舞いますが、もともとブロックレベルの要素(DIVとかPとかH3とか)に対してはこの指定は無効です(それどころか振る舞いが更におかしくなる)。ではどうするか？　うまいやり方があって、IEでは、hasLayoutを有効にして、かつdisplay: inline;という指定をするとほぼdisplay: inline-block; と同じ振る舞いをします。DIV要素はもともとはhasLayoutが無効なので、zoom:1;(常にhasLayoutが有効になる)を指定します。その上でdisplay: inline;という指定をしますが、これだと他のブラウザ向けの指定を上書きしてしまうので、IEしか解釈しないように、頭にスター（＊）を付けます（スターハック。IE７では効かなくなった* htmlのスターハックとは別物です）。この修正を施したものを見てみましょう。扱いづらいフロート属性はもはや不要です。

　ちゃんとセンタリングも出来ますね。

　以上の指定でようやく各ブラウザでの差異を吸収できて、ボタンタグを使う準備ができました。IE6は、これらでも完璧にはならないけど、まぁいいか。前置きが長くなりましたが、こうやってパディングやマージンの指定がきちんと効くやり方（最初はゼロを指定してそれがきちんと適用されるか）を抑えておけば、後は、それを弄るのは簡単です。次のページで、背景画像を利用したボタン効果を見ることにします。と、思いましたが、疲れたのはとりあえず今日はここまで。デモページへのリンクを貼っておきます。

　http://p2b.jp/demo/cute-buttons.htmlLink

 

— posted by martin at 07:05 pm   commentComment [12]  pingTrackBack [0]

エントリー 9 件中 1-5 件を ボックス表示 ⇔ リスト表示

  

12
T: Y: ALL: Online:
Created in 0.0338 sec.
prev
2012.2
next
日月火水木金土
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29      
 

Menu

Recently

Ranking

Tags

Comments

Category

Trackbacks

Archives

Others