メニューバーが上に表示される

HTML
1<html>
2  <head>
3    <meta charset="shift_jis">
4    <title>Programming World</title>
5    <link rel="stylesheet" href="stylesheet.css">
6  </head>
7  <body>
8    <div class="side-menu">
9      <ul>
10        <li><a href="D:\ProgrammingWorld\Chapter\Chapter1.html">第1章 Javaプログラミングをマスターしよう</a></li>
11        <li><a href="D:\ProgrammingWorld\Chapter\Chapter2.html">第2章 Javaの仕組み</a></li>
12        <li><a href="D:\ProgrammingWorld\Chapter\Chapter3.html">第3章 インデントとコメント</a></li>
13      </ul>
14    </div>
15    <div class="main">
16      <p class="Overview">このサイトの概要<br></p>
17      <section>
18      <p class="Overview-1">
19        このサイトは、プログラミング学習サイトです。<br>
20        現時点では、Java言語の学習をサポートしています
21      </p>
22    </div>
23  </body>
24</html>
25

CSS
1@charset "Shift-JIS";
2side-menu {
3  text-align: left;
4}
5p.Overview {
6  font-size: 40px;
7  color:rgb(212, 215, 33);
8  text-decoration: underline;
9}
10p.Overview-1 {
11  font-size: 18px;
12}
13

このようなWebサイトを作っています
メニューバーを付けたのですが、どうしても上に表示されてしまいます
Mainの横につけるには、どうしたらいいでしょうか？

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

回答3件

ベストアンサー

Mainの横にメニューバーを表示するというようなデザインをするときに一番簡単(だと思ってる)方法はメニューバーにfloatプロパティのleftを指定する方法です。
floatプロパティを指定した要素は、指定した方向(left ,right ,none)のいずれかに配置され、その後の要素はその要素の反対側に回り込みます。
つまり、メニューバーにfloatプロパティのleftを指定すると、メニューバーは左側へ寄り、その後ろのMainはメニューバーの反対側(右側)へ回り込みます。
ですが、floatを指定した後の要素が常にfloatが有効な状態になると不便なので、clearプロパティで回り込みを解除しないといけません。
そうすると、コード全体は以下のようになります。
また、HTMLの記述で気になるところなどがあったので、こちらで修正した箇所にはコメントを書いておきました。必要に応じて削除したりしてください。

HTML
1<html>
2<head>
3    <meta charset="shift_jis">
4    <title>Programming World</title>
5    <link rel="stylesheet" href="stylesheet.css">
6</head>
7<body>
8<div class="side-menu">
9    <ul>
10        <li><a href="D:\ProgrammingWorld\Chapter\Chapter1.html">第1章 Javaプログラミングをマスターしよう</a></li>
11        <li><a href="D:\ProgrammingWorld\Chapter\Chapter2.html">第2章 Javaの仕組み</a></li>
12        <li><a href="D:\ProgrammingWorld\Chapter\Chapter3.html">第3章 インデントとコメント</a></li>
13    </ul>
14</div>
15<div class="main">
16    <p class="Overview">このサイトの概要<br></p>
17    <section>
18        <p class="Overview-1">
19            このサイトは、プログラミング学習サイトです。<br>
20            現時点では、Java言語の学習をサポートしています
21        </p>
22    </section><!-- sectionタグは閉じましょう. -->
23</div>
24<div class="clear"></div><!-- ここでclearプロパティを使ってfloatを解除しています. -->
25</body>
26</html>

CSS
1* {
2    /* ここで余白を消していますが、余白が必要な場合は削除してください。 */
3    margin: 0;
4    padding: 0;
5}
6
7.side-menu { /* side-menuはクラス名なので先頭にドット(.)をつける必要があります. */
8    text-align: left;
9    border-right: 1px solid #000; /* サイドメニューとMainの境界をわかりやすくするために追加 */
10    height: 100%; /* Mainの文字が左側にきてしまうのを防ぐために追加。 */
11    float: left;
12}
13
14p.Overview {
15    font-size: 40px;
16    color: rgb(212, 215, 33);
17    text-decoration: underline;
18}
19
20p.Overview-1 {
21    font-size: 18px;
22}
23
24.clear {
25    clear: both;
26}

投稿2016/12/10 17:52

退会済みユーザー

総合スコア0

asadako

2016/12/11 00:48

回答ありがとうございました！この方法やほかの人の方法も応用して、Webサイトを作っていこうと思います!

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

一例ですがdisplay: flex;を使ってやる方法があります。

css
1.wrap {
2	display: flex;
3}
4.side-menu {
5	text-align: left;
6}
7.Overview {
8	font-size: 40px;
9	color:rgb(212, 215, 33);
10	text-decoration: underline;
11}
12.Overview-1 {
13	font-size: 18px;
14}

html
1  <div class="wrap">
2    <div class="side-menu">
3      <ul>
4        <li><a href="D:\ProgrammingWorld\Chapter\Chapter1.html">第1章 Javaプログラミングをマスターしよう</a></li>
5        <li><a href="D:\ProgrammingWorld\Chapter\Chapter2.html">第2章 Javaの仕組み</a></li>
6        <li><a href="D:\ProgrammingWorld\Chapter\Chapter3.html">第3章 インデントとコメント</a></li>
7      </ul>
8    </div>
9    <div class="main">
10      <h1 class="Overview">このサイトの概要</h1>
11      <section>
12      <p class="Overview-1">
13        このサイトは、プログラミング学習サイトです。<br>
14        現時点では、Java言語の学習をサポートしています
15      </p>
16    </div>
17  </div>

そのほかの調整は参考サイトを張っておきますので、やってみてください。
何か分からないことがあればまた質問を立ててもらえれば…

投稿2016/12/10 13:17

gin

総合スコア2722

asadako

2016/12/11 00:48

回答ありがとうございました！色々な方法があるのですね。今後、参考にさせていただきます。

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

他の方の回答で十分ですが、少し違う組み方を一応提示してみます。flex float position による位置制御はよく使うことになるので、ぜひ触ってみてください。

HTML
1<!DOCTYPE html><html>
2<head>
3	<meta charset="UTF-8">
4	<title>Programming World</title>
5	<link rel="stylesheet" href="stylesheet.css">
6</head>
7<body>
8	<div class="side-menu">
9		<ul>
10			<li><a href="D:\ProgrammingWorld\Chapter\Chapter1.html">第1章 Javaプログラミングをマスターしよう</a></li>
11			<li><a href="D:\ProgrammingWorld\Chapter\Chapter2.html">第2章 Javaの仕組み</a></li>
12			<li><a href="D:\ProgrammingWorld\Chapter\Chapter3.html">第3章 インデントとコメント</a></li>
13		</ul>
14	</div>
15	<div class="main">
16		<p class="Overview">このサイトの概要<br></p>
17		<section>
18			<p class="Overview-1">
19				このサイトは、プログラミング学習サイトです。<br>
20				現時点では、Java言語の学習をサポートしています
21			</p>
22		</section>
23	</div>
24</body>
25</html>

CSS
1@charset "UTF-8";
2body {
3	margin: 0;
4}
5.side-menu {
6	position: absolute;
7	left: 0;
8	top: 0;
9	width: 200px;
10}
11	.side-menu > ul {
12		margin: 0;
13		padding: 0;
14	}
15	.side-menu > ul > li { /* 適当 */
16		margin-bottom: 1em;
17	}
18
19.main {
20	margin-left: 200px; /* .side-menu の width より大きければ良い */
21}
22
23p.Overview {
24	font-size: 40px;
25	color: rgb(212, 215, 33);
26	text-decoration: underline;
27	margin-top: 0;
28}
29p.Overview-1 {
30	font-size: 18px;
31}
32```[https://jsfiddle.net/4yb8oxfk/](https://jsfiddle.net/4yb8oxfk/)
33
34---
35
36HTML5 では文字コードは UTF-8 が推奨されています。（Shift-JIS が使えないわけではない）
37
38【meta 要素 - HTML | MDN】
39[https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta#attr-charset](https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta#attr-charset)