CSSのみで縦書きを装飾に使ったウェブサイトのデザインを実装してみたいと思い、少し触ってみましたが少ないコードで簡単に実装できるみたいです♪
デモページにある右側の箇所が、今回実装したかった縦書き部分です。
この部分には「SNSアイコン」や「問い合わせボタン」とかも設置できそうですね♪
縦書きにするには下記のコードを挿入します。
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
今回実装したのは下記のコード。
.verticalwriting {
width: 60px;
line-height: 60px;
height: calc(100vh - 143px);
font-family: 'Cinzel', serif;
font-size: calc(11px + 0.25vw);
text-align: center;
letter-spacing: 2px;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
position: absolute;
right: 0;
}
右側に寄せてコンテンツの中央の高さに配置したかったので、このようなコードになってます。
ちなみに左バージョン(文字も左向き)のデモページも作ってみました。
さっきの右向きのコードに下記を追加しています。
transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
.verticalwriting {
width: 60px;
line-height: 60px;
height: calc(100vh - 143px);
font-family: 'Cinzel', serif;
font-size: calc(11px + 0.25vw);
text-align: center;
letter-spacing: 2px;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
position: absolute;
left: 0;
transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
}
縦書きはウェブデザインの幅を広げてくれそうなので、使いこなせるようになりたいですね♪