firefoxやsafariでmargin(マージン)が反映されない場合

親要素のブロック内の左右にfloat（フロート）させたブロックを配置した場合、子要素内のmargin（マージン）が反映されない場合の対処法。

このように記述した場合marginが表示されない場合がある。（IE6や7では反映されるがfirefoxやsafari、IE8では余白ができない）
<div style="margin-bottom:20px;"> <div style="height:500px;float:left;"></div> <div style="height:500px;float:right;"></div> </div>

これはCSSの正しい処理です。子要素がフロートつまり親要素から浮いてしまっているからだ。

この場合マージンを設定したい場合。
<div style="margin-bottom:0px;"> <div style="height:500px;float:left;margin-bottom:20px;"></div> <div style="height:500px;float:right;margin-bottom:20px;"></div> </div>
上記のように子要素にmarginやpaddingを記述するとマージンがとれる。

>>他のWebデザインブログも見る

altの内容を表示させないようにしたい場合

画像にaltを指定して代替テキストを入れた場合、IEなどで画像にマウスをのせると代替テキストが表示されてしまいます。
altは入れたいけど表示させたくないときの対策。

<img src="01.jpg" alt="画像1" title="" /> 　
このようにtitleを入れ中を空にすると代替テキストは表示されなくなります。

>>他のWebデザインブログも見る

高さ100％でfooter(フッター)を常に下に配置し、コンテンツの量に追従して可変するCSSとHTML。

コンテンツの量が少なくても高さを100％保ち、フッターが常に下に配置されるようにし、また多い場合でも可変して表示するCSSとHTMLテンプレート。

HTML
<div id="wrapper"> <p style="width:500px;height:300px;background-color:#ff0000;">このheightを変えてお試し下さい</p> </div><!--wrapper--> <div id="footer"> <p>Copy Right (C) All Right Reserved webデザイナーのおぼえがき</p> </div><!--fotter-->

CSS
@charset "Shift_JIS"; html,body{ height:100%; background:#000000; } #wrapper{ min-height:97%; width:950px; background:#ffffff; margin:0 auto; } /* IE6 */ *html #wrapper{ height:97%; } #footer{ clear:left; height:3%; background:#dcdcdc; margin:0 auto; width:950px; }

Firefox、safari、IE6、IE7、IE8に対応しています。

>>他のWebデザインブログも見る

Safariでtableの最後の一文字が改行されてしまう場合

Safariでテーブル(table)の最後の一文字が改行されてしまう場合の対処法。

これはなぜかわからないのですがtdにwidth指定をすると直るようです。
<table><tr><td style="width:300px;">これで改行されません。</td></tr></table>

>>他のWebデザインブログも見る

FirefoxやSafariでmargin（マージン）が空かない、詰めて表示される場合

FirefoxやSafariでブロック要素のfloatをclearした際に、margin（マージン）が空かない、詰めて表示される場合の対処法。

このようにひとつ上の要素のfloatをclearした場合、マージンが空かないことがあります。
<div style="float:clear;margin-top:20px;">

これはCSSの特性上どうしようもないことなので他の方法で間隔を空けます。以下ボーダー属性で空けてみます。
<div style="float:clear;border:20px solid #ffffff;">
背景色に合わせてボーダーカラーを変えれば間隔が空いたように見えます。
またひとつ上の要素のmargin-bottomを追加することで解決することもありますのでお試し下さい。

>>他のWebデザインブログも見る

FirefoxでフォームのサイズがIEと違う場合

フォームをFirefoxで表示したときにIEやSafariのサイズより大きくなってしまう場合の対処法。

通常文字数指定このように記述していますが
<textarea name="X" cols="XX" rows="XX">

スタイルでwidthとheightを追加するだけで対処できます。
<textarea name="X" cols="XX" rows="XX" style="width:XX;height:XX;">

>>他のWebデザインブログも見る

CSSだけでグラデーションを実現する

次期SafariでCSSでグラデーション指定が可能になるかもしれないとのこと。

実装されればsafariでのデザインの簡略化ができそうです。今まで画像を使っていたところを、-webkit-gradientというプロパティを使うことによってグラデーションが可能になります。



Surfin’ Safari - Blog Archive Introducing CSS Gradients

他ブラウザでも対応してくれるといいですね。


ちなみにCSS3.0では角丸やテキストの影表現なども実装されるそうなのでこちらも期待です。


CSS3の仕様等はこちらを参照

http://www.joostdevalk.nl/code/css3-preview/

http://www.w3.org/TR/css3-roadmap/

日本語版

http://zinganx.hp.infoseek.co.jp/standards/2001/WD-css3-text-20010517.html

>>他のWebデザインブログも見る

1クリックでCSSを切り替えるスクリプト

Yahoo!などで使われているデザイン切り替えボタン。 cssをワンクリックで切り替えてデザインやレイアウトを変えたいときに便利なスクリプト。

こちらからstyleswitcher.jsをダンロードする。ダウンロードしたファイルを解凍してフォルダに置く。
http://www.alistapart.com/articles/alternate/

CSS切り替えを実装したいページに以下を追加。
<script type="text/javascript" src="styleswitcher.js"></script>

CSSのリンクにtitleを追加する。例（CSSを2つ記述しそれぞれをstyle1、style2とした場合）
<link rel="stylesheet" href="http://web-creation.seesaa.net/styles-index1.css" type="text/css" title="style1" /> <link rel="stylesheet" href="http://web-creation.seesaa.net/styles-index2.css" type="text/css" title="style2" />

切り替えリンクを記述する。
<a onclick="setActiveStyleSheet('style1');">style1のCSSを適用する</a> <a onclick="setActiveStyleSheet('style2');">style2のCSSを適用する</a>

これでCSSの一発切り替えが実装可能。今後コンテンツの表示、非表示などで使っていきたいと思っています。

>>他のWebデザインブログも見る

IE6でレイアウトが崩れる（カラム落ちで右ブロックが下にいく場合）

IE6で見た場合、ページ右端のブロックが下に表示されレイアウトが崩れる場合があります。

こんな感じで


これはカラムにブロックの横幅以上の画像等を入れたときにおこるものです。

これを解決するにはoverflow:hedden;を入れます。これではみ出た部分は表示されません。

>>他のWebデザインブログも見る

ネットスケープでセンタリングができないバグを解消

IEではページ全体がセンタリングされているのにネットスケープで見ると左端に寄ってしまう。

CSS例
body { height:100%; text-align:center; }

これはtext-align:center;でセンタリングされるIEのバグです。ネットスケープのほうが正しい表示をしています。

解決法はmargin:0 auto;をブロックに入れます。

CSS例
#wrapper{ width:950px; margin:0 auto; background-color:#111; }

>>他のWebデザインブログも見る

IE6でマージンが2倍になるバグを修正

IE6でマージンが2倍になってレイアウトが崩れるときの修正法。

cssでfloatをかけているブロックにdisplay:inline;を追加する。

CSS例
.left { margin-left:10px; float:left; display:inline; }

これで正常なマージンに戻される。

>>他のWebデザインブログも見る