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>

ピックアップ記事

Timestamp out of bounds と表示される時

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

FacebookアプリをFacebookページ(ファンページ)に追加する

2012年01月27日 Facebookweb関連
[php]https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=YOUR_URL [/php] この「YOUR_APP_ID」はApp ID/API Keyに、「YOUR_URL」はアプリのURLに書き換えて、ブラウザからアクセスしてください。 アプリのApp ID/API K…
「FacebookアプリをFacebookページ(ファンページ)に追加する」をはてなブックマークに追加

お名前.com VPSのメールサーバ設定

2011年06月11日 web関連
メール関連のサービスを起動お名前VPSのメモです。 とりあえず、メールの送受信を正常に行うには、以下のサービスを全部起動しておく。amavisdclamd.amavisddovecotpostfixメールクライアントの設定受信メールサーバメールサーバ:pop.ドメイン名アカウント:メールアドレスパスワード:メールアドレスのパスワード送信メールサーバメールサーバ:smtp.ドメイン名アカウント:メー…
「お名前.com VPSのメールサーバ設定」をはてなブックマークに追加

重複しないWordPressのdescription設定

2014年08月14日 phpSEO対策web関連WordPress
重複しないWordPressのdescriptionのコードを書いてみました。 おおまかな確認はしていますが、細かいチェックは出来てません・・・m(_ _)m Gistはこちら [php]<?php //descriptionの設定 function set_description(){ global $post; $content = $post->…
「重複しないWordPressのdescription設定」をはてなブックマークに追加

WordPressのテーマをウィジェットに対応させる

2013年10月06日 phpweb関連WordPress
WordPressのテーマをウィジェットに対応させる
Wordpressで自作のテーマを作った場合などは、自分でウィジェットを利用可能にしない限り、ウィジェットは利用出来ません。このサイトのテーマは自作なのですが、今までウィジェットは使う機会がなかったので、未対応のままになっていました(:_;) 今回は、サイドにWordPress Popular Postsプラグインの人気記事一覧を表示させたかったので、調べてみましたよっ!ってことで、ウィジェ…
「WordPressのテーマをウィジェットに対応させる」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy