Lamp 単独公演 “SONG BOOK” のツアーページを作りました。フライヤーデザインをそのまま利用し、ツアー詳細の箇所を PC 表示では縦書きを取り入れたレイアウトにしました。縦書きにする要素をにベンダープレフィックス以下の CSS を適用します。
-webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl;
スマホ表示では、横書きに戻し、PC 表示では
- 要素に display プロパティの Flex を使用し、flex-direction: column-reverse; で下から上に並ぶように変更を加えました。
display: flex; flex-direction: column-reverse;
参考リンク
縦書きサイトのWEBサイト作成については、縦書きWeb普及委員会のページが参加になります。
CSS3 Flexbox プロパティの使い方
Web Factory (ウェブ・ファクトリー) は、WEBサイト/ホームページ制作会社です。国内外のアーティスト、バンド、アイドル、アクターなどのオフィシャルサイト、特設サイトを数多く手掛けています。音楽関連のWEB制作はお任せ下さい。
