Adobe認定トレーニングセンター

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

displayの使い方を理解しよう

Dreamweaver

text-align:centerをかけても真ん中にそろわない時は、displayの使い方を理解しよう

 

displayに対する値として覚えておきたい4つの値

    1. block
      (p, div,ul,h1~h6などの初期値)
    2.  

    3. inline
      (a, span,imgなどの初期値)
    4.  

    5. inline-block
    6.  

    7. none

    css displayプロパティの考え方の図

    displayプロパティの考え方の図

    順番に詳しく説明していきます。

    1.display:blockの特徴

      1. 要素は縦に並ぶ
      2.  

      3. 幅(width)と高さ(height)が指定できる
      4.  

      5. 要素の内側(padding)と要素の外側(margin)の余白の値を自由に指定できる
      6.  

      7. text-alignやvertical-alignの指定は出来ない
        故にtext-align:centerや、vertical-align:middleを指定しても、要素は真ん中に表示されない(;_;)

      block1

      2.display:inlineの特徴

          1. 文章の一部として用いられる
            (例)a, span,imgタグなど
          2.  

          3. 要素の間には改行が入らず横に並ぶ
          4.  

          5. 基本的にはdisplay:blockの中で用いられる
            逆にdisplay:inlineの中にdisplay:blockを入れることはほとんどない
          6.  

          7. 幅(width)と高さ(height)を指定できない
            テキストの長さや、文字の大きさにより幅と高さが自動で決まる
          8.  

          9. 上下の余白(padding・margin)を調整できない
            上下のpaddingは指定できるものの、paddingを大きくすると、改行されたときに前後の行とかぶってしまい、デザインが崩れてしまいます
          10.  

          11. 左右の余白(padding・margin)は自由に指定することができます
          12.  

          13. 親要素に対して指定すれば、text-alignやvertical-alignを指定することができる
            ただし、inlineの要素にtext-alignを指定するときには、親要素に対して指定する必要があります。例えば、divタグの中にあるspan要素に対して、text-alignで中央寄せしたい時は、div{text-align:center}と書く
          14.  

          15. inline⇔blockはCSSで指定すれば変えられる

          inline

          3.display:inline-blockの特徴

              1. 改行が入らず横に並ぶ
                要素の並び方はinline的で、要素の中身はblock的な性質を持ちます
              2.  

              3. 幅(width)と高さ(height)が指定できる
              4.  

              5. 要素の内側(padding)と要素の外側(margin)の余白の値を自由に指定できる
              6.  

              7. text-alignやvertical-alignを指定することができる

              inlineblock

              ソーシャルシェアボタンや、メニューバーを横に並べたい時に便利!

              ソーシャルメディアボタン
              ナビゲーションボタン

              display:blockでやろうとすると、1つ1つのボタンの間に改行が入ってしまうので、float:leftなどで対応する必要があります。
              また、inlineでやろうとすると、幅・高さ・余白を自由に指定できません。

              inline-blockを使うことで簡単に要素を横に並べることができます。

              4.display:noneとは?

              ブラウザ上で非表示になります
              レスポンシブデザインを作るときに便利です

              まとめ

              display:block, inline,inline-blockを理解すると、text-align:centerとかけても真ん中に揃わないといった疑問が解消されるのではないでしょうか

              displayプロパティの考え方の図

  • このエントリーをはてなブックマークに追加
hulu dTV

関連記事

  1. FC2ホームページ 登録からサイトのアップロード

    Dreamweaver

    FC2ホームページ 登録からサイトのアップロードまでの手順

    登録1.ユーザーとIDの登録1.「FC2ホームページ」と検索し…

人気の記事

おすすめの参考書

PAGE TOP