HTML5からの新タグ（HTML）

のうち、「ruby」と「detail」を試用してみた。

（１）ruby

ルビをふる用のタグ。
一文字ずつ振ってみると、ソースは結構うるさい感じもするけれど
見た目はこっちの方が親切かなぁ。

（ソース）

<ruby>普<rt>ふ</rt>
      通<rt>つう</rt>
      運<rt>うん</rt>
      転<rt>てん</rt>
      免<rt>めん</rt>
      許<rt>きょ</rt>
</ruby>

（イメージ）

（２）detail

簡単なものであれば、JavaScriptを併用した切替スイッチ（「a」タグ）
で表現しなくても実現可能な感触。

（ソース①）

 <h3>誕生</h3>
     <details>
         <summary>出生　※HTML5のdetailタグを試用</summary>
                  <br>
                 　XXX県YY市
      </details>

（イメージ①）

「▼」をクリックすると、「summary」タグでくくった箇所が
青い枠で囲われる様子。

この「▼」は、「smmary」タグの規定スタイルが「display:list-item」に設定されていることが理由で表示されるらしい。

なので、この「▼」部分をオリジナルアイコンにするには
「display:block」に設定すると良い…が、
FireFox以外はNGだそうなので、Chromeで閲覧する用に
「::-webkit-details-marker」疑似要素を使ってマーカー非表示にする
とのこと。

ふむふむ…実装してみる。

（ソース②）
　・HTML

 <h3>誕生</h3>
     <details>
         <summary class="timeline-content-detail">出生　※HTML5のdetailタグを試用</summary>
                  <br>
                 　XXX県YY市
      </details>

　・CSS

/*summaryタグ
　既存の「display:list-item」を取りやめて
　オリジナルアイコンを表示
*/
summary.timeline-content-detail{padding: 5px;}

summary.timeline-content-detail::-webkit-details-marker{display:none;}

summary.timeline-content-detail::before{content: url(../common/0004.png);
                                       margin: 10px;
                                       top:2px;
                                       position: relative;}

※FirefoxとChromeの両ブラウザを利用想定している場合は、
　・summary自体に「display:block」設定
　・「::-webkit-details-marker」疑似要素でマーカー非表示設定
　の併せ技で記載する。

（イメージ②）

IE11では「detai」タグが機能せずに、初期表示から
ビローンと出たままになっていた。

（IE11でのイメージ）

【出典】

http://hosonoyutori.blog134.fc2.com/blog-entry-582.html

detailsタグ、summaryタグについて - Qiita