日曜日, 9月 20, 2020

HTML_CSS_05 
<div></div>の位置関係に要注意

タイプミスがなくても前後関係を間違えてしまうと正しく表示されません。例えば<div id ="abc">の</div>が正しい行にあるか否かという基本的な部分はしっかり確認するようにします。

まず最初に前回保留にした上面の空きの修正方法を整理します。これは、全称セレクタ(ユニバーサルセレクター)を指定することで、すべての要素を対象にスタイルを適用するセレクターとしてアスタリスク( * )を記述します。CSSファイル内に以下のブロックを追加記述します。


/* rule.css */


* {

margin: 0px;

padding: 0px;

}


/* rule.css */

■paddingプロパティは、指定地だけエリアを増やします。
上下左右の増量値をまとめて指定する際に使用。上下左右を異なる増量幅にしたい場合には、スペースで区切って複数の値を指定。

・指定値の数による違い
1つ指定した場合:指定値が[上下左右]の増量。
2つ指定した場合:記述順に[上下][左右]増量。
3つ指定した場合:記述順に[上][左右][下]の増量。
4つ指定した場合:記述順に[上][右][下][左]の増量。

paddingについては以下も参照して下さい。
合わせて以下も参考にして下さい。


これで上の空きはなくなります。

上図が処理結果です。続けてmenu_buttonとMain_pictureのdiv位置を指定します。

<!-- 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">

 </div>

 <div id="side_menu">

   <div class="menu_button">    

                    <!-- indexへの移動ボタン -->

 </div>

 <div class="menu_button">  

                     <!-- page01への移動ボタン -->

 </div>

 <div class="menu_button">  

                    <!-- ipage02への移動ボタン -->

 </div>

 <div class="menu_button">    

                    <!-- page03への移動ボタン -->

 </div>

 </div>

 <div id="content">

 <div id="main_picture">    <!-- main_picture宣言 -->

 </div>     <!-- main_picture宣言終了 -->

 </div>

  </div>

</body>

</html>

<!-- index.html -->


続けてcssファイルも追加編集します。
 

/* 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%;

background: #f8844e;

}


div#side_menu {

float: left;    /* 左寄せ設定

floatプロパティは、

指定された要素を左あるいは右に寄せて配置する際に使用。

直後に続く内容は、その反対側に回り込む。*/

height: 520px;

width: 25%;

background: #63dada;

}


div.menu_button {    /* class設定 */

margin: 24px auto; 

height: 100px;

width: 100px;

background: #ffffff;

}


div#content {

float: right;    /* 左寄せ設定 */

height: 520px;

width: 75%;

background: #4ff1ae;

}


div#main_picture {

margin: 24px auto;

height: 360px;

width: 480px;

background: #ffffff;

}

  

/* rule.css */


ここまでの設定でindex.htmlをブラウザで開いた状態です。正しく表示されていない場合はTabキーを活用してインデントを行い、正しくタグが対になっているかを確認します。なお、この隙間の部分はテキストを入れることでバランスが取れるので、これ以上複雑にならないように処理を省きました。

レイアウトが完成したら、<div>と</div>の間に画像やイラスト、文字などを入れていきます。