質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • HTML

    8991questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5802questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4026questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2074questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • レスポンシブWebデザイン

    210questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

ヘッダーメニューのレスポンシブ化

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 729

nosonosolife

score 19

現在作成しているWebページのヘッダーを、画面サイズに合わせて子要素(logo,menu1~menu4)の比率を変えずに、かつ、背景画像が見切れることなく縮小したいのですが、どうすればいいでしょうか。

要素headerには幅、高さの指定はなし
headerの子要素のheadermenuのmax-widthは1034px
headermenuの子要素のlogo(サイトロゴ)は幅209px、高さ124px
menu1~menu4(メニューボタン)は幅170px、高さ48px です

ご提示よろしくお願いいたします。

    <header id="header">
        <nav>
            <ul id="headermenu">
                <li class="logo"><a href="http://example.co.jp">サイトロゴ</a></li>
                <li class="buttons menu1"><a href="http://example.co.jp/hoge/">メニュー1</a></li>
                <li class="buttons menu2"><a href="http://example.co.jp/hoge/">メニュー2</a></li>
                <li class="buttons menu3"><a href="http://example.co.jp/hoge/">メニュー3</a></li>
                <li class="buttons menu4"><a href="http://example.co.jp/hoge/">メニュー4</a></li>
            </ul>
        </nav>
    </header>
#header{
    display:block;
    margin:0px auto;
    padding:10px 0px 0px 0px;
    text-align:center;
}

#header ul#headermenu{
    margin:0px auto;
    padding:0px auto;
    list-style: none outside;
    text-align: left;
    max-width:1034px;
    background-color:rgba(128,128,128,0.8);
    border-radius:1rem;
}
#header ul#headermenu li{
    display:inline-block;
    vertical-align: middle;
    text-align:left;
    padding:0px;
    position:relative;
    text-indent:-10000px;
}
#header ul#headermenu li a{
    display:block;
    width:100%;
    height:100%;
    overflow:hidden;
    font-size:0px;
    line-height:0px;
    overflow:hidden;
    background-repeat: no-repeat;
}
#header ul#headermenu li.logo{
    width:209px;
    height:124px;
    margin-right:20px;
}
#header ul#headermenu li.logo a{
    background-image:url("img/mainlogo.png");
    background-position: 0px 0px;
}
#header ul#headermenu li.buttons{
    background-image:url("img/headermenu.png");
    width:170px;
    height:48px; 
    margin:16px 10px 0px 0px;
    background-position: 0px 0px;
    margin-bottom:17px;
}
#header ul#headermenu li.buttons:last-child{
    margin-right:0px !important;
}
#header ul#headermenu li.buttons.menu1{
    background-position: 0px 0px;
}
#header ul#headermenu li.buttons.menu1:hover{
    background-position: 0px -48px;
}
#header ul#headermenu li.buttons.menu2{
    background-position: -170px 0px;
}
#header ul#headermenu li.buttons.menu2:hover{
    background-position: -170px -48px;
}
#header ul#headermenu li.buttons.menu3{
    background-position: -340px 0px;
}
#header ul#headermenu li.buttons.menu3:hover{
    background-position: -340px -48px;
}
#header ul#headermenu li.buttons.menu4{
    background-position: -510px 0px;
}
#header ul#headermenu li.buttons.menu4:hover{
    background-position: -510px -48px;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/03/14 11:08

    例示用ドメインはご自身で所有されていない限り example.com, example.jp, example.co.jp など例示用に予約されたドメイン名を利用してください。 http://www.atmarkit.co.jp/fwin2k/win2ktips/801exampledom/exampledom.html また、「比率を変えずに」はどことどこの比率をどのようにしたいのかを、質問文に具体的に追記してください。

    キャンセル

回答 3

+3

質問者さんが実現したい動作はこのような動作でしょうか?

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #header {
            display: block;
            margin: 0 auto;
            padding: 10px 0 0 0;
            text-align: center;
        }

        #header ul#headermenu {
            margin: 0 auto;
            padding: 0 auto;
            list-style: none outside;
            text-align: left;
            max-width: 1034px;
            background-color: rgba(128, 128, 128, 0.8);
            border-radius: 1rem;
        }

        #header ul#headermenu li {
            display: inline-block;
            vertical-align: middle;
            text-align: left;
            padding: 0;
            position: relative;
            text-indent: -10000px;
        }

        #header ul#headermenu li a {
            display: block;
            width: 100%;
            height: 100%;
            overflow: hidden;
            font-size: 0;
            line-height: 0;
            background-repeat: no-repeat;
        }

        #header ul#headermenu li.logo {
            width: 20%;
            height: 124px;
            margin-right: 20px;
        }

        #header ul#headermenu li.logo a {
            background-image: url("https://placehold.jp/3d4070/ffffff/150x150.png?text=image");
            background-position: 0 0;
        }

        #header ul#headermenu li.buttons {
            background-image: url("https://placehold.jp/3d4070/ffffff/150x150.png?text=image");
            width: 16%;
            height: 48px;
            margin: 17px 0 0 0;
            background-position: 0 0;
            margin-bottom: 17px;
        }

        #header ul#headermenu li.buttons:last-child {
            margin-right: 0 !important;
        }

        #header ul#headermenu li.buttons.menu1 {
            background-position: 0 0;
        }

        #header ul#headermenu li.buttons.menu1:hover {
            background-position: 0 -48px;
        }

        #header ul#headermenu li.buttons.menu2 {
            background-position: -170px 0;
        }

        #header ul#headermenu li.buttons.menu2:hover {
            background-position: -170px -48px;
        }

        #header ul#headermenu li.buttons.menu3 {
            background-position: -340px 0;
        }

        #header ul#headermenu li.buttons.menu3:hover {
            background-position: -340px -48px;
        }

        #header ul#headermenu li.buttons.menu4 {
            background-position: -510px 0;
        }

        #header ul#headermenu li.buttons.menu4:hover {
            background-position: -510px -48px;
        }
    </style>
</head>
<body>
<header id="header">
    <nav>
        <ul id="headermenu">
            <li class="logo"><a href="http://hoge.jp">サイトロゴ</a></li>
            <li class="buttons menu1"><a href="http://hoge.jp/hoge/">メニュー1</a></li>
            <li class="buttons menu2"><a href="http://hoge.jp/hoge/">メニュー2</a></li>
            <li class="buttons menu3"><a href="http://hoge.jp/hoge/">メニュー3</a></li>
            <li class="buttons menu4"><a href="http://hoge.jp/hoge/">メニュー4</a></li>
        </ul>
    </nav>
</header>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/15 05:48

    回答ありがとうございます。
    このコードでやってみましたところ、画面を縮小した際に要素の背景画像が見切れます...

    キャンセル

+1

幅を狭くしつつ縦横比を保つのは、案外難しいです。

ひとまず px で指定せず、% で width や background-size や background-position を指定することをしてみてはいかがでしょうか。( height は % では上手く指定できないと思いますが)

【background-sizeプロパティについてまとめ | Tips Note by TAM】
http://www.tam-tam.co.jp/tipsnote/html_css/post6015.html

【背景画像の位置の設定(background-position) - 背景プロパティ - スタイルシート入門】
http://www.webword.jp/cssguide/ref-back/index5.html

比率という意味では vw が便利です。

【CSS には vw, vh, vmin, vmax という単位がある | Developers.IO】
http://dev.classmethod.jp/ria/html5/css-length-viewport/

【[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法 | コリス】
http://coliss.com/articles/build-websites/operation/css/viewport-vs-percentage-units-by-ire.html

【[CSS3] px や % はもう古い? Viewport unitsという新たな単位『vw』,『vh』の使い方 | phiary】
http://phiary.me/css-viewport-units-vw-vh/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/15 05:51

    回答ありがとうございます。
    %やvwでの指定はやってみたのですが、特にbackground-positionがなかなか難しいです...
    簡単に計算する方法はないでしょうか?

    キャンセル

  • 2017/03/15 11:11

    「横並び」で「縦横比が変わらない」なら個別にbackground-positionを指定せずに #headermenu に1枚指定して background-size を横だけ100%指定するとかですかね。

    キャンセル

  • 2017/03/15 22:48

    ごめんなさい、その方法はちょっと...

    キャンセル

  • 2017/03/15 22:53

    > その方法はちょっと...
    ちょっと何なのでしょうか。

    キャンセル

  • 2017/03/15 23:08

    menu1~menu4の背景画像は、一枚の画像からbackground-positionで割り当てているんですが、そのままでの縮小はできないですか?

    キャンセル

  • 2017/03/15 23:14

    「簡単に計算する方法」を聞かれたのでは?

    > そのままでの縮小はできないですか?
    出来なくはないですが、上手くコントロールするのは慣れが必要でしょう。

    キャンセル

  • 2017/03/15 23:21

    あの、background-positionの%指定の簡単な計算方法を教えてほしい、ということなんですが...

    キャンセル

  • 2017/03/15 23:29

    どういう方法でやって難しいとおっしゃっておられるかわかりませんが、比率がわかっているならそれで出せますよ。

    キャンセル

  • 2017/03/16 01:17

    ごめんなさい、具体的に教えてほしいです...
    あと、logoとmenu1~menu4の高さを%で指定したところ、ブラウザ上では高さが0になってしまうのですが、解決方法をご提示していただけないでしょうか。

    キャンセル

  • 2017/03/16 01:28

    「具体的に」と言われても、ご自身でされた方法がわかりませんので・・・。
    わからないのであれば背景で処理せずにimg要素でやればいいのでは?
    いまいち私ではどういう質問をされているかを読み解く力が不足しているようなので、すみませんがお役に立てそうもありません。期待させてしまっていたら申し訳ありません。

    キャンセル

  • 2017/03/16 02:20

    「比率がわかっているならそれで出せますよ。」って言ったんですから、具体的な計算方法を説明してくださいよ。

    キャンセル

  • 2017/03/16 02:23

    「「具体的に」と言われても、ご自身でされた方法がわかりませんので・・・。」
    まだやってませんよ。

    キャンセル

  • 2017/03/16 02:29

    「あと、logoとmenu1~menu4の高さを%で指定したところ、ブラウザ上では高さが0になってしまうのですが、解決方法をご提示していただけないでしょうか。」は、
    logoとmenu1~menu4の要素のcssを、

    #header ul#headermenu li.logo{
    width:20.212%;
    height:100%
    }
    #header ul#headermenu li.buttons{
    width:16.441%;
    height:38.709%;
    }
    こうしたところ、ブラウザ上では高さが0になってしまったので、解決方法を提示してほしい、ということを言っていたんです。

    キャンセル

check解決した方法

-2

色々調べてやったところ上手くできました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    8991questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5802questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4026questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2074questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • レスポンシブWebデザイン

    210questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。