CSSデザインノート

主要のブラウザで縦スクロールバーを出す方法

Wed, 05 May 2010 18:22:08 +0900

コンテンツ量が少なくても常に縦スクロールバーを出す方法は、昔に以下の記事を書きました。

これらの記事を書いてから約2年が経ち、ブラウザの実装状況も変わってきました。

2010年5月現在は、主要の最新ブラウザで、以下の記述で、コンテンツ量が少なくても常に縦スクロールバーを出すことができます。

CSSコード

html {
   overflow-y:scroll;
}

最新のブラウザならCSS3の草案を取り入れているようですね。

また、以前は有効であったhtmlの高さを100%にし、マージンを1px空けて、縦スクロールバーを出す方法はFirefox3.6.3では効かなくなっていたので注意です。今のところ他のブラウザ（safari、Opera、Chome）には有効のようです。

CSSコード

html {
   height:100%;
   margin-bottom:1px;
}

word-breakプロパティとword-wrapプロパティの違い

Wed, 05 May 2010 15:20:38 +0900

前回の記事で改行の方法を指定する「word-wrapプロパティ」について述べました。

改行をコントロールするword-wrapプロパティは主要の最新ブラウザで有効 - CSSデザインノート

もうひとつ、改行の方法を指定するプロパティに「word-breakプロパティ」というのがあります。

word-breakプロパティとは？

word-breakプロパティとは何かと申しますと、簡単に言えば、文章の改行方法を指定するものです。例えば、表示範囲に合わせて改行するか、あるいは単語の切れ目で改行するかなどです。

値には、narmal、keep-all、break-allの３種類があり、意味は以下のとおりです。

normal: 日本語は表示範囲で単語の途中でも改行されるが、英語は単語の切れ目で改行される。
keep-all: 全ての言語で単語の途中で改行せず、単語の切れ目で改行される。
break-all: 全ての言語で単語の途中でも改行される。

ただ、各ブラウザで動作が若干異なります。例えば、keep-allは、IE6や7では、そのとおりの動作をするのですが、他のブラウザでは日本語は表示範囲に合わせて単語の途中でも改行されます。

word-breakプロパティの実装状況

サンプル

各ブラウザで確認してみてください。

表にしてみました。

ブラウザ/値	narmal	keep-all	break-all
Firefox 3.6.3	○	×	×
Safari 4.0.5	○	○	○
Google Chome 4.1	○	○	○
Opera 10.51	○	×	×
IE6	○	○	○
IE7	○	○	○
IE8	○	×	×

基本的に、値がnarmalの場合はどのブラウザでも同じ動作をします。

しかし、値がkeep-allの場合、Safari、Chomeは、日本語は表示範囲に合わせて単語の途中でも改行され、英語は単語の切れ目で改行されます。一方、IE6と7は、日本語も英語も単語の切れ目で改行されます。

また、値がkeep-allの場合、Safari、Chomeは禁則処理が無効になるのに対し、IE6と7では禁則処理は有効のままです。禁則処理に関しては、以下の記事で説明しています。

改行をコントロールするword-wrapプロパティは主要の最新ブラウザで有効 - CSSデザインノート

また、IE6、7で使えたword-breakプロパティがIE8で使えなくなっているのは、改行の方法をword-wrapプロパティのみにしたということでしょうか？

word-breakプロパティとword-wrapプロパティの「break-all」の違い

word-breakプロパティにもword-wrapプロパティにも「break-all」という強制的に改行する値を指定できるのですが、この違いは何なのでしょうか。

IEやSafari、Google Chomeはどちらのプロパティの「break-all」も使えるのですが、その差を見てみると、日本語に違いはありませんが、英語のショートセンテンスにおいて、 word-breakプロパティは単語の途中でも強制的に改行してしまいますが、word-wrapプロパティは単語の後の半角スペースで改行してくれるようです。

word-wrapプロパティは最新のブラウザならほどんど使える事、また、英単語の途中で強制的に改行しないことを考えると、word-wrapプロパティを使うのが望ましいと言う事ですね。

それにしても、似たようなプロパティがあるというのもとても変ですね。

改行をコントロールするword-wrapプロパティは主要の最新ブラウザで有効

Wed, 05 May 2010 10:42:55 +0900

最近はword-breakするのにJSは使わないほうがいいみたい - Webtech Walker

という記事を見て、おお！全てのブラウザでword-wrap:break-word;が有効なのか！と嬉々としました。特に、お問い合わせフォームなどで、英数字が強制改行されないとレイアウトが崩れる原因になって、よくプログラム側で制御していたので、これは嬉しい。

word-wrapプロパティとは？

まず、word-wrapプロパティとは何かと申しますと、簡単に言えば、文章の改行方法を指定するものです。単語の途中で改行するかどうかを指定します。

word-wrapプロパティは確かIEが独自先行で実装してたと思ったのですが、CSS3で草案されていて、主要の最新のブラウザで実装されているようですね。

値には、narmal、break-allの２種類があり、意味は以下のとおりです。

normal: 英単語の途中で改行しない。表示範囲をはみ出す場合は表示範囲を拡張する。日本語は表示範囲に合わせて強制的に単語の途中でも改行する。
break-all: 日本語も英語も表示範囲からはみ出す場合は強制的に単語の途中でも改行する。

サンプル

朝起きると体がだるく感じた。とりあえず起きてみたものの、段々気分が悪くなってきた。熱を測ってみると39度7分もあった。「Oh, my God!」と僕はふざけて天を仰いだ。今日はどうしても外せない用事があるのだ。 abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789@com.abcdefghijklmnopqrstuvwxyz0123456789@com. abcdefghijklmnopqrstuvw-xyz0123-456789@com.abcdefghijklmnop/qrst/uvwxyz0123456789@com.abcdefghijklm_nopqrstuvwxyz0123456789@com.

ハイフンとかスラッシュがある場合は、場所によってはそこで強制的に改行するみたいです。

禁則処理

文字のレイアウトで重要なのは、禁則処理です。禁則処理とは、例えば日本語で言えば、句読点が行頭にこないなど、作文を書くときによく注意された、文章を書く上での決まりごとですね。

ブラウザによってもこの禁則処理に若干の違いがあります。Safari、Chome、Operaでは、一般的な禁則処理は行われます。

しかし、firefoxでは、｢段々｣などの｢々｣が行頭にきてしまうことがあります。また、IEでは小さい｢っ｣が行頭にきてしまうことがあります。

あと、似たようなのに、word-breakプロパティというのもあります。これも同様に改行方法を指定するものなのですが、ブラウザで実装状況が異なるようです。詳しくは別の機会に。

IE6で、floatした要素にmarginを指定すると値が2倍になる

Tue, 04 May 2010 18:06:50 +0900

｢IE6以前のブラウザにおいて、floatしたブロック要素にマージン（margin）を指定すると値が2倍になってしまう｣というのは非常に有名なIE6のバグなのですが、最近floatを解除するのに、親要素にfloatを指定して回り込みを解除することをよくしているので、このバグによく遭遇します。このバグの解決方法を紹介します。

CSSコード

display:inline;

display:inline;にすると、他のブラウザで不都合は起こらないのか？という疑問が起こるわけですが、仕様どおりの動作をするブラウザでは起こりません。

というのも、｢floatを指定した要素にdisplayプロパティは無視される｣と仕様書に書いてあります。

float:left・・・左に浮動するブロックボックスを生成する。続く内容は、（'clear'プロパティの指定に従いつつ）そのボックスの右側に上から流し込まれる。このプロパティが'none'以外の値を取る場合、その要素の'display'プロパティは無視される。

視覚整形モデルより引用

リストをfloatで横並びにする際、画像の下に余白が空く

Thu, 29 Apr 2010 20:49:52 +0900

HTMLで画像を指定したメニューをfloatで横並びにしたくて、実際に以下の記事を参考にCSSでロールオーバーメニューを作っていたときの事です。

アクセシビリティの高いCSSロールオーバーメニュー - CSSデザインノート

なぜか、画像の下に余白が開いてしまうことに気づきました。参考元の以下の記事では、そんなことが起こってはいませんでした。

ピュアCSSで実装するDKIRを応用した画像ボタンのロールオーバー効果 | CSS-EBLOG

これから推測するに、真っ先に思いついたのが、DOCTYPE宣言の違い。私は、｢xhtml1-transitional.dtd｣だったのですが、CSS-EBLOGさんのデモページでは｢xhtml1-strict.dtd｣でした。

試しにxhtml1-strict.dtdにしてみると、下の隙間は空きませんでした。

(X)HTMLコード

ただ、それだけのためにDOCTYPE宣言を変えるのは他にも影響が出そうでなかなか難しいですよね。

画像の下に余白が空いていたのですが、それがulの領域が広がっていたためというのが、FirofoxのWeb Developerを使ってわかったので、単純に思いつくのが、｢line-height｣が悪さをしているのではないかということ。ulかliに｢line-height:0;｣というように、値を0にすると、隙間が空かなくなりました。

CSSコード

ul {
   line-height:0;
}

あるいは

CSSコード

li {
   line-height:0;
}

逆に、DOCTYPE宣言が｢xhtml1-strict.dtd｣で、ulかliに｢line-height:0;｣を指定してしまうと、余白が空いてしまうようです。どうしてこのようなことが起こるのかよくわかりません。

ちなみに｢xhtml1-transitional.dtd｣で余白が空いてしまうのは、Firefox、Google Chome、Safari(Windows XP）でした。｢xhtml1-strict.dtd｣でulかliに｢line-height:0;｣でレイアウトが崩れてしまうのが、Firefox、Operaでした。

IE6と7は特に不具合は起こりませんでしたが、IE8だけは｢xhtml1-transitional.dtd｣かつ｢line-height:0;｣を指定すると余白は消えましたが、｢xhtml1-strict.dtd｣だけでは余白は消えず、｢xhtml1-strict.dtd｣かつ｢line-height:0;｣をすると、余白は消えました。謎ですね。

要約すると、隙間を空けないようにするには、DOCTYPE宣言を

(X)HTMLコード

にして、CSSにて、

CSSコード

ul {
   line-height:0;
}

あるいは

CSSコード

li {
   line-height:0;
}

を指定します。

ブラウザ別HTML5、CSS3実装状況

Sat, 10 Apr 2010 17:31:44 +0900

英語のサイトで恐縮ですが、HTML5とCSS3の実装状況をまとめたサイトがありましたので紹介します。これをみると、SafariやFirefoxが優秀で、IEは最新版の8でも、実装が追いていないのがわかります。IEのシェアは日本では大きいのでもう少し頑張っていただきたい事ですね。

Web Designer's Checklist, Web Designers' Browser Support Checklist

決定版！？Clearfixのソースコードはここまで短くなった

Mon, 05 Apr 2010 13:04:05 +0900

マルチカラム構造にしたときなど、ブロック要素の回り込みを解除するのに、Clearfixと呼ばれるテクニックを使用するのが便利です。ブラウザの移り変わりにより、動作対象とする古いブラウザを考慮しなくなってもよくなってきたこの頃ですので、Clearfixのソースコードも以下のようにここまでスリムになりました。

CSSコード

element{
   ⁄zoom:1;
}

element:after {
   content:'';
   display:block;
   clear:both;
}

これはNetScapeとMacのIEを考慮していないソースコードになります。｢/zoom:1;｣のようにプロパティの前にスラッシュをつけるとIE6と7だけに適用されるようです。今まで知りませんでした。

このclearfixを使う他に、単純に回り込みを解除させたい要素に｢overflow:hidden｣を適用すればよいというのもあります。印刷時に問題があるらしいのですが、印刷用のCSSを用意する場合は｢overflow:auto;｣などとしておけばよいので、結構使える技ではあります。

参考

いまどき ? いまさら ? clear fix のコード | ヨモツネット

CSS3のアニメーション機能を利用してメニューを彩る

Sat, 06 Mar 2010 14:30:46 +0900

小技の効いたサイトを発見しました。

せせらぎダイニング

このサイトで、左のメニューにカーソルを合わせると英語表記のところがゆっくりと色が変化していくのがわかると思います。トランジション効果と言えばよいのでしょうか、アニメーション処理がしてあります。

このサイトの場合は、画像のロールオーバー時に、JavaScriptでアニメーション処理をしていると思うのですが、今回画像なしで似たような動作をやってみます。CSS3とそれに対応しているブラウザを使用します。残念ながら現在はSafari4.0とGoogle Chomeしか動作しないようです。

サンプル

サンプルはこちらから

動作確認

Google Chrome 4.0、Safari 4.0.4 for Windows XPです。

CSS3はまだ正式勧告されていないので、使用する場合にはプロパティの前にベンダープリフィックスと呼ばれる接頭辞をつける必要があります。SafariおよびChomeは｢-webkit-｣です。

(X)HTMLコード


コンセプト
CONCEPT
メニュー
MENU
新着・お得情報
NEW&EVENTS
お問合せ・ご予約
CONTACT
店舗情報・地図
INFORMATION

CSSコード

ul {
   width:200px;
   background:#735D4A;
   margin:0;
   padding:0 10px;
}

li {
   list-style:none;
   border-bottom:#524139 1px solid;
}

li:last-child {
   border-bottom:none;
}

li a {
   display:block;
   padding:15px 0 15px 30px;
   font-family:"ＭＳ 明朝",serif;
   color:#F7F3EF;
   font-size:14px;
   text-shadow:2px 2px 2px rgba(0,0,0,0.6);
   -moz-text-shadow:2px 2px 2px rgba(0,0,0,0.6);
   -webkit-text-shadow:2px 2px 2px rgba(0,0,0,0.6);
   line-height:1.4;
   letter-spacing:1px;
   background:url("bg_list.gif") 10px 50% no-repeat;
   text-decoration:none;
   outline: none;
}

li a span {
   color:#080808;
   font-family: "arial",sans-serif;
   font-size:10px;
   text-shadow:none;
   -moz-text-shadow:none;
   -webkit-text-shadow:none;
   -webkit-transition-duration:0.4s;
}

li a:hover span {
   color:#F79239;
}

｢-webkit-transition-duration:0.4s｣というのがアニメーション部分の指定になります。メニューをマウスオーバーしたときに、英語表記の部分だけが0.4秒かけて色がゆっくりと変わります。

また、CSS3のテキストにシャドーをつけれる｢text-shadow｣、親子関係の最後の子要素だけに適用する｢:last-child｣も併せて使用しています。

コンテンツ量が少なくてもデザインくずれを起こさないようにフッターを固定する

Sat, 27 Feb 2010 08:18:29 +0900

ホームページのデザインによっては、コンテンツ部分が少ないとフッターの下に余白ができてかっこ悪くなる場合があります。そのような場合には、フッターを固定する事でデザインのくずれを防ぐことができます。

ポイントは｢フッター以外の要素を囲むブロック要素｣と｢フッターを囲む要素｣を作る事です。このブロック要素にpading-bottomで、フッター分の余白を設け、フッターをposition:relativeで位置を決めます。ここで重要な事はフッターの縦の大きさは固定でなければならないということです。

サンプル

当サイトで配布しているCSSテンプレート｢pub002｣をフッター固定にしてみました。

サンプルはこちらから

動作確認

Firefox3.5.8、Google Chrome 4.0、Safari 4.0.4、Opera 10.10、IE6 for Windows XPです。

(X)HTMLコード

CSSコード

/* ========FOOTER FIX======== */
* {
   margin:0;
}

html,
   body,
   div#top {
   height:100%;
}

body > div#top {
   height: auto;
   min-height: 100%;
}

div#contents {
   padding-bottom:150px;/* フッターの高さと同じ値にする */
}

div#footerWrap {
   position:relative;
   margin-top:-150px;/* フッターの高さと同じ値にする */
   height:150px;/* フッターの高さを指定 */
}

カーソルを合わせたメニューを強調する

Wed, 20 Jan 2010 22:41:34 +0900

CSS HappyLifeの平澤さんが新しいサイト「CSS HappyLife ZERO」をオープンされたのですが、そのメニュー部分がとても素敵だったので、参考に同じようなものを作ってみました。

ちなみに全くソースコードは拝見していませんので、同じようには作られてはいないと思います。

前回の記事「アクセシビリティの高いCSSロールオーバーメニュー」を参考にすれば、比較的簡単に作れそうです。

サンプル

サンプルはこちらから

動作確認

Firefox3.5.7、Google Chrome 3.0、Safari 4.0.4 for Windows XPです。IE6はhoverに対応していませんので、強調する効果は得られませんが、不具合なく表示する事はできます。~~Opera 10.10は正常に動作しません。なぜでしょう。~~「ul#menu li a」に「display:inline-block;」を追加するとちゃんと動作しました。

(X)HTMLコード

CSSコード

img {
   border:0;
}

ul#menu {
   float:left;
   margin:0;
   padding:0;
}

ul#menu:hover {
   background: url(images/bg_menu_hover.gif) no-repeat;
}

ul#menu li {
   float:left;
   margin:0;
   padding:0;
   list-style:none;
}

ul#menu li a {
   display:block;
   display:inline-block;
   width:100px;
   height:30px;
}

ul#menu li a:hover,
ul#menu li a.current {
   background-image:url(images/bg_menu_on.gif);
}

ul#menu li.menu1 a:hover,
ul#menu li.menu1 a.current {
   background-position:0 0;
}

ul#menu li.menu2 a:hover,
ul#menu li.menu2 a.current {
   background-position:-100px 0;
}

ul#menu li.menu3 a:hover,
ul#menu li.menu3 a.current {
   background-position:-200px 0;
}

ul#menu li.menu4 a:hover,
ul#menu li.menu4 a.current {
   background-position:-300px 0;
}

ul#menu li.menu5 a:hover,
ul#menu li.menu5 a.current {
   background-position:-400px 0;
}

ul#menu li img {
   position:relative;
   z-index:-1;
}

考え方としては、リスト（ul）の背景に目立たない用のリスト画像を指定し、特定のメニューにカーソルがあったときはそのメニューだけオンマウス用の画像に切り替え、他のメニューはリストの一番下に回りこませてることにより目立たない用のリスト画像が表示されるというわけです。

また、現在表示しているページのメニューも目立たせたい場合は、a要素にcurrentというクラス名をつけて、CSSのほうで個別にスタイルを指定するとよいと思います。

基本的な縦型リストの作り方

Wed, 30 Dec 2009 10:29:22 +0900

基本のHTMLソースコードは以下のとおりです。divでリストを囲まなくてもよいですが、メニュー部分ということがわかりやすいですし、デザインに幅が広がります。 class名は｢section｣でなくて、｢menu｣や｢submenu｣などでもよいです。

(X)HTMLコード


メニュー

HOME
最新情報
事業内容
会社概要
採用情報
お問い合わせ

デザイン案１

ではデザインです。まずは基本ということで、リストマークを画像化、テキスト部分がアンカーになっているデザインにします。

サンプル

メニュー

CSSコード

div.section {
   width:200px;
   padding:3px;
   background:#E7E7E7;
}

div.section h2 {
   margin:0;
   font-size:12px;
   color:#fff;
   line-height:3.0;
   padding:2px 5px 0px 5px;
   background:#3C3C3C;
}

div.section ul{
   margin:5px 0 0 0;
   padding:0;
   list-style:none;
}

div.section li{
   margin:0 0 0 5px;
   padding-left:10px;
   font-size:12px;
   line-height:2.0;
   border-bottom:1px solid #fff;
   background:url(bg_list.gif) 0 50% no-repeat;
}

div.section a {
   color:#5A5D00;
   text-decoration:none;
}

div.section a:hover {
   color:#7B8200;
   border-bottom:1px solid #7B8200;
}

リストマークを画像化するためには、ulでlist-style(-type)をnoneにし、liの背景画像でリストを表示するのが一般的です。リストの位置は、background-posionで指定（今回は一括指定しています。）、リストとテキストの余白はliのpadding-leftで調整します。

デザイン案２

上記の場合、アンカー領域がテキスト部分のみなので、人によってはクリックしにくい場合もあるかもしれません。そういう場合は、リスト部分をアンカー領域にしてクリックしやすくします。

サンプル

メニュー

CSSコード

div.section {
   width:200px;
   padding:3px;
   background:#E7E7E7;
}

div.section h2 {
   margin:0;
   font-size:12px;
   text-align:center;
   background:#295DAD url(bg_h2.gif) 0 0;
   line-height:3.0;
   color:#fff;
}

div.section ul {
   margin:0;
   padding:0;
   list-style-type:none;
}

div.section li {
   margin:0;
   padding:0;
   font-size:12px;
   color:#333;
   padding-bottom:1px;
   background:#fff url(bg_dotline.gif) 0 100% repeat-x;
}

div.section li a {
   display:block;
   color:#7C9C2D;
   padding:10px 0 10px 20px;
   background:#fff url(bg_list.gif) 5px 50% no-repeat;
}

div.section li a:hover {
   color:#9CC23D;
   background:#fff url(bg_list.gif) 5px 50% no-repeat;
}

ポイントは、a要素を｢display:block;｣でブロック要素にすることです。そして、リストの画像をli要素ではなくa要素に指定する事です。こうすることで、リストマークのところまでクリックできるようになります。

アクセシビリティの高いCSSロールオーバーメニュー

Tue, 29 Dec 2009 12:11:09 +0900

これまでロールオーバーメニューをCSSのみで作ろうとした場合、ちらつきが起こったり、画像をオフにしていたら見れなかったり、アクセシビリティが低くなってしまっていました。

しかし、ある程度これらを克服したCSSの書き方がありました！しかも非常にCSSソースコードがコンパクトになっています。

ピュアCSSで実装するDKIRを応用した画像ボタンのロールオーバー効果 | CSS-EBLOG

詳細は上記のブログを参考にしていただければと思います。

ポイントは画像の使い方でしょうか。 HTMLにてでマウスオーバー前の画像を表示、CSSにて背景画像でマウスオーバー時の画像を配置し、マウスオーバー時に表示する範囲をbackground-positionで設定しています。

これらの画像をz-indexでレイヤーの順番を変更にする事で、重なった画像がうまく表示されるという仕組みですね。

本来display:-9999pxで画面外にとばしてしまうところですが、うまく下のレイヤーに隠すとはなかなか面白いですね。

altでメニューの代替テキストを表示することで、画像がオフだったり読み込まれないときでも一応読めます。

また、最初からマウスオーバー時の画像を読み込んでいるので、マウスオーバー時にちらつきが発生することもありません。

難点は画像を作るのが面倒ってことですかね。メニュー個別に分かれたマウスオーバー前の画像と、マウスオーバー時の全てのメニューがくっついた画像を用意しないといけないのは、少し手間がかかりますね。その分、CSSソースコードはシンプルになるのですが。

ソースコードを引用させていただきます。

(X)HTMLコード

CSSコード

#menu li {
	float: left;
	position: relative;
	z-index: 3;
}
#menu li a {
	background: url(menu.png) left top no-repeat;
	display: -moz-inline-box; /* Firefox2 用のスタイル */
	display: inline-block;
}
#menu li.product a { background-position: -135px 0; }
#menu li.about a { background-position: -255px 0; }
#menu li.blog a { background-position: -375px 0; }
#menu li.contact a { background-position: -495px 0; }
#menu li a:hover {
	position: static;
}
#menu li a:hover img ,
#menu li#current a img {
	position: relative;
	z-index: -1;
}

参考サイト

ピュアCSSで実装するDKIRを応用した画像ボタンのロールオーバー効果 | CSS-EBLOG

IE6でもposition:fixedと同じ動作をさせる(改訂版）

Tue, 29 Dec 2009 10:23:32 +0900

以前、IE6でもposition:fixedと同じ動作をさせるというコラムを書きましたが、実際にデザインしているときに不具合に気づきました。

例えば、fixはしたくないけどもposition:absoluteで絶対配置したいボックスが、スクロールすると画面に固定になってしまうのです。当たり前なのですが。

よってIEの場合、スクロールするためのdivボックス（scrollボックス）を用意し、fix表示したいボックスはscrollボックスより外に出すようにしなければなりません。 scrollボックスでスクロールするようにしているので、htmlおよびbodyではスクロールしないようにします。

サンプルページはこちらから

ソースコードは以下のとおりです。

(X)HTMLコード


   
      絶対配置で表示したい要素
   


固定したい要素

CSSコード

/* IE6用 */
* html ,
* html body {
   height:100%;
   overflow:hidden;
}

* html #scroll {
   position:relative;
   width:100%;
   height:100%;
   overflow-y:auto;
   overflow-x:hidden;
}

/* 共通 */
div#contents {
   position:relative;
}

div#absolute {
   position:absolute;
   top:0;
   right:0;
}

div#fix {
   position:fixed;
   top:100%;
   right:100%;
}

/* IE6用 */
* html div#fix {
   position:absolute;
}

参考サイト

CSSのみでIE6にposition:fixedを対応させる | CSS-EBLOG

IEでimgにpaddingが効かない

Tue, 03 Nov 2009 20:19:49 +0900

例えば、画像をポラロイド風に見せたいときなど、画像にpaddingを指定しても有効にならない場合があります。

CSSコード

img {
   padding:2px;
   border:1px solid #999;
}

これは(X)HTMLファイルが互換モードになっているためです。DOCTYPE宣言で標準モードにすればpaddingが有効になります。

横並びにした画像にテキストが回りこまないようにする方法

Tue, 03 Nov 2009 20:10:43 +0900

例えば、Amazonのアフィリエイトみたいに、書籍の画像と説明文を横並びにする方法です。説明文が長いとき画像の下に回りこまないのが美しいですよね。方法は二通りあります。

marginで指定
overflowで指定

以下にサンプル画像を示します。

基本の(X)HTMLコードは以下のようになります。

(X)HTMLコード





テキストテキストテキストテキストテキスト
・・・（略）・・・
テキストテキストテキストテキストテキスト

１．marginで指定

画像の横幅が固定の場合は、その大きさ分をmarginで空けます。

CSSコード

.column img{
   float:left;
}

.column p{
   margin-left:160px;
}

この場合、次の要素も回り込んだままなので、clearなどを指定して回り込みを解除しなければなりません。

２．overflowで指定

画像の横幅が未知の場合は、余白を固定することが出来ません。overflowを使用することで、テキストが回り込まなくなります。

CSSコード

.column img{
   float:left;
}

.column p{
   overflow:hidden;
   zoom:1;
}

｢zoom:1;｣はIE6でレイアウトが崩れるのを防ぐために指定します。