「読み仮名を表現する ruby タグのマークアップやスタイリングとアクセシビリティについての考察」のご紹介| Webデザイン参考記事まとめアプデ

2023年08月11日(金)

読み仮名を表現する ruby タグのマークアップやスタイリングとアクセシビリティについての考察

0

25

5

1

日本語には漢字という難しい文字があり、未履修の漢字が含まれた文章を読むことは我々日本人にとってもなかなか困難なもの。

そういった人たちにもコンテンツを楽しんでもらえるようルビ（よみがな）を振ることは良いアプローチですし、今は殆どのブラウザがルビに対応しているため比較的簡単に実装できます。

例えば著者夏目漱石のぼっちゃんの一文をルビを振ってみると下記の様な見た目に
親譲おやゆずりの無鉄砲むてっぽうで子供こどもの時ときから損そんばかりしている。
これを担保するために必要なソースコードは下記
親譲おやゆずりの無鉄砲むてっぽうで子供こどもの時ときから損そんばかりしている。
もしも書籍一冊分のルビを振る必要があれなら非常に労力の高いものになりますが、タグの構造としてはそれほど難しくなく、現状は下記2つだけ。

ruby タグ – ルビを振りたい言葉を囲む

rt タグ – 実際のルビを囲う

...

YATのBlog

大阪でイベントなども開催されている企業WebデザイナーYatさまのブログ。Webデザイン・javascript・WordPressなどの技術的記事だけでなく、Web担当者としての目線で見た記事やフォント系の記事を公開されています。

大阪でイベントなども開催されている企業WebデザイナーYatさまのブログ。Webデザイン・javascript・WordPressなどの技術的記事だけでなく、Web担当者としての目線で見た記事やフォント系の記事を公開されています。YATのBlogの記事『読み仮名を表現する ruby タグのマークアップやスタイリングとアクセシビリティについての考察』についてまとめています。

この記事は特にCSS3・HTML5・Chrome・Firefox・safariについて書かれており、気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のYATのBlogで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとYATのBlogの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。