ボックスデザインについて理解しよう１

class と　id と

CSSの書き方

飯田いいとこまずこれを準備して下さい
a8.zip へのリンク←これを解凍しても準備できます。

その１　<タグに対して>

CSSを書くには、一つ目に
＜ｈ１＞や＜ｐ＞などのタグにそのままつけるCSS（次のようなものがあります。）
h1{
    text-align: center;
}

その２　<div>に印をつけて

<div>にマークをつける方法があります。
こらは２通り方法があります。
まずHTMLでマークをつけて
h1{
    <div class="hoge1"><div>   <!--クラス-->
    <div id="hoge2"><div>      <!--ＩＤ-->
と指定して、ＣＳＳに 

    .hoge1{}         <!--クラス用にはドット-->
    #hoge2{}        <!--ＩＤ用にはシャープ-->
　　
とします。
IDはHTMLの中で１回だけ使うときに使用します。
CLASSは、ＨＴＭＬの中で何回でも使えます。
この3つで、それぞれ中の文章や写真などを箱の中に入れます。
箱に入れて、その箱をデザインすることでページのデザインしようというわけです。
どう使うかの具体例は、今後出てきます。この３つを頭に入れておいて進めましょう。

回りの枠を取り除く（準備）

前回までに作ったヘッダーとフッター
よく見ると、ヘッダーの上下左右にすきまがあるのが見えませんか。
普通のページはこれでいいのです。これがブラウザによるディフォルトのＣＳＳの設定です。
大きな箱に文章などを入れていくわけですが、最初の大きな箱の外側にすきまをつけてある。
でもこれから作るページは画像を全面にはりたいと思っています。
そこで、これを取り除きたい。
新しくCSSを書くことで、これが優先され、回りのすきまが取り除けます。
まず、HTMLに

       <body id="index">
　　
等とIDでマークをつけます。
次にCSSでindexIDに、マージンを０に指定します。
ここでIDを使っているのは、ページ全体にHTMLで<body ID="index">としてあって、ページ全体にかける設定で、ここ１回使うだけだからです。他にページを作っても使わない。１回だけけ使うのはIDです。
@charset "utf-8";

#index{
    margin: 0;
}
最初の行はキャラセットとかよみます（キャラクタセットの略）言語指定です。。UTF-8で書くのが今の世界標準です。(2019)
マージンって何だろうっていうのは、すぐわかります。

ボックスモデル

CSSのデザインは、ボックスで考えます・
<p>（段落タグ）も<h1>(見出しタグ)も<div>(ブロックを作るタグ)も<ul>（リスト用タグ）も長方形の枠、ブロック（箱）でできていると考えるのです。
これらをブロックレベル要素といいます。

CSSは、この枠をいろいろにデザインしたり、いろいろに並べることでデザインするのです。

マージンとボーダーとパディング

それぞれのボックスは、パディングとボーダーとマージンとで、出来ています。
コンテンツを取りまく、余白をパディングと不透明な余白をパディングといいます。

まず、文字などの回りに、パディング、詰め物があります。
肩パッドなんて知ってますか、このパッドと同じで詰め物とかいう意味です
文字の回りにすぐ枠があると読みにくい、そこで何かをつめてすきまを空けるのがパディングです。
指定しないと透明ですが、色をつけることも透明度をつけることも出来ます。
上下左右の幅を指定できます。
見えるようにしてみましょう。
background-color: palevioletred;
すると濃いピンクの色がつきます。
（ｂｌａｃｋｅｔｓだとその回りに薄い青い枠が見える、これがマージンです。）
次にあるのがボーダー。
ボーダーラインとかいうでしょう、境界線をあらわします。
デフォルトでは０ｐｘで太さを指定しなければ現れません。
border: 10px solid blue;
こうすると、境界線が現れます。
一番外側にあるのがマージン。
margin: 10px;
こうすると外側のすきまがなくなります。
マージンというのは手数料という意味もありますが、余白という意味もあります。
これは透明です。
ボックスとボックスが隣り合って、マージンが隣り合うと、重なって大きい方の一方マージンが現れます。

h1{
/* ｈ１が見えるように色をつける*/
    background-color: palevioletred;  
/* パディング（詰め物の大きさ・字の回りのすきま）を変える*/
    padding: 20px 30px 40px 50px;    
/*　ボーダー（境界線の幅と線の種類と色　一つ一つ指定も出来る*/
    border: 10px solid blue;
/* マージン　隣のボックスとの幅、すきままたは余裕*/
    margin: 10px;    
/* h1の幅*/
    width: 300px;
/* テキストをh1等の箱の真ん中へ移動する*/
    text-align: center;
}
h1の幅を指定してみましょう。 それから、文字をｈ１（見出し）の中心に持ってきてみましょう。
パディング（すきま）の幅の指定方法は色々あって、
４つ書くと上、右、下、左と時計回りで指定することになる。
padding: 20px 30px 40px 50px;
2つ書くと、上下、左右の指定になります。
padding: 20px 30px;
１つだけだと、上下左右同じ幅に指定できます。
padding: 20px;
下だけ指定とか、左だけ指定とか、色々あります。

マウスが重なったとき

これは、リストへマウスが重なったときの指定です。
意味を考えてみましょう。
.nav2 li a:hover{
    color: white;
    border-bottom:solid;
    border-color:#FFFFFF;
    border-width:3px;
}

ボーダーは、線の幅と、普通の線（点線などではない）と色を指定しています。
border-bottom:solid;　は、下の枠線を点線でなく実線で記せという意味です。下の線だけ等と指定できるのです。
border-bottom: 3px solid #ffffff; とまとめることもできます。
最後に、マージン。１回だけの指定ですから、マージンは上下左右同じです。

もどりますが、最初の「マージン：０；」で表示のすきまがなくなったのはなぜでしょう？
#index{ margin: 20px; border 10px; } 等としてみると分かります。 これで、ボックスモデルの基礎が出来ました。
これを数個つくってその並べ方は・・・又後で。
そういえば、ヘッダーもフッターもボックスで出来ていたから、高さなどを指定できたんですね。
　飯田いいとこできあがったHTMLとCSSはここから取って下さい。

次の問題へ進む