Weblog - Web Design

CSSで指定するフォント

Posted at 2006-09-19T02:22:00+09:00 in Web Design

CSSで指定するフォントは、訪問者のマシンにその指定したフォントがインストール済みでないと(大抵の場合は)反映されないため、手に入れやすいまたは多くのOSでインストールされているフォントを指定することが多い。手に入れやすいフォントとして代表的なものはCore fonts for the WebというMicrosoftが提供しているフォント群で、具体的にはArialやTrebuchet MS、Verdana、Georgia、Times New Roman、Courier Newなど。あえてLucida GrandeやTahomaを使うというのなら違和感の少ない代替になりそうなフォントを指定しておいて挙げると良いかもねとかいう話。

Core fonts for the Webに含まれる多くのフォントはWindows 98以降では予めインストールされており、Mac OSでもInternet Explorerをインストールすればインストールされる。更には他のOSでも手に入れることができる(ライセンス的に問題が無いのかどうかは知らない)。つまり、これらのフォントを指定すれば多くの環境で同じような表示が期待できるということになる。あくまでも期待できる程度だけど。

手に入れやすいフォントとして他にはBitstream Veraファミリが挙げられるが、Windowsユーザーがわざわざインストールするとも思えないので、手に入れやすいことは確かだが、あまり一般的とは言えないと思う。

ただ「Lucida Grande使いたい！Windowsとかしらねぇぇぇぇ！」とか「Tahoma最高！Tahomaが無いOSとか信じられない！」みたいなアレもあったりするわけで。そういう場合にはその指定したいフォントだけを記述するのではなく、その指定したフォントが無い環境向けに、

というそれぞれのOSでインストールされているフォントの一覧を参考にして、なるべく似たようなフォントも合わせて指定しておくのが良いかも。

というわけでいくつか組み合わせを挙げてみる。

ここでは省いたCore fonts for the Webとの組み合わせなども考慮すると、他にも良い組み合わせが色々と考えられるはず。

諸事情により「フォント指定なんてしなければ良いじゃん」というアプローチについて考慮されていないエントリになっています。ご了承ください。

追記

ダウンロード・ページへのリンクを張っておいたConsolasはVisual Studio 2005がインストールされていないとセットアップで弾かれるらしい(未確認情報)。Express EditionのどれかをインストールしていればOKみたいなので、実質無償で手に入れることができる模様。

Linksをサムネイル化した

Posted at 2006-09-17T00:29:00+09:00 in Web Design

Linksをサムネイル化してみた。各サムネイルはSimpleAPIのウェブサイトサムネイル作成API頼みなのでNOW PRINTINGばかりだったりするけど、それはそのうち解消されるはず。無駄にポップアップとかさせてみたり。

Simple APIのウェブサイトサムネイル作成APIが返す画像は決まったサイズなので、ポップアップはかなり前に考えたposition: relative;を利用したテクニックでやった。CSSのコードは、

div#contents div.story ul.thumbnail {
  margin: 1em 0;
  width: 100%;
  line-height: 1;
  list-style-type: none;
}

div#contents div.story ul.thumbnail li {
  margin: 0 1em 1em 0;
  float: left;
  width: 64px;
  height: 64px;
  overflow: hidden;
}

div#contents div.story ul.thumbnail > li {
  overflow: visible;
}

div#contents div.story ul.thumbnail li a img {
  z-index: 1;
  width: 64px;
  height: 64px;
}

div#contents div.story ul.thumbnail li a:hover {
  width: 128px;
  height: 128px;
}

div#contents div.story ul.thumbnail li a:hover img {
  position: relative;
  top: -32px;
  left: -32px;
  z-index: 2;
  width: 128px;
  height: 128px;
}

という感じ。リスト項目をfloatで並べたりしているのと絡んだコードになっているのでややこしく見えるけど、強調したところがポイントになるところで、要は:hoverで画像のサイズを元に戻しposition: relative;でずらして表示させるというだけ。widthプロパティ/heightプロパティ/topプロパティ/leftプロパティの値は画像の縦横サイズに依存するため、あらかじめ画像サイズがわかっていないとこのテクニックは利用できない。ものすごく単純化させたサンプル・ページも参照。Internet Explorer 6とかでもちゃんと動く。もちろんFirefox 1.5やOpera 9でも。

最初はlivedoor ReaderからOPML形式のフィード購読リストを引っ張ってくることにより、完全に動的に更新させようかなと思っていたのだけど、そこまですることもないかなーと思い、定期的にJSON形式のデータを生成してやることにした。JSON形式のデータの構造は、各サイトごとに、

{
  "title":   "hail2u.net - Weblog",
  "htmlUrl": "http://hail2u.net/blog/",
  "xmlUrl":  "http://feeds.feedburner.com/hail2u/blog"
}

というOPML形式のフィード購読リストに似た形にしておいたけど特に意味は無い。多くのフィード・リーダーで惰性で利用されている(私見)OPML形式の代わりに、こういった再利用しやすい形態の購読リストをインポート/エクスポートする仕組みが流行っても良さそうなもんだけど。

追記@2006/09/21

バックエンドがGeckoなMozShotに変更した。エフェクトをはずしたものにしたせいか、多少キレイになった気がする。

追記@2006/09/21

キレイになったけど重すぎなのでSimpleAPIのウェブサイトサムネイル作成APIに戻した。

HTML 4.01とCSS2のHTMLヘルプ

Posted at 2006-09-09T01:14:00+09:00 in Web Design

HTML 4.01 SpecificationとCascading Style Sheets, level 2のHTML Helpを作ってみた。探せば幾つか見つけられるのだけど、キーワードがないというありがちなアレだったので。

HTMLヘルプとか二年ぶりくらいに作ろうとしたので、作り方をほとんど忘れてた。最終的にはIndexからキーワードを捏造するPerlスクリプトを作ってやったのだけど、そこまでいくのに1時間くらい格闘した気がする。HTML Help WorkshopのGUIでやるのは無理。

で、公開しようかなとか。W3C Document Licenseを読んだところ、変更を加えたり派生物的なものにするわけでなければOKっぽいので。

上記アーカイブはWinRAR 3.51でZIPアーカイブに圧縮した。HTMLヘルプって圧縮しても縮まないんだな(どうでも良い)。パスワードはgerry。嘘です。パスワードなんてかけてない。

WinRAR 3.51はしばらく前にやっていたキャンペーンで手に入れた。結構使いやすい。7-Zipなどそこそこ出来の良いファイラ付きのアーカイバがいくつもフリーウェアとして公開されているので、4000円近くも金払う価値があるとも思わないけど。

pre要素へのスタイル指定

Posted at 2006-09-06T19:38:00+09:00 in Web Design

idea * ideaでエントリになっていたので、言及されていることだしうちのサイトのことだけちょっと書こうかなとか考えてみたら結構色々あって、エントリのネタになりそうだったのでまとめてみた。どっかにもちょろっと書いたけど。

実際にスタイル指定を書く前に抑えておくべき知識として以下のようなものが挙げられると思う。

  1. ほとんどのブラウザでpreは等幅フォントで表示される
  2. ほとんどのブラウザでpreのwhite-spaceはpreになっている
  3. フォント・ファミリを指定する場合は最後にGeneric font familiesが必要になる
  4. overflow: scroll;では縦横どちらにあふれた場合でも縦スクロール・バーと横スクロール・バーが両方とも出る
  5. overflow: auto;ではあふれた方向にのみスクロール・バーが出る
  6. Internet Explorerではoverflow: auto;は内容があふれる場合にうまく解釈されないことがある
  7. heightを指定しなければ内容に合わせて適当に拡大してくれるので縦にはあふれない
  8. Internet Explorerでは内容に合わせてボックス幅が際限なく拡大するのでoverflowと同時にwidthの指定が必要になる
  9. Internet Explorerではボックス・モデルの解釈に問題があるのでwidthと同時にpaddingやborderを指定する場合はwidth: 90%;などと余裕を持たせる必要がある

他にもありそうだけど、とりあえず以上を踏まえてスタイル指定を書くと、

pre {
  padding: 1em;
  border: 1px solid #000;
  width: auto;
  _width: 90%;
  overflow: auto;
  _overflow: scroll;
  color: #000;
  background-color: #f6f6f6;
  font-family: 'MS Gothic', monospace;
}

というようなコードになる。サンプル・ページも用意してみた。FirefoxやOpera、Safariでは横にあふれる場合にのみ横スクロールバーが表示される。Internet Explorerでは常に縦スクロール・バーと横スクロール・バーが現れてしまうので美しくないが、floatによるレイアウトを妨げたりはしなくなる(後述)。overflow-xを利用すれば横スクロールバーだけになるが、Internet Explorerではpreの最下段の一部が隠れてしまったりすることがありオススメできない。ということで、結局は上記のようなコードになるんじゃないかと思う。

overflowを指定する意味は、コードを読みやすくするためではなく(むしろ読みづらくなるはず)、内容に合わせてボックス幅が際限なく拡大するというInternet Explorerの問題点に対する解決のために使っているというのが一般的だと思う。overflowを指定しないと、preの内容が横に長い場合にその親のボックス幅がpreの幅に合わせて拡大してしまうので、floatによるレイアウトを行っている場合などでは、レイアウトが崩れる原因になる。あとはなるべく横スクロールバーが出ないようにするためとかいう意味もあると思う。

idea * ideaの当該エントリでは文字実体参照にどうやって変換するのかとかについても書かれているが、それは利用しているツールに依存する話だと思う。はてなダイアリーにはコードを書く時のためのスーパーpre記法というのがあるし、他のblogツールなどでもプラグインなどであるんじゃないかとか。このサイトの場合は、パブリッシュする時にHTMLに変換するPerlスクリプトに文字実体参照に変換する機能を付けているので、書く時は何も考えずにコピペしてくるだけで良いようにしていたり。

ちなみに、このサイトでは、

div#contents div.story pre {
  margin: 1.5em auto;
  padding: 1em;
  border: 1px solid #cfccc6;
  clear: both;
  width: 90%;
  overflow: scroll;
  color: #333333;
  background-color: #edeae4;
}

div#contents div.story > pre {
  overflow: auto;
}

というコードになっている(フォント指定は別)。アンダースコア・ハックはあまり好きではないので、子セレクタ・ハックを使ってる。

よく使うライセンス・フリーのフォント

Posted at 2006-09-01T23:22:00+09:00 in Web Design

OSより高かったりする値段のフォントを気軽に使えるわけがないので、ライセンス・フリーのフォントは重要。Webページでロゴやら何やらで使う分にはまるで問題ないクオリティなものを見つけては保存、見つけては保存てな感じ。その中で好んでよく使うものを5つ挙げてみる。

Lacuna Regular

Lacuna Regular

Italicの方がスタイリッシュで使いやすそうではあるけど、ところどころに独特の味があるRegularの方が好き。

MiloTF-Text

Milo-Text

小さいサイズでもかなり使える。

Lexia Readable

Lexia Readable

Comic Sans MSの系統だが、ふざけた感じが少ないため場所を選ばずに使える。

Fontin-Regular

Fontin-Regular

セリフのヒゲの部分のあしらい方がきれい。

Devroye

Devroye

スクリプト系ではあるけれどもしっかりした感じで使いやすい。

IdentifontのFree fontsとかライセンス・フリーのフォントがまとまってるサイトはいくつもある。けれど本当にライセンス・フリーなのか良くわからないサイトが多く、ライセンス・フリーかどうかを調べるのが大変。

「フォント・バトンとかいうのやりたい！」とか思った。

CSS2 Specificationでのプロパティの出現順序

Posted at 2006-08-31T12:21:00+09:00 in Web Design

少し前にCSSコーディング・スタイルというエントリで書いたように、各CSSルールのブロック内でプロパティを書く順序はCSS2 Specificationで出てくる順という縛りでCSSを書いている。大体のところはソラで覚えているのだけど、font-weightとfont-sizeはどっちが先だっけとかは忘れるので、備忘録がてら序列付きリストにしてみた。

  1. margin-top
  2. margin-right
  3. margin-bottom
  4. margin-left
  5. margin
  6. padding-top
  7. padding-right
  8. padding-bottom
  9. padding-left
  10. padding
  11. border-top-width
  12. border-right-width
  13. border-bottom-width
  14. border-left-width
  15. border-width
  16. border-top-color
  17. border-right-color
  18. border-bottom-color
  19. border-left-color
  20. border-color
  21. border-top-style
  22. border-right-style
  23. border-bottom-style
  24. border-left-style
  25. border-style
  26. border-top
  27. border-bottom
  28. border-right
  29. border-left
  30. border
  31. display
  32. position
  33. top
  34. right
  35. bottom
  36. left
  37. float
  38. clear
  39. z-index
  40. direction
  41. unicode-bidi
  42. width
  43. min-width
  44. max-width
  45. height
  46. min-height
  47. max-height
  48. line-height
  49. vertical-align
  50. overflow
  51. clip
  52. visibility
  53. content
  54. compact
  55. run-in
  56. quotes
  57. marker-offset
  58. list-style-type
  59. list-style-image
  60. list-style-position
  61. list-style
  62. size
  63. marks
  64. page-break-before
  65. page-break-after
  66. page-break-inside
  67. page
  68. orphans
  69. widows
  70. color
  71. background-color
  72. background-image
  73. background-repeat
  74. background-attachment
  75. background-position
  76. background
  77. font-family
  78. font-style
  79. font-variant
  80. font-weight
  81. font-stretch
  82. font-size
  83. font-size-adjust
  84. font
  85. text-indent
  86. text-align
  87. text-decoration
  88. text-shadow
  89. letter-spacing
  90. word-spacing
  91. text-transform
  92. white-space
  93. table-layout
  94. empty-cells
  95. speak-header
  96. cursor
  97. outline
  98. volume
  99. speak
  100. pause-before
  101. pause-after
  102. pause
  103. cue-before
  104. cue-after
  105. cue
  106. play-during
  107. azimuth
  108. elevation
  109. speech-rate
  110. voice-family
  111. pitch
  112. pitch-range
  113. stress
  114. richness
  115. speak-punctuation
  116. speak-numeral

そもそもCSSは複雑に書こうとする方が難しく、フラットで単純な構造のコードになる。そのため、ある要素に対するスタイル指定がCSSファイル内であちらこちらに散らばっているような書き方さえしなければそれほど読みづらいものではないので、自分で書いて自分で読む分にはプロパティの順序なんかはどうでも良いとも思う。

しかし、CSSを第三者に読ませるとなると、どういうルールで書いているかとかそういうことを説明しなければならない(ことがある)。そういった時に「プロパティの記述順はCSS2 Specificationで出てくる順序です」と明快に説明が出来ると便利なので、こんな自分ルールになっている。

追記

重複していた

を削除した。

ちょっとだけリデザイン @ 2006/08/29

Posted at 2006-08-30T06:48:00+09:00 in Web Design

2006/08/29時点のスクリーンショット

全面的に作り直そうというか色を変えようと思っていたのだけど、面倒になったので考えていたアイディアの一部を使って少しだけリニューアル。メニューのカラムを突き出る感じ(どんな感じだ)にし、それに合わせてフッターを少し弄った。HTMLは弄ってない。ポリシーではなく面倒だったから。妙に見えたらCtrl+F5で。

メニューの部分がのっぺりだらーっと伸びているのが気になってきたので、パーツごとに分離独立する形にしようと考えていた。本来はちゃんと作り直す予定だったのだけど、色を変えるのすら面倒になったので、これまでのメニュー・カラムの背景画像をうまく再利用してみた。

メニュー・カラムはdl要素でマークアップされているので、右上が角丸の画像をdt要素の背景、右下が角丸の画像をdd要素の背景にするだけで大体完成。dt要素内のテキストを浮く感じで配置するには、背景画像を右下に繰り返し無しで置き、適当にpadding-bottomを確保(ここでは背景画像の高さ分だけ)すれば良い。dd要素の高さは不定だが、背景画像はあらかじめ縦長(ここでは2400 pixel)にしておけば途切れることはまず無い。dt要素のpadding-bottomやdd要素のpadding-topを0にしてしまうと、中身の要素のmarginにあたる部分には背景画像が表示されないので、こういったことをやろうとしている人は気をつけると良い。

フォント指定は、

@charset "UTF-8";

/* ---------------------------------------------------------------------

  Title:    hail2u.net default styles for fonts
  Author:   Kyo Nagashima 
  Modified: 2006-08-29T15:17:35+09:00
  License:  http://creativecommons.org/licenses/by-nc/2.1/jp/

  This style based on Yahoo! UI Library's Fonts CSS
  Copyright (c) 2006, Yahoo! Inc. All rights reserved.

--------------------------------------------------------------------- */

body {
  font: 13px Verdana, Geneva, sans-serif;
  *font-size: small;
  *font: x-small;
}

h1, h2, h3, h4, h5, h6, dt {
  font-family: 'Trebuchet MS', Helvetica, sans-serif;
}

table {
  font-size: inherit;
  font: 100%;
}

select, input, textarea {
  font: 99% Verdana, Geneva, sans-serif;
}

pre, code, samp, kbd, var {
  font: 100% 'Lucida Console', Monaco, monospace;
}

という、Yahoo! UI LibraryのFonts CSSをベースにしたものに変更。この変更に合わせて、メインのCSSファイル内でのフォント・サイズの指定を%単位にしたり、em単位での長さ指定の値の調節とかどうでも良いことにも手を入れた。

他に8bitと24bitのPNGが混在していたおかげでInternet ExplorerやSafariで微妙に色ずれを起こしていたのも直したつもり。

追記@2006/09/01

htmlへの前景色や背景画像などのスタイル指定を削除するために背景画像を変更し、それに合わせてmarginやheightなどを調節したりとか。スーパー・リロード(Ctrl+F5)必須。

アスタリスクをプロパティ名の頭につけるというCSSハック

Posted at 2006-08-24T04:28:00+09:00 in Web Design

CSSの各セレクタのブロック内でInternet ExplorerとFirefoxやOperaなどで分けてプロパティを設定するハックとしてUnderscore Hackという有名なものがあるが、Details on our CSS changes for IE7によるとInternet Explorer 7では修正されている。だが、アンダースコアのかわりにアスタリスク(*)をプロパティ名の頭につけるというAsterisk Hack(勝手に命名)は健在だったりとか。

Asterisk HackはUnderscore Hackとほとんど同じで、

#menu {
  position: fixed;
  *position: absolute;
}

というような記述をするハック(サンプル・ページ)。結果はInternet Explorerでabsolute、FirefoxやOperaなどではfixedというように適用されるスタイルを切り分けることが出来る。

Underscore Hackと同じく記述が簡単でそこそこ読みやすいので実用性は高そう。しかしアンダースコアと違いアスタリスクはプロパティ名に使用できる文字ではないため、invalidなCSSになることは知っておくべき。それを踏まえた上であえて使うというのなら誰も止めない。きっと。

Internet Explorer 7のCSSパーサーはバグの修正とかは頑張っているみたいだけど、このハックが通用してしまうことは、きっと上で触れたCSS2のトークン定義に従って根本的に修正したというわけではなさそう。という感想を持った(実際はどうだか知らんけど)。ということを書きたかった。

:first-letter擬似要素と各擬似クラス絡みのInternet Explorer 6のバグ

Posted at 2006-08-23T02:24:00+09:00 in Web Design

all about blosxomのサイトを作った時にハマった、:first-letter絡みのInternet Explorer 6のバグにまたハマった(学習していない)のでまとめておいてみる。そのバグは、display: block;としたa要素に対して:first-letter擬似要素・:hover擬似クラス・:hover擬似クラスなどを利用してスタイルの指定をした場合、:first-letter擬似要素によるスタイルの指定は有効であるが、各擬似クラスによるスタイルの指定が無効になるというもの。

何はともあれテスト・ページを参照。例としてタブ型のナビゲーションを作成してみた(というかタブ型のナビゲーションを作っているときに遭遇した)。

CSSのコードのバグを含む部分は、

div#navigation ul li a:first-letter {
  text-decoration: underline;
}

div#navigation ul li a:hover {
  color: #ffffff;
  background-color: #006699;
}

div#navigation ul li a:active {
  color: #ffffff;
  background-color: #996600;
}

と、特に問題のありそうなところはなく、Firefox 1.5やOpera 9では意図した通りのスタイルの指定になる。いろいろ試してみたが、回避手段は:first-letter擬似要素を使わないという以外に無い模様。しかもこのバグは同じページ内の全ての擬似クラスによるスタイルの指定がおかしくなるというかなり意味不明な挙動をする模様(テスト・ページの付記を参照)。

Internet Explorer 6においてa要素に対する:first-letter擬似要素を使ったセレクタは、クラッシュするという致命的なバグも含めかなり挙動不審。:first-letter擬似要素はブロック・レベル要素のみでしかマッチしないということになっているので、考慮外だったとかそういうことなのだろうか。つまるところ:first-letter擬似要素を使ったセレクタは、Internet Explorer以外だけに適用されるようにしか使うことが出来ないということになる。

Internet Explorer 7 Beta 3では直っている感じ。どうでもいいけど。

CSSコーディング・スタイル

Posted at 2006-08-20T18:33:00+09:00 in Web Design

「こういうスタイルがCSSを記述する時に便利だよ！コンセンサス(つづりは知らない)も取れるし！」とかいう建設的な意見はまるでないんですが、CSSを書く時の自分ルールは結構あるのでまとめがてらエントリにする。もちろんhxxk.jpのCSS の記述ルール記事のまとめというエントリを見たから書く気になったんだけど。

とりあえずスタイル指定を取っ払う
各ブラウザ間でのデフォルトの状態での差異を考えると頭が痛くなってくるので、手始めに取っ払って勝負。
フォント・ファミリの指定は別ファイル
見出しはこのフォントで本文はこのフォントといったように、フォント・ファミリの指定はいろいろな要素にまとめて指定することが多いので、まとめて別ファイルに。
様々なところで使うスタイルはhiddenやwrapperなどというクラスでまとめる
CSS側でこの要素ではclear: both;とかいうのでも良いのだけど、こういったものは比較的良く使うので、クラスとしてまとめておく。クラス名は複数持てるので、class="adsense wrapper"などといった感じでHTML側で利用。また、こういったルールはCSSファイルの最初の方に書いておく。
セレクタを書く順はHTMLファイル内で出てくる順
フッタ関連の指定は下の方にあるとか、把握しやすいので。
セレクタはこれでもかと細かく指定
div#contents div.story form dl dd select optionとかいった感じ。セレクタを見ればどういう指定かほぼ確実にわかるので、読解の上での利点ははかりしれない(大げさ)。書くのはかなりメンドイ。
{と}の後で必ず改行
たとえプロパティがひとつしかなくても改行。一貫していれば、読みやすいと思う。
省略形のプロパティは使わない
省略形はどういう順番で書くものかおぼえてないから。例外はmarginとpaddingで、これらはまとめて書くことが多くいちいち書くのは大変だから。ちょっと一貫性がない。
プロパティを書く順序はCSS2 Specificationで出てくる順
何人かでひとつのCSSファイルを編集していたときに確立されたルール。記述の上での利点はとくにはないが、読解の上では利点がある。

こんなところ。

PHP版のCSSTidyを利用したフォーマッターを作ってみようかなとか思った。思っただけ。CSSTidyの--sort_propertiesオプションがもっとこうアレな感じだったら便利なのに。

Page 1 of 13: 1 2 3 4 5 6 7 8 9 10 11 »

Weblog archives

by Month

by Category

This page was last modified on 2006-09-21T13:53:16+09:00 (in 0.154 secs).