「webで何か」作るブログスマートフォン用の表示で見る「webで何か」作るブログ35歳という遅すぎるスタートをなんとかする為のブログです。基本的に自分にとっての役立ちメモ。この広告は、90日以上更新していないブログに表示しています。本日、唐突に縦書きサイトの話が盛り上がった。和食店、旅館などが「和」を感じさせる為に利用しているに止まっているイメージなのだけど、実際に縦書きのことを考えたことがなかったので考えつつ、まとめてみる。私は基本的にコードを書く方面の人間なので、まずは実装方法が気になります。検索すればいくらでも出てくるので、皆様方にはそのサイトをご覧頂くとして、大雑把にまとめておきます。縦書きを採用しているサイトがそれなりに有ることから、特に難しいことでは無いようです。主な実装方法はこの二つ。CSSのwriting-modeを使うJSやjQueryを使うフロントエンドの問題なのでこの二つが実装方法なのは当然として、ブラウザの対応状況が気になるところです。miniを除く最新ブラウザであれば問題無いらしい。etc縦書きに関して言えば、最も遅れたブラウザはfire-fox。IEに関してはずいぶん前から独自対応していたという、珍しい展開。現実路線、どの程度まで対応するのがいいのか?というのをはっきりさせておきたいですね。50〜現状、今からサイトを作るので有ればレスポンシブ対応したい!というのが多くなってくるでしょうから、その辺も併せて実験してみたいと思います。単純に縦書きにするCSSを書き加えてみます。CSS:writing-modeの基本挙動writing-modeをcssに書き込めば簡単に縦書きにはなります。こちらの練習用htmlを使って挙動を確認します。対して以下の様にwriting-modeを書き加えてみます。文章が右から左に流れていきます。id="article"です。簡単に縦書きになりました。writng-modeの値のrlは、文章を右上開始で左に流れる指定ですね。左上が開始になり、文章が右に流れていきます。writing-modeは親要素にかけるもの次に、#articleの子要素である.sectionに対して同じCSSを書き込むとどうなるかを試してみます。私は今回初めて縦書きを試すに当たってこの部分で少しだけハマってしまいました。親要素に指定するものだと知らずに手を動かしてしまったので、子要素にまずかけてみたんです。仕様書を読めばこんなことにはならないのでしょうが、まず動かす!が好きなんですよね。すると、こうなりました!横書きが縦に積み上がっていく(笑)(heightはブログ上で見辛いので変更しています。)ちなみに、この「子要素にwriting-mode」方法でなんとかならないか?を考えているうちにこんな面白い状況にもなりました。見出しにインデントがかかった様な感じに。やったことは、#articleにflexをかけ、row-reverceで右詰めにして、directionにrtlを指定。右詰めの文章が縦になるとこうなるのでしょうか?試しにltrに変更してみると行頭に戻ったのでそうゆう事な様です。久しぶりのC...2017-02-08table関連のレスポンシブ対応方法メモコーポレートサイトを作る場合、<table>タグを非常に高い確率で使用し</table>...2017-01-21CSSで要素を上下入れ替える方法。[レシポンシブ対応]要素を上下で入れ替える方法。レスポンシブにも対応。»プロフィールid:pochiweb35歳という遅すぎるスタートをなんとかする為のブログです。基本的に自分にとっての役立ちメモ。見積もりワークショップに参加してきた2018年を振り返っておくサービス作りの記録:第0回(2018/7/15)月別アーカイブ参加グループプログラミングはてなブログをはじめよう!pochiwebさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。