HTML・CSSを検証 リンクを取得 Facebook Twitter Pinterest メール 他のアプリ 9月 09, 2009 W3C CSS 検証サービス CSS文書の文法をチェックします。 Another HTML-lint gateway The W3C Markup Validation Service HTML文書の文法をチェックします。 続きを読む
IE7でサイズの大きな文字が切れる リンクを取得 Facebook Twitter Pinterest メール 他のアプリ 9月 09, 2009 IE7で表示した時にフォントサイズの大きな文字の下の方が切れることがあります。 恐らくdivタグの中にdivタグを入れるとこの現象がおこると思われます(未確認) 僕は以下の状況で文字が切れました。 #cBox { height: 50px; width: 200px; { #cName { font-size: 32px; margin-top: 20px; } 解決方法としてはline-heightで文字の高さを指定すると解決します。 例: #cBox { height: 50px; width: 200px; { #cName { font-size: 32px; margin-top: 20px; line-height: 40px; } あとはレイアウトを見ながらline-heightを微調整してください。 続きを読む
IE6で指定した背景が消えるバグ リンクを取得 Facebook Twitter Pinterest メール 他のアプリ 9月 09, 2009 IE6で指定した背景画像が表示されないバグがあります。 スクロールバーを動かすと表示されたり消えたりする厄介なバグです。 原因はfloatプロパティを指定した要素の子要素に背景を指定すると起こる場合があります。 対処法はwidthを指定すれば回避できます。 続きを読む
Mac版Safariでブラウザチェック リンクを取得 Facebook Twitter Pinterest メール 他のアプリ 9月 09, 2009 BrowsrCamp このサイトを使えばWinでMac版のSafariのブラウザチェックができます。 サイトのURL、画面サイズ、保存形式を入力するとスクリーンショットが表示されます。 無料版なので少しサーバーが重いですが、僕にとってはとても重宝してます。 続きを読む
Firefox3とFirefox2を共存&同時起動させる方法 リンクを取得 Facebook Twitter Pinterest メール 他のアプリ 9月 09, 2009 ブラウザチェックの為にFirefox3と2を共存&同時に起動したい。 そんな時は難しいことを考えずに、FirefoxのPortable Editionを使いましょう。 Firefox3はインストール済みということで話を進めていきます。 ・SourceForge Firefox2.0.0.18 Firefox_Portable_2.0.0.18_ja.paf.exeが日本語版です。 これを好きなところにインストールした後に /Firefox Portable/App/Firefox/firefox.exeへのショートカットを作ります。 例: C:\Program Files\Mozilla Firefox2.0.0.18 Portable\ ショートカットを実行すると、どのプロファイルを使うかと聞かれるので新しく作ります。 僕は「Firefox2.0.0.18」というプロファイル名で作りました。作ったあとは起動せずに終了。 次にショートカットを右クリック→プロパティを押して、「リンク先」の最後に 「 -no-remote -P 作ったプロファイル名」を加えます。一文字目の半角スペースを忘れずに。 例: "C:\Program Files\Mozilla Firefox2.0.0.18 Portable\App\Firefox\firefox.exe" -no-remote -P Firefox2.0.0.18 これでFirefox3とFirefox2が同時に起動できます。 ちなみに Firefox3のPortable Edition もあります。 3と3の同時起動もできると思うので、 ネットサーフ用のFirefoxとWeb検証用のFirefoxを別々にできそうですね! 続きを読む
バッチファイルで複数のブラウザを同時起動 リンクを取得 Facebook Twitter Pinterest メール 他のアプリ 9月 09, 2009 僕のパソコンに複数のIEを共存させる Multiple IE というソフトがインストールされています。 このソフトをインストールすることによってInternet Explorer3.0/4.01/5.01/5.5/6.0が使えるようになります。 (+Internet Explorer7がインストール) そこでブラウザチェックをする時にいちいちショートカットを複数クリックするのは面倒だということで、一つのバッチファイルで複数のブラウザを同時に起動する方法を紹介します。 以下のテキストのファイルのパスを自分好みに変えてテキストエディタで保存、拡張子を「.bat」で保存。 @ECHO OFF start "" "C:\Program Files\Opera\opera.exe" start "" "C:\Program Files\Internet Explorer\iexplore.exe" start "" "C:\Program Files\MultipleIEs\IE6\iexplore.exe" start "" "C:\Program Files\MultipleIEs\IE55\IEXPLORE.EXE" exit あとは実行するだけで、指定したブラウザが同時起動します。 続きを読む
IE5.5/6で小さい高さを指定した時に指定した高さにならないバグ リンクを取得 Facebook Twitter Pinterest メール 他のアプリ 9月 05, 2009 フロートのクリア用に .clearBox{ both: clear; width: 1px; height: 1px; } のような要素を用意しても、IE5.5/6では高さが1pxになりません。 その場合IE6では”overflow: hidden;” IE5.5では”font-size:0;”と”overflow: hidden;”を追加すると回避できます。 例: .clearBox { both: clear; width: 1px; height: 1px; overflow: hidden; font-size: 0px; } 続きを読む
IE6でマージンが2倍になるバグ リンクを取得 Facebook Twitter Pinterest メール 他のアプリ 9月 05, 2009 .boxLeft { float: left; width: 200px; margin-left: 30px; } IE6ではこの場合フロートした要素のマージンが2倍になってしまいます。 display:inline;を加えるとバグを回避できます。 例: .boxLeft { float: left; width: 200px; margin-left: 30px; display: inline; } 続きを読む
IE5.5以前を回避して違うプロパティを指定 リンクを取得 Facebook Twitter Pinterest メール 他のアプリ 9月 04, 2009 Tantek Box Model Hackと言うらしいです。 IE5.5以前とそれ以外のブラウザで違うプロパティを指定したいときに使えます。 セレクタ { プロパティ: 値; /* Tantek Box Model Hack Start */ voice-family: "\"}\""; voice-family: inherit; /* Tantek Box Model Hack End */ プロパティ: 値; } 例: #mainTopInfolist li { height: 40px; /* Tantek Box Model Hack Start */ voice-family: "\"}\""; voice-family: inherit; /* Tantek Box Model Hack End */ height: 30px; } IE5.5以前はheightが40px それ以外のブラウザではheightが30px IE5.5以前のpadding、borderを含めた数値がheight、widthになるバグを回避する時に使えます。 もちろんですが、height: 40px;を指定しなければIE5.5以前のみプロパティが無しになります。 続きを読む