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年10月09日 phpweb関連WordPress
記事内の画像をいい感じのエフェクトをつけて拡大表示させるWordPressのプラグイン「Easy FancyBox」というのを導入したのですが、挿入されたaタグやimgタグに固有のクラス名がないので、CSSで調整しづらかったので、リンク付きの画像を挿入したい際に自動でclass名を追加するようにしました。 imgタグにclassを追加する場合とaタグに追加する場合を分けて書きます。 挿…
「WordPressで記事に画像投稿する際に、自動でクラス名をつける」をはてなブックマークに追加

[xserver]サブドメイン設定時の注意点

2014年08月23日 web関連
xserverのマニュアルにもありますが、サブドメインを設定すると、異なるURLで同じサイト(ページ)へアクセス可能になってしまうので、Googleに重複サイトと思われないように以下のように設定した.htaccessを設置します。 …
「[xserver]サブドメイン設定時の注意点」をはてなブックマークに追加

DREAMWEAVER CS6でSCSSを使うための準備

2015年03月03日 web関連
dreamweaver CS6では、scss,sassなどが使えません。使えないというか、コードヒントやコードカラーリングが適用されず、テキスト扱いと同様になってしまいます。 検索すれば、多くのサイトで説明されていますが、以下の作業をすればコードヒントが使えるようになります。 scssを追加する手順 1.DWの環境設定>ファイルタイプ/エディター内の「コードビューで開く」の箇所に「.scss」を追加します。(sassも使いたい場合は.sassも追加) 2. アプリケーション ▸ Adobe Dreamweaver CS6 ▸ Configuration 内の「Extensions.txt」とアプリケーション ▸ Adobe Dreamweaver CS6 ▸ Configuration ▸ DocumentTypes内の「MMDocumentTypes.xml」を編集 …
「DREAMWEAVER CS6でSCSSを使うための準備」をはてなブックマークに追加

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

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

twitter公式ウィジェットの背景色をクリアにする

2011年05月26日 web関連
ブログやサイトなんかにtwitterウィジェットを使う事が多くなりましたが、ウィジェットの背景を透明にしないとサイトにマッチしないなぁという場合もあるかと思いますので、その方法を書いておきます。簡単ですが。。。(笑) theme: {    shell: {      background: 'none',  …
「twitter公式ウィジェットの背景色をクリアにする」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy