14 ホームページ中級講座 display:flex のおさらい

Webサイト制作,ホームページ中級講座

 12  ナビゲーションの作成(CSS)でナビゲーションの横並びの記述で使ったCSSのdisplayプロパティのflexについておさらいのコード模写を行います。

練習するためのHTMLファイルの準備

動画では、「Emmet!」を使って入力が速くなる記述も行なっています。入力の記述を覚える必要がありますので、下記サイトでcheatsheet(チートシート)が閲覧できますので、一度ご参照ください

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="content">
    <header>
        <h1>Flex Box</h1>
    </header>
<nav>
<!--このulの箇所を横並びにします-->
<ul>
    <li><a href="#">box1</a></li>
    <li><a href="#">box2</a></li>
    <li><a href="#">box3</a></li>
    <li><a href="#">box4</a></li>
    <li><a href="#">box5</a></li>
</ul>
    </nav>
    </div>
</body>
</html>

動画でCSSを確認しながら入力しましょう

HTMLファイルの準備ができたら、動画を参照しながらコードを確認してみましょう。

完成イメージ

HTMLコードでは、下記のul要素内になります。

<nav>
  <ul>
      <li><a href="#">box1</a></li>
      <li><a href="#">box2</a></li>
      <li><a href="#">box3</a></li>
      <li><a href="#">box4</a></li>
      <li><a href="#">box5</a></li>
  </ul>
</nav>

ul要素に、li要素を横に並べるためのdisplay:flexを設定し、その子要素であるli要素で均等に配置するためのflexプロパティを設定します。flexプロパティは、倍率を指定する値を整数で設定できます。

nav ul{
    list-style: none;
    padding-left:0;
    display: flex;
}
nav ul li{
    flex:1;
       border-right: 1px solid #000;
    text-align: center;
}

全体のCSSコードを模写してみよう

*{
    margin: 0;
}
.content{
    width:600px;
    border:solid 1px #000;
    margin:20px auto;
}
header h1{
    text-align: center;
    background: #ddd;
}
nav ul{
    list-style: none;
    padding-left:0;
    display: flex;
}
nav ul li{
    flex:1;
       border-right: 1px solid #000;
    text-align: center;
}
nav ul li a{
    color: #f00;
    text-decoration: none;
    padding:10px 0;
    display: block;
    background: #ff0;
}
nav ul li a:hover{
     background: #000;
    color: #000;
}