Greensleeves v2.0 / Tag: Tips

勉強中に見つけたのでメモ。

function getRandomNum(min, max){
  return (max - min) * Math.random() + min;
}

var num = getRandomNum(10, 20); //10～20の間で数値を返す

ちなみに、今まで僕はこう書いていた。

var num = 10 * Math.random() + 10;

やってることは一緒だと思うんだけど、可読性という点では上のコードのほうが下限値、上限値を明記しているのではるかに分かりやすい。僕が今まで書いていたのは何か、中途半端に計算して式にしてて気持ち悪いなーと。

ウェブサイトのスタイルを編集しようと思った際、作ったばっかりの頃はいいけど、何ヶ月か後に編集しようとすると「あれ？これどうなってるんだっけ？」とか自分で作ったはずのスタイルなのに意図を見失う場合が稀にあります。それを防ぐために、今のうちにスタイル記述に関するルールを作っておこうと思いました。もちろん CSS を一から書き直すときや、複数人で CSS を編集するような場合でも使えるような配慮も忘れずに。

その際、他の人はどうしてるのか気になったので、色々調べていたら hxxk.jp - CSS の記述ルール記事のまとめのエントリーにドンピシャなまとめがあったので、いろいろ参考にして作ってみました。

guideline.css の作成

前述のまとめで取り上げられていた Code-404 の.css ファイルの先頭にルールを明確に記述しておく記述定義の方法が一番しっくりきたので、それをベースに guideline.css を作成。.css ということになってますが中身はコメントアウトした大まかな CSS 編集ガイドラインだけしか書いてありません。

guideline.css の中身

1. CSS プロパティの記述順序について。CSS2 Specification の出現順序を参考に記述順序を作成。CSS2.1 の改訂でサポートされなくなるプロパティとページ/オーラルメディアについてのプロパティは割愛しています。
2. CSS ハックの記述法について
3. プロパティの Shorthand 記述について
4. CSS の分割について

簡単にまとめると上のような感じになりました。詳細は guideline.css をご覧ください。

あとは分割された reset.css、element.css、layout.css についても頭に細かい記述ルールを書いて、import.css でまとめて、お終い。だけど、今はまだルールは決めたけど時間が足りないので記述はそれに従って書いていない。それは後ほどに。

当サイトは将来 php などで動的生成したりすることになったとして、ファイルの拡張子を変更しなきゃならなくなった時 Permalink のリダイレクトなどで手間がかからないように URI の設計に所謂、クールな URI の思想を採用しています。

• Hypertext Style: Cool URIs don't change.
• クールなURIは変わらない -- Style Guide for Online Hypertext [邦訳]

クールな URI の実現方法としては URI から拡張子を除去して、コンテントネゴシエーションを行うというものが有名です。この方法では .htaccess の Options +MultiViews が使えることが必須条件になります。

それじゃあ、クールな URI にしたいけど .htaccess が使えない、もしくは使えても Options +MultiViews 使えない鯖を借りてる人はどうするのさってことになるわけですが結構単純な方法で実現できたりします。

投稿時間を元に URI を決めるときを例にして説明すると例えば、2007/04/08 05:38 に投稿したとき。コンテントネゴシエーションが可能な場合以下のような URI の例が考えられます。

• http://www.example.com/2007/04/08/0538

さて、それじゃあ使えない場合の話なんですが…。

• http://www.example.com/2007/04/08/0538/

こうすればいいだけです。ファイルネームは index.ext （ext は任意の拡張子）に。例えば MT 3.34 のアーカイブマッピングでこれを実現するには

/%y/%m/%d/%h%n/%I%x

と書けばいいでしょう。

このディレクトリを使った Cool な URI は、CSS Beauty などでも Permalink に採用されています。というか、これらサイトの閲覧中に「あー、こういうやり方もあるわな。」と気がついてメモ代わりに書いたわけですが。

たとえば h1 要素にロゴ画像を表示させたい場合、ただ CSS の background-image プロパティにロゴ画像を指定したのでは、テキストがロゴの上に被さって邪魔になってしまいます。かといって h1 要素は SEO 等を行う際、重要な位置を占めるタグなので中身に img 要素を使うのもなんだかもったいない気がする。

そこで CSS の Tips の一つに要素内のテキストを画像に置き換える（置き換えているように見せる）方法を使ったりするわけですが、僕の知ってる限り、やり方には幾つか方法があります。それを少しまとめてみました。

» Read more

CSS を書く際、ブラウザごとのデフォルトスタイルの差異を吸収するため * を使ったリセットを行う。という有名な Tip があります。

• Lucky bag::blog: CSS を作成する際のお約束

この手法は便利で今もここの CSS で使わせてもらっているんですが、しかしある問題を抱えている模様。それは CSS techniques I use all the time | The Montoya Herald で詳しく書かれています。言及部分を抜粋してみると。

This eliminated all differences in padding and margin across browsers so I was free to go about styling my page. Unfortunately, this isn’t a good practice. It’s very heavy on the rendering agent to apply rules to every single element in the document, especially with large web pages, and this can also destroy a lot of good default styling, especially when you want to have default styled submit buttons.

簡単に言ってしまえば、ページが巨大になるとレンダリング速度に影響が出てくることと、使えるデフォルトスタイルまで殺してしまうことが懸念される。ということらしいです。

氏は同時に、自分の初期化用の CSS も載せているのでそこら辺を参考にリセット用の CSS を組んでみるのもいいかもしれません。億劫な人には Yahoo! UI Library: Reset CSS とかもお勧め。