[ カテゴリー » WEB DESIGN » CSS ]

画像のドロップシャドウ ~ テスト

category-icon

 この辺に落ち着こうかな。

オオハシ
従来のノーマルタイプ。キャプションは画像の下に表示されます。

オオハシ
ポラロイド風。キャプションが画像のボーダー内に含まれるパターン

オオハシ
ドロップシャドウあり、ボーダーなしのパターン

オオハシ
ドロップシャドウなし、ボーダーありのパターン

オオハシ
ドロップシャドウもボーダーもなしのパターン。

 今回の試行で分かったことは、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とを一緒にハック対象とする方法が分からなかったんだけど、個別に書かないとダメかなぁ。

 近々、ドロップシャドウのまとめ記事を書こうかと思っています。

 


— posted by martin at 10:11 pm   commentComment [4]  pingTrackBack [0]

メイリオのススメ

category-icon

たまにはCSSの話でも。あ、前の記事のオートポスト添付、060630が最新版です。lib.jsの最新版も同梱してます。SafariでもAjaxコメントが開くようにしたりとか、角丸スクリプトをちょい修正したりとか。

 Windowsの次期バージョンであるVistaには、日本語向けに新しく「メイリオ MeiryoG」が標準フォントとして搭載されるそうですが、Windows標準の日本語フォントでは初めてClearTypeに対応しているんじゃないでしょうか。

 マックOSXで日本語を含んだページを見るたんびに、何てフォントが綺麗なんだ!って思った方は自分だけではないはず。これは、アンチエイリアス処理を施してフォント境界のギザギザ(ジャギー)を目立たなくしているからスムーズに見えるんだと思うのですが、何でマックに出来てウィンドウズに出来ないんだ!と思ってしまいます(マック使いの方、失礼)。まぁ、来週の月曜にはマックブック(くろ)が自分の手元にも届くわけですが。。

 で、この進化したフォントのメイリオを今のWindowsXPにも入れてみて、とりあえず次世代の雰囲気を味わいたいですよね。ググればいくらでも出てくるのですが、結構いろんなとこで配布しています(ここLink とか)。純正の開発バージョンということらしいですが。インストールの仕方は各ブログを見ていただくとして、なかなかいい感じです。小さいサイズでもきちんとエイリアス処理が効いて(ClearType有効時)、これまでの、情けないくらいギザギザのMS P ゴシックなどよりは、はるかに見やすく、これでマックと肩を並べられるかもです。

 ちょっとだけ気になる点は、アンチエイリアス処理が微妙な文字があることです。例えば、このブログの3つほど前の記事のタイトルに「更新」という文字を含んでいますが、この「更」の字の最後の一筆が何だかジャギーじゃないですか? これは自分のPCのグラフィックの問題なのか、それともXPに入れているからなのか分かりませんが。

 あとは、カタカナの文字高が漢字のそれと同じだったり。通常、カタカナは全体のバランスを考えて、ひらがなのサイズと合わせているものですが。まぁ、この辺りはデザイナーのポリシーもあるんでしょう。慣れない内は、「何かカタカナでかくない?」って思います。

 ほかには、文字幅が若干広くなるので、もしブログなどのスタイルシート(CSS)で、このメイリオをフォント指定すると、ページのデザインによっては表示が崩れる可能性もあるかと思います。

 百聞は一見に如かずなので、各OSでのスクリーンショットを載せておきますね。
osx-shot
マックOSXでのショット。更新の「更」に注目。スムーズですね。
win-mspgothic
次がウィンドウズのMS P ゴシックでのショット。ギザギザですねぇ。
win-meiryo
これが次世代フォント「メイリオ」。総じてキレイ。だけど「更」に注目。マックに比べるとまだか?カタカナのサイズにも着目

 いかがでしょうか。メイリオは確かに明瞭ですが、「更」の字はまだジャギーな感じは否めません、マックに比べると。自分のPCだけの問題なら良いのですが。ズームアップした画像もどうぞ。

osx-zoom
マックOSX
win-meiryo-zoom
メイリオ。まぁまぁ。
win-mspgothic-zoom
MS P ゴシック。論外(笑)。

 どうでしょうか。何だかケチを付けてしまいましたが「メイリオ」が魅力的なフォントであることに変わりはありません。皆さん、現行のパソコンにもMeiryoフォントをインストールしましょう。 以下、余談になりますが、最初メイリオを見たとき、自分が中学生ぐらいのときに実家にあった東芝のワープロ「ルポ Rupo」のフォントを思い出しました。それに似ているよなと。昔は、パソコンなんてなくて文書作成はワープロでしたからね。あの頃が全盛期だったよなぁ、ワープロ。で、この東芝ルポのフォントというのが、明朝体でもゴシック体でもなく、何だかその中間のスタイルだったんですよね。軒並み、他社がこぞって明朝体を採用していたのに何でだろうと思ったものです。ブラザーの明朝体なんか、特にきれいだなぁと感じたものです。同じ24ドット(!)でもこんなに違うんだって、妙に感心したり。最初はルポのフォントに不満を持っていましたが、その内に、まぁ、これはこれでオリジナリティーがあってよいかもと思うようになりました。古き良き思い出ですね

追記

「東芝ルポ フォント」でGoogleで検索したら、一番上のサイトLink に、上述フォントのショットがありました。そうそうこんなんでした:)http://rupo.nanzo.net/tosfont.htmlLink

 


— posted by martin at 05:56 am   commentComment [8]  pingTrackBack [0]

CSSのみによる展開メニューとか

category-icon

ppBlogのRC2リリースはもうすぐです。で、こういうプログラムを作っていると派生的に、使えそうなCSSのテクニックだとかJavaScript/Ajax関連の技術も身に付くもんです。なのでメモも兼ねて汎用性がありそうなのは、ここに書いておこうと思います。

CSSmenu
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で制御する訳ですが、それは次回に。


— posted by martin at 10:33 pm   commentComment [3]  pingTrackBack [0]

IEで固定座標を指定する方法

category-icon

さて、アナウンスしていたようにIEでposition: fixed;を実現する手法について簡単にまとめておきます。まぁこのテクニックもIE7が出るまでのつなぎです。やり方は大まかには2通りあって、純粋にCSS(スタイルシート)のみで指定する方法とJavaScript(正確にはMS独自のDynamic property ダイナミックプロパティーと呼ばれるもの)を使うやり方です。

まず、1.CSSのみの方法から

1.基本的な考え方は、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.htmlLink

 なお、ソースを見てもらえれば分かりますが、最初に通常のスタイルシートを指定して、後からIEだけが認識するコメント構文を用いて、IE7未満のIEブラウザだけがこのコメント部分のCSSを解釈するようにしています。ちなみに[if lt IE 7]ltless than ですね。

<!--[if lt IE 7]> 
 このコメント部分はバージョン7未満のIEしか解釈しない
<![endif]-->

実際には外部ファイルとしてCSSを用意して、この条件コメント構文で読み込ませるのがメンテナンス的にも良いでしょう。

 では、次はダイナミックプロパティーを用いたやり方を紹介します。

2.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.htmlLink

デモを(IEで)見ると何だか固定しているはずのDIVがスクロール毎にガタガタとちらつきますね。これは格好悪いです。同じ現象は、例えばJavaScriptを駆使してsetTimeoutで固定座標(フロートメニュー)を実現するスクリプトでも見られます(まぁこれはタイムラグがその要因ですが)。これは回避したいです。でちゃんと方法があります。次のようにします。

body {
  background: url(null) fixed;
}

このように、ただBODYタグの背景画像を固定表示するだけでOKです。ここでは画像ファイルは指定していませんが、お好きな画像を指定しても良いです。ポイントは fixed を指定することです。では、これも指定したデモを見てみましょう。

   →ie-fixed-position3.htmlLink

今度はうまく「きっちりと」固定してくれていると思います。

 いかがでしょうか? 2通りの方法を示しましたが、ポイントはIEだけに別のスタイルシートを指定するということです。ここでは条件コメント文を用いてIEだけを分岐させました。他にもIEだけ認識すれば良いという部分では、有名なテクニックとしてはアンダースコアハックGというものがありますが、これは同じスタイルシートに場違いな指定が入り乱れるのでおススメしません。大元のスタイルシートは標準に沿って書いておき、CSS2をきちんとサポートしたIE7が出てきたらこのコメント部分を削除する、というのがスマートではないでしょうか。


— posted by martin at 11:39 pm   commentComment [11]  pingTrackBack [4]

T: Y: ALL: Online:
Created in 0.0058 sec.
prev
2024.3
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
31