HTML
CSS
備忘録
新人プログラマ応援

いつもなんとなくで使っているdisplayプロパティについて

いつもなんとなく使っているCSSのdisplayプロパティをちゃんと理解しようと思い、調べながら色々遊んでみました。

displayプロパティについて

以下のHTMLソースと一緒に見ていきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>display</title>
  </head>
  <style>
    div, span {
      border: 1px solid;
      margin: 5px;
      padding: 5px;
    }
  </style>
  <body>
      <div class="box1">
        block 1
      </div>

      <div class="box2">
        block 2
      </div>

      <span class="box3">
        inline
      </span>

      <span class="box4">
        inline-block
      </span>
  </body>
</html>

表示はこんな感じ↓↓
スクリーンショット 2018-11-05 22.58.27.png

block

縦並びに増えていく要素。
div, p, h1などはすべてblock要素です。

inline

横並びに増えていく要素。
width, heightなどのサイズの調整ができない。
a, spanなどは全てinline要素です。

inline-block

横並びに増えていく。
inlineだけどサイズの調整ができる。
inlineとblock要素のいいとこ取りな奴です。

none

非表示にします。

覚えがてらあそんでみる

とりあえず、超てきとう簡単なページをつくりました。

    <style>
    .backButton, .nextButton {
      border: 1px solid gray;
      padding: 5px;
      text-align: center;
      text-decoration: none;
      color: #000;
      background-color: #dbdbdb
    }
  </style>
  <body>
      <div class="container">
        <p class="description">文を入力してください</p>
        <textarea placeholder="ここにテキストを入力" ="name" rows="30" cols="80"></textarea>
          <a href="#" class="backButton">もどる</a>
          <a href="#" class="nextButton">次へ</a>
      </div>
  </body>

スクリーンショット 2018-11-05 23.12.44.png

テキストを入力して「次へ」ボタンをクリックするページのサンプルです。
(ボタンを押してもどこへも遷移しませんが)

ボタンをテキストボックスの下に配置したいので、ボタン2つをdiv.buttonAreaで囲んでやります。

        <div class="buttonArea">
          <a href="#" class="backButton">もどる</a>
          <a href="#" class="nextButton">次へ</a>
        </div>

スクリーンショット 2018-11-05 23.17.11.png

divはblock要素なので、下に回り込みます。よって、divに囲まれたボタン達はblock要素となり下に回り込みます。

次に、ボタンの大きさを変えたいのでwidthを設定します。

aタグはinline要素のためサイズの調整ができません。なので、CSSからボタンにinline-block要素を適用してやります。

    .backButton, .nextButton {
      border: 1px solid gray;
      padding: 5px;
      text-align: center;
      text-decoration: none;
      color: #000;
      background-color: #dbdbdb;
      /* 追加↓↓ */
      display: inline-block;
      width: 110px;
      /* 追加↑↑ */
    }

スクリーンショット 2018-11-05 23.25.46.png

うーん、なんか戻るボタンが要らなく感じてきました。
ひとまず暫定的にnoneで非表示にして、次へボタンを右に寄せときましょうか。

    .backButton {
      display: none;
    }

    .nextButton {
      margin-left: 370px;
    }

スクリーンショット 2018-11-05 23.32.17.png

いい感じですね。

ここで挙げたもの以外にも、displayはまだまだ奥深いのでもっと勉強していかないとなあ。

参考にしたサイト

https://dotinstall.com/lessons/basic_css_v3/31718