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

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

sm-blue.css中のwidthを変更して対応したところ、一見うまくいったように見えるのですが、ブラウザの大きさを変更すると５つある状態に戻ってしまいます。
どこを変更すればきれいに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;
}

nasuk47

2020/08/17 09:56

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

行動規範の内容に同意します

回答1件

ベストアンサー

こんばんは。

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

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}