2009年4月アーカイブ

id名やclass名をつけるとき、あなたはどのように命名していますか?

日本語(2バイト文字)が使えないので英単語を使うのが一般的になっていますね。問題は英単語を2つ以上くっつけた名前にしたいとき、英単語の連結をどのように表現するか?以下の4つの方法が思いつきます。

  • アンダーバー(_)でつなぐ
  • ハイフン(-)でつなぐ
  • キャメルケースを使う
  • 単語を全て小文字でつなぐ

1.アンダーバー(_)でつなぐ

例:main_contents

アンダーバー(アンダースコア)を利用すると、エディタでCSSを編集する際、ダブルクリックで選択できるので重宝します。しかし、IE5.5以前のような古いブラウザでは不具合を起こすことがあると言われています。

しかしながら、そこまで古いブラウザだとアンダーバー以外にも不具合が出そうなので、IE5.5以前にはスタイルシートを適用しないようにするのも手かもしれません。

2.ハイフン(-)でつなぐ

例:main-contents

アンダーバーでは一部ブラウザで不具合が出ることからハイフンを使用する人も多いですね。エディタではダブルクリックで選択できないのですが、それがよいので使っている方もいるようです。

こころなしか、CSSerというかマークアップエンジニアの方とかこの書き方多い気がします。

3.キャメルケースを使う

例:mainContents

キャメルケース(CamelCase)とは2番目以降の英単語の最初の文字を大文字で表す記法です。他のプログラミングなどやっていると馴染み深いですよね。

4.単語を全て小文字でつなぐ

例:maincontents

英単語を全て小文字で書いて、区切りもないというパターンです。可読性が落ちてしまうのであまりお勧めできない記法ですね。

どの書き方でも問題はないと思いますが、CSSファイル内では統一させたほうがメンテナンスなどにはよいと思います。

ちなみに私は、CSSを始めた当初はアンダーバー派だったのですが、Javaをやるようになってキャメルケース派になりました。これだとブラウザのことも気にしないでいいし、可読性もなかなかよいです。何よりダブルクリックで選択できるのが嬉しい。

当サイトでも以前、ブラウザのデフォルトスタイルシートをリセットする方法を紹介しましたが、他のサイトでも様々なデフォルトスタイルシートのリセット方法を提案しています。

そのひとつのYUI Reset CSSを紹介します。

主に余白部分(margin、padding)とフォント関連をリセットしています。

CSSコード

body,
div,
dl,dt,dd,
ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,td {
   margin:0; 
   padding:0; 
}

table {
   border-collapse:collapse; 
   border-spacing:0; 
}

fieldset,img {
   border:0;
}

address,
caption,
cite,
code,
dfn,
em,strong,
th,
var {
   font-style:normal;
   font-weight:normal;
}

ol,ul {
   list-style:none;
}

caption,th {
   text-align:left; 
}

h1,h2,h3,h4,h5,h6 {
   font-size:100%;
   font-weight:normal;
}

q:before,
q:after {
   content:'';
}

abbr,acronym {
   border:0;
}

blogなどをしていると、他サイトの文章を引用したいときがあります。その際、自分が書いた文章なのか引用した文章なのかを、見た目的にわかりやすくする必要があります。

また、引用元のサイト名やURLも明記しておくべきでしょう。

引用元をcontentプロパティで表示

cite 属性やtitle属性の値をcontentプロパティで呼び出せるので、それをblockquoteの前後に表示させる技です。

サンプル

引用文引用文引用文引用文引用文引用文引用文引用文引用文

(X)HTMLコード

<blockquote cite="URI" title="引用先サイトのタイトル">
<p>
引用文引用文引用文引用文引用文引用文引用文引用文引用文
</p>
</blockquote>

CSSコード

@charset "utf-8";

blockquote {
   margin:0;
   background:url(qs.gif) 0 2em no-repeat;
}

blockquote p {
   padding: 10px 40px;
   background:url(qe.gif) 100% 100% no-repeat;
}

blockquote[title]:before {
   display: block;
   border-bottom: 1px solid #999;
   content: "「"attr(title)"」より引用";
}

blockquote[cite]:after {
   display: block;
   border-top: 1px solid #999;
   text-align: right;
   content: attr(cite);}

ここでの注意点は、「:before」「:after」擬似要素はIE7以前のブラウザは有効ではないということです。IE8からは使えるとのことです。Firefoxなどのモダンブラウザには有効です。また、Firefoxでは:before擬似要素や:after擬似要素のテキストを選択してコピーできません。Operaではできるようです。

あとは、CSSファイルの中で日本語を使用しているのできちんとエンコード指定をしておかないと文字化けします。

引用元を別に用意する

上記方法ではブラウザによって動作が異なったり、引用元のテキストにリンクをはることができません。そこで少し手間がかかりますが、引用元はテキストにアンカーをはって表示しようと思います。

サンプル

引用文引用文引用文引用文引用文引用文引用文引用文引用文

引用先サイトのタイトル

(X)HTMLコード

<blockquote cite="URI" title="引用先サイトのタイトル">
<p>
引用文引用文引用文引用文引用文引用文引用文引用文引用文
</p>
</blockquote>
<p class="resource"><a href="URI">引用先サイトのタイトル</a>より引用</p>

CSSコード

@charset "utf-8";

blockquote{
margin:0;
background:url(qs.gif) 0 0 no-repeat;
border:1px solid #ddd;
}

blockquote p {
padding: 10px 40px;
background:url(qe.gif) 100% 100% no-repeat;
}

p.resource {
margin:0;
padding:3px;
text-align: right;
background:#ddd;
}

画像はご自由にお使いください

サンプルで使用したダブルクォーテーションマークの画像はご自由にお使いください。商用サイトでもお使いいただけます。提供元の表示などは不要です。

Windowsであれば右クリックをして「名前をつけて画像を保存」でダウンロードしてください。

引用マーク(開始) 引用マーク(終了)

引用テキストをワンクリックで作る方法

引用のためのHTMLタグをいちいち組んでいたらblogの書くスピードも落ちてしまいますよね。そこで、簡単にHTMLタグが成型できるツールを紹介します。

これはFirefoxのアドオンで、引用したい文章をドラッグして右クリックで型を選ぶと成型したかたちでコピーできるという優れものです。ここでは詳しく説明しませんが、以下のサイトが参考になると思います。

ちなみに上記2番目で説明した引用方法の成型文は以下のように設定します。

<blockquote cite="%url%"title="%title%">
<p>%text%</p>
</blockquote>
<p class="resource"><a href="%url%">%title%</a>より引用</p>

その他にも同様のツールはたくさんあるので試してみてください。

例えばニュースリリースなどには、定義リスト(dl要素)がよく使われます。その際、日付と記事が横並びになったものもよく見受けられます。

定義リストを横並びにするには、「float:left;」を利用して回り込みをさせます。また、汎用性の高い横並び定義リストを作成するために、spanタグやdivタグを併用します。

基本となる(X)HTMLコード、CSSコードは以下のとおりです。

尚、「* html」ハックを使用しているのは、hasLayoutをtrueにして「-3pxずれてしまう」というIE6のバグを回避するためです。

(X)HTMLコード

<dl class="list">
   <dt><span>2008-05-14</span></dt>
   <dd>
      <div>
         あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん<br />
      </div>
   </dd>
   <dt><span>2008-05-14</span></dt>
   <dd>
      <div>
         あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん<br />
         あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん<br />
         あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん<br />
      </div>
   </dd>
</dl>

CSSコード

* html body dl.list dd div{
   display:inline-block;
}

dl.list dt {
   float:left;
   width:10em;
}

dl.list dd {
   margin-left:0;
   padding-left:10em;
}

折角ですので、デザインもいくつか紹介します。

テーブルの枠組みタイプ

それぞれの要素を線で囲んでテーブルみたいに見せてみましょう。

2008-05-14
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
2008-05-14
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

CSSコード

* html body dl.list dd div{
   display:inline-block;
}

dl.list {
   border:1px solid #999;
   border-top:0;
   background:#f1f1f1;
}

dl.list dt {
   float:left;
   width:10em;
   border-top:1px solid #999;
   padding-top:10px;
   padding-left:10px;
   padding-bottom:0;
   padding-right:0;
}

dl.list dd {
   margin-left:10em;
   padding:10px;
   border-top:1px solid #999;
   border-left:1px solid #999;
   background:#ffefff;
}

横線タイプ

dt部分(左側)とdd部分(右側)が横線でつながったように見せてみましょう。

2008-05-14
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
2008-05-14
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

CSSコード

* html body dl.list dd div{
   display:inline-block;
}

dl.list {
   border-bottom:1px solid #999;
}

dl.list dt {
   float:left;
   width:10em;
   border-top:1px solid #999;
   padding-top:10px;
   padding-bottom:0;
   padding-right:0;
}

dl.list dd {
   margin-left:10em;
   padding-top:10px;
   padding-bottom:10px;
   padding-right:10px;
   border-top:1px solid #999;
}

日付にワンポイントタイプ(1)

dt部分(左側)の日付にアクセントを加えてみましょう。

2008-05-14
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
2008-05-14
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

CSSコード

* html body dl.list dd div{
   display:inline-block;
}

dl.list {
   border-bottom:1px solid #999;
}

dl.list dt {
   float:left;
   width:10em;
   border-top:1px solid #999;
   padding-top:10px;
   padding-bottom:0;
   padding-right:0;
}

dl.list dd {
   margin-left:10em;
   padding-top:10px;
   padding-bottom:10px;
   padding-right:10px;
   border-top:1px solid #999;
}

日付にワンポイントタイプ(2)

dt部分(左側)の日付にアクセントを加えてみましょう。

2008-05-14
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
2008-05-14
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

CSSコード

* html body dl.list dd div{
   display:inline-block;
}

dl.list dt {
   float:left;
   width:10em;
   padding-top:10px;
   padding-bottom:0;
   padding-right:0;
}

dl.list dt span{
   position:relative;
   border-bottom:3px double #bf0f0b;
}

dl.list dd {
   margin-left:10em;
   padding-top:10px;
   padding-bottom:10px;
   padding-right:10px;
}

IE6において、高さが指定された要素内にあるインライン要素にpaddingやborderが指定されているとき親要素をはみ出している部分が消えてしまう、という現象が起きるので「position:relative;」を指定してバグを回避します。

参考URL

この記事は以下のコラムを要約しました。

id名やclass名を考えるのは結構億劫ですよね。だからつい適当に思いつきで命名しがちです。しかし、後々のメンテナンスや他の人がソースコードを変更することを考えると、id名やclass名は慎重に決めましょう。

例えば、強調のstrongタグで囲んだテキストを赤くしたいときを考えます。安易に

CSSコード

strong .red {
   color:red;
}

にしてしまうと、後々に赤色でなくて緑色に変更しなければなくなったとき、redというclass名は非常に不適切になってしまいます。

よって、色でclass名を決めるのではなく、機能でclass名を決めるべきです。機能という面では「強調」ですが、strongにはすでにその意味は含まれているので、二重に命名することに意味はありません。そのような場合は、囲んでいるテキストの中身で命名します。

例えば、

(X)HTMLコード

strongタグの使用は<strong class="seo">SEO</strong>に効果的です。

のように命名するのもひとつの手です。

しかしながら、色が赤であることが重要ならば、そういう機能としてclassを指定するのなら、「class="red"」という命名も正しくはあります。このあたりは、ケースバイケースになりますね。

また、マークアップには直接関係しない要素、例えばワイヤーフレームのためのdiv要素などには役割的な名前をつけるべきです。

ヘッダー部分を囲むdiv要素には「<div id="header">」、メインコンテンツを囲むdiv要素には「<div id="mainContents">」といった具合です。

こうすることで、CSSだけを見てもどのようなHTMLタグの指定なのかよくわかり、メンテナンスもしやすくなります。

文字サイズは親要素から継承されるため、CSSの設定には注意が必要です。

また、ユーザビリティの観点から、文字サイズはユーザが自由に変更できるように「%」あるいは「em」など可変できるように設定するのが望ましいです。

まず、基準となる文字サイズをpx単位で決めます。それに対して、個別に%やemで文字サイズを設定していきます。

ここで注意しなければならないのは、「%」で指定すると、ブラウザによって文字の大きさが若干違って見えてしまうということです。製作者としてはどのブラウザでも同じ大きさに見えて欲しい、少なくとも文字の大きさの相関性が保たれてほしいですよね。15emで指定した文字と16emで指定した文字が同じサイズに見えてしまうのは困りますよね。

また、%指定した文字あるいはem指定した文字をpx単位に換算した場合、どのような大きさになるかは知りたいですよね。

%指定のCSSライブラリ Fonts CSS

ブラウザによる文字サイズの見え方の差異を調整するCSSライブラリを紹介します。

CSSライブラリは以下のページにあります。

CSSコード

/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.7.0
*/

body{
   font:13px/1.231 arial,helvetica,clean,sans-serif;
   *font-size:small;*font:x-small;
}

select,
input,
button,
textarea,
button {
   font:99% arial,helvetica,clean,sans-serif;
}

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

pre,
code,
kbd,
samp,
tt {
   font-family:monospace;
   *font-size:108%;
   line-height:100%;
}

基本となる文字サイズを「13px」とし、特定の%で指定するとブラウザによらず同じ大きさに表示されるようです。

以下の表は、%指定した際のpx換算したものです。

表示したい文字サイズ(px) CSSで指定する値(%)
10 77
11 85
12 93
13 100
14 108
15 116
16 123.1
17 131
18 138.5
19 146.5
20 153.9
21 161.6
22 167
23 174
24 182
25 189
26 197

em指定が一目でわかるチャート EmChart

こちらは、自分で基本となる文字サイズをpxで決めたときに、例えば14pxの文字を表示したいとき何%に指定すればよいのか、一目でわかるオンラインチャートです。

縦軸が「基準となる文字サイズ(px)」で、横軸が「表示したい文字サイズ(px)」、交差しているところが「指定する文字サイズ(em)」になります。

2009年4月現在、W3CではCSS2が勧告、CSS2.1とCSS3が草案段階ですが、モダンブラウザはCSS3の一部をすでに実装していたり、ブラウザによってCSSの実装状況は様々です。各ブラウザでCSSの実装状況を報告しているようなので、そのリソースを紹介します。

IE
CSS Compatibility and Internet Explorer
Firefox
Mozilla CSS support chart - MDC
Safari / Google Chome
Safari CSS Reference: Introduction to Safari CSS Reference
Oprera
Opera: Web specifications support

参考サイト

CSSの実装状況を知るには? | Web標準Blog | ミツエーリンクス

FirefoxのデフォルトスタイルシートはFirefixをインストールした先のresフォルダにあります。

その中を見ると、いくつかスタイルシートがあるのがわかります。その内の「html.css」がスタンダード(標準)モード(Strict モードともいう)でのブラウザのデフォルトスタイルシート、「quirk.css」がクイック(互換)モードでのブラウザのデフォルトスタイルシートになります。

C:\Program Files\Mozilla Firefox\res\html.css

C:\Program Files\Mozilla Firefox\res\quirk.css

尚、これらは、Firefoxのアドレスバーに

resource://gre/res/html.css

resource://gre/res/quirk.css

と入力してアクセスしても見ることができます。

余談ではありますが、Firefoxの標準モードと互換モードのどちらかが採用されるかは、DOCTYPE宣言の書き方にあります。以下のサイトを参考にしてみてください。

Mozilla's DOCTYPE sniffing - MDC

ヘッダーメニューなどによく活用するテクニックですが、本来インラインのリンクをブロック構造にすることで、リンクのテキスト部分だけでなく周りまでリンクの領域が広がるので、様々なレイアウトをすることが可能になります。

例えば、メニュー部分のリンクをブロック構造にすると、メニューバーを画像なしに作成できます。

その際、ブロック要素にするa要素に「display:block;」とともに、幅を指定しておくことが必要です。

(X)HTMLコード

<ul class="menu">
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
<li><a href="#">MENU5</a></li>
</ul>

CSSコード

li.menu a{
   display:block;
   width:200px;
}

テキストが含まれる要素、例えばp要素やli要素、td要素には「line-height」を指定しておくことで、IE6でたまに起こる「文字の上部が切れて表示されてしまう」ことや「フォントを一部変更したことで文字が重なってしまう」といったことを解決できます。

その際、line-heightの値の単位は何も指定しないほうが、ブラウザが自動に補正をかけてくれます。

CSSコード

p {
   line-height:1.4;
}

擬似フレームを作る

|

最近ではframeタグを使用するのは、SEO的にもよくないと言われ、あまりフレームを使ったサイトを見なくなりました。しかし、フレームは使いようによってはとても便利です。別ファイルを読み込んでいるわけではないのですが、スクロールしてコンテンツが表示される方法を紹介します。

ポイントは、表示領域を指定して、それ以上コンテンツがはみ出したらoverflowでスクロールを出すようにすることです。

(X)HTMLコード

<div id="contents">
ここにスクロールして表示される内容を記述します。
<div>

CSSコード

div#contents {
   width:400px;
   height:350px;
   overflow:auto;
}

サンプルはこちらをご覧ください。

特に繰り返しの背景画像を使用している場合は、「固定」して表示しましょう。これはユーザビリティの問題なのですが、スクロールした際に背景も一緒に動くのは、とても見づらくなってしまいます。

背景画像を固定するにはCSSで「background:fixed」を使用します。

CSSコード

body {
   background:url("background.gif") repeat 0 0 fixed;
}