2014年11月15日 HTML5・CSS3web関連

レスポンシブ対応のサイトを作るときに画像メニューを設置して、ブラウザが縮小されても画像が改行されることなく、1列で固定で、画像の比率を保ったまま縮小表示させる方法です。

cssのdisplay:table-cellで解決

html

<ul id="nav">
<li><a href="#"><img src="
nav_home.png" alt="ホーム"></a></li>

<li><a href="#"><img src="nav_shop.png" alt="店舗案内"></a></li>

<li><a href="#"><img src="nav_contact.png" alt="お問い合わせ"></a></li>

</ul>

css

#nav ul {
  display: table;
}
#nav li {
  display: table-cell;
  padding-top: 1px; 
}

親要素にdisplay:tableを設定し、揃えたい子要素にdisplay: table-cell;を設定。
これでもブラウザサイズに合わせて、画像は縮小されるのですが、ブラウザのサイズによっては、以下の画像のように1pxほどずれてしまいます。
スクリーンショット 2014-11-15 16.11.05 vertical-alignを設定しても解決出来なかったので、padding-top: 1px;を設定して対応しました。
このpaddingの設定については、無理やり感があるので、もう少しスマートな方法をご存じの方がいらっしゃいましたら、コメントいただけますと嬉しいです。

この投稿へのコメント

コメントはまだありません。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

ピックアップ記事

有名サイトのロゴ フォント

2011年07月27日 web関連
Twitter …… Pico Alphabet (Modified)Digg …… FFF Forward (Modified)Last.fm …… National (Modified)Flickr …… Frutiger BlackYouTube …… Alternate Gothic No. 2Facebook …… Klavika (Modified)Engadget …… Engadg…
「有名サイトのロゴ フォント」をはてなブックマークに追加

WordPress ウィジェットに個別のid,classを設定する

2014年08月11日 web関連WordPress
WordPressのウィジェットに個別のid,classを設定して、違うデザインを適用したい場合は、functions.php内でサイドウィジェットを有効にする設定項目の「before_widget」の箇所を以下のように変更します。 [php]register_sidebar(array( 'name' => 'side-widget', 'before_wid…
「WordPress ウィジェットに個別のid,classを設定する」をはてなブックマークに追加

flac を mp3 に変換するソフト

2011年06月03日 web関連
無料の変換ソフトがあったので、それで変換しました。操作は簡単。 ソフトはこのへん。 参考サイト http://blog.livedoor.jp/geezdrty/archives/591568.html
「flac を mp3 に変換するソフト」をはてなブックマークに追加

Dust-Me Selectorsで不要なCSS要素を削除

2013年10月30日 web関連
Dust-Me Selectorsで不要なCSS要素を削除
FireFoxのアドオン「Dust-Me Selectors」を使えば、一度も使われていないCSSの要素を簡単に削除することが出来ます。 以下のURLにFireFoxからアクセスするとインストール可能です。 Dust-Me Selectors…
「Dust-Me Selectorsで不要なCSS要素を削除」をはてなブックマークに追加

IE6で透過pngを表示させる方法のメモ

2012年02月09日 web関連
最近は透過pngを上手に使ったサイトも増えてきたので、IE6を気にせずに、透過pngを普通に使って、サイトを作りたいと思ってたのですが、IE6の使用率がゼロでない以上は、やっぱり気になってしまうので、お手軽な方法を調べていたら、詳しくまとめられているサイトを見つけたので、メモしておきます。 個人的に特に気になったのは、「ie7.js」と「DD_belatedPNG.js」です。他の方法は既知のも…
「IE6で透過pngを表示させる方法のメモ」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy