<!-- index.html -->
<div id="content">
<h2>大自然に囲まれた素敵なお店です</h2>
<!-- 追加 -->
<p>素材を吟味した自然の味わいを大切にした<br>
<!-- 追加 -->
マスター自慢のパンとお菓子をお楽しみ下さい。</p>
<!-- 追加 -->
<div id="main_picture">
</div>
</div>
<!-- index.html -->
Hタグ（<H1>～<H6>）はHeadingの略で、見出しを意味し＜ <H1>が最上位の大見出し。 Pタグ（<P>）はParagraphの略で、<P>～</P>で囲まれた部分がひとつの段落。
上は処理結果です。特に指定を指定内のもテキストは左上から表示されてしまいます。そこでセンター合わせにします。またタイトルに予め用意しているpng形式で背景が透明なロゴタイプを配置します。
ロゴイプの表示指定
<!-- index.html -->
<div id="header">
<img src="links/title.png">
<!-- linksフォルダーにあるtitle.pngを表示-->
</div>
<!-- index.html -->
CSSで再設定したh2とpタグを利用
<!-- index.html -->
<div id="content">
<h2 class="main_text">大自然に囲まれた素敵なお店です</h2>
<!-- CSSでClass指定したh2を利用 -->
<p class ="sub_text">素材を吟味した自然の味わいを大切にした<br>
マスター自慢のパンとお菓子をお楽しみ下さい。</p>
<!-- CSSでClass指定したpを利用 -->
<div id="main_picture">
</div>
</div>
<!-- index.html -->
h2とpタグをCSSで再設定
/* rule.css */
h2.main_text { /* main_textという名前のClass宣言 */
margin: 20px auto -5px;
font-size: 20px;
color: #ba08b0;
text-align: center; /* センター合わせ */
}
margin-top: auto;
font-size: 14px;
color: #000000;
text-align: center; /* センター合わせ */
}
/* rule.css */
処理結果はロゴタイプがセンター合わせになっていません。そこでCSSのheaderの設定を変更します。
div#header {
height: 80px;
width: 100%;
text-align: center; /* テキストは中央 */
vertical-align: middle; /* 縦方向は中央 */
background: #f8844e;
}
処理結果です。これで一応体裁が整いましたが、テキストの状況に下のmain_pictureの配置が影響されてしまうので、固定させることにします。
CSSで新規追加したボックスを宣言
<!-- index.html -->
<div id="content">
<div id="message">
<!-- 新たなボックスを宣言 -->
<h2 class="main_text">大自然に囲まれた素敵なお店です</h2>
<p class="sub_text">素材を吟味した自然の味わいを大切にした<br>
マスター自慢のパンとお菓子をお楽しみ下さい。</p>
</div> <!-- 新たなボックスの宣言終了 -->
<div id="main_picture">
</div>
</div>
<!-- index.html -->
CSSに以下の命令を追加
/* rule.css */
div#message {
margin: 0px auto;
height: 120px;
width: 600px;
text-align: center;
vertical-align: middle;
background: #ffffff;
}
/* rule.css */
div#message {
float: left; /* 左合わせですが、rightで問題ありません */
margin: 0px auto;
height: 120px;
width: 600px;
text-align: center;
vertical-align: middle;
background: #ffffff;
}
div#main_picture {
margin: 135px auto; /* 24pxから135pxに変更 */
height: 360px;
width: 480px;
background: #ffffff;
}
処理結果です。やっとまともな感じに成りましたが、テキストブロックが少し上過ぎるので調整します。
/* rule.css */
h2.main_text {
margin: 30px auto -5px; /* 20pxから30pxに変更 */
font-size: 20px;
color: #ba08b0;
text-align: center;
}
/* rule.css */
処理結果です。これで問題解決です。あとは手バッグ用に指定したmessageぶろつくの白をオフにします。
/* rule.css */
div#message {
float: left;
margin: 0px auto;
height: 120px;
width: 600px;
text-align: center;
vertical-align: middle;
/*background: #ffffff;*/
/* 削除せずにコメント文として残すことで後々修正が発生したときに便利 */
}
処理結果です。今回は個々までとします。個々までのHTMLとCSSのは以下の通りです。
<!-- index.html -->
<html lang="ja">
<head>
<title>森のお菓子屋さん</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="rule.css">
</head>
<body>
<div id="main_box">
<div id="header">
<img src="links/title.png">
</div>
<div id="side_menu">
<div class="menu_button">
</div>
<div class="menu_button">
</div>
<div class="menu_button">
</div>
<div class="menu_button">
</div>
</div>
<div id="content">
<div id="message">
<div class="main_text">大自然に囲まれた素敵なお店です</div>
<div class="sub_text">素材を吟味した自然の味わいを大切にした<br>
マスター自慢のパンとお菓子をお楽しみ下さい。</div>
</div>
<div id="main_picture">
</div>
</div>
</div>
</body>
</html>
<!-- index.html -->
rule.cssはこれで感性とします。以降はhtmlファイルの修正だけです。
/* rule.css */
@charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}
body {
background: #edfd8e;
}
div#main_box {
height: 600px;
width: 800px;
background: #ff69b4;
margin: 0px auto;
}
div#header {
height: 80px;
width: 100%;
text-align: center;
vertical-align: middle;
background: #f8844e;
}
div#side_menu {
float: left;
height: 520px;
width: 25%;
background: #63dada;
}
div.menu_button {
margin: 24px auto;
height: 100px;
width: 100px;
background: #ffffff;
}
div#content {
float: right;
height: 520px;
width: 75%;
background: #4ff1ae;
}
div#main_picture {
margin: 135px auto;
height: 360px;
width: 480px;
background: #ffffff;
}
div#message {
float: left;
margin: 0px auto;
height: 120px;
width: 600px;
text-align: center;
vertical-align: middle;
/*background: #ffffff;*/
}
h2.main_text {
margin: 30px auto -2px;
font-size: 20px;
font-weight: bold;
color: #ba08b0;
/*text-align: center;
vertical-align: middle;*/
}
p.sub_text {
margin-top: auto;
font-size: 14px;
color: #000000;
/*text-align: center;
vertical-align: middle;*/
}
/* rule.css */
