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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

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

CSS

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

Q&A

解決済

1回答

1267閲覧

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

mimizuk

総合スコア8

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/08/17 07:46

編集2020/08/18 04:57

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

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

index.html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8" /> 5<title>test</title> 6<meta name="Description" content="ここにキーワードを含むページの説明文を記入" /> 7<meta name="Keywords" content="キーワード,キーワード,キーワード" /> 8<meta name="viewport" content="width=device-width; initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> 9<link rel="stylesheet" href="css/sm-core-css.css"> <!--中央上のメインメニュー--> 10<link rel="stylesheet" href="css/sm-blue.css"> <!--中央上のメインメニュー--> 11</head> 12 13<body> 14<div id="wrapper"> 15 <div id="contents"> 16 <div id="column1"> 17 <div id="column1_inner"> 18 <ul id="main-menu" class="sm sm-blue"> 19 <li class="menutop"><a href="index.html">home</a> 20 <li class="menutop"><a href="#">category1</a> 21 <ul> 22 <li class="menusub"><a href="#">subcategory1</a> 23 <ul> 24 <li><a href="#">content</a> 25 </ul> 26 <li class="menusub"><a href="#">subcategory2</a> 27 <li class="menusub"><a href="#">subcategory3</a> 28 </ul> 29 <li class="menutop"><a href="#">category2</a> 30 <li class="menutop"><a href="#">category3</a> 31 <ul> 32 33 </ul> 34 </li> 35 <li class="menutop"><a href="#">category4</a> 36 </li> 37 </ul> 38 <!-- / #wrapper --> 39</div> 40 41<!-- javascript設定 --> 42<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!--googleのCDN(ネットワーク経由でコンテンツを提供するサービス)よりjqueryをロード--> 43<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <!--エフェクト効果--> 44<script src="js/jquery.smartmenus.js"></script> <!--メインメニュー--> 45<script> 46 $(function() { 47 $('#main-menu').smartmenus(); 48 }); 49</script> 50<script src="js/app.js"></script> <!--youtube api、flickr api 設定--> 51<script src="js/jquery.vgrid.min.js"></script> <!--ボックスを敷き詰める--> 52<script src="js/jquery.slimscroll.js"></script> <!--新着情報のスクロール--> 53<script> 54 $('#scroll').slimScroll({ 55}); 56</script> 57<script src="js/lightbox-2.6.min.js"></script> <!--画像拡大--> 58<script src="js/scrolltopcontrol.js"></script> <!--スクロールしながらページのトップに戻る--> 59</body> 60</html> 61
/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; }

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nasuk47

2020/08/17 09:56

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

回答1

0

ベストアンサー

こんばんは。

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

css

1/* decrease horizontal main menu items left/right padding to avoid wrapping */ 2 @media screen and (min-width: 1130px) { 3.menutop { 4 /* width: 19.85%; */ 5 width: 24.85%; 6 text-align: center; 7 font-size: 18px; 8} 9} 10 @media screen and (min-width: 769px) and (max-width: 1129px) { 11.menutop { 12 /* width: 19.7%; */ 13 width: 24.7%; 14 text-align: center; 15 font-size: 15px; 16} 17} 18 @media screen and (min-width: 481px) and (max-width: 768px) { 19.menutop { 20 /* width: 19.5%; */ 21 width: 24.5%; 22 text-align: center; 23 font-size: 13px; 24} 25}

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

投稿2020/08/18 09:30

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mimizuk

2020/08/18 23:33 編集

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問