現在表示しているページ
Home > Weblog > 2007年07月

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月09日

なかなか進まない

今やっているサンプルWebサイト作成、なかなか思うように進みません。
昨日と今日で、トップページのマークアップが終わりました。
今日はそれに加えて、id名とclass名を決めていました。

これが…なかなか決まらない。
htmlの勉強をすればするほど、決めれなくなる。
id名やclass名に、視覚情報に依存する名前は付けないほうがいいということを知ったので、困った困った。
だからといって、適当な名前にすると、それはそれで、正式なマークアップになってないってコトになりますし。

それで今回お世話になったのが(いや、これ以外で今までにお世話になってますが)、
CSS HappyLifeさんの
です。

こうやってまとまっていると、便利ですよね。

CSS HappyLifeさんは、私がお気に入りに登録して毎日見に行っているサイトのひとつです。
もともとは、cssテンプレートを探しているときに見つけたんです。

ですが、管理人の方が趣味で運営しているといる(た?)サイトを見ると……。
見覚えがあるんです。
Ragnarok Onlineにはまっていたときに、ギルドエンブレム関係で訪れたことがあるはずです。
さらに、看板娘だか看板男だかのでも訪れたことがあったはずです。
そういう(こっちの一方的な)繋がりがあってうれしかったです。

そういう繋がりがあり、ちょくちょく訪れ、コラムを読むうちに、CSSによるWebデザイン(+Web標準)に強い興味を抱くようになったのでした。
っと、話が脱線しそうなので、とりあえず終了。
自分語りはまた今度。

明日は実際にトップページのCSS含めてのコーディング完成しているといいな。
いや、なんかデザインで中途半端だったところ思い出したから、先にそれをするんですけどね。
posted by aoi_gen2 at 01:23 | Comment(0) | TrackBack(0) | 雑記

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月04日

コメントがっ

ポートフォリオのUSOマーケティング株式会社のサイトはWEBデザイナー辞典のホームページ制作課題で作ったものなのですが、
今日気づいたら、ヒトミンさんからのコメントが追加されていました。

この度は展示会へのご出展誠にありがとうございます!
深い赤と、覆い焼きした明るい赤のバランスがすごくいいですね(^x^*)
シンプル美と、力強い活気を感じるバランスのデザインで、素敵です♪ロゴもいいですね!コンセプトをしっかりと決めてデザインすることはとても大事な事だと思います、これからもぜひ頑張ってくださいネ、この度は展示会へのご出展誠にありがとうございました!


う、うれしい……。
いや、褒めてくれるコメントしかつけないのは分かっているんですが、
それでも、自分の作ったものに、他人からの意見を貰えるというのはとても嬉しいです。

さて、これを糧として今のサイトデザイン早く完成させないと。
posted by aoi_gen2 at 01:40 | Comment(0) | TrackBack(0) | 雑記

2007年07月02日

トラックバックスパム

このブログの記事全部にトラックバックスパムが爆撃をかけてました。
そのスパムも、スパムフィルタにかからないように、文字にちょっと工夫をかけていて、「よくやるなぁ」とちょっと感心してしまいました。

出会い系なだけならまだしも、思いっきりアダルト内容だったので、さすがに全部削除しましたよ。
トラックバックは、言及リンクないとダメっていう設定にしたほうがいいのかなぁ…。
posted by aoi_gen2 at 23:07 | Comment(0) | TrackBack(0) | 雑記

今日覚えた言葉

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

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

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

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

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

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