inline-blockなのにvertical-alignが効かない

前提・実現したいこと

ヘッダーのメニューバーを右下に配置したいのですが、
vertical-alignが効かず下に配置されません。

調べてみても、みなさんinline要素であれば問題なく効くようなので困っています。

該当のソースコード

<ul id="header">
    <li><a href="top.html">TOP</a></li>
    <li><a href="profile.html">PROFILE</a></li>
    <li><a href="photo.html">PHOTO</a></li>
</ul>

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8" />
    <!-- 検索不可 -->
    <meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW" />

    <!--　jQuery読み込み -->
    <script src="./jquery.js"></script>
    <!-- javascript読み込み -->
    <script type="text/javascript" src="./script.js">
    </script>
    <!--　CSS読み込み -->
    <link rel="stylesheet" href="../css/styleSheet1.css">

    <title>ようこそ</title>
</head>

<body>
    <!-- ヘッダ -->
    <div id="out"></div>
</body>

</html>

css
1@charset "UTF-8";
2
3/*画面いっぱいに要素を配置*/
4body {
5    margin: 0;
6    background-color: lightgray;
7}
8
9/*以下ヘッダ用*/
10ul#header {
11    position: fixed;
12    height: 10%;
13    width: 100%;
14    margin: 0;
15    background-color: black;
16    /*最前面に*/
17    z-index: 10;
18    text-align: right;
19        vertical-align: bottom;
20}
21
22#header li {
23    display: inline-block;
24    list-style: none;
25
26}
27
28#header a {
29    text-decoration: none;
30    padding: 1em 5em;
31    color: white;
32    /*横並びに*/
33
34}
35
36/*以上ヘッダー*/
37

試したこと

vertical-align: bottom;をul, li, a に順に配置
display: inline-blockをinlineに

補足情報（FW/ツールのバージョンなど）

Brackets

行動規範の内容に同意します

回答1件

ベストアンサー

vertical-alignが効くのはinline要素(訂正：あと、テーブル要素)のみとなっていますが、
今回ul heightを10%指定されている事等から、inlineにする事は難しいです。
http://www.htmq.com/style/vertical-align.shtml

また、alignを適用できない以上、aタグの上下調節はpaddingやmarginとなってきますが、
#header aのpadding: 1em 5em;が部分的に効いてない為と思われます。
top以降が配されているのはaタグですので、inline-blockにもしすべきはaタグではないでしょうか?

CSS
1
2ul#header {
3    display: inline-block;
4    position: fixed;
5    height: 10%;
6    width: 100%;
7    margin: 0;
8    background-color: black;
9    /*最前面に*/
10    z-index: 10;
11    text-align: right;       
12}
13
14#header li {
15    display: inline-block;
16    list-style: none;
17}
18
19#header a {
20    display:inline-block;
21    text-decoration: none;
22    padding: 0.5em 5em;
23    color: white;
24    /*横並びに*/
25}
26

投稿2018/10/13 10:05

編集2018/10/13 14:22

hectopascal1013

総合スコア466

Tazusa

2018/10/13 10:51

ご回答ありがとうございます。 marginやpaddingの調整でやるしかないとのことでしたので、理想の位置に近づくように調節したいと思います。＞今回ul heightを10%指定されている事等から、inlineにする事は難しい ulをdivで囲ってそのdivの部分にheightを設定し、aタグにはinline-block＋vertical-alignという方法は divを多用しすぎてよくないといったことがあるのでしょうか。

hectopascal1013

2018/10/13 12:50

そもそも何故ulを選んでいるかというと、一般的にメニューのfloatの関係もあると思いますが、もし多用が行けないと感じられるなら、ul以前にdivにしてしまうという方法、10%指定ではなくて、pxで指定してやる方法などもありますが、全体思想に結果が左右されてしまいますので、部分的な改変によらず、全体を大幅に改変してやる必要性は出てきます。どちらが手間かを考えて、省力できる方で。最近のワイヤーフレーム化の流れは、こうした設計思想の段階での手間を省く意味がありますかね。marginやpaddingで処理するのを取るか、alignで指定するのを取るかは、方法論の違いになってきますので。ただ、ブラウザ間やOS間での表示の違いを極力なくす事を考えると、marginなどで処理するのが多いかなぁとも思います(個人的印象論)。かなり理解を精通していないと、その辺の選択が正解かどうかも結構厳しいです。

Tazusa

2018/10/14 13:59

実務で使用したことがないため非常に参考になります。まだCSSについては勉強を始めたばかりですが、今後勉強を進めて経験を積んでいきたいと思います。ありがとうございました。

行動規範の内容に同意します