アプリ版：「スタンプのみでお礼する」機能のリリースについて

HTML、CSSでのHP作成で質問

解決済

  • 質問者：otsugiri
  • 質問日時：
  • 回答数：3件

ここ何日かでhtmlとcssでホームページを作り始めた初心者です。
わからないところがあって質問させていただきました。
今、タイトルバーとサイドメニューのみがある状態です。

<body>
<!-- タイトル -->
<div class="titlebar">サイトの名前</div>
<br>
<!-- メニュー -->
<ul>
<div class="menu"><li>項目1</li></div>
<div class="menu"><li>項目2</li></div>
<div class="menu"><li>SAMPLE</li></div>
<div class="menu"><li>SAMPLE</li></div>
<div class="menu"><li>SAMPLE</li></div>
</ul>

</body>

こんな感じです。
ページの上部はタイトルバー、左側に縦にサイドメニューを置いていますので、
つまりページの内容を

-------------------
タイトル
-------------------
メ|　　　　ここに
ニ|　　　　内容を
ュ|　　　　書きたい
ー|
|
|

このように書きたいということになります。ですが、このままhtmlで
サイドメニューに続けてプログラムを書くと、メニューの下に表示されてしまうと思います。
うまくこの場所に内容を始めるにはどうすればよいでしょうか？
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.1ベストアンサー

  • 回答者： qualheart
  • 回答日時：

divの使い方が間違ってますね。


「タイトル」「サイドメニュー」「内容」をそれぞれdivで区切らないとダメです。
この上で、CSSで各DIVのClassに対して、それぞれの表示位置を定義します。

HTMLにすると以下の様な感じになります。
コピペして表示してみてください。


<html>
<head>
<title>sample</title>
<style TYPE="text/css">
<!--
div.main {
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
WIDTH: 800px;
}
div.titlebar {
position: relative;
background-color: #6699FF;
}
div.menu {
float: left;
width: 300px;
background-color: #99FF66;
}
div.contents {
float: right;
width: 500px;
background-color: #FFFF66;
}
-->
</style>
</head>
<body>
<div class="main">

<!-- タイトル -->
<div class="titlebar">
<p class="title">サイトの名前</p>
</div>

<!-- メニュー -->
<div class="menu">
<ul>
<li>項目1</li>
<li>項目2</li>
<li>SAMPLE</li>
<li>SAMPLE</li>
<li>SAMPLE</li>
</ul>
</div>

<!-- 内容 -->
<div class="contents">
<p>ここに内容を書く</p>
</div>

</div>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.2

floatをcssでかますか、


htmlだとframeやtableなんかを使うことになるのでしょうか。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： ORUKA1951
  • 回答日時：

順番が違います。


　HTMLでは、その文書全体を、それを構成する要素に分解して、その構成要素一つ一つをマークアップしていきます。デザインは一切(というくらい)考えたらダメです。今から始められるのでしたら、この点だけは徹底的に理解してください。HTML5では、とても厳しくなります。
＞このように書きたいということになります。
　そのためにHTMLを書いてはダメ!!!それはHTMLの仕事じゃない!!

　通常の文書は最低限
<body>
　<div class="header">
　　<h1>ページの見出し</h1>
　　<p>このサイトは・・・</p>
　</div>
　<div class="section">
　　<h2>本文記事見出し</h2>
　　<p>記事・・</p>
　</div>
　<div class="footer">
　　<h2>文書情報</h2>
　</div>
</body>

のような構造はしているはずです。HTML5だと

<body>
　<header>
　　<h1>ページの見出し</h1>
　　<p>このサイトは・・・</p>
　</header>
　<section>
　　<h2>本文記事見出し</h2>
　　<p>記事・・</p>
　</section>
　<footer>
　　<h2>文書情報</h2>
　</footer>
</body>
となります。

<ul>
<div class="menu"><li>項目1</li></div>
・・・【中略】・・・
<div class="menu"><li>SAMPLE</li></div>
</ul>
はナビゲーションですから、
<div class="nav">
　　<ul>
　　　　<li>項目1</li>
　　　　<li>項目2</li>
　　　　<li>SAMPLE</li>
　　　　<li>SAMPLE</li>
　　　　<li>SAMPLE</li>
　　</ul>
</div>
とマークアップして、それを本文中にでも入れておきます。

※ulの中には<li>以外は存在してはなりません。
※BRは、通常は使わない要素です。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
HTML5だと
<nav>
　　<ul>
　　　　<li>項目1</li>
　　　　<li>項目2</li>
　　　　<li>SAMPLE</li>
　　　　<li>SAMPLE</li>
　　　　<li>SAMPLE</li>
　　</ul>
</nav>
でよいのです。

★あくまで、HTMLは、文書を構成している要素(エレメント)をマークアップするものです。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
★その文書構造を元にスタイルを指定していきます。たとえば本文中のナビゲーションでしたら
div.section div.nav{}
という指定方法になります。デザインのためにclass名をつけるのではありません。また、いちいち書かなくても、
div.section div.nav{}で、本文(section)内の<div class="nav">だとわかります。!!!
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［7.5.4要素のグループ化: DIV要素とSPAN要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

★下記はHTML4.01strictです。今から始めるなら、HTML4.01strictから始めましょう。Transitionalではありません。HTML5はstrictしかありません。
★書いたら、Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )でチェックする。
★スタイルシートはその後
★HTML5 における HTML4 からの変更点の「新しい要素」 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )を読むとclass名にどんなものが良いかわかります。
★下のソースでタブは＿に置換してあるので戻すこと。
　文書構造とプレゼンテーションを分けなければならない意味がよくわかると思います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
html,body{margin:0;padding:0;}
p{margin:0 1em;text-indent:1em;line-height:1.4em;}
h1,h2,h3{margin:0;line-height:1.4em;text-align:center;}
body{background-image:url(./images/background/stone.jpg);}
div.header,
div.section,
div.footer{
＿width:80%;
＿min-width:480px;max-width:900px;
＿margin:0 auto;
＿border:solid 1px gray;
}
div.section{min-height:400px;position:relative;}
div.section>*{margin-left:200px;}
div.nav{
position:absolute;
top:0;
width:200px;
margin-left:0;
height:100%;
background-color:white;
}

-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>ページの見出し</h1>
＿＿<p>このサイトは・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>本文記事見出し</h2>
＿＿<p>記事・・</p>
＿＿<div class="nav">
＿＿＿<ul>
＿＿＿＿<li>項目1</li>
＿＿＿＿<li>項目2</li>
＿＿＿＿<li>SAMPLE</li>
＿＿＿＿<li>SAMPLE</li>
＿＿＿＿<li>SAMPLE</li>
＿＿＿</ul>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報