HOME 当ブログについて RSS 2.0

おすすめの無料サービス
最近の記事

2008年12月01日

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

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

このように記述した場合marginが表示されない場合がある。(IE6や7では反映されるがfirefoxやsafari、IE8では余白ができない)


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

この場合マージンを設定したい場合。

上記のように子要素にmarginやpaddingを記述するとマージンがとれる。

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

posted by dai at 16:45 | Comment(0) | TrackBack(0) | CSS

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

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

 
このようにtitleを入れ中を空にすると代替テキストは表示されなくなります。

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

posted by dai at 15:04 | Comment(0) | TrackBack(0) | CSS

2008年10月07日

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

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

HTML


CSS


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

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

posted by dai at 14:21 | Comment(0) | TrackBack(3) | CSS

2008年10月06日

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

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

これはなぜかわからないのですがtdにwidth指定をすると直るようです。
タグ:改行 safari

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

posted by dai at 17:26 | Comment(0) | TrackBack(0) | CSS

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

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

このようにひとつ上の要素のfloatをclearした場合、マージンが空かないことがあります。


これはCSSの特性上どうしようもないことなので他の方法で間隔を空けます。以下ボーダー属性で空けてみます。

背景色に合わせてボーダーカラーを変えれば間隔が空いたように見えます。
またひとつ上の要素のmargin-bottomを追加することで解決することもありますのでお試し下さい。

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

posted by dai at 17:18 | Comment(0) | TrackBack(0) | CSS

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

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

通常文字数指定このように記述していますが


スタイルでwidthとheightを追加するだけで対処できます。

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

posted by dai at 17:00 | Comment(0) | TrackBack(0) | CSS

2008年04月19日

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

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

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

2008-04-19.jpg

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デザインブログも見る

posted by dai at 00:37 | Comment(0) | TrackBack(0) | CSS

2008年04月11日

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

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

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

CSS切り替えを実装したいページに以下を追加。


CSSのリンクにtitleを追加する。例(CSSを2つ記述しそれぞれをstyle1、style2とした場合)


切り替えリンクを記述する。


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

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

posted by dai at 11:17 | Comment(0) | TrackBack(1) | CSS

2008年04月01日

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

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

こんな感じで
2008-4-1.jpg

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

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

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

posted by dai at 10:23 | Comment(0) | TrackBack(0) | CSS

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

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

CSS例


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

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

CSS例

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

posted by dai at 09:47 | Comment(0) | TrackBack(0) | CSS

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

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

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

CSS例


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

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

posted by dai at 00:45 | Comment(0) | TrackBack(0) | CSS

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。