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


ピックアップ記事

Googleアドセンスがhtml要素を覆い隠してクリック出来ない

2015年03月04日 web関連
Google Adsenseを設置すると隣接する要素をオーバーラップしてしまい、クリック出来なくなる場合の対処法です。 アドセンスが隠してしまってクリック出来ない要素を#navだとすると以下のようにCSSを設定します。 [php]#nav { position:relative; z-index: 100; }[/php]
「Googleアドセンスがhtml要素を覆い隠してクリック出来ない」をはてなブックマークに追加

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

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…
「有名サイトのロゴ フォント」をはてなブックマークに追加

Dreamweaverで「既に別のドキュメントタイプに関連付けられているためです。」エラー頻発

2014年11月13日 web関連HTML5・CSS3
DreamweaverでSCSSファイルの編集をするためにDWの設定を触ったのですが、起動のたびに「ドキュメントタイプ”◯◯◯”は追加されません。使用するファイル拡張子が、既に別のドキュメントタイプに関連付けられているためです。」のエラーが連発するようになりました。 原因 調べてみると、Dreamweaverで編集可能にするために、「MMDocumentTypes.xml」というファイ…
「Dreamweaverで「既に別のドキュメントタイプに関連付けられているためです。」エラー頻発」をはてなブックマークに追加

iPhoneのホーム画面に表示されるサイトへのショートカットアイコンを設定

2013年10月31日 web関連iPhone
[php]<link rel="apple-touch-icon" href="画像パス" /> [/php] サイズに関して 引用 : http://arigato-ipod.com/lab-webclip-apple-touch-icon.html 引用 : http://ozpa-h4.com/2012/03/29/…
「iPhoneのホーム画面に表示されるサイトへのショートカットアイコンを設定」をはてなブックマークに追加

FireFoxのメニューバーを表示させる

2011年06月04日 web関連
Windowsで、FireFoxのメニューバーを非表示にしてしまうと、再表示させる方法が分かりづらいのでメモ。 解決方法 操作は簡単で、FireFoxを表示中に、「ALT」を押す! 以上です (´ー`) Macの場合は各アプリケーションのメニューは画面の一番上に表示されているので、メニューバーの表示、非表示はいつでも簡単に切り替えられます。…
「FireFoxのメニューバーを表示させる」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy