[17] aside
要素は、記事の本線から外れたやや補足的な内容を表します。
[19] 例えば Webアプリケーションでは、サイドバーとして関連記事一覧や広告などを含めるために使うことができます。
aside
要素の誕生以前#✎[23]
現在のWebデザインでよくみかけるいわゆるサイドバーは、
Netscape Navigator 2
の時代に
frame
によってメニューなどを表示したものまで遡ると推測されます。
[24]
frame
から table layout、 div
と実現手段は移り変わりましたが、
ページの左側にサイトのメニューなどのナビゲーション要素を表示したり、
ページの右側に関連記事、著者プロフィール、、ナビゲーション要素、広告などを表示したり、
といったイディオム的な構成が次第に確立し現在に続いています。
[1]
Hatena::agenda - ブログのサイドバーは要らない (2007-07-28 07:52:41 +09:00
版) http://d.hatena.ne.jp/jintrick/20070728
(名無しさん 2007-07-29 02:01:06 +00:00)
[2]
Hatena::agenda - 「ブログのサイドバーは要らない」の反論にこたえる (2007-08-05 10:41:17 +09:00
版) http://d.hatena.ne.jp/jintrick/20070805
(名無しさん 2007-08-06 11:45:07 +00:00)
[25]
Webブラウザーの UI 要素としてのサイドバーもいろいろな手法が試行されては消えてゆきました。
Webページの著者の指定によって viewport と連動して表示されるものもあれば、
まったく独立した機能として提供されるものもありました。
sidebar
要素 (DTBook)#✎[27]
HTMLもどきの1つ DTBook に sidebar
要素がありました。
[28]
sidebar
要素はブロック要素です。 >>26
[29]
sidebar
要素の内容は %flow;
と hd
です。
>>26
[30]
sidebar
要素は、
主たる文章や物語の流れに対して補足する情報を含むもので、
頁上の主たる文章のブロックとは別に分けて箱で囲んで印刷されることがよくあります。
>>1
[31]
DTBook は技術の系譜上は HTML からの派生で、 HTML 本体への還流はないのですが、
結果的に後の aside
要素を先取りするような形になっています。
aside
要素の誕生#✎[16] Web Applications 1.0 で導入されました。
[15] はじめ sidebar
要素という名前でしたが、
意味を明確にするため、すぐに aside
要素に改名されました。
[34] Web Applications 1.0, , https://web.archive.org/web/20041210054847/http://www.whatwg.org/specs/web-apps/current-work/#specific
sidebar
sidebar
が定義されていた。[3] [whatwg] Requests for new elements for comments ( ( 版)) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-January/034506.html
[4] IRC logs: freenode / #whatwg / 20130529 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20130529#l-176
[5] Web Applications 1.0 r7426 Match more implementations. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=7425&to=7426
<!-- 天気予報モジュール -->
<aside id="modWeather">
</aside>
<script src="http://www.sankei.com/apr_news/js/v1/widget/weatherForecast.js"></script>
<aside class="toolbar">
<p>文字の大きさ
<span id="fontSmall" class="fontSmall">小</span><!--
--><span id="fontMiddium" class="fontMiddium current">中</span><!--
--><span id="fontLarge" class="fontLarge">大</span><!--
--><span class="print"><a href="../../../premium/print/151229/prm1512290006-c.html" target="_blank">印刷</a></span>
</p>
</aside>
<aside id="adTxtpremium" class="clearfix">
<h1 class="speech">PR</h1>
<!-- begin ad sn.all.premium.text tag -->
<script language="JavaScript" type="text/javascript">
noCacheParam=Math.random()*10000000000;
document.write('<scr'+'ipt type="text/javascript" src="http://sankei2ad.durasite.net/A-affiliate2/mobile?site=128&keyword=sn.all.premium.text&isJS=true&encoding=UTF-8&ord=' + noCacheParam + '"></scr'+'ipt>');
</script>
<!-- end ad sn.all.premium.text tag -->
</aside>
<aside class="nav">
<ul class="inline-list">
<li><a href="/">ニュースサイト・トップページはこちら</a></li>
</ul>
</aside>
if (typeof(impAads[0]) !='undefined' && impAads[0] !=""){document.write('<aside class="ad pr"><h2 class="hide">PR情報</h2><ul class="list-typeA ad-list">');}else{
<aside class="article-keywords">
<a href="/keywords/hogaku.html"><span class="keyword-icon keyword-hogaku">邦楽</span></a>
<a href="/feature/livereport.html"><span class="keyword-icon keyword-livereport">ライブ/イベント・レポート</span></a>
</aside>
</article>
<div class="sub-contents">
<aside id="subTrendbox">
<h2 class="box-title"><img src="http://img.barks.jp/img2/common/sub/txt_trend-box.png" width="200" height="24" alt="TREND BOX"></h2>
<ul class="article-list">
<aside><!-- v2_pc_side_bottom -->
<!-- Fluct グループ名「乗りものニュース:300×600(右カラム)」 -->
<script type="text/javascript" src="http://sh.adingo.jp/?G=1000024027&guid=ON"></script>
<!-- Fluct ユニット名「乗りものニュース:300×600(右カラム)」 -->
<script type="text/javascript">
//<!
if(typeof(adingoFluct)!="undefined") adingoFluct.showAd('1000037212');
//]]>
</script></aside>
<aside><!-- v2_pc_side_bottom2 -->
<!-- Fluct グループ名「乗りものニュース:300x250(右カラム3)」 -->
<script type="text/javascript" src="http://sh.adingo.jp/?G=1000028968&guid=ON"></script>
<!-- Fluct ユニット名「乗りものニュース:300x250(右カラム3)」 -->
<script type="text/javascript">
//<!
if(typeof(adingoFluct)!="undefined") adingoFluct.showAd('1000044916');
//]]>
</script></aside>
<aside id="box2">
<div id="box2-inner">
<div class="hatena-module hatena-module-html">
<div class="hatena-module-body">
<p id="backToIndexPage"><a href="/help/">ヘルプセンタートップに戻る</a></p>
</div>
</div>
[20] Restrict the main element to be used once per document by annevk · Pull Request #3354 · whatwg/html () https://github.com/whatwg/html/pull/3354
[21] leverage CORE mappings / issue #119 (jasonkiss著, ) https://github.com/w3c/html-aam/commit/a1a661d9874e2674cd99b7dda1cf6962dc91df1b
[22] leverage CORE mappings / issue #119 (jasonkiss著, ) https://github.com/w3c/html-aam/commit/a1a661d9874e2674cd99b7dda1cf6962dc91df1b
sidebar
も参照。