縦書き
レイアウト
とＣＳＳ
テクニック
たてよこWebアワード2017サイトの制作を事例に解説します。
縦書きレイアウトに使用するCSSプロパティ
見出しや文章を縦書きにする際に使用する主なプロパティは以下になります。
| 書式 | 解説 |
|---|---|
| writing-mode: 値; | 縦書き・横書きを指定する |
| column-count: 値; | カラム数を指定する |
| column-gap: 値; | カラムの間隔を指定する |
| display: 値; | 要素の表示形式を指定する |
| height: 値; | 高さを指定する |
| text-align: 値; | 行揃えの位置・均等割付を指定する |
縦書きの中央寄せ
縦書きの見出しや本文を中央寄せにする場合、ブロック要素のままだとEdge（エッジ）などの一部のブラウザで中央寄せにはならないので「display: inline-block;」を活用すると良いです。また縦書きの文章には、高さを指定することも重要です。
また、文字のカラム数は「column-count」でそのカラムとの空きは「column-gap」を指定して調整すると綺麗にそろえることができます。「column-width」は縦書きの場合、高さを指定しているため出番はありません。このプロパティはレスポンシブなどでカラム幅を指定する際に使用します。
以下は縦書きレイアウトの中央寄せを想定したCSSの記述とそれに対するマークアップ方法です。
.box {
text-align: center;
}
.exp {
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
-webkit-column-count: 数値;
-moz-column-count: 数値;
-ms-column-count: 数値;
column-count: 数値;
-webkit-column-gap: 数値;
-moz-column-gap: 数値;
-ms-column-gap: 数値;
column-gap: 数値;
display: inline-block;
height: 数値;
text-align: left;
}
<div class="box">
<div class="exp">
<p>文章が入ります～…</p>
<p>文章が入ります～…</p>
</div>
</div>
例）2カラム、カラム空き30px、高さ500pxの場合
日本語組版において、縦書きと横書きの選択肢があるということは極めて自然なことですが、Webサイト制作の中で自由な組版を実装するための技術はこれまで標準化されておらず、縦書きの実装はJavaScript等による強引な手段でしか実現できないという問題を抱えていました。
私たち『縦書きWeb普及委員会』は、縦書きと横書きが混在する日本語組版の文化をWebに継承し、自由な組版を実装するための規格をWeb標準とすべく、Webに関連する各種技術の国際標準化団体であるW3Cと協議を重ねながら、CSSにおける新たな組版規格である〝Writing Modes〟の標準化に向け、様々な取り組みを行なっています。
『たてよこWebアワード』は、こうした取り組みのひとつとして、CSS Writing Modesを用いた縦書き実装の指標となるような優れたWebサイトを表彰することを目的としたアワードです。
縦書きによってWebに新たな化学反応を引き起こす、そんな作品の応募をお待ちしています。
例）3カラム、カラム空き30px、高さ500pxの場合
日本語組版において、縦書きと横書きの選択肢があるということは極めて自然なことですが、Webサイト制作の中で自由な組版を実装するための技術はこれまで標準化されておらず、縦書きの実装はJavaScript等による強引な手段でしか実現できないという問題を抱えていました。
私たち『縦書きWeb普及委員会』は、縦書きと横書きが混在する日本語組版の文化をWebに継承し、自由な組版を実装するための規格をWeb標準とすべく、Webに関連する各種技術の国際標準化団体であるW3Cと協議を重ねながら、CSSにおける新たな組版規格である〝Writing Modes〟の標準化に向け、様々な取り組みを行なっています。
『たてよこWebアワード』は、こうした取り組みのひとつとして、CSS Writing Modesを用いた縦書き実装の指標となるような優れたWebサイトを表彰することを目的としたアワードです。
縦書きによってWebに新たな化学反応を引き起こす、そんな作品の応募をお待ちしています。
縦書きの右寄せ・左寄せ
縦書きレイアウトの右寄せ・左寄せに関しては複数の指定方法がありますが、上記で説明した中央寄せのCSS指定から「text-align: center;」を変えるだけでも変更する事が可能です。
例）左寄せ。3カラム、カラム空き30px、高さ500pxの場合
.box {
text-align: left;
}
日本語組版において、縦書きと横書きの選択肢があるということは極めて自然なことですが、Webサイト制作の中で自由な組版を実装するための技術はこれまで標準化されておらず、縦書きの実装はJavaScript等による強引な手段でしか実現できないという問題を抱えていました。
私たち『縦書きWeb普及委員会』は、縦書きと横書きが混在する日本語組版の文化をWebに継承し、自由な組版を実装するための規格をWeb標準とすべく、Webに関連する各種技術の国際標準化団体であるW3Cと協議を重ねながら、CSSにおける新たな組版規格である〝Writing Modes〟の標準化に向け、様々な取り組みを行なっています。
『たてよこWebアワード』は、こうした取り組みのひとつとして、CSS Writing Modesを用いた縦書き実装の指標となるような優れたWebサイトを表彰することを目的としたアワードです。
縦書きによってWebに新たな化学反応を引き起こす、そんな作品の応募をお待ちしています。
例）右寄せ。3カラム、カラム空き30px、高さ500pxの場合
.box {
text-align: right;
}
日本語組版において、縦書きと横書きの選択肢があるということは極めて自然なことですが、Webサイト制作の中で自由な組版を実装するための技術はこれまで標準化されておらず、縦書きの実装はJavaScript等による強引な手段でしか実現できないという問題を抱えていました。
私たち『縦書きWeb普及委員会』は、縦書きと横書きが混在する日本語組版の文化をWebに継承し、自由な組版を実装するための規格をWeb標準とすべく、Webに関連する各種技術の国際標準化団体であるW3Cと協議を重ねながら、CSSにおける新たな組版規格である〝Writing Modes〟の標準化に向け、様々な取り組みを行なっています。
『たてよこWebアワード』は、こうした取り組みのひとつとして、CSS Writing Modesを用いた縦書き実装の指標となるような優れたWebサイトを表彰することを目的としたアワードです。
縦書きによってWebに新たな化学反応を引き起こす、そんな作品の応募をお待ちしています。
縦書きの均等割付
横書き同様に縦書きでも均等割付を指定することが出来ます。
例）均等割付。3カラム、カラム空き30px、高さ500pxの場合
.exp {
text-align: justify;
text-justify: inter-ideograph;
}
日本語組版において、縦書きと横書きの選択肢があるということは極めて自然なことですが、Webサイト制作の中で自由な組版を実装するための技術はこれまで標準化されておらず、縦書きの実装はJavaScript等による強引な手段でしか実現できないという問題を抱えていました。
私たち『縦書きWeb普及委員会』は、縦書きと横書きが混在する日本語組版の文化をWebに継承し、自由な組版を実装するための規格をWeb標準とすべく、Webに関連する各種技術の国際標準化団体であるW3Cと協議を重ねながら、CSSにおける新たな組版規格である〝Writing Modes〟の標準化に向け、様々な取り組みを行なっています。
『たてよこWebアワード』は、こうした取り組みのひとつとして、CSS Writing Modesを用いた縦書き実装の指標となるような優れたWebサイトを表彰することを目的としたアワードです。
縦書きによってWebに新たな化学反応を引き起こす、そんな作品の応募をお待ちしています。
縦書きの禁則処理
横書き同様に縦書きでも禁則処理を指定することが出来ます。
例）禁則処理。word-breakプロパティ
.wbreak-normal { word-break: normal; background-color: #90ee90; }
.wbreak-keep-all { word-break: keep-all; background-color: #90ee90; }
.wbreak-break-all { word-break: break-all; background-color: #90ee90; }
word-break:normal;の場合
He who runs after two hares will catch neither.
二兎を追う者は、 一兎をも得ず
word-break:keep-all;の場合
He who runs after two hares will catch neither.
二兎を追う者は、 一兎をも得ず
word-break:break-all;の場合
He who runs after two hares will catch neither.
二兎を追う者は、 一兎をも得ず
縦書きレイアウトとbackground-clipプロパティ
たてよこＷｅｂアワード2017の制作に当たっては、文字に対してマスクを使用したアニメーションにチャレンジしました。「background-clip」自体は比較的新しいブラウザであれば対応されていると思い検証しましたが、縦書きにすると一部のブラウザでマスクが掛らなくなり、「column-count」のカラム指定で文章が上下に別れている場合、背景が想定していた表示になりませんでした。（2017年10月時点）
CSSアニメーションによる円運動
たてよこＷｅｂアワード2017で使用しているイラストではCSSアニメーションによる円運動を取り入れています。要素単体では実現が難しいアニメーションでも入れ子にすることで再現できるようになります。
.circle {
position: relative;
background-color: #c00;
width: 150px;
height: 50px;
transform-origin:0 50%;
animation: circleBase 5s linear infinite;
}
.cont {
position: absolute;
right: -25px;
top: 0;
width: 50px;
height: 50px;
background-color: #ccc;
animation: circleInner 5s linear infinite;
}
@keyframes circleBase {
0% {transform: rotate(0deg)}
100% {transform: rotate(-360deg)}
}
@keyframes circleInner {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
<div class="circle">
<div class="cont"></div>
</div>
