displayプロパティでよく活用される値

Tag:

「display」は表示形式を設定するプロパティです。「display」でよく活用される値を紹介します。

block inline inline-block

body要素内で使われる要素の多くは、「ブロックレベル要素」「インライン要素」「インラインブロック要素」に分類されます。それぞれの特徴は下記の通りです。

ブロックレベル要素 インライン要素 インラインブロック要素
要素 p, div, table, form, fieldset, address, blockquote, h1~h6, hr, pre, dl, ul, olなど a, em, label, span, strongなど img, input, select, textareaなど
改行 改行される 改行されない 改行されない
width ×
height ×
margin 左右○ 上下×
padding 左右○ 
上下も余白はとるが、見た目上効いてないようにみえる。
border
background

「display」プロパティを利用すると、ブロックレベル要素をインライン化などの変更をすることができます。「display:block;」でブロックレベル化、「display:inline;」でインライン化、「display:inline-block;」でインラインブロック化となります。

none

「display:none;」と指定すると要素を非表示にできます。非常に便利なのですが、検索エンジンに隠しテキストと判断され、ペナルティをうける可能性もあるようです。

table table-cell

段組みレイアウトを「float」で実現した例と「display: table」で実現した例を載せます。

「float」で実現 「display: table」で実現
html
                    <div id="container">
                        <a href="#">
                            <p>あああ</p>
                            <p>あああ</p>
                        </a>
                        <a href="#">
                            <p>いいい</p>
                        </a>
                        <a href="#">
                            <p>ううう</p>
                            <p>ううう</p>
                            <p>ううう</p>
                            <p>ううう</p>
                        </a>
                    </div>
                    
css
                    #container a {
                    float:left;
                    background-color: #D1F1CC;
                    margin: 0 10px;
                    }
                    
                    #container {
                    display: table;
                    border-collapse:separate;
                    border-spacing:10px 0;
                    }
                    #container a {
                    display: table-cell;
                    background-color: #F9DFD5;
                    }
                    
表示

上記のように、「float」で段組みレイアウトを作ろうとすると、縦の高さがバラバラになります。対して「display:table」と「display:table-cell」を利用した場合、一番縦長の高さに統一することができます。ただ、marginが効かないので、border-collapseとborder-spacingを利用して空白を確保しています。

スポンサーリンク