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>

ピックアップ記事

WordPressのオリジナルテーマのサムネイル作成

2013年11月06日 web関連WordPress
WordPressでオリジナルのテーマを作る時は、テーマ名などはstyle.css内にコメントで設定。 管理画面の外観>テーマのページに表示される、個々のテーマのサムネイル画像は、ファイル名「screenshot」、形式はPNG/JPEG/GIFのどれかにして、サイズは 300×225pxで作成。 http://wordpress.nyamuh.com/cont/base/base.htm…
「WordPressのオリジナルテーマのサムネイル作成」をはてなブックマークに追加

flac を mp3 に変換するソフト

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

twitter API からプロフィール画像を取得・表示

2011年07月28日 twitter APIweb関連
twitter API からプロフィール画像を取得・表示する方法です。 リクエストURL [php]http://api.twitter.com/1/users/profile_image?screen_name=apr_20&size=bigger[/php] 画像として表示 [php]<img src="http://api.twitter.com/1/users/…
「twitter API からプロフィール画像を取得・表示」をはてなブックマークに追加

レスポンシブ対応 画像メニューをテキスト表示に切り替える

2014年11月15日 HTML5・CSS3web関連
レスポンシブなサイトを作るときに、大きな画面では画像メニュー、スマホなどのサイズでは、テキストメニューにして、メニューボタンに格納したい場合など、画像メニューからテキストメニューにCSSで表示切り替えする方法。 cssの:before attr属性で解決 html [php]<ul id="nav"> <li><a data-tex…
「レスポンシブ対応 画像メニューをテキスト表示に切り替える」をはてなブックマークに追加

Timestamp out of bounds と表示される時

2011年07月26日 phpweb関連
プログラムを実行しようとすると「Timestamp out of bounds」というエラーが表示されました。 何かと思って調べてみると、どうやらサーバの時間がずれている模様。 なので、以下のようにして解決。 …
「Timestamp out of bounds と表示される時」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy