質問編集履歴
2
li要素に一律で「display: table-cell;」を設定していることが原因だったので追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
現在、私が作成中のHPでは、body要素の幅を100%にした上で、子要素のnav要素（のid="global_navi" で設定した部分）に、以下の通りcssを適用させています。
|
|
1
|
+
現在、私が作成中のHPでは、body要素の幅を100%にし、li要素に一律で「display: table-cell;」を設定した上で、子要素のnav要素（のid="global_navi" で設定した部分）に、以下の通りcssを適用させています。
|
|
2
2
|
|
|
3
3
|
```CSS
|
|
4
4
|
#global_navi{
|
1
HTMLのコードも提示が必要と指摘を受けたため、追加しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
現在、私が作成中のHPでは、body要素の幅を100%にした上で、子要素のnav要素（のid="global_navi" で設定した部分）に、以下の通りcssを適用させています。
|
|
2
2
|
|
|
3
|
-
```
|
|
3
|
+
```CSS
|
|
4
4
|
#global_navi{
|
|
5
5
|
clear: both;
|
|
6
6
|
overflow: hidden;
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
|
|
29
29
|
これに対し、メディアクエリを以下の通り設定し、レスポンシブWebデザインに適用させている最中です。
|
|
30
30
|
|
|
31
|
-
```
|
|
31
|
+
```CSS
|
|
32
32
|
#global_navi ul{
|
|
33
33
|
width: 100%;
|
|
34
34
|
display: table;
|
|
@@ -50,6 +50,41 @@
|
|
|
50
50
|
}
|
|
51
51
|
```
|
|
52
52
|
|
|
53
|
+
なお、適用させているHTMLファイルは、以下のようなものです。
|
|
54
|
+
※関係する(と思われる)箇所の抜粋であり、また個人情報の都合上、title・alt・a要素の部分を一時的に修正しております。
|
|
55
|
+
|
|
56
|
+
```HTML
|
|
57
|
+
<!DOCTYPE html>
|
|
58
|
+
<html lang="ja">
|
|
59
|
+
<head>
|
|
60
|
+
<meta charset="UTF-8">
|
|
61
|
+
<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=4">
|
|
62
|
+
<title>英語学習講座</title>
|
|
63
|
+
<link rel="stylesheet" href="css/style.css">
|
|
64
|
+
</head>
|
|
65
|
+
<body>
|
|
66
|
+
|
|
67
|
+
<header>
|
|
68
|
+
<h1><a href="index.html"><img src="images/LOGO.png" alt="英語学習講座"></a></h1>
|
|
69
|
+
<div id="header_contact"><a href="contact.html"><img src="images/お問い合わせ.png" alt="お問い合わせ"></a></div>
|
|
70
|
+
<nav id="global_navi">
|
|
71
|
+
<ul>
|
|
72
|
+
<li class="current"><a href="index.html">HOME</a></li>
|
|
73
|
+
<li><a href="juniorhighschool.html">中学英語</a></li>
|
|
74
|
+
<li><a href="highschool.html">高校英語</a></li>
|
|
75
|
+
<li><a href="college.html">大学英語</a></li>
|
|
76
|
+
<li><a href="businessbasic.html">ビジネス英語基礎</a></li>
|
|
77
|
+
<li><a href="businesshigh.html">ビジネス英語上級</a></li>
|
|
78
|
+
<li><a href="column.html">コラム</a></li>
|
|
79
|
+
</ul>
|
|
80
|
+
</nav>
|
|
81
|
+
|
|
82
|
+
(中略)
|
|
83
|
+
|
|
84
|
+
</body>
|
|
85
|
+
</html>
|
|
86
|
+
```
|
|
87
|
+
|
|
53
88
|
現在使っている教材だと、li要素のwidthを50%に設定することでli要素が2列に並んで表示されており、これを実現させたいのですが、以下画像の通り、全体幅に合わせてli要素が2列になりません。
|
|
54
89
|
個々のli要素の幅を保ったまま、並びを「一行に全列集約」⇒「画面幅に応じて縦並び（今回だと2列）」になるようにしたいのですが、ul要素に「display: table;」を設定すると、レスポンシブデザインで横並びのli要素を縦に並べることは出来ないのでしょうか。あるいば別の要因で上手くいかないのでしょうか。
|
|
55
90
|
※教材の例では、li要素に「display: table;」は設定しておりません。
|