プログラミング学習　4日目

CSS で display: inline block; を使い、中の文字を上下中央揃えする

<ul>
    <li class="nav_li">
        <a href="#portfolio">Portfolio</a>
    </li>
    <li class="nav_li">
        <a href="#feature">Feature</a>
    </li>
    <li class="nav_li">
        <a href="#profile">Profile</a>
    </li>
    <li class="nav_li">
        <a href="#contact">Contact</a>
    </li>
</ul>

上記のHTMLがある時に、

ul {
    height: 70px;
}

.nav_li {
    display: inline block;
    line-height: 70px;
}

CSSで上記の記述をすると文字が上下中央揃えになる。（ないと上揃えになる。）

ただし、 line-height は親の要素で指定する。（指定した高さの中央に配置されるため。）

自分がやってみたらできた方法のため正式な inline-block の上下中央揃えの方法ではない可能性がある。

HTMLの <a href=""></a> のエフェクトを消す方法

a {
   text-decoration: none;
}

css に上記の内容を記述することでカーソルを合わせた際の色の変化や、下線を消すことができる。

さらに、 color プロパティで文字色を帰るとエフェクトのないテキストのままで、リンクを作成することができる。

css のnth-child について

例えば、

.class名：nthーchild(3) {

}

で指定した場合、その指定したclass名の三番目ではなく、そのclass名の要素の親要素からみて三番目の要素に反映される。

そのため、指定したclass名を基準に何番目と指定したい場合は、

.class名：nth-of-type(5)　{

}

で指定したほうがわかりやすい。