※スマホ対応はしてません。

タグ: デザイン

背景に「すりガラス」スタイルはいかが?

カテゴリー: CSS

このブログのデザインは私自身で作ったものなのですが、最近お褒め頂く事が多くて、嬉し恥ずかしといったところです。

特に「背景が面白い」と言う感想を幾つか頂戴しましたので、ちょいと仕組みを紹介してみたいと思います。

すりガラスみたいに

一応「すりガラス」スタイルと呼んでみています。

普通の写真やイラストなどをそのまま背景画像として配置しているのですが、文字などの部分は、すりガラスを通して覗いているようにぼやけて見えるようになります。そうすれば、主張の強かった画像の上に文字を置いても、問題なく読めますよね。

(さらに…)

CSS3のWeb Fontを使ってみたよ。

カテゴリー: CSS

英語だけですが……、Google web fontsのリソースとGoogle Font APIを使うと、簡単にWeb Fontを使って、文字のまま装飾する事ができます。

Web Fontって?

CSS3で追加される機能で、サーバーに置いたフォントを使ったデザインを作れるようになるものです。

今までもフォントを指定することはできましたが、利用者のマシンにそのフォントがインストールされていないと無意味でした。Web Fontは指定のフォントファイルをダウンロードさせる事になるので、誰が見ても同じフォントで表示されるようになります。

ファイルのダウンロードが必要ってのがネックですね。日本語の場合は英語と違ってファイルサイズが膨大になりますから、使いどころは限られそうです……。

Web Fontの使い方

手順はふたつです。

  1. @font-faceでフォントのURLを指定する。
  2. font-familyでそのフォントを指定する。

(さらに…)

小さな文字は12pxまで!

カテゴリー: CSS

極小フォントによるデザインもあるとは思いますが、一般的なサイトを作る場合は12px以上のサイズにするのが良さそうです。

IE8の問題

IE8には、リンクにカーソルを乗せると文字サイズが変化する、というよくわからない不具合があります。

これってIE8のバグなんじゃね・・・?文字の大きさが勝手に変化するよ?|ぼくんちのTV 別館

この問題の一番嫌なところは、再現性がないところですね。なんかときどきなるんだけど、同じ事やってもならない。なんやねんこいつ。

ちなみに私の環境では、このページで再現しまくりです。

W3C CSS 検証サービス

元のサイズ

勝手に変わったサイズ(「简体中文」に注目)

W3Cの検証サービスをおかしくするとはさすがIE、やりますな。

Chromeの問題

Chromeでは文字サイズは10pxより小さなものを指定できないようです。指定しても10pxにまとめられてしまいます。

(さらに…)