HTMLのメニューを左に寄せたい

HTML
1<!DOCTYPE html>
2<html>
3
4<body>
5    <meta charset="utf-8">
6    <title>U・S・J</title>
7    <link href="stylesheet.css" rel="stylesheet" type="text/css">
8    <script src="script.js" charset="utf-8"></script>
9    <head>
10        <div class="header">
11            USJ攻略情報
12        </div>
13
14        <div class="main">
15          <div align="left">
16          <div class="nav">
17
18            <ul class="nl">
19              <li><a href="index.html">トップページ</a></li>
20              <li><a href="#">メニュー項目2</a></li>
21              <li><a href="#">メニュー項目3</a></li>
22              <li><a href="#">メニュー項目4</a></li>
23              <li><a href="#">メニュー項目5</a></li>
24              <li><a href="#">メニュー項目6</a></li>
25            </ul>
26
27          </div>
28        </div>
29        </div>
30
31
32        <div class="footer">
33            このサイトは、@asadakoによって運営されています。
34        </div>
35    </head>
36
37</html>
38

CSS
1.header {
2    font-size:35px;
3    background-color:lightskyblue;
4    height:40px;
5    width:400px;
6    margin:5px 5px 10px 5px;
7    padding:10px 10px 10px 10px;
8}
9.main {
10    background-color:lawngreen;
11    width:1000px;
12    height:1000px;
13    margin: 5px 5px 5px 5px;
14    padding: 25px 25px 25px 125px;
15}
16.footer {
17    background-color:tomato;
18    width:400px;
19    height:15px;
20}
21
22/* --- ナビゲーションバー --- */
23div.nav {
24width: 180px; /* ナビゲーションの幅 */
25font-size: 80%;
26}
27
28/* --- メニューエリア --- */
29div.nav ul.nl {
30margin: 0;
31padding: 0;
32border-top: 1px #c0c0c0 solid; /* 最上部の境界線 */
33list-style-type: none;
34text-align: left;
35}
36
37/* --- メニュー項目 --- */
38div.nav ul.nl li {
39background-color: #f5f5f5; /* 項目の背景色 */
40border-bottom: 1px #c0c0c0 solid; /* 項目の下境界線 */
41}
42
43/* --- リンク --- */
44div.nav ul.nl li a {
45display: block;
46position: relative; /* IE6用 */
47padding: 9px 10px; /* リンクエリアのパディング（上下、左右） */
48text-decoration: none; /* テキストの下線（なし） */
49}
50/* --- ポイント時の設定 --- */
51div.nav ul.nl li a:hover {
52background-color: #f0ffff; /* ポイント時の背景色 */
53text-decoration: underline; /* テキストの下線（あり） */
54}
55

このようなコードを使って、USJ攻略サイトを作っています。クリックすると、そのリンクに飛ぶというメニューを作っているのですが、
![](0

このように、メニューが左端によりません。
左端に余白をなくし、メニューを一番左にするには、どうしたらいいでしょうか？

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

回答4件

ベストアンサー

どうもこんにちは。
今回の質問者さんのHTML5のコードについてですが、いくつか注意していただきたいミスが見られましたので、質問の回答を行う前に少しだけお話を書かせていただきます。
HTML5について

HTML5はHTML4の次のバージョンとして出されたウェブサイトを作るためのマークアップ言語という言語です。
HTML5は多くの人が共同で作業するときなどに便利なように、基本の書き方(HTML5を書く上で絶対に書いていないとならないものとか)が決まっていて、ここやそのほか色々なサイトでその書き方について書かれています。
で、そのHTML5というマークアップ言語の基本の書き方はこのようになります。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8</body>
9</html>

基本の書き方をみたところで、質問者さんのコードをみてみましょう。

HTML
1<!DOCTYPE html>
2<html>
3
4<body>
5    <meta charset="utf-8">
6    <title>U・S・J</title>
7    <link href="stylesheet.css" rel="stylesheet" type="text/css">
8    <script src="script.js" charset="utf-8"></script>
9    <head>
10        <div class="header">
11            USJ攻略情報
12        </div>
13
14        <div class="main">
15          <div align="left">
16          <div class="nav">
17
18            <ul class="nl">
19              <li><a href="index.html">トップページ</a></li>
20              <li><a href="#">メニュー項目2</a></li>
21              <li><a href="#">メニュー項目3</a></li>
22              <li><a href="#">メニュー項目4</a></li>
23              <li><a href="#">メニュー項目5</a></li>
24              <li><a href="#">メニュー項目6</a></li>
25            </ul>
26
27          </div>
28        </div>
29        </div>
30
31
32        <div class="footer">
33            このサイトは、@asadakoによって運営されています。
34        </div>
35    </head>
36</html>

はじめにドキュメントタイプ宣言をして、HTMLタグを書いた後に、いきなりbodyタグが書かれています(これは別にかまいませんがオススメはできません)。また、そのbodyタグの中にheadタグが書かれています(これはいけません)。このように、HTML5の書き方として間違っている部分があります。
そのため、先ほど挙げたサイトなどでHTML5の基本的な書き方を学んでいくと今後のサイト作成もスムーズに行えると思います。
ここから回答

とりあえず質問者さんのコードをHTML5のルールに沿って書き直してみると以下のようなコードになります。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Title</title>
6    <link rel="stylesheet" href="stylesheet.css">
7</head>
8<body>
9<div class="header">
10    USJ攻略情報
11</div>
12<div class="main">
13    <div class="left_side">
14        <div class="nav">
15            <ul class="nl">
16                <li><a href="index.html">トップページ</a></li>
17                <li><a href="#">メニュー項目2</a></li>
18                <li><a href="#">メニュー項目3</a></li>
19                <li><a href="#">メニュー項目4</a></li>
20                <li><a href="#">メニュー項目5</a></li>
21                <li><a href="#">メニュー項目6</a></li>
22            </ul>
23        </div>
24    </div>
25</div>
26<div class="footer">
27    このサイトは、@asadakoによって運営されています。
28</div>
29<script src="script.js" charset="UTF-8"></script> 
30</body>
31</html>

そして、「メニューを左に寄せたいのに隙間ができる」のは、stylesheet.cssに書いてあるmainクラスのpaddingという余白を設定するプロパティにpadding-left、つまり左側に余白を125px作る設定がされているのが原因ですので、これを0とすることでこの問題は解決できます。
また、HTML5からalign属性は廃止されましたので、代わりにleft_sideクラスを作り、左に寄せます。
サイトを質問者さんの意図とおりのレイアウトにしたいときは、stylesheet.cssをこのようにします。

CSS
1.header {
2    font-size: 35px;
3    background-color: lightskyblue;
4    height: 40px;
5    width: 400px;
6    margin: 5px 5px 10px 5px;
7    padding: 10px 10px 10px 10px;
8}
9
10.main {
11    background-color: lawngreen;
12    width: 1000px;
13    height: 1000px;
14    margin: 5px 5px 5px 5px;
15    padding: 25px 25px 25px 0;/*ここの行を変更しました*/
16}
17
18.left_side {
19    text-align: left;
20}
21
22.footer {
23    background-color: tomato;
24    width: 400px;
25    height: 15px;
26}
27
28/* --- ナビゲーションバー --- */
29div.nav {
30    width: 180px; /* ナビゲーションの幅 */
31    font-size: 80%;
32}
33
34/* --- メニューエリア --- */
35div.nav ul.nl {
36    margin: 0;
37    padding: 0;
38    border-top: 1px #c0c0c0 solid; /* 最上部の境界線 */
39    list-style-type: none;
40    text-align: left;
41}
42
43/* --- メニュー項目 --- */
44div.nav ul.nl li {
45    background-color: #f5f5f5; /* 項目の背景色 */
46    border-bottom: 1px #c0c0c0 solid; /* 項目の下境界線 */
47}
48
49/* --- リンク --- */
50div.nav ul.nl li a {
51    display: block;
52    position: relative; /* IE6用 */
53    padding: 9px 10px; /* リンクエリアのパディング（上下、左右） */
54    text-decoration: none; /* テキストの下線（なし） */
55}
56
57/* --- ポイント時の設定 --- */
58div.nav ul.nl li a:hover {
59    background-color: #f0ffff; /* ポイント時の背景色 */
60    text-decoration: underline; /* テキストの下線（あり） */
61}

しつこいようですが、HTML5の基本的な知識を得るために、色々な入門サイトをみて学習することをおすすめします。
以上で回答を終わります。
ありがとうございました。

投稿2016/11/22 15:54

編集2016/11/22 16:09

退会済みユーザー

総合スコア0

asadako

2016/11/23 05:36

基本的な文法ではなかったですね・・・それに気づいてくださりありがとうございました！

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

body要素内に head要素を置いてあったり、head要素内にコンテンツを書いてあったり、かなりむちゃくちゃですね。<div align="left"> も align属性はHTML5で廃止されています。

書くならこう。

HTML
1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset="utf-8">
5		<title>U・S・J</title>
6		<link href="stylesheet.css" rel="stylesheet">
7		<script src="script.js"></script>
8	</head>
9	<body>
10		<div class="header">
11			USJ攻略情報
12		</div>
13		<div class="main">
14			<div class="left">
15				<div class="nav">
16					<ul class="nl">
17						<li><a href="index.html">トップページ</a></li>
18						<li><a href="#">メニュー項目2</a></li>
19						<li><a href="#">メニュー項目3</a></li>
20						<li><a href="#">メニュー項目4</a></li>
21						<li><a href="#">メニュー項目5</a></li>
22						<li><a href="#">メニュー項目6</a></li>
23					</ul>
24				</div>
25			</div>
26		</div>
27		<div class="footer">
28			このサイトは、@asadakoによって運営されています。
29		</div>
30	</body>
31</html>

左の「余白」は body要素の margin と .header .main の左marginが原因です。メニューが浮いているのは .main の左paddingが原因です。

CSS
1body {
2	margin: 0;
3}

あとはデベロッパーツールでも見ながら確認してください。

【開発者ツールを使おう！カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

投稿2016/11/22 15:02

kei344

総合スコア69407

asadako

2016/11/23 05:38

間違えに気づいてくださりありがとうございました！

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

css
1position: absolute;
2/*もしくは position: fixed; */
3left: 0;

対象の要素にこれをつけると、他の要素を無視して左側に行きます。
親要素がposition: relative;なら親要素の中で一番左によります。
fixedはスクロールされません。

あとは、要素のpaddingやmarginに0を入れていくと余白などが消えていきます。
下のように上下左右指定できるので、左をどんどん消していけばそのうち左に寄るでしょう。

css
1padding: 0;
2padding-left: 0;
3margin-top: 0;
4margin-bottom: 10px;
5

投稿2016/11/22 12:53

intelf___

総合スコア868

asadako

2016/11/23 05:38

なるほど。回答ありがとうございました！

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

これのせいでは……？

CSS
1.main {
2/*    padding: 25px 25px 25px 125px; */
3    padding: 25px 25px 25px 25px;
4}

追記
CSSで困ったときは、まずはブラウザの開発者ツール（ディベロップメントツール）を使ってみると、
いろいろとはかどりますよ。

参考：http://www.buildinsider.net/web/chromedevtools/01

投稿2016/11/22 12:47

編集2016/11/22 12:50

退会済みユーザー

総合スコア0

asadako

2016/11/23 05:39

デベロッパーツールですか今度つかってみようと思います！回答ありがとうございました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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