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

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

ただいまの
回答率

87.78%

【html】横並べリストの幅の調整

解決済

回答 1

投稿 編集

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

score 8

テンプレートを利用して、大・中・小項目のあるリストを横並べしようとしたところ、
元々の5つの項目から一つ減らし、4つの大項目による横並べを行いたいのですが
htmlファイルの項目を減らし

sm-blue.css中のwidthを変更して対応したところ、一見うまくいったように見えるのですが、ブラウザの大きさを変更すると5つある状態に戻ってしまいます。
どこを変更すればきれいにcategory3までを表示できるようになるのでしょうか
ご教示いただけますと幸いです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>test</title>
<meta name="Description" content="ここにキーワードを含むページの説明文を記入" />
<meta name="Keywords" content="キーワード,キーワード,キーワード" />
<meta name="viewport" content="width=device-width; initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="css/sm-core-css.css"> <!--中央上のメインメニュー-->
<link rel="stylesheet" href="css/sm-blue.css"> <!--中央上のメインメニュー-->
</head>

<body>
<div id="wrapper">
  <div id="contents">
    <div id="column1">
      <div id="column1_inner">
        <ul id="main-menu" class="sm sm-blue">
          <li class="menutop"><a href="index.html">home</a>
          <li class="menutop"><a href="#">category1</a>
            <ul>
              <li class="menusub"><a href="#">subcategory1</a>
                <ul>
                  <li><a href="#">content</a>
                </ul>
              <li class="menusub"><a href="#">subcategory2</a>
              <li class="menusub"><a href="#">subcategory3</a>
            </ul>
          <li class="menutop"><a href="#">category2</a>
          <li class="menutop"><a href="#">category3</a>
            <ul>

            </ul>
          </li>
          <li class="menutop"><a href="#">category4</a>
          </li>
        </ul>
  <!-- / #wrapper -->
</div>

<!-- javascript設定 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>  <!--googleのCDN(ネットワーク経由でコンテンツを提供するサービス)よりjqueryをロード-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <!--エフェクト効果-->
<script src="js/jquery.smartmenus.js"></script> <!--メインメニュー-->
<script>
    $(function() {
        $('#main-menu').smartmenus();
    });
</script>
<script src="js/app.js"></script> <!--youtube api、flickr api 設定-->
<script src="js/jquery.vgrid.min.js"></script> <!--ボックスを敷き詰める-->
<script src="js/jquery.slimscroll.js"></script> <!--新着情報のスクロール-->
<script>
    $('#scroll').slimScroll({
});
</script>
<script src="js/lightbox-2.6.min.js"></script> <!--画像拡大-->
<script src="js/scrolltopcontrol.js"></script>  <!--スクロールしながらページのトップに戻る-->
</body>
</html>
/sm-blue.css

.sm-blue {
    background: #ffd900; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffd900 0%, #ffdb14 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd900), color-stop(100%,#ffdb14)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffd900 0%,#ffdb14 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffd900 0%,#ffdb14 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffd900 0%,#ffdb14 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffd900 0%,#ffdb14 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd900', endColorstr='#ffdb14',GradientType=0 ); /* IE6-9 */
    -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3);
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3);
    box-shadow:0 1px 1px rgba(0,0,0,0.3);
}

.sm-blue ul {
    border:1px solid #a9a9a9;
    padding:7px 0;
    background:#fff;
    -moz-border-radius:0 0 4px 4px;
    -webkit-border-radius:0 0 4px 4px;
    border-radius:0 0 4px 4px;
    -moz-box-shadow:0 5px 12px rgba(0,0,0,0.3);
    -webkit-box-shadow:0 5px 12px rgba(0,0,0,0.3);
    box-shadow:0 5px 12px rgba(0,0,0,0.3);
}


/* Menu items
===================*/

.sm-blue a {
    padding:10px 0 14px;
    color:#333;
    line-height:23px;
    font-family:"PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif;
    font-weight:bold;
    text-decoration:none;
    text-shadow:0 1px 0 rgba(0,0,0,0.3);
    text-transform: capitalize;
}

.sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active, .sm-blue a.highlighted {
    background: #f8b500; /* Old browsers */
    background: -moz-linear-gradient(top,  #f8b500 0%, #f7b613 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8b500), color-stop(100%,#f7b613)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f8b500 0%,#f7b613 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f8b500 0%,#f7b613 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f8b500 0%,#f7b613 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f8b500 0%,#f7b613 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8b500', endColorstr='#f7b613',GradientType=0 ); /* IE6-9 */
    color:#333;
}

.sm-blue ul a {
    padding:9px 40px 8px 23px;
    background:transparent;
    color:#637d4d;
    font-size:16px;
    text-shadow:none;
}

.sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active, .sm-blue ul a.highlighted {
    background: #f8b500; /* Old browsers */
    background: -moz-linear-gradient(top,  #f8b500 0%, #f7b613 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8b500), color-stop(100%,#f7b613)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f8b500 0%,#f7b613 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f8b500 0%,#f7b613 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f8b500 0%,#f7b613 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f8b500 0%,#f7b613 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8b500', endColorstr='#f7b613',GradientType=0 ); /* IE6-9 */
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,0.3);
}


/* Sub menu indicators
===================*/

.sm-blue a span.sub-arrow {
    position:absolute;
    bottom:2px;
    left:50%;
    margin-left:-5px;
    /* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
    width:0;
    height:0;
    overflow:hidden;
    border-width:5px; /* tweak size of the arrow */
    border-style:solid dashed dashed dashed;
    border-color:#333 transparent transparent transparent;
}

.sm-blue-vertical a span.sub-arrow, .sm-blue ul a span.sub-arrow {
    bottom:auto;
    top:50%;
    margin-top:-5px;
    right:15px;
    left:auto;
    margin-left:0;
    border-style:dashed dashed dashed solid;
    border-color:transparent transparent transparent #aaa;
}

/* Items separators
===================*/

.sm-blue li {
    border-left:1px solid #f8b500;
}

.sm-blue li:first-child, .sm-blue-vertical li, .sm-blue ul li {
    border-left:0;
}

/* Scrolling arrows containers for tall sub menus - test sub menu: "Sub test" -> "more..." -> "more..." in the default download package
===================*/

.sm-blue span.scroll-up, .sm-blue span.scroll-down {
    position:absolute;
    display:none;
    visibility:hidden;
    overflow:hidden;
    background:#ffffff;
    height:20px;/* width and position will be automatically set by the script */
}

.sm-blue span.scroll-up-arrow, .sm-blue span.scroll-down-arrow {
    position:absolute;
    top:-2px;
    left:50%;
    margin-left:-8px;
    /* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
        width:0;
    height:0;
    overflow:hidden;
    border-width:8px; /* tweak size of the arrow */
    border-style:dashed dashed solid dashed;
    border-color:transparent transparent #637d4d transparent;
}

.sm-blue span.scroll-down-arrow {
    top:6px;
    border-style:solid dashed dashed dashed;
    border-color:#637d4d transparent transparent transparent;
}


/*
---------------------------------------------------------------
  Responsiveness
  These will make the sub menus collapsible when the screen width is too small.
---------------------------------------------------------------*/


/* decrease horizontal main menu items left/right padding to avoid wrapping */
 @media screen and (min-width: 1130px) {
.menutop {
    width: 19.85%;
    text-align: center;
    font-size: 18px;
}
}
 @media screen and (min-width: 769px) and (max-width: 1129px) {
.menutop {
    width: 19.7%;
    text-align: center;
    font-size: 15px;
}
}
 @media screen and (min-width: 481px) and (max-width: 768px) {
.menutop {
    width: 19.5%;
    text-align: center;
    font-size: 13px;
}
}
@media screen and (max-width: 480px) {

/* The following will make the sub menus collapsible for small screen devices (it's not recommended editing these) */
ul.sm-blue {
    width:auto !important;
    margin: 10px !important;
    margin-top: 250px !important;
}

ul.sm-blue ul {
    display:none;
    position:static !important;
    top:auto !important;
    left:auto !important;
    margin-left:0 !important;
    margin-top:0 !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
}

ul.sm-blue>li {
    float:none;
}

ul.sm-blue>li>a, ul.sm-blue ul.sm-nowrap>li>a {
    white-space:normal;
}

ul.sm-blue iframe {
    display:none;
}

/
sm-core-css.css

.sm, .sm ul, .sm li {
    display:block;
    list-style:none;
    padding:0;
    margin:0;
    line-height:normal;
    direction:ltr;
}

ul.sm li {
    position:relative;
}

ul.sm a {
    position:relative;
    display:block;
}

ul.sm a.disabled {
    cursor:default;
}

ul.sm ul {
    position:absolute;
    top:-999999px;
    left:-800px;
    width:auto;
}

ul.sm li {
    float:left;
}

ul.sm:after {
    content:"\00a0";
    display:block;
    height:0;
    font:0/0 serif;
    clear:both;
    visibility:hidden;
    overflow:hidden;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • nasuk47

    2020/08/17 18:56

    コードが見にくいのでマークダウン形式で記述してインデントを整えてください
    ```
    <div>
    <div></div>
    </div
    ```
    のようにコードを```で囲ってください。

    キャンセル

回答 1

checkベストアンサー

0

こんばんは。

「sm-blue.css中のwidthを変更して対応したところ、一見うまくいったように見えるのですが、ブラウザの大きさを変更すると5つある状態に戻ってしまいます」とのことですが、全てのメディアクエリを変更していないのではありませんか?

/* decrease horizontal main menu items left/right padding to avoid wrapping */
 @media screen and (min-width: 1130px) {
.menutop {
    /* width: 19.85%; */
    width: 24.85%;
    text-align: center;
    font-size: 18px;
}
}
 @media screen and (min-width: 769px) and (max-width: 1129px) {
.menutop {
    /* width: 19.7%; */
    width: 24.7%;
    text-align: center;
    font-size: 15px;
}
}
 @media screen and (min-width: 481px) and (max-width: 768px) {
.menutop {
    /* width: 19.5%; */
    width: 24.5%;
    text-align: center;
    font-size: 13px;
}
}

(この値で正しいかどうかについては確認していませんので、ご自身でご検証ください)

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/08/19 08:32 編集

    Lhankor_Mhy様 その通りでした、一つ変えたものを試した際に合わせて三つ変えたものを試したのですがその時のものが反映されず見逃していたようです。ご回答ありがとうございました。

    キャンセル

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

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

関連した質問

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