Category CSS Archive

再び定義リストdt ddを横並びで表示させる

Posted by poundhound on May 15, 2008

定義リストの横並びで苦戦したので再びエントリーしておきます。以前のエントリーは1つのdtに対して複数のddを記述すると最初のddがずれると言うものでしたが、ddが折り返された時はずれたままでしたが、今回は折り返されてもずれないようにCSSを調整して行きます。

まず次のような(X)HTMLがあります。

<dl>
<dt>定義リスト1</dt>
<dd>文章文章文章文章文章文章文章文章文章文章文章</dd>
<dt>定義リスト1</dt>
<dd>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</dd>
<dt>定義リスト1</dt>
<dd>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</dd>
<dd class="test">文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</dd>
<dt>定義リスト1</dt>
<dd>
<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
</dd>
</dl>

この(X)HTMLを次のようなCSSで整形します。

dt {
	width: 7em;
	float: left;
	clear: left;
	line-height: 1.3;
}
dd {
	margin-bottom: 0.3em;
	margin-left: 7em;
	line-height: 1.3;
}
dd p { margin-bottom: 0.3em; }

するとWindows IE6では左のようにdtの直後に出現するddの先頭の文字が右に0.3emほどずれて表示されてしまいます。

これを回避するにはIE6用にheight: 1%;を適用させると頭文字がそろいます。IE6だけに適用させるため* htmlハックでCSSを記述します。

* html dd { height: 1%; }

さてとりあえずそろいましたが、height: 1%;の記述は右に0.3emほどずれたものに合わせることになるので、1つのdtに複数のddを記述した場合、2番目以降のddは正しいddの位置に表示されるので、当然のようにずれてしまいます。

結局これを回避するためには2番目以降のddに同じく* htmlハックで右に0.3emほどマージンを多くとる事になってしまいます。

正確なマークアップの意味合いから外れてしまうかもしれませんが、1つのdtに対してddを1つにし、dd内にpタグを含めてマークアップすると、クラスを作らなくても右に0.3em分ずれて表示してくれるので、とりあえず見た目の確保は出来ます。

<dl>
<dt>定義リスト1</dt>
<dd>
<p>文章文章文章文章文章文章文章文章文章文章</p>
<p>文章文章文章文章文章文章文章文章文章文章</p>
<p>文章文章文章文章文章文章文章文章文章文章</p>
</dd>
</dl>

IE7はメイリオ、IE6/FFはMS Pゴシ、Mac Safari/FFはヒラギノ角ゴを表示

Posted by poundhound on February 23, 2008

自宅ではMacを使ってますが、職場はWindows環境なので普段はWindows Firefoxをメインに使ってます。

最近メイリオを指定しているサイトがぼちぼちと。ところがFirefoxやIE6なんかで見てるとアンチの切れたメイリオが表示されて非常に読みづらいのです。VistaのFirefoxはどうだかわからないけれども、XPでメイリオがインストールされていてFirefoxやIE6環境ではとても見てられない。

てな訳で一つの案としてこんなフォントの指定を考えてみました。

body { font-family: "ＭＳ Ｐゴシック", sans-serif; }
*:first-child+html body {
	font-family: "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
}
html>body {
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, sans-serif;
}

まずはWin IE6へMS Pゴシを指定。続いてWin IE7のみにメイリオを適用させる。メイリオがない環境へはMS Pゴシ。で最後にWin FF、Mac Safari/FFにヒラギノを適用。この際、Hiragino Kaku Gothic Pro W3まで記述してしまうとSafari3ではフォントウェイトが太くなってしまうので注意。

とりあえずこんなセットはいかがでしょうか？ってなことでエントリーしておきました。

clearfixと言うclass名について一考

Posted by poundhound on November 25, 2007

ネガティブマージンに関する記事を検索していたらたまたまこのような記事に出会いました。

class名に「表示に関する指示を組み込む」ことについて

要するに『class名に視覚的な内容を示すのはセマンティックに反するので、その要素が意味することが伝えられる名前にしなさい。』とのこと。

clearfixはとても便利で汎用的なclassとして用意して使うケースがほとんどのはず。中にはこんな感じで単独で記入する場合もあります。

div#wrapper:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

div#wrapper {display: inline-table;}

/* Hides from IE-mac \*/
* html div#wrapper {height: 1%;}
div#wrapper {display: block;}
/* End hide from IE-mac */

ただこの場合、同じ記述が何度も出てくるので僕の場合、滅多に使う事が無い気がします。

僕の場合Movable Typeを使うようになってから、clearfixと言うclass名ではなくpkgと言うclass名で使ってます。なぜかと言うとMovable Typeのデフォルトcssにこの名前で記述されてたからです（笑）

pkgってのはおそらくはpackageの略だろうと勝手に思って使っています。そのグループをパッケージ＝ひとまとめにすると言う意味で考えると、clearfixと言う名前よりはセマンティックに配慮されている気がします。

じゃあそのままpackageってclass名にすれば良いじゃないか？となるんですが、Dreamweaverを使ってる立場から複数のclass名を入力する際に、汎用性のあるclassは短い名前の方が便利なんですよね。

実際はやはり汎用性のあるclassを用意する場合、視覚的な内容を名前に付けてしまったりするのですがね。出来る限り使わないようにはしていますが...

定義リストdt ddを横並びで表示させる

Posted by poundhound on November 18, 2007

定義リストであるdt ddを横並びにさせたい場合、僕はfloatを使うケースが多いのですが、Windows IE6では最初のddが約0.2emほどマージンを多く取るバグがあります。Windows IE7/Firefox/Opera、Macintosh Safari/Firefox/Operaではきちんと表示されます。

IE6では隣接セレクタに対応してないので、最初のddに適用させるクラスを記述してスターハックを適用させています。本当はあんまりハック使いたくないんですけどね。

dt   { margin-bottom: 0.25em; width: 6em; float: left; }
dd   { margin-bottom: 0.25em; margin-left: 6.5em; }
* html body dd.first   { margin-left: 6.3em; } /* for win ie6 */

トピックパスに関して一考

Posted by poundhound on February 18, 2007

CSS HappyLifeさんの所に面白いエントリー記事が載ってた。

パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種

この中のサンプル3に注目

>を画像にする事で、altに「の中の」を入れ、音声ブラウザなどで『ホームの中のサービスラインナップの中のウェブサイト制作』と読ませるそうな。

単純にPタグでマークアップしてあるだけなんだけど、>画像のaltを「の中の」と読ませるところあたりが目からウロコ。アクセシビリティを考えるとこれは良いかも。

いろんな方法があるんですねぇ...それにしてもIE7が:after/:before要素とcontentプロパティを実装しなかったのは悔やまれるなぁ。

Prev1 2 345 6Next