cssについて教えてください。

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
模写の最中、画像のようにtext-alignを加えるとロゴが最下部に下がりました。
自分の想像では、aquaラインの最上部に位置すると考えていたのですが、このような結果になるのは何故でしょうか？
よろしくお願いいたします。

発生している問題・エラーメッセージ

エラーメッセージ
```![イメージ説明](be5f2299edc25c438b5b172a273c85f3.png)

### 該当のソースコード

```ここに言語名を入力
ソースコード

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

タイトルには要件を記載してください。
https://teratail.com/help/question-tips#questionTips3-1
質問タグにあるものはわざわざ書かなくても伝わるので中身がないタイトルになっています。
あと、画像では見ている人がコピペできません。
テキストで、マークダウンのcode機能にてご提示ください。

Answer 1

text-align: right;というのは「中身を行ボックスの右辺に寄せる」ことを表します。
行ボックスというのはbibiyellowさんが仰るところの「aquaライン」のことです。

• text-align - CSS: カスケーディングスタイルシート | MDN

left/rightという字面にとらわれると「右辺」というのは「画面における右側」と思いがちですが、実はそうではありません。あくまで「行ボックス」の「右辺」です。

CSSには「フロー」と「書字方向」という概念があります。簡単に言えば、「要素をどの方向に詰めていくか」「文字などをどの方向から書くか」を決めるためのものです。text-alignなどのプロパティはフローや書字方向に基づいて見た目の挙動が変わります。

• CSS フローレイアウト - CSS: カスケーディングスタイルシート | MDN
• フローレイアウトと書字方向 - CSS: カスケーディングスタイルシート | MDN

普段はフロー方向が水平で書字方向が左書きなので「行ボックスの右辺」は「画面における右側」と一致してします。しかし今回の場合、縦書きで右書きになっているため、結果的に「行ボックスの右辺」が「画面における下側」の方向になっています。

もっとシンプルに「要素が時計回りに90度回転している」と考えてみるとわかりやすいかもしれません。

---

なお、縦書きにしているときはtext-alignの値をleft/rightではなくstart/endにした方が混乱しにくく、おすすめです。