縦書きwebデザインの実現方法と環境を考える
縦書きwebデザインの作り方を試す【CSS編】
本日、唐突に縦書きサイトの話が盛り上がった。
主に和食店、旅館などが「和」を感じさせる為に利用しているに止まっているイメージなのだけど、実際に縦書きのことを考えたことがなかったので考えつつ、まとめてみる。
縦書きの実装方法
私は基本的にコードを書く方面の人間なので、まずは実装方法が気になります。
縦書き web などで検索すればいくらでも出てくるので、皆様方にはそのサイトをご覧頂くとして、大雑把にまとめておきます。
主な実装方法とブラウザ状況
縦書きを採用しているサイトがそれなりに有ることから、特に難しいことでは無いようです。主な実装方法はこの二つ。
- CSSのwriting-modeを使う
- JSやjQueryを使う
フロントエンドの問題なのでこの二つが実装方法なのは当然として、ブラウザの対応状況が気になるところです。
結論から言えば2016年12月現在、opera miniを除く最新ブラウザであれば問題無いらしい。
Can I Useは以下からどうぞ↓
Can I use... Support tables for HTML5, CSS3, etc
縦書きに関して言えば、最も遅れたブラウザはfire-fox。IEに関してはずいぶん前から独自対応していたという、珍しい展開。
では現実路線、どの程度まで対応するのがいいのか?というのをはっきりさせておきたいですね。
PCブラウザ対応状況
IE 6〜
EDGE 12〜
fire-fox 41〜
chrome 8〜
safari 5.1〜
opera 15〜
モバイルブラウザ対応状況
opera on andoroid 37〜
fire-fox on android 50〜
現状、今からサイトを作るので有ればレスポンシブ対応したい!というのが多くなってくるでしょうから、その辺も併せて実験してみたいと思います。
まずはただ単純に縦書きにするCSSを書き加えてみます。
CSS:writing-modeの基本挙動
writing-modeをcssに書き込めば簡単に縦書きにはなります。
こちらの練習用htmlを使って挙動を確認します。
こんな状態ですね。
それでは、class="article" に対して以下の様にwriting-modeを書き加えてみます。
writing-mode: tb-rl;/*IE用の記述*/
-webkit-writing-mode : vertical-rl ; /*それ以外*/
値のvertical-rl、tb-rlの「rl」の部分はright to leftの指定です。
文章が右から左に流れていきます。
今回writing-modeを書き加えた対象は id="article"です。
こうなります。
簡単に縦書きになりました。
writng-modeの値のrlは、文章を右上開始で左に流れる指定ですね。
lrにするとこう。
左上が開始になり、文章が右に流れていきます。
writing-modeは親要素にかけるもの
次に、#articleの子要素である.sectionに対して同じCSSを書き込むとどうなるかを試してみます。
私は今回初めて縦書きを試すに当たってこの部分で少しだけハマってしまいました。親要素に指定するものだと知らずに手を動かしてしまったので、子要素にまずかけてみたんです。仕様書を読めばこんなことにはならないのでしょうが、まず動かす!が好きなんですよね。
すると、こうなりました!
横書きが縦に積み上がっていく(笑)
(heightはブログ上で見辛いので変更しています。)
ちなみに、この「子要素にwriting-mode」方法でなんとかならないか?を考えているうちにこんな面白い状況にもなりました。
なぜか、見出しにインデントがかかった様な感じに。
やったことは、
#articleにflexをかけ、row-reverceで右詰めにして、directionにrtlを指定。
右詰めの文章が縦になるとこうなるのでしょうか?試しにltrに変更してみると行頭に戻ったのでそうゆう事な様です。
シンプルなパララックスサイト構築のためのメモ帳 | 「webで何か」作るブログ
シンプルなパララックスサイト構築のためのメモ帳
先日、ごくシンプルなパララックスを利用したサイトを作成しました。
どのくらいシンプルかというと、
- スクリプトは2つ
- 動かすものは背景画像1つ
というこの上ないシンプルさです。
それでも、意外と見栄えが変わりますし、使い勝手もいいので残しておきます。
なお、以下の2つのサイトに非常にお世話になりました。
webにおけるパララックスとは?
パララックスとは、視差効果と訳されています。
複数の物体の距離や速度の違いなどで生じる視覚的な効果全般を言うのでしょう。
ただし、webにおいて限定するならばそんな難しいことは無く、
要素の動くスピードを変えることによる演出、効果全般という理解になるでしょうか。
それはさておき。
まずはHTMLから。
HTML
縦に並んだ3つのセクションを用意しました。
この中央、id="move"の背景画像を動かしてみたいと思います。
CSS
続いてCSSです。
各要素の高さや背景色を指定して、id="move"の背景画像も指定しました。
この状態では当然ですが動きません。
JS
基本のHTMLlとCSSができたところで、Javascriptを追加します。
追加するのは全部で3つです。
- jQueryの読み込み
- スクロール量を取得する処理
- 指定したものの移動速度を変更する処理
これで、背景画像が別の速度で動くようになりました。
ロジック
理屈としては、
- スクロール量を取得し、変数yに格納
- yに任意の数値を掛ける
- 算出された数値をCSSのbackground-positionに反映させる
ことで任意の速度設定を行なっています。
あとは、任意の位置からのイベント発火ができればかなり実践的な使い方が可能になると思います。
勉強ってやっぱり、手を動かさないと効果が出ない。
「webで何かを作る」ブログと言っても、
今は主にwebサイトを作るのだけど、そこには様々な技術があって、年齢のせいもあり、とても眺めただけでは覚えることが出来ない状態。
技術情報に触れるたびに、一つ一つ実際に手を動かして覚えるのが遠回りな様で一番いいのではないかなあと。
HTMLは5.1が始まり、CSS3も上辺だけ使える程度の状態なのにすでに4の足音が聞こえるこの状況は結構厳しいけど、少しづつ確実に伸びていこう。