実現したいこと
@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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/04/27 10:42