[ カテゴリー » WEB DESIGN ]

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

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ドロップシャドウのアップデート

category-icon

 こんばんは、martinです。以前、IEでもCSS3のドロップシャドウ(text-shadowbox-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-shadowinset(内側ドロップシャドウ)や複数のtext-shadow指定にも対応しています。

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

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

   


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

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

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]

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

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を使ったボタンデザイン

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> /* 左右のパディングをゼロに */ 

 2番目のネック、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しか解釈しないように、頭にスター(*)を付けます(スターハック。IE7では効かなくなった* htmlのスターハックとは別物です)。この修正を施したものを見てみましょう。扱いづらいフロート属性はもはや不要です。

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

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

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

 


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

T: Y: ALL: Online:
Created in 0.0252 sec.
prev
2017.6
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 30