物事をシンプルにするます

ロゴ

手持ちのフォントで"h"だけを打ち出して良さそうなのを選んだだけという。使ったフォントはJandlesで、MyFontsから無料で手に入る。ベベルるかグラデるか迷った末グラデった。もうアルファチャンネル付きのPNGファイルでいいよね？　いいよね！

ロゴの配置はちょっと悩んだ。マージンに負の値を入れてfloatさせればいけそうな気がしたが、それではコンテンツとかぶさるように配置するのは無理な感じだった。また、コンテンツの左右のマージンが一定ではないので、absoluteでも正確に配置できない。とりあえず親要素をrelative、ロゴ部分をabsoluteにしてやって、親要素を基準にしてロゴを絶対配置してみた。

#logo {
  position: relative;
}

#logo a {
  margin-right: 12px;
  display: block;
  position: absolute;
  top: 0px;
  right: 100%;
}

うまくいってるような気がする。leftに負の値を指定するよりも、rightとmargin-rightで配置しておくとロゴ(の大きさ)を変えた時にもそのままで良いので少し楽。

ナビゲーション

本当はTwitterやフィードのアイコンと合わせたアイコンを作って並べてやろうと考えていたんだけど、作ったはいいものの何のページかわからないというアイコンじゃない落書きになったのでお蔵入り。先にロゴが出来、それが非常にシンプルなものになったので、特に装飾もせずに単なるリンクにした。

Chrome等ではリンクの下のborderがAmazonのロゴのようなゆるい曲線になる。特に小難しい事をしているわけではなく、-webkit-border-radiusで50%(以上)を指定するだけ。

a {
  border-bottom: 2px solid rgb(102, 170, 17);
  -webkit-border-radius: 50%;
}

これだけでリンクの下に曲線が引ける(ある程度padding-bottomが必要)。border-radiusでパーセンテージ指定とか初めて使った。ボックスの幅と高さによって曲線のきつさが変化するので、明示的に曲線のきつさを表現することはできない。FirefoxやOperaではちょっと変な感じになるので、-webkit-border-radiusのみにした。

どんな英単語も下にゆるい曲線つけるだけで顔文字に見えてくる。不思議！

追記

ナビゲーションのリンクの下に出るゆるい曲線を) - vantguarde - web:gで教えてもらった左右のborderをtransparentにする方法でFx3.5以降にも対応させてみた。IE9もいけるらしい。

a {
  border: 2px solid transparent;
  border-bottom-color: rgb(102, 170, 17);
  -moz-border-radius: 50% / 12px;
  -webkit-border-radius: 50%;
}

Fx3.5では%によるサイズ指定がボックス幅基準になってしまい縦方向のサイズ指定がおかしくなるので、垂直方向のサイズをpx指定した(ここのナビゲーションは高さは24px固定なのでその半分の12pxにした)。Fx4では完全対応したらしい。

Op11(たぶん10も)はborder-radiusでの%指定の解釈がCh9やFx4と大きな差があり、バグっぽい挙動でどうしてもうまくいかない。px指定なら綺麗に円になるのにな。直せとは言わないが、せめてベンダー拡張に降格させて欲しい。

追記 #2

faviconを作りづらかったのでロゴのフォントを変更。Windows 7に標準でインストールされているGabriolaの斜体。