graffiti on the web レスポンシブなサイトを作るときに、大きな画面では画像メニュー、スマホなどのサイズでは、テキストメニューにして、メニューボタンに格納したい場合など、画像メニューからテキストメニューにCSSで表示切り替えする方法。
cssの:before attr属性で解決
html
[php]<ul id="nav">
<li><a data-tex…
DD_belatedPNG
先日、でも触れましたが、DD_belatedPNGというjavascriptを使って、IE6で透過pngを表示させてみました。DD_belatedPNGの入手
以下のサイトにいって、DD_belatedPNGをダウンロードします。以下のサイト内を下へスクロールしていくと、左のサイドバーにDD_belatedPNG 0.0.8a releasedというリンクがありますので、そこをクリックします。
DD_belatedPNGの設置方法
ダウンロードしたファイルをサーバにアップして、以下のコードをhtmlファイルに設置します。
<!-- IE6を透過png対応させる -->
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
DD_belatedPNG.fix('img, .wrap980 h1 a');
</script>
<![endif]-->
「if IE…」というのは、IE6の場合に以下のスクリプトを読み込む設定です。
上記のコードでは、imgタグ全てと、wrap980クラス内のh1のaタグが指定されています。
後者はサイトロゴの背景にpng画像を設置していたので、こういう書き方にしています。
普通に配置されているimg画像やCSSで背景に画像が設置されている場合は、上記のやり方で問題ありませんが、body・tr・td要素の背景には使えないなど、いくつか注意する点もあるようなので、もう少し情報が必要な方は以下のページが詳しく説明してくれていますので、参考にしてみてください。
この投稿へのコメント
コメントはまだありません。