CSS Archive

以前書いた画像置換に関して、はてなの方でもいろいろとコメントをいただいたので、気になるものをピックアップしてみました。

・yakonyan：<span></span>はない…
・sac3937：前半言ってる事はわかるけど<span></span>っていうのは生理的に嫌な感じ。と思ったらそういう人も多いみたいで安心。
・chaperatta：CSSの画像置換で、画像OFFのときに文字が消えない方法（だけど空タグを使うのがあまり納得できない？？
・urajima：text-indent:-9999pxは確かに使いたくないがかといって空タグはもっと使いたくないなぁ、もうちょっと他の方法探してみよ。
・makitani：んで空タグを推奨ってのは変でないかい？
・monochromebox：何故imgではダメなのかを一考してみたい。空のspan使用は本末転倒でしょう。
・rusica：「画像置換」は必須別に必須ではないと思う。それと空のspan要素はありえない。
・webmugi：<span></span>はやっぱり気持ちよくない

いろんな意見がありますが、やはり空のspanへの嫌悪感が強いみたいですね。確かに空のspanは文法的にも間違ってるし、気持ち悪いのは確かです。

・infoblog：”「CSS有効で画像は非表示」で見ている環境”の人もいるんだろうけど、希少なケースだと思われるので、正直切り捨てていいと思われる。画像置換はよく使っているので禁じ手になるとキツい。
・kits：「欠陥」を重大と捉えるかどうか。携帯端末に対してはmedia属性で振り分け可能では。

また、「CSS有効で画像は非表示」というのは携帯電話だけでなく回線の遅いモバイルPCなども考えられるので、携帯用のCSSのみでは対処しきれない場合もあるのでは、と思いますがどうなんでしょう。

・leva：コメントで指摘されているとおり、img要素+補完CSSでの対処が無難ですね。
・masakanou：普通にimg要素使いますが。
・retlet：Image Replacement について云々。使いたい場合は空span要素で画像を被せましょうという話。小規模サイトだと普通にimg要素使った方がメンテナンスしやすかったりするけどね。
・monochromebox：何故imgではダメなのかを一考してみたい。空のspan使用は本末転倒でしょう。
・kana-kana_ceo：もう、おとなしく、img と alt でいいんぢゃないの？
・inazuma2073：携帯用CSSを用意すればいいんじゃないかな。空のspan使うくらいならimgでいきたい

テキスト要素を「画像」として表示したいのであれば、imgタグを使えばいい。これは文法的にも何も間違ってはいないというか、これが本来の使い方です。これはもうほんとにおっしゃる通り。

画像置換を採用すべきかどうかは、その長所と短所をしっかり踏まえたうえで、慎重に検討されるべきです。コンテンツとして有意な画像、文字情報を含んでいる画像については、CSS側から表示を制御するよりも、img要素として（適切なalt属性値とともに）マークアップしたほうが、アクセシビリティ的には好ましいでしょう。（画像置換という手法 | Web標準Blog | ミツエーリンクス）

それでも現状では画像置換を使用せざるを得ない場合もあるのではと思っています。SEO最優先だったり、短納期で素材が決まらず枠組みだけ先に作るみたいな場合とか（制作者サイドの泣き言ですかね…）。

とりあえず「text-indent:-9999px」や「dispay:none」はアクセシビリティに問題がある、Guilde/Lebin Methodは、空のspanがhtmlの文法的におかしい、など手法の問題点を十分把握しておかなければ、と思ってのエントリーではありました。

・hxxk :before擬似要素を用いる手法（拙著内にて解説）では、「CSS有効で画像は非表示」でも情報が伝えられます。IE様が対応していないという関係でまだまだ最適解ではないのですが。/もしくは素直にimg要素でマークアップ。

hxxkさんの「:before擬似要素」を使うという手法ですが、IEが対応してないんですよね。実際には以下のようなソースになるのかと。ソースはシンプルで済みますね。

h6:before {
content:url(ir_test.gif);
display:block;
}
h6{
width:150px;
height:50px;
overflow:hidden;
}
<h6>SITE TITLE</h6>

結局正解なのはimgを使えってことなのかもしれませんが、よりよい最適解があるのならば探していきたいですね。「実践Web Standards Design—Web標準の基本とCSSレイアウト&Tips」はまだ未読ですが勉強のために読んでみようかなと思います。

実践Web Standards Design—Web標準の基本とCSSレイアウト&Tips

posted with amazlet on 07.03.20

市瀬 裕哉 福島 英児 望月 真琴
九天社 (2007/02)
売り上げランキング: 910

Amazon.co.jp で詳細を見る

「text-indent:-9999px;」や「display:none;」でテキストをウィンドウ外に飛ばしたり非表示にして、代わりに背景画像を表示させる手法を「画像置換(Image Replacement)」というが、これには重大な欠陥があって、最近では使用が推奨されていない。

h5{
width:150px;
height:50px;
background:url('ir_test.gif') no-repeat;
text-indent:-9999px;
}

<h5>SITE TITLE</h5>

h5{
width:150px;
height:50px;
background:url('ir_test.gif') no-repeat;
}
h5 span{
display:none;
}

<h5><span>SITE TITLE</span></h5>

上記のようなCSSだと「CSS有効で画像は非表示」の環境で見ると、その箇所には何も表示されなくなってしまう。「CSS有効で画像は非表示」で見ている環境というと、携帯のフルブラウザやモバイルPCなどが考えられる。また「display:none;」としている場合だと、音声ブラウザはその箇所を飛ばしてしまう。他にもタブボタンでフォーカスできなかったり、アクセシビリティにかなり問題があるようだ。

さらに一部にはこれがスパムに当たるという説もあるが、これは確証はなく、断定は出来ない。

Googleに勤めているエンジニアが以前そのような手法について言及をし、ネット上で話題に上ったことは承知していますが（参考：昨年10月21日に公開された456 Berea Streetの記事「Google, SEO and using CSS to hide text」）、実態についてはその後明確にされていなかったように思います。

上記の記事のなかで、SEOスパムと判断される可能性があるとされているのは、非可視化されるテキストの内容が、それと置き換えられる画像に対し等価ではないと考えられる場合です。ですから、テキストと画像の双方にある情報が一致するよう制作する限りは、SEOスパムと判断される懸念は低いと思います。（画像置換とSEOスパム | Web標準Blog | ミツエーリンクス）

まあとにかく「CSS有効で画像は非表示」で何も見えないというのは確かにまずいので（このサイトも実は「text-indent:-9999px;」で画像置換してます）、対処法を調べてみると、こういうCSSなら「CSS有効で画像は非表示」でも問題なくテキスト部分が表示される事が判明。

h5 {
width:150px;
height:50px;
position:relative;
font-size:12px;
/*HideMacIE¥*/
overflow:hidden;
/**/
}
h5 span {
display:block;
width:100%;
height:100%;
background:url(img/logo.gif) no-repeat;
position:absolute;
top:0;
left:0;
}

<h5>SITE TITLE<span></span></h5>

外枠のh5を画像のサイズにして、中身のテキスト部分の後ろに空のspanを埋め込み、それをblock要素にして背景画像を表示し、position:absoluteで外枠のh5の左上に合わせ、widthとheightを100%にしてh5の要素を被ってしまうというかなりトリッキーなことやってますね。一応ほとんどのブラウザに対応。問題としては、MacのIEだけ文字を拡大すると画像からはみ出てしまうのと、背景が透明な画像は使えないことぐらいかと。後は空のspanが気持ち悪いってところが難点だが、アクセシビリティの問題は解決している。

これは実はGilder/Levin Methodという手法で、2004年あたりに発見された手法らしい。このサイトによると

• Opera 5 and up (thanks Jay Meinhard)
• IE 6/win
• IE 5.5/win
• IE 5/win
• Mozilla Firebird
• Mozilla 1.2
• Konqueror 3.1.2
• Safari
• Camino
• Omniweb
• IE5.2/Mac OS X (thanks Philippe) (with hack)

とほとんどのブラウザで表示が確認されている。3年前なのでちょっと情報が古いですが…。

とまあ、いろいろ一筋縄では行かない「画像置換」だが、CSSのみで表示をコントロールできるのは捨てがたい大きな魅力なんすよね。(x)htmlを汎用性に扱えるし、大幅なデザインの変更もやりやすい。またプログラムが絡んでいるものは、出力する(x)html部分と見た目を決めるCSSが完全に分離していると、メンテナンスもしやすく効率的に運用できるので「画像置換」は必須だったりします。

結論としては「画像置換」を使うならばリスクを踏まえた上で、そのサイトの目的とターゲットやサイト環境に合わせて、使い所や手法を見極めるというのが現段階での正しいスタンスではないかと思う。

まずは最近知って便利だと思ったCSSの小技をひとつ。

文章の最後に、「※（米印）」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。

.note {
padding-left:1em;
text-indent:-1em;
}

<p class=”note”>※米印を使う場合はこいつが便利。<br />
改行してもこの通り。ちゃんと開始位置が揃ってる。</p>

「padding-left : 1em;」でまず１文字分右に動かして、「text-indent : -1em;」で最初の行だけ１文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。

他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で用語とその説明を表記する際に使うものだが、脚注に使っても問題ないかと思われます。

dl#footnote dt{
float:left;
clear:left;
}
dl#footnote dd{
padding-left:2.5em;
}

<dl id=”footnote”><dt>※１</dt><dd>記号等を含む２文字以上の要素にぶら下げをしたい場合、
定義型リストを使うのがおすすめ。</dd></dl>

<dt>をfloat:leftで左に配置して、<dd>の開始位置をpadding-left:2.5emで揃えている。clear:leftとしたのは※２などがあった場合に、前のfloat:leftを打ち消すため。でもこれだとdtの幅が変わった場合に対応出来ない。その都度指定すればよいのだが、数が増えた場合に大変な事になるので、ここはjavascriptを使って汎用的なぶら下げを作ってみようと思う。

dl要素を他に使う場合もあるだろうから、クラス名「hang_dl」のdl要素にだけ適用されるものを作る。機能としては、各dlごとにdtの幅を取得して、その値をddのpadding-leftに入れ込めば大丈夫なんではないかと。dtへの「float:left;」と「clear:left;」はcssで指定、一応ddへのデフォルトをリセットするために「margin:0; padding:0;」としておく。サイズの取得はブラウザ対応がちょっとめんどくさいので「prototype.js」を利用。それで書いてみたjavascriptとCSSがこれ↓。

<script type="text/javascript"  xsrc="prototype.js" mce_src="prototype.js"></script>
<script type="text/javascript">
<!--
//windowがonloadされたらseHangDl()を呼び出す
Event.observe(window, 'load', function(){
setHangDl();
});

function setHangDl(){
var hangDls = $$('dl.hang_dl');   //クラス名がhand_dlのdlを取得
var maxes = Array();   //各dlごとのdtの最大幅を入れる配列

//各dlごとにdtとdlを取得
var getDts = function(e,i){ return e.getElementsByTagName('dt'); }
var elDts = hangDls.collect(getDts);
var getDds = function(e,i){ return e.getElementsByTagName('dd'); }
var elDds = hangDls.collect(getDds);

//dtの幅を取得
var getW = function(e,i){
var tmpW = Array();
for(var j = 0; j

一応このページで使ってますがsampleはこちら。javascriptはまだ勉強中なのでもっといいやり方があるのかもしれませんが、これを使うとHTML自体はシンプルになるし、ぶら下げを多用する場面ではいいのではないでしょうか。以下のような、インタビューとか会話でよく使われる文字組にも使えますかね。

しかしまあ、ただこれだけのために「prototype.js」を使うのもちょっと無駄が多い気もするなあ。

CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。

まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。

それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしまう。

▼sans-serifのみ指定すると…


body { font-family : sans-serif ; }


▼euc-jpの場合

▼utf-8の場合

そんな変な動きをしてしまうのでfont-familyにはきちんとフォント名で指定する必要がある。ところがここでもブラウザによって解釈がまちまちなのできちんと指定しないと意図通りには表示されない。

フォント名で指定する場合は ‘ＭＳ Ｐゴシック’ などフォント名が日本語のものや間にスペースが入っているもの（’Times New Roman’等）は引用符（”や’）で囲う。ちなみにsans-selifとか総称ファミリー名は引用符で囲ってはだめです。また日本語指定する場合にはCSSファイルの頭に「@charset ‘UTF-8′;」（UTF-8の場合）とつけましょう。

しかしここでも問題があって、まずSafari では ‘ヒラギノ角ゴ Pro W3′ などフォント名に日本語が含まれるものは無効になってしまう。なのでSafariでヒラギノ角ゴを指定したい場合は ‘Hiragino Kaku Gothic Pro’ と表記しなくてはならない。

またFirefoxでは ‘Hiragino Kaku Gothic Pro’ など日本語フォントのアルファベット表記は適用されないので、SafariとFirefox両方で問題なく表示するには『’ヒラギノ角ゴ Pro W3′ , ‘Hiragino Kaku Gothic Pro’』と両方表記しなくてはいけない。Vistaのメイリオに対応する場合も日本語で指定する必要がある。

またMacのIE5は以下のような癖がある。

Mac版Internet Explorer 5 ではフォントの複数指定は無効のため、第一候補のフォントが環境にインストールされていない場合は初期値のフォントで表示します。さらに、欧文フォント名が指定されていても、要素に個別に lang属性（XHTML では xml:lang属性）で欧米の言語を示す “en” などを指定しなければ表示には反映されません。
（「font-family CSS辞典」より）

ブラウザはfont-familyで指定したフォントを左から順番に参照し、条件にあったものを設定するので、指定する順番にも気をつけないといけない。では具体的にはどう指定するのがいいのか。

とりあえずデフォルトのフォント（WindowsXPでは ‘ＭＳ Ｐゴシック’ 、WindowsVistaでは ‘メイリオ’ 、Macでは ‘ヒラギノ角ゴ Pro W3′ ）で表示させる事を考えてみる。そこで注意したいのは、「Microsoft Officeの入ったMac」というケース。それには ‘ＭＳ Ｐゴシック’ も一緒にインストールされているので、こういった環境でヒラギノよりも前に ‘ＭＳ Ｐゴシック’ が指定してあるとMacでも ‘ＭＳ Ｐゴシック’ でページが表示されてしまう。それらを踏まえると以下のような書き方が問題ないように思える。

body {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

だがこれだと「Windowsにヒラギノフォントをインストールしている」というケースでは、Windowsなのに ‘ヒラギノ角ゴ Pro W3′ で表示されてしまう（アンチエイリアスがかからずバランスが悪いし、小さい文字だとギザギザ）。それを避けるにはWindows用とMac用に別途CSSを用意するしかない。

var os = (!navigator.appVersion.indexOf ("Win")) ? "win" : "mac";
document.write ('<link rel="stylesheet" xhref="/css/font_' + os + '.css" type="text/css" />');


↑こんなものを書いて、例えば「site_styles.css」みたいなレイアウトするCSSファイルとは別に「font_win.css」「font_mac.css」というCSSファイルをフォント指定用として別途用意する。

▼font_win.css
body {
font-family:'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

▼font_mac.css
body {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
}

とりあえずこれでデフォルトのフォントで表示できるようにはなる。

しかしフォント用だけに別途用意するのも煩雑だし、そもそも指定した以外のフォントで見たい人には、font-familyなんてありがた迷惑であったりもして悩ましいもんです。

ちなみに自分は「ヒラギノ角ゴ」よりは「ヒラギノ丸ゴ」が好きだったりします。角ゴより文字が太くて読みやすい気がするので。

Continue reading

XHTMLのMIMEタイプと文字コードをhead要素に設定する場合、title要素の前に入れるのが一般的らしい。
具体的にはmeta要素に「http-equiv」、「content」で設定する。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XHTMLのMIMEタイプ</title>
</head>

まず『http-equiv=”Content-Type”』はHTMLとXHTML共通。

次に『content=”●●●; charset=◆◆◆”』でMIMEタイプと文字コードを指定する。
通常の記述なら、文頭のXML宣言で既に文字コードの指定をしているが、ここでも念のため指定しておく。

●●●に入れるMIMEタイプの指定はHTMLでは「text/html」を指定。
XHTMLでは「application/xhtml+xml」を指定するのが推奨されている。「application/xml」、「text/xml」も使用可。だがInternet Explorer(ここでもMicrosoftが足を引っ張っている)やNetscape4.*では対応していないため、現状では「text/html」としておくのが無難である。
※現在公開されているInternet Explorer 7 beta 2でやっと「application/xhtml+xml」に対応している模様。
Continue reading

XHTMLは１行目にXML宣言が必要なのだが、

<?xml version=”1.0″ encoding=”UTF-8″?>

この部分は文字コードが「UTF-8」「UTF-16」の場合省略できる。他の文字コードを使う場合は必須。
ただ実はこれを入れてしまうと、WIN IE6では「過去互換モード」が採用されてしまい、スタイルシートの適用が意図したとおりに行かないことがある。他のモダンブラウザでは問題ないのにね。他の異常な挙動も含めて、WEBにおけるMicrosoftの罪は重いです（もちろん貢献度も大きいのだが）。

で次に文書型宣言。現在XHMLでは以下の三つのどれかを指定できる。

【XHTML 1.0 Strict】

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

【XHTML 1.0 Transitional】

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

【XHTML 1.0 Frameset】

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

【XHTML 1.1】

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

XHTML 1.1はXHTML1.0と微妙に書式が違う部分もあるので要注意。
すぐ次のhtml要素の名前空間と言語コードの指定部分は以下の通り。

【XHTML 1.0】

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ja” lang=”ja”>

【XHTML 1.1】

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ja”>

XHTML 1.1ではlang属性が認められてないため、「xml:lang」を使わなくてはいけない。
とりあえずこれで、あとはhead要素とbody要素をつけてやればXHTML文書の出来上がり。

<?xml version=”1.0″ encoding=UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ja”>
<head>
<title>XHTML1.1</title>
</head>
<body>
<p>XHTML1.1文書です</p>
</body>
</html>

(X)HTML+CSSの基本である、「インライン要素」と「ブロックレベル要素」について忘れがちなことをメモ。

7.5.3 ブロックレベル要素と行内要素
HTMLの要素のうち、BODY要素に出現し得る要素のあるものは「ブロックレベル」と呼ばれ、他のものは「行内」 (これは「テキストレベル」としても知られている)と呼ばれる。

つまり『<body>タグの直下にはブロックレベル要素しか置いてはいけない』ということ。

これは基本過ぎて忘れがち。パーツごとにブロックレベル要素（div、pなど）で囲ってから作るのが普通だけど、一応心に留めておきたい。インライン要素をCSSで{display:block}とし、表示上ブロック要素にはできるが、文法的にはインライン要素のままなので注意が必要。

あと紛らわしいのがインラインブロック要素と呼ばれるもの（applet、button、del、iframe、ins、map、object、scriptなど）。幅と高さを指定できブロック要素のように扱えるが、これも文法上はインライン要素なのでブロックレベル要素で囲っておくべきらしい。iframe、objectなどは特に気をつけなければ。

参考：ブロックレベル要素とインライン要素 - Web標準普及プロジェクト

最近新しく作るものに関しては(X)HTML+CSSで作るようにしている。感覚的になんとなくこうかなあと模索しながら作っていて、本当はなにが正しいんだろと思ってたらいいタイミングで以下の資料を見つけた。

『CSS Nite Vol.7　Web制作現場の対立を解消する！(X)HTML+CSSガイドライン作り』

を見て感動したので、忘れないうちに気になったところをメモ。

■ビジュアルとテキストのバランスは、サイトの雰囲気などイメージ作り/ブランディングに影響する。何でもテキストにすればよいわけではない。

↑これは一度失敗しました。目立たせたいパーツやSEO的に必要ない箇所は画像でも良いなと。なにごともバランスですが。

ガイドラインの必要性

誰が作っても一定の品質を確保できる
制作チーム、更新チーム、外注、クライアント間での「無駄」の発生が防げる。キーパーソンが抜けても比較的スムーズに穴埋めできる。新しいスタッフが一定の品質のサイト/ページをアウトプットできるようになるまでの期間を短くできる。
社内にノウハウが残る
現場のノウハウを体系化し蓄積できる。

↑これはほんとそう。ガイドラインがあることで作業をモジュール化できるのだ。

基本はdiv要素+id
必ずしもdiv要素ではなく意味的な要素 (p、ulなど) に直接idづけしてもよいが (それが理想)、現場の混乱が予想される場合は「必ずdiv要素でラップし、idづけする」と決めておく。

↑idとclassの使いどころは決めておかないと。

カテゴリーごとにスタイルを変える場合、 「body#shopping …」「body#careers …」といったかたちでbody要素につけたidを頼りにスタイルを設計 (id名はディレクトリ名と同じにしておく)。

↑カテゴリーごとに大幅に違う場合はこれでよいかも。固定レイアウト要素は同じで中身のコンテンツ部分だけ違う場合は、このスライドで言う「div#content」の部分だけ分ければ、まとめて指定する要素が減るので作りやすいと思う。

見出し要素は難しい

見出し要素の理想的な使い方は次のとおり (ISO-HTMLに基づく)。

* h1要素から出現すること
* 途中の見出しレベルを飛ばさないこと

ただし、ページ構成によっては、ある見出しレベルを使うことが躊躇されたり、ページ間で統一的なマークアップルールを設けている場合、このような階層構造を逸脱しなければならない場合もありうる。

↑見出しはほんとに難しい。ページごとに要素の数が違う場合が多いので統一するのは大変。コンテンツを作る段階から構造を意識して作るべきではある。

* 1つのページでh1要素が複数出現しても仕様 (構文) 的には全く問題はない。

↑これを聞いて安心しました。あまり使わないけど。

h1要素では各ページ固有の内容を定義すべき?
とすれば、すべてのページに共通のロゴをh1要素で定義するのは間違いということに (トップページぐらいしか妥当しない)。
では、h1要素でどの内容を定義すべき?

* トップページはロゴ、キャッチフレーズ (キービジュアルにキャッチフレーズを含めている場合はその画像) 、または固有のページタイトル。
* 他のページは固有のページタイトル。

↑なるほど。これはほんとに今日の仕事中に思った。ロゴがh1である必要性は無いわけだ。

idはどのページでも同一の要素タイプでしか利用しないケースが多いが、classは複数の要素タイプで利用する場合もある。そのような場合にだけオープンにしておき、通常はきちんと要素タイプをつけておく。

↑classの使いどころが見極められると、もっとすっきり書けるのにと思いますねほんと。

なるべくツリー構造を丁寧に (子セレクタ的に) 書いておいたほうがよい。CSSを見ただけでツリー構造が把握できるため。

↑誰が見てもわかりやすように。自分でも時間が経つとわからなくなってしまうので。

プロパティの指定順序

Mozilla.orgの外部CSSで示されている順序が参考になる。

1. 視覚整形モデル
2. ボックスモデル
3. 背景と前景
4. フォントとテキスト
5. 生成内容

↑暗黙の了解というか何となく感覚的にはこんなふうには書いてるけど、これもルールが必要。「float、clear、displayなど」＞「margin、padding、border」＞「font、letter-spacing、align系など」ざっくり言うとこんな順番てことか。

きちんとルールを設定することでクオリティを保ち、かつ効率的に制作をすると。何にでもあてはまりそうな教訓ですね、これは。
Continue reading

CSSのみでブラウザの表示枠ぴったりにレイアウトしたい時、どうしたらよいか。

テーブルレイアウトの場合は大枠を<table width=”100%” height=”100%”>にすればOKだった。CSSの場合ちょっと癖があり、横幅は100%でぴったりいくのだが、中身のボックス要素を「height:100%」で指定しても、その要素そのものの高さにしかならない。サンプル（横幅のみ表示枠ぴったり）

なぜかというと、この高さの指定は親要素の高さに依存するものだからだ。（参考：height: n%;の正しい仕様 - Web標準普及プロジェクト）

なので親要素である”<html></html>”と”<body></body>”の高さを100%に指定すると、ブラウザの表示枠ぴったりにはめることができる。サンプル（縦横表示枠ぴったり）

html,body{
height: 100%;
}

これを応用して、よくある「ヘッダー＋サイドメニュー＋コンテンツ＋フッター」の2カラムレイアウトを、表示枠ぴったりで作ることができる。サンプル（表示枠ぴったりレイアウト）

注意点としては、以下の通りです。

• フッターは「posiotion:absolute; bottom:0px;/*数値はお好みで*/」で親要素のbottomからの距離で配置。
• レイアウト要素の大きさは”%”指定で（pxなどで固定すると中身のmenuやcontentがはみ出る。なぜ？）
• ページの中身が表示枠に収まらない場合には適さない（「overflow:auto;」の指定で収まりきらない場合はスクロールバーが出るのだがいまいち）

まだまだ改善の余地ありですが、固定のレイアウトにしたい場合などはいいんじゃないでしょうか。

*{
margin:0px;
padding:0px;
}

html,body{
height: 100%;
}

#container{
width:100%;
height:100%;
}

#header{
width:100%;
height:10%;
background:#009900;
}

#menu{
width:20%;
height:87%;
float:left;
background:#ccc;
overflow:auto;

}

#main{
float:left;
width:80%;
overflow:auto;
}

#footer{
clear:both;
position:absolute;
bottom:0px;
height:3%;
width:100%;
background:#009900;
}