現在表示しているページ
Home > Weblog > Webデザインのメモ

2007年11月13日

font-size:100.01%;

今日、とあるサイトのCSSを見ていたところ、font-size:100.01%;という表記があった。
すぐに検索したが、このことについて書かれている日本語のページは少なかったのですが、

英語圏から学ぶ、body要素に対するfont-size指定方法のまとめ(TRANS [hatena])
bodyにfont-size100.01%を指定する(Emotional Web)

に理由が書かれていました。
IEとOperaのフォントサイズのバグの回避の為に、100%や1emといった表記の変わりに使われているようです。

また一つ勉強になりました。
タグ:CSS
posted by aoi_gen2 at 00:44 | Comment(0) | TrackBack(0) | Webデザインのメモ

2007年09月09日

zoom:1;

今作っているWebサイトのトップページに新着情報を載せる予定なのですが、
DL DT DD を使ったコーディングで、CSSでDDをDTの横に表示するようにマイナスのmarginを使っています。

それで、DDのほうに、リンクを張ったのですが、IEだとなぜかマウスでそのリンクが反応しない。
キーボードでの操作だとリンクにいけるんですが……。

しばらく悪戦苦闘した結果、マイナスmarginで重なっているのが原因のようでした。
なので、DTにwidhtを指定して、重ならないようにしたのですが……それでも症状は治らず。

なので、このCSSのテクニックを使っている方のCSSをじっくり見ると、DDにzoom:1;という値が。
同じように入れると、あら、直った。

確かに、IEのCSSのバグのときに、zoom:1;やheight:1%;を指定すると直るという話は聞いたことがありました。
そこで、何故なのかということを検索してみると、いつも見ているCSS HappyLifeさんの記事の、
IEの様々なバグの真相らしきものというのを見つけました。
hasLayoutがIEの様々なバグの元凶(大袈裟?)だったみたいです。

hasLayoutは、ソコにレイアウトが有るのか無いのかってのを判断しているようで、デフォルトの値がfalseでレイアウト無しになっているので「背景色が指定された要素内でfloatがある時、要素内の文字が消える」とかって現象が起こるっぽいです。
そして、zoomやheightなどがこのhasLayoutの値をtrueにするということらしいです。

hasLayoutについては、
IEでのCSSのバグを回避するhasLayout(コリス)にまとまって載っています。

zoomで指定するのが楽なのかもしれないですけど、独自拡張を使うというのはなるべく避けたいですね。
height指定が可能であれば、そっちを利用していこう。

(とか言っておきながら、FireFoxのスクロールバーの有無でのズレを防止する為に、overflow-y:scroll;を入れているのだけどね…)
タグ:CSS IE
posted by aoi_gen2 at 00:55 | Comment(0) | TrackBack(0) | Webデザインのメモ

2007年09月05日

Color Me Shop!mini

Color Me Shop!miniを今ちょっといじっています。
お知らせ欄で使えるタグを調べていました。

仕様
  • 行末に改行タグが強制的に挿入される。タグ入力の際は気をつけるべし。
    なぜか挿入される改行タグがXHTMLの仕様だったりする(謎)。
  • リストタグはマーカーが消されている。
  • >
  • 規制されているタグは(おそらく)ないだろう。


あと、それ以外で気づいたこと。
ショップタイトルの文字が、title、メタKeywords、メタDescriptionに記載される。
タイトルのつけ方は、Keywordsに使われるということを意識すること。
posted by aoi_gen2 at 11:35 | Comment(0) | TrackBack(0) | Webデザインのメモ

2007年07月10日

続・フォントの指定

フォントの指定の補足です。

自分の書き込みで
「さらに、「※おおまかには問題ない指定」のときに、UTF-8の場合、なぜか欧文フォントが「メイリオ」で、日本語フォントは「MS UI Gothic」になってます……。
EUC-JPのほうは、全部メイリオになっているのに……。」
と書きましたが、

これは、UnicodeやUTF-8で記述した文書では、OpenTypeフォントで2バイト文字を表示することができない。ということらしいです。
引用元:OpenTypeフォントを用いて2バイト文字を表示することができない(6.0)(Internet Explorer (Windows) CSSバグリスト)

なので、たとえば文字コードがutf-8の文章で
body { 
font-family:"メイリオ","MS Pゴシック",sans-serif;
}
と指定したとして、IE6で、どう表示されるかというと

結論から言うと、1バイト文字はメイリオ、2バイト文字はMS UI Gothicで表示されます。

一番最初にマッチしたメイリオで表示されるはずだけども、メイリオはOpenTypeなので、2バイト文字はメイリオで表示されない。
では、2バイト文字は次に指定されているMS Pゴシックで表示されるのかと言うと、IE6では、複数指定されていても、最初にマッチしたフォントでしか表示されません(。
ですが、最初にマッチしたのがOpenTypeのとき限定なのか、標準フォント(serif, sans-serif, cursive, fantasy, monospace)の指定にはマッチするようです。

IE6はUTF-8の動作が不安定ですね…。
XML宣言が省略できるのはUTF-8だから、この文字コードにしているのに…。
XHTMLは色々と難しいなぁ。

以下7/15追記
htmlタグの中で、lang="ja"宣言がちゃんとあれば、2バイト文字もメイリオで表示されました。
重要ですね、lang="ja"は。
今まで書いた記事も、ちょっと見直して見る必要があるかもしれないですね。
タグ:font IE CSS
posted by aoi_gen2 at 21:58 | Comment(0) | TrackBack(0) | Webデザインのメモ

2007年07月07日

メイリオあれこれ

メイリオの半角英数字は斜体になるが日本語部分は斜体に対応してない。

これは、和文にはイタリック表記を行う文化的背景がないという意見からそうなったそうです。
引用元:メイリオ(Wikipedia)

しかし斜体禁止、ユーザーが指定しても無視する、という仕様はいかがなものか。伝統、と言われるほど古い時代はいざ知らず、現代日本語組版において斜体の利用は常識の範囲内だ。ワープロに限らず、ビジュアル系の雑誌でも多用されている。
引用元:メイリオ (Meiryo) の斜体(さすらいの .NET プログラマー)

ですよね……。
和文でイタリックは無い理由は、基本が縦書きだったからイタリック、斜体の文化が無かったのでしょう。
ですが、現在、横書きの文章も多く見られるようになっていますし、そもそも、パソコン、Web上では横書きが基本です(縦書きも出来なくないが、めったに無い)。
横書きが増えてからは、和文でも斜体が使われることが多くなったと思います。

個人的には、Web上での斜体文字というのは、文字が潰れて読みにくくなるので好きではありません。逆に言うと、文字が潰れず、読みにくくなければ、斜体を使っていても気にならないということです。
だからこそ、アンチエイリアスがかかり、小さい文字でも見やすいという特徴のメイリオの日本語部分に斜体が無いのは残念でなりません。

あと気になるのが、アンダーライン関係ですね。
下線が変
  • anchorの下線がpadding-bottomの下に付く?
  • anchorの中の画像にvertical-align:middle;書くと下線もmiddleにきて打ち消し線みたいなる
引用元:メイリオのこれ治らないかな(tikeda::Diary)

フォント自体に余白入れるくらいなら、ブラウザの基本行間をちょっと広く取ればよかったんじゃないでしょうか。
あるいは、フォントの余白を、下だけじゃなく、上下に余白を入れて調整すればよかったんじゃないでしょうかね。

メイリオのバージョンアップとかしてくれないでしょうか。
タグ:CSS font
posted by aoi_gen2 at 23:45 | Comment(0) | TrackBack(0) | Webデザインのメモ

2007年07月06日

フォントの指定

今私がメインで使用しているブラウザはIE6.0です。

それで、今日気づいたのですが、IE6ではCSSでのfont-familyで複数指定しても、最初にマッチしたフォントしか反映されないようです。
なので、私が良くやるように、英数フォントを一番先に指定すると、それ以下のフォント指定が無効になるようです。

このことを調べているときに、他のフォント指定関係で気になったことを上げていきます。

ウインドウズ IE 環境において、和文フォントの指定の前に、英文フォントを指定することでフォントセットを組み替えるってことが(vista メイリオデフォルト環境を除く)可能ですが、それをやった場合には 11px および 9px 該当サイズがその上のサイズと同じ状態になります。
引用元:Windows Vista および、Meiryo フォント登場記念 新フォントサイズ指定手法(The Trap of Web Design)

確かに、文字サイズをこういうパーセントで指定していると、文字の大きさが変だと思っていたのですが、こういう理由だとは知らなかった…。

まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。

それでは例えば総称ファミリー名(generic-family)である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしまう。
引用元:CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係(webデザイナーのナナメガキ)

ここの情報にちょっと補足。
「sans-serif」のみ指定した場合、欧文フォントの違いのみ書かれていますが、日本語フォントも違うんですよね。

Shift_JIS・EUC-JPの場合は「MS UI Gothic」
UTF-8の場合は「デフォルト指定されているフォント」
で表示されます。

さらに、「※おおまかには問題ない指定」のときに、UTF-8の場合、なぜか欧文フォントが「メイリオ」で、日本語フォントは「MS UI Gothic」になってます……。
EUC-JPのほうは、全部メイリオになっているのに……。

ちなみに、OperaとFireFoxだと、文字コードがどうであっても、「指定なし」は「デフォルト指定フォント」、「sans-serif」は「sans-serif指定フォント」、「※おおまかには問題ない指定」は「メイリオ」になってました。


今日の結論
謎だ……。調べたら調べるほど深みにはまる。
もうフォントの指定はしないほうが良いかもしれないですね。
そして、11pxと9pxの文字の指定は避ける。

あー、あと、ブラウザごとの文字の大きさの違いとかで悩んでいたことが、
続フォントサイズ指定手法(The Trap of Web Design)
で分かりました。
あとでまたじっくり見るためにも個人的にメモメモ。

さて、デザイン自体はあとチョットだから終わらせないと。
(あとちょっとで一区切りとなると、スピードが落ちるダメ人間)

2007/07/10追記
続・フォントの指定で「さらに、「※おおまかには問題ない指定」のときに、UTF-8の場合、なぜか欧文フォントが「メイリオ」で、日本語フォントは「MS UI Gothic」になってます……。」の原因が判明したことを書いてます。
タグ:CSS IE font
posted by aoi_gen2 at 00:45 | Comment(0) | TrackBack(1) | Webデザインのメモ

2007年07月02日

今日覚えた言葉

エラスティック・レイアウト
要素の幅にemやexを使うレイアウト。
文字の大きさを変化させるとその要素の幅も同じように変化する。

参考:エラスティック・レイアウトのご紹介(ウノウラボ Unoh Labs)

ネガティブ・マージン
マージンにマイナスの値を指定すること。
これを利用すると、メニュー部固定幅、メイン部可変幅というフロート・レイアウトが可能になる。

参考:フロートとマージン辺(てんぽ)
参考:テーブルを使わない可変幅+固定幅2カラムレイアウト(実録!ホームページ制作者の声)

タグ:CSS
posted by aoi_gen2 at 00:00 | Comment(0) | TrackBack(0) | Webデザインのメモ

2007年06月22日

パンくずリストをつける

結局色々やってみたものの、日にち固定の過去ログページでのパンくずリストの表示がうまくいきません。
とりあえず、今は、月までの表示にしています。

今回、パンくずリストをSeesaaブログにつけるカスタマイズで参考にさせていただいたのは、
Inqsite Blogさんのパンくずリストの記事と
seesaaカスタマイズwikiのパンくずリストを付けるです。

修正を加えるべき箇所が分かれば、あとは、サイトで使っているパンくずリストのhtmlを挿入して、CSSも追加すれば完成です。
さらに詳しいことはとても長いので、続きを読むのリンクからどうぞ。続きを読む
posted by aoi_gen2 at 00:46 | Comment(0) | TrackBack(0) | Webデザインのメモ

2007年06月21日

ブログのカスタマイズ

ブログをサイトのデザインと同じようにするために、
自由形式を駆使したり、HTMLを直接変更させたりしましたが、
一番厄介だったのが、パンくずリストです。

結局、ちょっとバグが残っています。
右のカレンダーの日のリンクをたどったページのパンくずリストが
2007年6月1日で固定表示されてしまいます。

色々調べてみたものの、よく分からず断念しました……。
さすがにもう寝なければ……。
posted by aoi_gen2 at 02:34 | Comment(0) | TrackBack(0) | Webデザインのメモ

2007年06月19日

ieバグ

グローバルメニューのdivにposition:absoluteを指定したら画面から消える

対策
メニューのリストにposition:absoluteを指定する


このバグ?で一時間かかった
ネットで調べられないのは辛い
タグ:position CSS バグ IE
posted by aoi_gen2 at 18:43 | Comment(0) | TrackBack(0) | Webデザインのメモ
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。