和風サイトを開発しようと思い立ち、「もちろん“和風”なんだから縦書きでしょ！」と安易な気持ちで始めたのだが、かなり苦労したのでここにまとめておく。 heading（h1タグやh2タグ）やparagraph（pタグ）などの通常のテキストは、writing-modeプロパティにvertical-rlを指定するたけで簡単に縦書きにできる。 しかし、入力フォーム（inputやtextarea、select、button）はwriting-modeプロパティの指定だけでは縦書きにできなかった。 そこで、HTMLとCSSだけで縦書きの入力フォームをつくる方法をまとめる。（かなり脳筋なやり方だけど） writing-mode とは まずは縦書きにするもっとも簡単な方法であるwriting-modeプロパティについて。 writing-mode プロパティは、テキストの行のレイアウトを水平または垂直に、ブ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

2017年8月24日 CSS 日本の書籍は元々上から下、右から左という縦書きで書かれてきました。しかしWebサイトでは横書きが基本なので、縦書きを取り入れることで日本らしさやWebサイトの個性を引き立てられます。かつてのWebサイト制作では縦書きが難しく、多くの場合画像を使って表示されてきましたが、CSSでも縦書きが実装できるようになりました！今回はそんな縦書き表現に注目したいと思います！ ↑私が10年以上利用している会計ソフト！ 縦書きにするには 縦書きを設定するのはとっても簡単！縦書きにしたい箇所にCSSで writing-mode: vertical-rl; を記述します。この「vertical」が縦、「rl」が右から左（Right to Left）という意味です。 また、IE用には別の書き方になります。 -ms- というベンダープレフィックスを付け、tb-rl（上から下、右から左＝

HTMLでルビ（ふりがな）を振る方法 ルビを振るためには<ruby>と<rt>の2つタグを使います。具体的には、以下のような書き方をします。 単語の右に<rt>ふりがな</rt>を書く <ruby>で単語とふりがな全体を囲う

お早うございます！デザイナーの王です。 直感ですが、本を読む時、僕は縦書のほうが読みやすいのです。実際、人間の視野って、上下のほうが狭いそうなので、それだけ集中して文字を追いやすいと思います。何より、指でなぞりやすいのがいいｗｗ アルファベット表記が混在する場合は別ですが、基本的に縦書が好きです。 今回はタイトルの通り、ルビ付きの縦書の実装方法を紹介したいと思います。 以下は実際にWeb上で表示されたもののスクリーンショットです。 驚愕の事実！実はIEはバージョン5.5から実装されてました！ 縦書を指定する際に用いるCSS3「writing-mode」というモジュールは、な‥なんと！IE5.5から実装されてました！今はすっかり嫌われ者とされているあのIEは当時では最先端ですね！ 長い間、IE独自実装のため、新参のWeb屋にはあまり知られていない機能ではないでしょうか。 勿論、CSS3の「w

ルビの読みがなの位置は上ですね。 それを下にしたい時や自由に調整するにどうすればいいか。 css3のプロパティには ruby-position: over | right | under | left | inter-character; というのがありますが、実はこれ、Chrome では効かないんですね（下図参照: 上の方）。さあ大変。 というわけでちょっと実装方法を考えてみました🙂 出来上がりは下図の下のもの。 display:table を使います！ コードは以下。CodePen はこちら。 検証ブラウザは Chrome / Firefox / Edge です。 <div class="ruby1"> 彼の名前は<ruby>愛新覚羅溥儀<rt>あいしんかくらふぎ</rt></ruby>。 </div>/* .ruby1 */ .ruby1 { display: inline; }