[B! +css] anamimのブックマーク

横スクロールすると背景が切れるときの対処法 - Webのプルタブ

背景をbodyに指定していた時、ブラウザをちょっと縮めて横スクロールバーが出るようにして横スクロールしてみた時に背景が消えて真っ白！ということがありとても焦りました。（このブログでも遭遇......）そんなときの対処法を紹介します。いじるのはCSS1行のみ！追加するソース body{ min-width:950px; } これだけです。950pxという数値は「メインカラム」の数値と一緒にしてください。 min-widthはIE6では効きませんが、IE6ではこの切れる現象は起こらないので無問題かと。参考サイト以下の記事を参考にしました。背景が切れる理由が知りたい方はこちらに載ってますのでご参照ください～。横スクロール時の背景見切れをCSSで修正するへ">横スクロール時の背景見切れをCSSで修正する

anamim 2011/09/18

リンク

font-sizeのパーセント表記一覧 - Webtech Walker

font-sizeはpxやptなどで指定するとIEで拡大、縮小ができないので、パーセントなどで指定することが多いと思います。しかし、パーセントで指定すると、ブラウザごとに大きさが違ったりします。そこで、基本サイズが12px～16pxのときに10px～26px相当を表示するパーセントの数値を計算して、各ブラウザで確認したものをまとめました。注意点これは僕が自分で確認できる環境でのみ動作確認を行っています。動作確認したブラウザは以下になります。 Windows IE6 IE7 Firefox2.0.0.14 Opera9.27 safari3.1 Netscape7.01 Mac Firefox2.0.0.14 Opera9.27 Safari3.1.1 Safari2.0.4 IE5.2 計算式は以下のとおりです。小数点以下は四捨五入するとブラウザ間で差異でるようなので、切り上げることで

anamim 2011/09/15

リンク

IE7の画像の隙間とネガティブマージン - Parody's Backyard

FC2に移転した「ぱろでい日記」のサイトデザインをしておりまして、またもやIEの仕様にやりこめられました。問題となったのは、2点。まずは、背景画像を設定するため、スペースのみを入れた空白のブロック。高さが1px増えてしまい続くブロックとの間に1pxの隙間ができてしまいました。もう一点は、ネガティブマージン（マイナスのマージン）を設定したブロックが削れてうまく表示できない事態。いずれも解決しましたが、IE以外ではキレイに表示できるのに、なんでIEは・・・。今回のトラブルは、いずれもIE7（IE8のIE7互換表示）で発生したものです。 line-height: 0; の罠正直、自分の設定方法が変だったのでしょう。問題のソースはこれ HTML <div class="header"> </div> <div class="content">コンテンツ</div> CSS .head

anamim 2011/08/30

リンク

CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ

Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろを読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS

anamim 2011/06/17

リンク

どや！？ひよっこデザイナーにもできるWebページ高速化！鍵は「HTTPリクエストの数を減らすこと」 | デザインどや！？

Webページレイアウト、ナビゲーションプラグイン、フォーム、スライダー＆カルーセルプラグイン、チャート＆グラフプラグイン、イメージエフェクトプラグイン、ビデオプラグインなど。チェックしておきたいです。海外カジノオンラインサイトの制作はワードプレスのプラグインを利用して様々な機能を付け加えて完成させることができます。2012年のjQueryプラグインまとめでは、デザインの一新や個別のカスタムにも対応した国際的で魅力的なサイト作成に役立つ情報を紹介しています。

anamim 2011/06/17

リンク

CSSセレクタ20個のおさらい

CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル