HOME > フォント/Webデザイン ( カテゴリグループ表示中 )
2008/04
28

CSS でテキストの画像まわり込み

テキストの画像まわり込みでは HTML の IMG タグで行う方法を書きましたが、 CSS ( カスケーディングスタイルシート ) での方法を紹介したいと思います。

単純に CSS で指定する場合には
img { float : 位置指定 ; }
と記述します。ここでの位置指定は 『 right 』 『 left 』 の左右ですが、 『 none 』 を指定して回り込ませないようにすることもできます。 ただし上記のようにすると全ての画像に適用させてしまいますので、実際には特定のクラス内 『 img 』 について指定します。

.content img { float : 位置指定 ; }

『 .content 』 は記事表示部分のブロックです。これはテンプレートによって異なりますので、事前に調べたうえで適宜指定するようにしてください。

上記の方法では無条件に画像へテキストをまわり込ませていますが、現実的な方法ではないかもしれません。画像によってはまわり込ませたくないものや、センタリングしたいものだってあります。そこで、下記のようにそれぞれのクラスを予め指定する方法があります。

.imgL { float: left; margin-right: 10px; }
.imgC { margin: 10px auto; display: block; text-align:center; }
.imgR { float: right; margin-left: 10px; }

上から 『 左寄せ 』 『 センタリング 』 『 右寄せ 』 のクラスとなります。

これらを必要な箇所に
<img class=" 各クラス " src=" URI " />
と使用します。

CSS でのまわり込み解除は
clear : both ;
ですが、次に続く要素にクラスでの指定ができない場合は中身が空のものとなってしまいます ( 次に続く文章を P 要素で括る場合には問題ありません ) 。 気にしないのであればいいのですが、 HTML で
<br clear="位置指定" />
を利用するのがスマートかと思います。

このエントリに含まれるユーザータグ

(当ブログの同一タグを含むエントリを表示できます)

   テキスト       CSS       カスタマイズ       フォント   

ナビゲーションにある 『 User-TAG Cloud 』 から

別のタググループを表示することもできます。

Copyright © 2001-2008 t2 and Project GROWING All rights reserved.

HOME > フォント/Webデザイン ( カテゴリグループ表示中 )
2008/03
09

ブラウザ依存を考える part 1

以前も 『 環境依存・ブラウザ編 』 にてチラッと書きましたが、使用しているブラウザによって見た目の変わる状況は放っておけません。いちばん問題なのはフォントのサイズで、サイト管理者にとっては 『 そんなつもりじゃなかった 』 としても極小文字になっていることがあります。

ブラウザの種類を大きく2つに分けると Internet Explorer ( 以下 IE ) 系と、それ以外( FirefoxOpera など) になりますが、IE 系以外のブラウザがウェブコンテンツの文字サイズを細かく指定できる利点が、皮肉にもひとつの要因となっています。

CSS で 次のように設定しているとします。

body { font-size: 90%; }

すると、IE 系であればブラウザ側で指定した文字サイズ ( 『 中 』 など ) に対して 90% のサイズで表示されるのに対して Firefox などでは 『 ブラウザ側で変更した文字サイズ : たとえば 14( px ) 』 に対して 90% サイズで表示してしまいます。もしも 12 くらいの設定でいると、極小文字になってしまいます。 『 字が小さすぎる 』 という意見が Firefox オーナーから多いのはこのあたりが原因だと思われます ( ctrl + プラスキーを押せば済む話ですが、まぁ面倒ですね ) 。

だからといって CSS において
body { font-size: 14px; }
と書いてしまうと、今度は IE 系のブラウザで文字サイズを変更することができなくなってしまいます。充分に大きなサイズを指定するという手もありますが、レイアウト上そうもいかない場合もあるかと思います。

そこで、次のように記述します。

body { font-size: 90%; }
html>/**/body { font-size: 14px; }

これは CSS ハックといわれるもので、この場合 IE7 を除くモダンブラウザ ( Web標準準拠ブラウザ ) にのみ 14px というサイズで文字を表示させることになります。当然ながら IE 系ではブラウザ側で指定した文字サイズ ( 『 中 』 など ) に対する 90% のサイズで表示されることに影響がありません。

しかし、これをすべてのセレクタやクラスに対して設定するのは骨が折れます。
そこでベースとなる body で包括設定し、後はすべて割合指定 ( ○% ) とすれば簡単にできます。全体の文字サイズの比率も各ブラウザで同等となりますので、オススメです。


ところで、どこのサイトを基準に合わせるかが肝心なところだと思います。このブログは標準で表示されている文字サイズが 14px 相当で、多くのニュースサイトや Yahoo! 、 Google と同じ大きさにしてあります。ディスプレイが 1280×1024 でちょうどよく、 1024×768 でも大きすぎることのないサイズだと思います。

このエントリに含まれるユーザータグ

(当ブログの同一タグを含むエントリを表示できます)

   テキスト       IE       Opera       Safari       CSS       フォント       レンダリングエンジン       Firefox   

ナビゲーションにある 『 User-TAG Cloud 』 から

別のタググループを表示することもできます。

Copyright © 2001-2008 t2 and Project GROWING All rights reserved.

HOME > フォント/Webデザイン ( カテゴリグループ表示中 )
2008/02
22

きれいなフリーフォント

『 きれい 』 とする基準は2つあります。
ひとつは、ギザギザのない滑らかな書体であること。
そしてもうひとつは、視認性が良いこと。

フォントのサイズを大きくしてもきれいであることは、主にデザイン系で求められることですが、一般の人にも重要なのは視認性です。
パソコン上で得られる情報元の大半はテキストであって、これが読みにくいフォントで表示されているとストレスになります。
そこで、今回は無料で手に入れることのできる 『 きれいな 』 フォントを集めました。


■ 『 Osaka 』 『 SH G30 』

Osakafontスレ 過去ログ
いまさら説明の必要ない Osaka フォント ( Windows 版 ) です。
様々な人がいろいろなバージョンで公開しています。
Mac の見やすい Osaka フォントを Win で使おうプロジェクト
同サイトではシャープ製の SHG30 もダウンロード可能です。
これはPDAでの視認性がよく、定番モノです。


■ 『 バーチ 』 『 アポロ 』 『 シーダ 』

株式会社モトヤ Online Moto Shop
これはかなりきれいです。
書体専門の会社が、サンプルとして配布しています。
画面上でもきれいですが、印刷すると驚くほど差が出ます。
実用を考えると 『 モトヤシーダ 』 がオススメです。


■ 『 さざなみ 』

SourceForge.JP: Project Info - efont
配布終了した『 東風フォント 』 の代替フォントとして開発されているもので、もともと Linux での日本語表示を目的に作られたものですが、 Windows でも使うことができます。小さなサイズでも読みやすいようになっています。


■ 『 IPA フォント

独立行政法人情報処理推進機構のフォント付き
この 『 IPAゴシック 』 は私のお気に入りです。
とにかく視認性が良いと思うので、お試しください。
※ バイナリパッケージの中に含まれています。


■ 『 IPA フォント 』 の合成フォント

M+ と IPAフォントの合成フォント
ノーマルのモノでも充分ですが、さらに見やすくなっています。
数種類配布されていますが、コード打ちなら 『 M+2VM+IPAG circle 』 というものが気に入ると思います。特にアルファベットの視認性が良く、作業効率も大幅に上がること請け合いです。


■ 『 M+ 』

M+ OUTLINE FONTS
上記の合成フォントの元になったものです。
フォントリンクに利用したり、自分で合成するのもいいでしょう。
現在はひらがなと英数字のみですが、非常にきれいです。


■ 『 メイリオ 』

Visual Studio 2008 Express Edition 日本語版
最後になりましたが、MS謹製の新フォントです。
ブラウザでの表示を意識し、行間を広くとっているため見やすくなっています。
しかし ClearType がオンである前提ですから、導入時には注意が必要です。
Windows Vista から抜いて、そのまま XP で使うことができます。
再配布がないため、上記サイトでインストールすると付いてくるそうです。

もしも他にお薦めフォントがあれば、教えてください。

このエントリに含まれるユーザータグ

(当ブログの同一タグを含むエントリを表示できます)

   テキスト       フォント       カスタマイズ   

ナビゲーションにある 『 User-TAG Cloud 』 から

別のタググループを表示することもできます。

Copyright © 2001-2008 t2 and Project GROWING All rights reserved.

HOME > フォント/Webデザイン ( カテゴリグループ表示中 )
2008/02
21

W3Cによるテスト

このブログのソースコードをチェックしました。

Validate by URI ページ全体のチェック
W3C CSS Validation Service CSS のみのチェック

ページ全体でやると、とんでもない数のエラーが出ました。

ざっと見てあらかた修正しようと思いましたが、多すぎてサッパリ。
そこで CSS に限ってチェックを進めました。ここでも 100 を超えるエラーだったので、ちょっとビックリです。テンプレートのエラーから作業を進め、記事中のエラーは無視します。気付かないうちに訳のわからないことをしていたことに改めて気付き、恥ずかしい思いをしながら修正を重ねます。

Valid CSS!

ようやくこのバナーが出て、思わず声を上げてしまいました。

そして XHTML に取り掛かります。

エラーが 191 にまで減りましたが、どうにも多すぎます。
プラグインであったりユーザータグであったり…。

どうにも行き詰まってしまったので、一から組み直しです。長年勘違いしていた HTML の癖もわかり、どうにかこのテンプレートでのエラーは全て改善できました。しかし記事中の記述でおかしなところもまだ残っていて、そこが含まれていれば Valid をもらえませんので、また気が向けば修正したいと思います。

このエントリに含まれるユーザータグ

(当ブログの同一タグを含むエントリを表示できます)

   ユーザータグ       CSS       XHTML       W3C   

ナビゲーションにある 『 User-TAG Cloud 』 から

別のタググループを表示することもできます。

Copyright © 2001-2008 t2 and Project GROWING All rights reserved.

HOME > フォント/Webデザイン ( カテゴリグループ表示中 )
2008/02
16

環境依存・フォント編

いわゆるホームページ ( Web サイト ) 作成には付き物の、最大の難所です。
使用するPCの環境、つまりインストールされたフォントの設定や、ディスプレイ環境、さらにはページソースの記述によって大きく変わってしまう可能性があります。

あまり詳しくやると長くなるので、サラッといきます。


■ 文書型宣言 ■


『 標準モード 』 か 『 後方互換モード 』 かによって、基準フォントサイズが変化しますので、フォントサイズで ○% といった指定をする場合は要注意です。

詳しくは 2xup.org の記事を参考にしてください。


■ CSS による文字サイズ指定 ■


フォントサイズを指定する場合、絶対指定か相対指定かで悩むところです。
small や medium 、 large や ○pt とするのが絶対指定、 smaller や larger 、○px や ○em などが相対指定で、○%と指定することを割合指定といいます。
ブラウザの表示文字サイズ変更が効くよう、○% や medium といった絶対指定を行っている人は意外に少ないように感じます。たいていは ○px といった指定を行い、ページ閲覧者側では文字サイズを変更できなくしてしまうことが多いと思います。
もっとも NetScape というブラウザ対策で行っている上級者もいることでしょうが、大半は自らのディスプレイにおける見栄えのみを意識しての行いだと思われます。
これの何が問題かというと、ディスプレイサイズが大きくなれば小さくて読めない文字が出てくることです。

しかしどのような指定を行ったとしても、どのような環境でも同じという訳にはいきません。
FireFox での最小フォントサイズ指定などがあれば、どれだけ計算しても防ぎようがありません。


■ font-family の指定 ■


ありがちなミスとして、自分のPCにだけインストールされているフォントを指定した場合が挙げられます。一般的な人がフォントを自らインストールする場面は、あまり見ることがありません。
たいていは初めから入っているフォントを利用します。
Osaka やヒラギノ( Windows において)、さざなみや IPAゴシック、 SHG30 などは一般的でないと考えるべきです。
ですから、 font-family の指定でこれらのフォントを選ぶ場合にはmいくつか別のフォントの候補を取り入れるべきです。そのフォントに類似して、なおかつ初めから入っているようなフォントを最低でも2つか3つ指定しておきます。

参考 : font-famiry プロパティ ( World Wide Web Guide )


フォントリンク ■


聞きなれない言葉かもしれません。
平たく言うと”指定したフォントで、表示するフォントを入れ替えること”となります。
たとえば MS UI Gothic を指定したとしても、メイリオで表示する、といった具合です。
これにはレジストリ操作が必要になりますが、簡単な方法もあるのでまた別記事にします。

これの何が問題かというと、うっかり忘れることにあります。
上級者が何かのスキンで日本語表示の訂正を行うケースにおいて、このフォントリンクを利用します。しかし、そうした操作で関連付けされたことを忘れてフォントを指定した場合、デフォルトで表示されるものと違うことがあります。

特にたいした問題ではありませんが、ひとつの可能性です。


ほとんどの場合は HTML や CSS での表現や記述方法による依存であって、問題ではないかもしれません。
というのも、ある特定の環境下において表示が乱れる場合は思い切って切り捨てもありえるからです。しかし、せめて極端に文字が小さい設定で、しかもそのサイズを変化させることができない場合は避けたいものです。
せっかく良い内容でも、見ることを諦めてしまいますから。

このエントリに含まれるユーザータグ

(当ブログの同一タグを含むエントリを表示できます)

   テキスト       フォント       カスタマイズ   

ナビゲーションにある 『 User-TAG Cloud 』 から

別のタググループを表示することもできます。

Copyright © 2001-2008 t2 and Project GROWING All rights reserved.