2014年11月15日 web関連HTML5・CSS3

レスポンシブ対応のサイトを作るときに画像メニューを設置して、ブラウザが縮小されても画像が改行されることなく、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>

CAPTCHA


ピックアップ記事

重複しないWordPressのdescription設定

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

IE6で透過pngを表示させる。DD_belatedPNG

2012年02月14日 web関連jQuery・javascript
DD_belatedPNG 先日、でも触れましたが、DD_belatedPNGというjavascriptを使って、IE6で透過pngを表示させてみました。 DD_belatedPNGの入手 以下のサイトにいって、DD_belatedPNGをダウンロードします。以下のサイト内を下へスクロールしていくと、左のサイドバーにDD_belatedPNG 0.0.8a releasedというリンクがあり…
「IE6で透過pngを表示させる。DD_belatedPNG」をはてなブックマークに追加

WordPressの抜粋表示の設定

2014年08月25日 web関連WordPressphp
WordPressの抜粋表示(excerpt)を以下のように動作させたかったので、自作してみました。 抜粋があれば抜粋表示 moreタグがあれば、それに従う 指定文字数より本文文字数が少なければ、そのまま表示 指定文字数より本文文字数が多ければ抜粋表示 コード functions.phpにコピペ。 [php]<?php //WordPress抜粋表…
「WordPressの抜粋表示の設定」をはてなブックマークに追加

Dreamweaver で開いたファイルが文字化けする場合の対処法

2012年02月06日 web関連zencart
症状 今回は、ZenCartのデータベースを編集したくて、sqlファイル(EUC-JP)をDreamweaverで開いたら、文字化けしました。 Dreamweaverの「新規ドキュメント」の設定が関係しているようなので、新規ドキュメントを開く際のエンコードの設定を変更します。 解決策 環境設定 > カテゴリ内の「新規ドキュメント」> 「エンコーディングが指定されていない既存ファイ…
「Dreamweaver で開いたファイルが文字化けする場合の対処法」をはてなブックマークに追加

Twitter for Mac’s developer consoleの設定

2014年07月18日 web関連twitter API
Twitter for Mac’s developer consoleの設定
ちょうど設定してみたので、メモ。 まだ触ってないので詳しく分かりませんが、Twitter for Mac's developer consoleというのは、Twitter APIのテストが可能なのようです。 WEB版のコンソールもありますが、Twitter for Mac's developer consoleの方がサクサク動くらしいです。 DEVサイトにログイン、APP登録 まず…
「Twitter for Mac’s developer consoleの設定」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy