ヘッダーとCSS

ヘッダーにリストをつけよう

ヘッダーにリストをつけたい

飯田いいとこ←これを準備して下さい。(main.cssとindex.html)
a5.zip へのリンク←これを解凍しても良いです。
では
ヘッダーの中にリストをいれましょう。
<ul></ul>の間がリストです。これは「unordered list(順序がないリスト)」で、順番のあるリストもあります。
そして<li></li>の中がリストの中身です。

      <header>
        <div class="logo">
        <a href="index.html"><img src="title-logo.png" width="154" "28" alt="いいだにおいで"></a>
        </div>
        <ul>      
            <li>春の桜</li>
            <li>夏の山</li>
            <li>秋の祭り</li>                
            <li>冬の・・</li>
        </ul>
   
次にリストをマークします
リストは、 <div class="nav"><div>で囲んで、クラスとしてマークしておきます。
 
        <div class="nav">
        <ul>      
            <li>春の桜</li>
            <li>夏の山</li>
            <li>秋の祭り</li>                
            <li>冬の・・</li>
        </ul>
        </div>
 
するとリストが以下のように表示されます。
重なっていて変ですね。


これをCSSでまず真ん中にしましょう。

navとつけたマーク、セレクタに、CSSでプロパティを書いていきます。
まず、navと名前をつけたUL(なび)を真ん中に寄せます。
centerが真ん中です。rightとすると、場所が変わるでしょうか。やってみましょう。
  
.nav ul {
    margin-top: 0px;  
    margin-bottom: 0px;
    text-align: center;
} 
1行目2行目に変なのが入っていますが、これは後から説明があるでしょう。
マージン、すなわち余白を「ほんのちょっとにしなさい」と書いておかないと間が開いてしまうのです。



次に横一列にします。

2行目は、一列にしろっていう命令だと思って下さい。
  .nav ul li {
    display: inline-block;
    margin: 0px 5px 0px 5px;
} 
3列目は、文字の上、右、下左にマージン(余白)を0,5ピクセル、0、5ピクセル取れということです。
数字をかえてみて下さい。間が開きます。

これで整いました。
幅を狭くしたときの表示を変えたいとかまだまだいろいろできそうですが、これまで。
深入りしすぎた・・・・気がします。

こうする方法は色々ある

横一列の中央寄せの方法は色々あります。
そしてどんどん変わっていく。
これはその一つの方法です。
分からないときは調べればいい。
こんなことができるってわかって、書き方が分かればいいのです。
作成したページのCSSを見るには次のようにします。
飯田いいとこ
これを開くとページが見られる。
右クリックででる「ページのソースの表示」を開いて
ソースの中の「css」と書いてあるところを探して、クリックするとCSSが見られる。
こんな技術も覚えておきましょう。
(私はFirefoxを使っています。グーグルクロームでも出来ますが、出来ないブラウザもあるようです。)
次の問題へ進む