display:table;のおさらいとCSSのセレクタの特長 2018_04_02
display:table-cell
テーブルセルを使われて、無事レイアウトができております。すごくよくできておられていてうれしいです。table-cellの使い方は問題ないと思いますが、メモ代わりに注意点をと注意点が書いてサイトをご紹介します。
vertivcal-align）を指定できる、つまり縦の方向でどちらに詰めるかということができる点がメリットだと思います。使い方としては以下の通りです。<style>
ul.nav {
display:table;
}
ul.nav li{
display:table-cell;
}
</style>
<ul class="nav">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
</ul>
親の要素navにdisplay:tableを設定して、子供であるliにdisplay:table-cellを指定すれば横並びになります。もし今回０から作成されておられない場合には、一度自分でもtable-cellを実感してみてください。
CSSのセレクタの使い方
<div id = “header”>
<p id=”daiji”>文章サンプルです</p>
</div>
上記のHTMLがある場合、「文章サンプルです」の文字の色を変更したいとします。
その場合、のセレクタの例です。
p#daiji{
color:#FF0000;
}
この時に、pと#daijiの間を空けてはいけません。
p#daijiというように、間を空けないで記述してください。
なぜなら、もしpと#daijiの間を空白を入れて以下のように
指定したとしたら…
p #daiji{
color:#FF0000;
}
このCSSが適用されるには以下のようなHTMLでなければいけません。
<div id = “header”>
<p><span id=”daiji”>文章サンプルです</span></p>
</div>
つまり、pの後にスペースを入れると、完全にpタグに囲われている中に
別のタグを使って囲い（今回でいえばspan）その中にidを指定しなければいけません。
よく間違う点でありますので気をつけましょう。
――――――――――――――――――――――――――――――
次回パーセント指定と理解する
レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解していきましょう。
