CSSレイアウト vol.03 | Webデザイナーを目指す人のブログ

メニューを作る

よくヘッダー領域にグローバルナビゲーションが配置されていますが、そのナビゲーションの作り方を今日は見ていきます。

幅500pxのコンテンツ領域に4つのナビゲーションメニューを設置するという内容で書いていきます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <header>
      <div class="container">
        <ul id="menu">
          <li><a href="">menu01</a></li>
          <li><a href="">menu02</a></li>
          <li><a href="">menu03</a></li>
          <li><a href="">menu04</a></li>
        </ul>
      </div>
    </header>
    <main>
      <div class="container">container</div>
    </main>
    <footer>
      <div class="container">footer</div>
    </footer>
  </body>
</html>

  .container {
    width: 500px;
  }

  ul#menu {
    list-style-type :none;
    font-size: 0;
  }

  ul#menu > li {
    display: inline-block;
  }

  ul#menu > li > a{
    display: inline-block;
    width: 125px;
    height: 40px;
    font-size: 16px;
    text-decolation: none;
    text-align: center;
    line-height: 40px;
  }

ここまででメニューの形は整いました。
ポイントとしては

li要素にdisplay: inline-block;を指定することでメニューのリストが横並びになる
メニューのリストの高さと幅を指定したい場合は、aタグに高さと幅を指定する。そうするとリストの文字だけでなく領域がクリックされる対象になる。
aタグはインライン要素なので高さと幅を指定するためにdisplay:inline-blockを指定する必要がある。
liにdisplay: inline-block;と幅・高さを指定するだけだと、メニューの間に隙間が生じるのでそのときは親要素であるulにfont-size:0;、子要素であるaに実際に使うフォントサイズを指定する（ここではfont-size: 16px;）と隙間がなくなる
メニューの文字を上下左右中央揃えにしたい場合、text-alineで左右中央にする。上下中央揃えにするときはine-heightをボックスの高さと同じにすることで、文字の部分以外の余白が上下に均等に配分される。

マウスオーバー時に背景色が変わるようにするためには:hoverをつけて色を指定します。

画像つきリストを作る

よくブログの記事一覧などで、左側にサムネイル画像、右側にタイトルと説明文というレイアウトのものをみかけます。次はそのレイアウトの作り方を見ていきます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <header>
      <div class="container">header</div>
    </header>
    <main>
      <div class="container">
        <ul id="list">
          <li>
            <div class="thumnails">
              <img src="" alt="">
            </div>
            <div class="explains">
              <h3>タイトルを入れる</h3>
              <p>記事の説明文記事の説明文記事の説明文記事の説明文記事の説明文記事の説明文</p>
            </div>
          </li>
        </ul>
      </div>
    </main>
    <footer>
      <div class="container">footer</div>
    </footer>
  </body>
</html>

  .container {
    width: 500px;
  }

  ul#list {
    list-style-type :none; 
    margin: 0;
    padding: 0;   
  }
  .thumnails {
    float: left;
    width: 100px;
  }

  .explains {
    float: right;
    width: 380px;
  }

  ul#list li {
    overflow: hidden;
  }

ここまでで左にサムネイル、右にタイトルと説明があるリストは完成です。