ga-05-n3

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

【 HTML/CSS逆引き辞典 】
レスポンシブ対応
ul、liを使った ボックスの折り返し

メインナビゲーションに箇条書き(ul、li)を使った折り返しのサンプルです。

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
    ul、liを使ったボックスの折り返し
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
<!--====================================
      ナビゲーション
=====================================--> 
<nav class="f-main-navi">
    <ul class="f-main-navi-list">
        <li class="f-main-navi-item">
            ガイダンス</li>
       <li class="f-main-navi-item">
            準  備</li>
        <li class="current f-main-navi-item">
            基本の基本</li>
        <li class="f-main-navi-item">
            逆引き辞典</li>
        <li class="f-main-navi-item">
            演  習 </li>
    </ul>
</nav>
</body>
</html>
    
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
   ul、liを使ったボックスの折り返し
--====================================*/
.f-main-navi {
  margin: 30px auto;
  font-size: 18px;
  max-width: 700px;
  background-color: darkblue;
}
.f-main-navi-list {
  margin: 0;
  padding: 0;
  text-align: center;
}
.f-main-navi-item {
  display: inline-block;
  padding: 10px 20px;
  color: white;
  font-weight: bold;
}
    
ワンポイント

★display: inline-block;
liアイテムを折り返しする。
★padding: 10px 20px;
各アイテムごとに上下に10pxの余白、左右に20pxの余白を作る。

 back
pagetop
 next

タイトル文字の
折り返し

ul、liを使った
ボックスの折り返し

flexboxを使った
ボックスの折り返し

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken