ga-05-m3

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

【 HTML/CSS逆引き辞典 】
レイアウトに欠かせない
blockとinlineとinline-block

A.block、inline、inline-blockの比較
block、inline、inline-blockは、displayプロパティの取ることのできる値です。「divタグ、pタブはblock」、「spanタグ、aタグはinline」というようにタグごとにdisplayプロパティの初期値は決まっています。ほとんどのタグはblockもしくはinlineが初期値となっています。inline-blockは、blockとinlineの中間の性質をもっています。
block、inline、inline-blockは、改行、並び方、余白の指定、幅・高さの指定、テキストの中央設定が各々違います。この違いを理解しておくことは、ホームページのレイアウト作成にとって大切です。

【block、inline、inline-blockの比較表】

画像

B.inline-blockのサンプル(ナビゲーション)
inline-blockは、block要素を横並びにしたいときに良く用いられます。当ホームページのメインナビゲーションで使っています。簡単な横並びのナビゲーションをサンプルとして作成しました。

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
   inline-blockのサンプル
     ナビゲーション アイテムの横並び
=====================================-->
<html>
<head>
      <meta charset="UTF-8">
      <title></title>
      <link rel="stylesheet" href="style-1.css">
</head>
<body>
    <nav class="navi">
        <ul class="navi-list">
            <li class="navi-item">ホーム</li>
            <li class="navi-item">内容1</li>
            <li class="navi-item">内容2</li>
        </ul>
    </nav>
</body>
</html>
        
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
    inline-blockのサンプル
     ナビゲーション アイテムの横並び
--====================================*/
.navi {
  font-size: 18px;
  width: auto;
}
.navi-list {
  text-align: center;
}
.navi-item {
  display: inline-block;
  padding: 5px 10px;
  margin: 10px;
  width:80px;
  color: white;
  font-weight: bold;
  background-color: darkblue;
}
        
ワンポイント

ナビアイテムに「display: inline-block」を指定することによってナビアイテムが横並びになる。

 back
pagetop
 next

外側余白(margin)と
内側余白(padding)

inlineとblockと
inline-block

ビューポートと
メディアクエリ
の使い方

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