おはようございます！！
ポートフォリオサイトの作り直しをしていて、左寄せと右寄せを混ぜたい部分がありました。
普通に、display: flex;にしても、ただ単に横並びになるだけですよね??
今回は、私が使った、CSSによる解決方法について、備忘録として、まとめてみたいと思います！！
やりたいこと
今回は、サイトタイトルを左寄せに、ページナビゲーションを右寄せにしたいと思っています。
例えば、Qiitaのように...
※あくまで、イメージです。Qiitaでは、今回の解説とは、別のやり方を採用しているようです！！
最初の状態
では、まず、最初の状態、スタート地点を確認してみましょう。
こんな感じになっています！
タイトル(「サイトタイトル」)とナビゲーション部分が縦に並んでいますね！
コードは以下のような状態です。
<body>
<div class="titleArea">
<h1>サイトタイトル</h1>
<div class="navi">
<a>ABOUT</a>
<a>SERVICE</a>
<a>PRICE</a>
<a>BLOG</a>
<a>CONTACT</a>
</div>
</div>
</body>
.navi a:nth-child(n+2) {
padding-left: 10px;
}
ページナビゲーションなので、aタグで記述しております。
:nth-childについては、こちらで解説しております！
この状態から、サイトタイトルとナビゲーション部分を横並びにし、かつ、左寄せと右寄せを混在させていきます！
とりあえず解決方法
ひとまず、解決できた方法をお見せします！
.titleArea {
display: table;
width: 100%;
}
h1 {
display: table-cell;
text-align: left;
}
.navi {
display: table-cell;
text-align: right;
}
横並びにするので、「display: flex;を使えば良いのでは？」と思われるかもしれませんが、左寄せと右寄せを混在させることができないので、残念ながら、使えません...
そのかわり、今回、display: table;を使って解決しました。
この方法について簡単に解説してみます！
display: table;って...？
はい、これはズバリ、そのままです！(笑)
HTMLのtableタグのようなスタイルになります。
MDNでもかなりざっくりした説明が...
- table
- HTML の
要素と同じように動作します。これは、ブロックレベルボックスを定義します。 出典：MDN display
HTML上で、tableタグを使って記述したわけではないのですが、tableのように、要素を扱うことができるようになるんですね。
そもそも、HTMLで、テーブルを構成するとき、テーブルの中身を記述するためには、thタグやtdタグが必要でしたよね！今回の内容で仮に、「テーブルを作る」と考えてみてください。
このようなコードになるかと思います。
※borderは、わかりやすいように付けています。
※解説のため、ABOUT以降の内容は、スペースで間隔をとって、1つのtdタグでまとめています。<table> <tr> <td>サイトタイトル</td> <td>ABOUT SERVICE PRICE BLOG CONTACT</td> </tr> </table>
上記が、今回の内容をtableタグで、テーブルにした状態です。
tdタグで内容を記述し、きちんと横並びになっていますよね？...これを、CSSでできるのが、display: table;なんです！！テーブルを作る場面ではなくても、HTMLでtableタグ書いて、tdタグ書いて〜ってしなくても、テーブルと同じような状態を再現することができるんです！
これを使うことによって、display: table;指定された親要素の中身(子要素)を、左寄せにしたり、右寄せにしたり、できるようになります。先程の解決できた方法のコードをもう一度振り返ってみてください。
親要素titleAreaクラスに、display: table;が指定されています。
そして、中身の子要素h1やnaviクラスには、display: table-cell;と言うものが指定されていますね。
この、table-cellがテーブルを構成する、tdにあたります！！HTMLにおいて、tableタグの中で、tdを複数並べても、それらは、CSSでdisplay: flex;と指定しなくても、横並びになりましたよね！
今回の解決策でも、display: table-cell;と指定した子要素を複数並べると、それらは、横並びになります！
これで、1行にし、横並びにするところまでは、できました！左寄せと右寄せをやってみる！
この段階で、サイトタイトルとナビゲーション部分が横並びになりました。
最後は、ナビゲーション部分だけを右寄せにする方法についてです。
※サイトタイトルに関しては、最初から、左寄せになっているため、説明を省きます。先程の解決できた方法のコードにて、h1やnaviクラスといった子要素たち(テーブルでいうtd)のスタイル指定にて、text-alignが指定されています。
右寄せにしたいナビゲーション部分、つまり、naviクラスには、text-align: right;が指定されています！
ここで、右寄せにしてされているのです！
横並びにしたい要素たちを、テーブルに見立てることで、簡単に、1行に左寄せと右寄せを混在させることに成功します！！
こんな感じに！
「本当にテーブルみたいになっているのか？」「実は、marginで間隔空いてるんじゃないか？」と思うかもしれません！
以下の画像は、あえて、borderを付けてみた状態です！
HTML上で、tableタグを使って記述してみた結果の拡大版みたい感じになりましたね！
この状態だと、どのように、text-alignが効いているのか、わかりやすいですね！
子要素をそれぞれtdに当てはめて考えてみると、tdの中で左寄せ、右寄せになっていると言うことになります！おまけ
実は、今回の方法を使うことで、1行に、左寄せ・中央寄せ・右寄せの3種類を混在させることも可能です！
やり方は、簡単。中央寄せにしたい要素に、display: table-cell;を指定して、text-align: center;にするだけ！こんな感じに！
※「SNSはこちら！」という要素を追加しています。
最後に
拙い説明でしたが、お読み頂きありがとうございました！
修正点や、補足などございましたら、コメントを頂けますと、嬉しいです！！参考資料