右から左へ縦書きで並べたい。

実現したいこと

@media screen and (min-width: 768px),の条件で
右から左へ縦書きで
『あなたは知ってる？＜改行＞
蓼科を丸ごと味わう＜改行＞
喜びを』

と並べたいが、
『喜びを＜改行＞
蓼科を丸ごと味わう＜改行＞
あなたは知ってる？』

と左からに配置されてしまいます。
自分なりに調べましたがちっともわからないので
お分かりの方おられましたら宜しくお願い致します。

前提

https://www.webcreatorbox.com/tech/writing-mode
ネットで調べて試しました。
writing-mode: vertical-lr; vertical-rl;　どちらも変わらなかったです。

該当のソースコード

HTML
1<header class="header">
2        <div class="header__inner">
3            <div class="header__ttl">
4                <span>あなたは知ってる？</span>
5                <span>蓼科を丸ごと味わう</span>
6                <span>喜びを</span>
7            </div><!-- /.header__ttl -->
8
9        </div><!-- /.header-inner -->
10
11    </header><!-- /.header -->

SASS
1.header {
2    position: relative;
3}
4.header__inner {
5    background: $c_contact url(../img/fv.jpg) no-repeat center center/cover;
6    height: 85vh;
7    padding: 120px 30px;
8    margin-left: auto;
9    margin-right: auto;
10    .header__ttl {
11        margin-bottom: auto;
12    }
13    .header__ttl >span {
14        background: #fff;
15        padding: 7px;
16        font-size: clamp(24px,2.8vw,32px);
17        display: block;
18        line-height: 1;
19        font-weight: 700;
20        max-width: 230px;
21        margin-top: 6px;
22        &:last-child {
23            max-width: 86px;
24        }
25    }
26}
27
28
29
30@media screen and (min-width: 768px),
31    print  {
32    .header__inner {
33        height: auto;
34        height: 100vh;
35        text-align: right;
36        .header__ttl >span {
37            vertical-align:top;
38            background: #fff; 
39            -webkit-writing-mode: vertical-rl;
40            -ms-writing-mode: tb-rl;/* IE,Edge用 */
41            writing-mode: vertical-rl; /* Chrome,Safari,Opera用 */
42            text-orientation: upright;
43            display: inline-block;
44            padding: 0 15px;
45            letter-spacing: 0.5em;
46            margin-top: 0;
47            margin-left: 21px;
48            max-width: 432px;
49        }
50    }
51}

試したこと

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

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

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

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

回答2件

writing-mode: vertical-rl; を .header__ttl >span ではなく .header__ttl か .header__inner に付けてください。

投稿2023/04/27 08:24

int32_t

総合スコア20884

spn

2023/04/27 10:42

一番早く教えてくださりありがとうございました。訂正したら思うようなデザインになりました。感謝いたします。

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

ベストアンサー

writing-mode: vertical-rl;を設定するのは行(span)ではなくその親要素(.header__ttl)です。
これで親要素のテキストが右から左へ縦書きになります。
あと、親要素(.header__ttl)の幅を100%にする必要があります。

css
1@media screen and (min-width: 768px), print {
2  .header__inner {
3    height: auto;
4    height: 100vh;
5 //   text-align: right; 削除
6    .header__ttl { //こちらに移動
7        -webkit-writing-mode: vertical-rl;
8        -ms-writing-mode: tb-rl; /* IE,Edge用 */
9        writing-mode: vertical-rl; /* Chrome,Safari,Opera用 */
10        text-orientation: upright;
11       width: 100%; //追加
12      > span {
13        vertical-align: top;
14        background: #fff;
15//        display: inline-block; 削除
16        padding: 0 15px;
17        letter-spacing: 0.5em;
18        margin-top: 0;
19        margin-left: 21px;
20        max-width: 432px;
21      }
22    }
23  }
24}
25