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

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

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

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

Q&A

解決済

4回答

1913閲覧

HTMLのレイアウトについて

naoki1023

総合スコア11

HTML

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

0グッド

0クリップ

投稿2016/06/23 07:42

編集2016/06/23 13:41

レイアウトが崩れてしまいます。
サイドバーの横に文字を打ちたいと思うのですがサイドバーの下にレイアウトが崩れる原因を教えてほしいです。

###発生している問題・エラーメッセージ

エラーメッセージ

###該当のソースコード

ここにご自身が実行したソースコードを書いてください
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>progete</title> <link rel="stylesheet" href="innsutoru.css"> </head> <body>---<body>を追加しました。 <div class="header"> <div class="header-left">prpgate</div> <div class="header-right"> <ul> <li class="selected">会社概要</li> <li>採用</li> <li>お問い合わせ</li> </div> </div> <!--メイン記事><!--> <div class="main"> <div class="sidebar"> <ul> <li>progeteとは?</li> <li>事業内容</li> <li>プレスリリース </li> </ul> </div> <div class="contents"> <div class="contents-top"></div> <h1> ああああああああああああああああ </h1>
<div class="contents-top-item"> いいいいいい <div class="footer"></div> <body> </body> --- CSSです。 --- .header{ height: 65px; color: white; background-color: #0000ff; font-size: 30px; } .header-left{ float: left; padding: 10px 60px; } .header-right{ float: right; } .header-right li { float: right; color: #1e90ff; padding: 10px 30px; font-size: 1px; list-style: none; } .sidebar{ background-color: white; height: 600px; width:200px; padding: 30px; } .sidebar li { list-style: none; background-color: aqua; color: white; padding: 10px; margin-bottom: 10px; height: 20px; width: 100px; float: left; } .contents { width: 400px; height: 600px; background-color: #E8E5FF; } ### floatタグを入れないからだめなのかなと思い試したのですがだめでした。 初心者的な悩みですがよろしくお願いします。 ###補足情報(言語/FW/ツール等のバージョンなど) より詳細な情報

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

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

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

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

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

coco_bauer

2016/06/23 07:51

スタイルシート"innsutoru.css"の中身も質問に書いてください。レイアウトはスタイルシートに大きく依存しますからね。
naoki1023

2016/06/23 07:58

こちらがCSSの中身です。 よろしくお願いします。 .header{ height: 65px; color: white; background-color: #0000ff; font-size: 30px; } .footer { height: 200px; background-color: #FCFFC0; clear: left; } .header-left{ float: left; padding: 10px 60px; } .header-right{ float: right; } .header-right li { float: right; color: #1e90ff; padding: 10px 30px; font-size: 1px; list-style: none; } .sidebar{ background-color: white; height: 600px; width:200px; padding: 30px; } .sidebar li { list-style: none; background-color: aqua; color: white; padding: 10px; margin-bottom: 10px; height: 20px; width: 100px; float: left; } .contents { width: 400px; height: 600px; background-color: #E8E5FF; }
date

2016/06/23 08:13

このHTML<body></body>の間に入れてないのはなぜでしょうか 
naoki1023

2016/06/23 08:24

間違えて消してしまいました。。。
date

2016/06/23 08:29

追加したCSSとHTMLはマークダウンを用いて質問の場所に編集して入れてください
kei344

2016/06/23 08:48

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
kei344

2016/06/23 15:47

コードブロックは適切に設定してください。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。
guest

回答4

0

.header{

height: 65px;
color: white;
background-color: #0000ff;
font-size: 30px;
}
.header-left{
float: left;
padding: 10px 60px;
}
.header-right{
float: right;

}

.header-right li {
float: right;
color: #1e90ff;
padding: 10px 30px;
font-size: 1px;
list-style: none;
}

.sidebar{
background-color: white;
height: 600px;
width:200px;
padding: 30px;

}

.sidebar li {
list-style: none;
background-color: aqua;
color: white;
padding: 10px;
margin-bottom: 10px;
height: 20px;
width: 100px;
float: left;
}

.contents {
width: 400px;
height: 600px;
background-color: #E8E5FF;
}

/* -- 追記 -- */

.sidebar,.contents {
float:left;
}
.contents {
width: 400px;
margin: 40px 0 0 0;
}

/* ---- clearfix start ---- /
div.main:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
div.main { display: inline-table; }
/
Hides from IE-mac */

  • html .main { height: 1%; }

div.main { display: block; }
/* End hide from IE-mac /
/
---- clearfix end ---- */

投稿2016/06/24 03:03

YK1037

総合スコア236

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

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

YK1037

2016/06/24 03:04

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>progete</title> <link rel="stylesheet" href="test.css"> </head> <body> <div class="header"> <div class="header-left">prpgate</div><!-- "header-left" --> <div class="header-right"> <ul> <li class="selected">会社概要</li> <li>採用</li> <li>お問い合わせ</li> </ul> </div><!-- "header-right" --> </div><!-- "header" --> <!--メイン記事><!--> <div class="main"> <div class="sidebar"> <ul> <li>progeteとは?</li> <li>事業内容</li> <li>プレスリリース</li> </ul> </div> <div class="contents"> <div class="contents-top"></div> <h1> ああああああああああああああああ </h1> <div class="contents-top-item"> いいいいいい </div> </div> </div><!-- "main" --> <div class="footer"></div> </body>
guest

0

イメージ説明

投稿2016/06/24 03:03

YK1037

総合スコア236

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

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

0

PCで見てみます。
cssの内容も教えていただけると
直ぐ原因をつかめます

投稿2016/06/23 12:42

YK1037

総合スコア236

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

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

0

ベストアンサー

イメージ説明

css

1.header { 2 height: 65px; 3 color: white; 4 background-color: #0000ff; 5 font-size: 30px; 6} 7 8.header-left { 9 float: left; 10 padding: 10px 60px; 11} 12 13.header-right { 14 float: right; 15} 16 17.header-right li { 18 float: right; 19 color: #1e90ff; 20 padding: 10px 30px; 21 font-size: 1px; 22 list-style: none; 23} 24 25.sidebar { 26 background-color: white; 27 height: 600px; 28 width: 200px; 29 padding: 30px; 30 /*追加*/ 31 float: left; 32} 33 34.sidebar li { 35 list-style: none; 36 background-color: aqua; 37 color: white; 38 padding: 10px; 39 margin-bottom: 10px; 40 height: 20px; 41 width: 100px; 42 float: left; 43} 44 45.contents { 46 width: 400px; 47 height: 600px; 48 background-color: #E8E5FF; 49}

HTML

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>progete</title> 6<link rel="stylesheet" href="innsutoru.css"> 7</head> 8<body> 9 <div class="header"> 10 <div class="header-left"">prpgate</div> 11 <div class="header-right"> 12 <ul> 13 <li class="selected">会社概要</li> 14 <li>採用</li> 15 <li>お問い合わせ</li> 16<!--閉じられていないので追加--> 17 </ul> 18 </div> 19 </div> 20 <!--メイン記事><!--> 21 <div class="main"> 22 <div class="sidebar"> 23 <ul> 24 <li>progeteとは?</li> 25 <li>事業内容</li> 26 <li>プレスリリース</li> 27 </ul> 28 </div> 29 <div class="contents"> 30 <div class="contents-top"></div> 31 <h1>ああああああああああああああああ</h1> 32 <div class="contents-top-item"> 33 いいいいいい 34 <div class="footer"></div> 35 </div> 36 </div> 37 </div> 38</body>

投稿2016/06/24 02:43

date

総合スコア1820

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問