CSS

CSS display: プロパティについて

## display: block;
・要素が、横幅いっぱいに広がり、縦にならんでいく。縦に並ぶとき、改行が必ず入る

例)div, p,ul, li

・要素の高さ・幅が指定できる
・要素の上下左右のmargin, paddingを指定できる
・要素の中央ぞろえに、text-align: center は使えない
【HTML】
<p class=”block1″>テキスト1</p>
【CSS】
.block1{
    text-align: center;
}
## display: inline
・要素が横に並ぶ。前後に改行は入らない主に文中の装飾に用いられる
例)a, span, img
・block要素の中に入れて用いられるのが一般的
・幅と高さを指定できない。タグの中の画像の大きさ、フォントサイズ、テキストの長さで幅と高さが変わる
・左右の余白(padding, margin)は指定できる。
・上下の余白(padding, margin)は指定できない。
・text-align が指定できる。但し、対象の要素の親要素に対して指定する必要がある。
【HTML】
<div class=”example”>
    <span>inline</span> /* div要素の幅の内で中央寄せされる
</div>
【CSS】
.example{
    text-align: center; /* 中央寄せしたい要素の親要素に対して指定 */
}
span{
    background: skyblue;
}
## display: inline-block
・blockとinlineのいいとこどり。具体的には、
・blockのいいとこ:要素の高さ、幅が指定できる
                                  要素の上下左右のmargin. paddingが指定できる
・inlineのいいとこ:要素が横に並ぶ
                                  text-alignが指定できる
・使いどころ・・・基本的には、要素を横一列に複数並べたいときに使う
【HTML】
<div id=”nav”>
    <ul>
          <li>HOME</li>
          <li>HTML</li>
          <li>CSS</li>
    <ul>
</div>
【CSS】
#nav ul{
    list-style-type: none;
    text-align: center; /* 左右中央寄せは、親要素に指定する決まり、なお、li要素がdiv要素の中央に来るようになり、文字はli要素の中央に来るようになる*/
}
#nav ul li{
    display: inline-block; /*liをinline-block要素とする */
    width: 80px;
    height: 40px;
    padding: 10px 0;
    margin: 10px 0;
    vertical-align: middle;
    background: skyblue;
    font-weight; bold;
    color: white;
}