有限会社タグパンダ 喜安 亮介 2009/11/17 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック&フィルタTipsをお届けします(編集部) Webブラウザ別CSSハック一覧表 前回の「IE 6で泣かないための、9つのCSSハック」では、仕様通りの正しいコーディングを行っているにもかかわらず、Internet Explorer(以下、IE) 6で見ると、レイアウトがズレてしまうなどのさまざまな問題を解決するための9つのテクニックを紹介しました。 今回は、IE 6とIE 7のためのCSSハックのテクニックを下記に分けて紹介します。 IE 6をハック(IE 6のみに効く、もしくはIE 6のみに効かないハック) IE 6のみに効くハック スタ
08/10/15 「デザイン-ヘッダ」追加 08/09/29 「フッタの作成」追加 08/09/29 「メイン-右カラム」追加 08/09/29 「メイン-サイドバー」追加 08/09/29 「ヘッダの作成」追加 08/09/28 「要素の中央寄せ」追加 08/09/26 「スタイルの読み込み」追加 08/09/26 「float」追加 08/09/26 「ブロックとインライン」追加 08/09/23 「widthとheight」追加 08/09/23 「marginとpadding」追加 08/09/23 ブラウザ対応アイコン追加 08/09/23 「スタイルの読み込み」追加 08/09/19 「DOCTYPE」追加 08/09/19 「開始前に」追加 08/09/18 「始めに」修正 08/09/18 「始めに」追加 08/09/18 サイトオープン 全体図 今回よりCSSを使ったデザ
IE7で拡大・縮小時にレイアウトが重なってしまったり、IEでフロートした要素がはみ出てしまったりとIE独自のCSSのバグがいくつかあります。 これは、IEのhasLayoutが原因のひとつとなっているので、それを回避する方法を考察します。 hasLayoutとは IEでのCSSのバグを回避するhasLayoutの値 CSSのバグに効果のあるhasLayoutの指定方法 hasLayoutの参考ページ hasLayoutとは hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。 hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。 hasLayoutの値(read-only) false デフォルト値。 オブジェクトがレイアウトを持っていない。 true オブジェクトがレイアウトを持っている。 IEでのCSSのバ
IE6からIE7が今後本格的にマーケットシェアを取って行くことを考えると、IE7の仕様やバグを考えた上でのマークアップが欠かせないとは思います。でも、僕らはまだIE7がどんなものかが分からない。そのため、とりあえず* { zoom: 1;}を指定しておくことが安全策なのかもしれません。 IE7のZoom機能で、見事にこける。 先日、うちの本体のサイトを更新し終わった際に、スタッフから「あれ、しゃらくのサイトずれてるよ」と指摘されました。更新箇所が多く、CSSも多少いじくったので、どこか消してしまったのかもしれません。そこで、自分のブラウザで確認するも、どうも問題が再現できない。そのスタッフのブラウザを見ると、こんな感じになっていました。 僕のFirefoxで見てみても問題ないし、そのスタッフが使っているIE7でも問題なし。「うーん」と悩んでみるものの、意外と答えは簡単なところにありました。
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ~と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ! これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し!!(わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>文書のタイトル</title> <style type="text/css"> span.example1 { vertical-align: super; } span.example2 { vertical-align: sub; } </style> </head> <body> <p>100m<span class="example1">2</span></p> <p>H<span class="example2">2</span>O</p> </body> </html> 表示例 100m2 H2O
ロールオーバーと呼ばれるものです。 マウスオーバーとも呼ばれます。 スタイルシート[CSS]を使う方法(1) JavaScriptを使わない、IMGタグとスタイルシートだけのロールオーバー 簡単に説明すると、背景にロールオーバー後の画像を置いておき、マウスが重なったときにはIMGを消してしまうという手法です。 背景として画像が読み込まれているのでキャッシュもされます。 Windows IE5~ Mac IE5 Firefox Netscape7 Safari Opera7~ 対応 (~Opera6はロールオーバーしない) <p><a href="./"><img src="img2.gif" alt="テスト" width="100" height="40"></a></p> p { /*Aタグに高さや幅を指定することが出来ないので親領域で指定する*/ width:100px; heigh
header title content footer 画像置き換え手法(DKIR) 詳細の解説ページ 画像非表示のときの表示 タイトル部分の画像にDKIRを適用しています。
スタイルシート(CSS)で、文字を画像に置き換える手法です。 [参考記事] IMGタグとスタイルシートだけのロールオーバー 単純に<IMG>タグで画像を表示したらいいんじゃないの?って思うかもしれませんが、 それだとHTML文書を変えずに、CSSだけ変えただけでは、<IMG>タグの部分だけはデザインを変えることができなくなり、 CSSを使うメリットが減ってしまいます。 そこでHTML文書ではなくスタイルシートだけで画像を表示させる技術があれこれ考えられてきましたが、 現状では背景画像(background-image)を使用する方法しかないようです。 (本来、背景画像なのであまりよい手法とはいえませんが…) 現時点で考え得る最もよい手法です。 [参考記事] このページよりもっと良い手法がありました。 ページのタイトルバーなどには無駄なタグはなく使える手法です。 このページは海外からのアクセ
「画像置換」とは、ヘッダ部分にあるブログ名などのテキストを画像に置き換える手法で、文書構造やSEOを損ねないための複数のテクニックが紹介されています。 このエントリーでは、画像置換をしつつ、さらに画像にリンクも与えられるサンプルを作ってみました。*1 1.サンプル1 h1 の後方に img を置く場合は、CSSハックを使います(h1 のフォントサイズを固定することで画像配置位置がブラウザに依存しなくなると思ったのですが…)。表示は Windows XP + IE6/IE7/Firefox2/Opera9/Safari3 でしか確認しています。 画像置換サンプル1 (X)HTML <div id="header"> <h1>タイトル</h1> <div><p><a href="[URL]"><img src="[画像のURL]" alt="[代替テキスト]" title="[ツールチップ用テ
画像置換を使えばロールオーバーの実装を(javascriptを知らない)デザイナーでも簡単に実装することが可能になります。 ただし、複雑なメニューの場合、整理して書かないと後で大変なことになります。 今回は要点を説明しながらメニューを作って行きたいと思います。 ひとまず、完成系のサンプルに目を通しておいてください。 ベースとなる(X)HTMLソースは以下のようにします。 <ul> <li class="ajaBtn"><a href="/ajax/">Ajax</a></li> <li class="amaBtn"><a href="/amazon/">amazon</a></li> <li class="cssBtn"><a href="/css/">css</a></li> <li class="htmBtn"><a href="/html/">html</a></li> </ul>
higash.net 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
CSS のお勉強:所謂、画像置換てやつ 所謂テキストリンクの a 要素をプロック化し、text-indent : -9999px ; でテキストを遥か彼方にぶっ飛ばし、背景画像だけを表示したうえに、疑似クラスを使って、背景画像を入れ替えるという、よく知られたうざい技。一応書いとく。 使用している画像 a:link a:visited a:hover a:active text-indent : -9999px ; で背景画像のみを表示する ソース <ul class="alt"> <li><a href="textover2.html" title="クリックしる">クリックしる</a></li> <li><a href="urn:nai" title="未訪問">未訪問</a></li> </ul> スタイルシート ul.alt { margin : 0 ; padding : 0
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く