Edit

Page

Page title:

Page body:

[17] [DFN[[CODE(HTMLe)@en[aside]]]] [[要素]]は、記事の本線から外れたやや補足的な内容を表します。

[EG[
[18] 例えば[[雑誌記事]]では、[[コラム]]を表すために使うことができます。
]EG]

[EG[
[19] 例えば [[Webアプリケーション]]では、[[サイドバー]]として関連記事一覧や[[広告]]などを含めるために使うことができます。
]EG]

* 歴史

** [CODE[aside]] 要素の誕生以前

[23] 
現在の[[Webデザイン]]でよくみかけるいわゆる[[サイドバー]]は、
[[Netscape Navigator 2]]
の時代に 
[CODE[frame]]
によってメニューなどを表示したものまで遡ると推測されます。

[24] 
[CODE[frame]] から [[table layout]]、 [CODE[div]] と実現手段は移り変わりましたが、
ページの左側にサイトのメニューなどの[[ナビゲーション]]要素を表示したり、
ページの右側に関連記事、著者プロフィール、、[[ナビゲーション]]要素、[[広告]]などを表示したり、
といった[[イディオム]]的な構成が次第に確立し現在に続いています。

[1]
[CITE[Hatena::agenda - ブログのサイドバーは要らない]] ([CODE[2007-07-28 07:52:41 +09:00]] 版) <http://d.hatena.ne.jp/jintrick/20070728>
([[名無しさん]] [WEAK[2007-07-29 02:01:06 +00:00]])

[2]
[CITE[Hatena::agenda - 「ブログのサイドバーは要らない」の反論にこたえる]] ([CODE[2007-08-05 10:41:17 +09:00]] 版) <http://d.hatena.ne.jp/jintrick/20070805>
([[名無しさん]] [WEAK[2007-08-06 11:45:07 +00:00]])

** Web ブラウザー UI のサイドバー

[25] 
[[Webブラウザー]]の [[UI]] 要素としての[[サイドバー]]もいろいろな手法が試行されては消えてゆきました。
[[Webページ]]の[[著者]]の指定によって [[viewport]] と連動して表示されるものもあれば、
まったく独立した機能として提供されるものもありました。
[SEE[ [[sidebar]] ]]

** [CODE[sidebar]] 要素 (DTBook)

[27] 
[[HTMLもどき]]の1つ [[DTBook]] に [DFN[[CODE[sidebar]]]] [[要素]]がありました。

- [26] [CITE@en-US[DAISY ANSI/NISO Z39.86-2002 - The DAISY Consortium]], [TIME[2023-11-23T13:16:09.000Z]] <https://daisy.org/info-help/document-archive/archived-projects/daisy-ansi-niso-z39-86-2002-archived/>

[28] 
[CODE[sidebar]] [[要素]]は[[ブロック要素]]です。 [SRC[>>26]]

[29] 
[CODE[sidebar]] [[要素]]の[[内容]]は [CODE[%flow;]] と [CODE[hd]] です。
[SRC[>>26]]

[30] 
[CODE[sidebar]] [[要素]]は、
[RUBYB[主たる文章][main text]]や[RUBYB[物語の流れ][narrative flow]]に対して補足する情報を含むもので、
頁上の主たる文章のブロックとは別に分けて箱で囲んで印刷されることがよくあります。
[SRC[>>1]]

[31] 
[[DTBook]] は技術の系譜上は [[HTML]] からの派生で、 [[HTML]] 本体への還流はないのですが、
結果的に後の [CODE[aside]] [[要素]]を先取りするような形になっています。

[32] 
なお [[DTBook]] には他にも似たような
[CODE[notice]],
[CODE[prodnote]]
があります。

** [CODE[aside]] 要素の誕生

[16] [[Web Applications 1.0]] で導入されました。

[15] はじめ [CODE(HTMLe)@en[[[sidebar]]]] [[要素]]という名前でしたが、
意味を明確にするため、すぐに [CODE(HTMLe)@en[[[aside]]]] [[要素]]に改名されました。

;; [CODE(HTMLe)@en[[[sidebar]]]] も参照。

[FIG(data)[ [33] [[HTML要素概説]]

:[F[要素名]]:[CODE[sidebar]]
:[F[要素名]]:[CODE[note]]
:日付:[TIME[2004-09-23]]
:説明:
[TIME[2004-09-23]]版
[CITE@en-GB-hixie[Web Applications 1.0]]
文書ソース注釈に、
[CODE[sidebar]]
ないし
[CODE[note]]
の構想がある。
:出典:
[REFS[

-
[CITE@en-GB-hixie[Web Applications 1.0]], 
[DATA(.author)[[[WHATWG]]]],
[[Ian Hickson]],
[DATA(.status)[[[Working Draft]]]],
[TIME(.published)[23 September 2004][2004-09-23]],
[TIME[2024-09-01T06:53:36.000Z]], [TIME[2004-10-09T15:04:52.113Z]] <https://web.archive.org/web/20041009144718/http://whatwg.org/specs/web-apps/current-work/>

]REFS]

]FIG]

[34] [CITE@en-GB-hixie[Web Applications 1.0]], [TIME[2024-09-01T08:44:52.000Z]], [TIME[2004-12-10T06:02:35.522Z]] <https://web.archive.org/web/20041210054847/http://www.whatwg.org/specs/web-apps/current-work/#specific>

[FIG(data)[ [104] [[HTML要素概説]]

:[F[要素名]]:[CODE[sidebar]]
:日付:[TIME[2004-12-08]]
:説明:
[TIME[2004-12-08]]版時点の
[CITE@en-GB-hixie[Web Applications 1.0]]
で
[CODE[sidebar]]
が定義されていた。
:出典:
[REFS[

-
[CITE@en-GB-hixie[Web Applications 1.0]], 
[DATA(.author)[[[WHATWG]]]],
[[Ian Hickson]],
[DATA(.status)[[[Working Draft]]]],
[TIME(.published)[8 December 2004][2004-12-08]],
[TIME[2024-09-01T08:36:36.000Z]], [TIME[2004-12-10T05:54:20.058Z]] <https://web.archive.org/web/20041210054847/http://www.whatwg.org/specs/web-apps/current-work/>

]REFS]

]FIG]

[3]
[CITE[''''''[''''''whatwg'''''']'''''' Requests for new elements for comments]]
( ([TIME[2012-01-26 08:56:45 +09:00]] 版))
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-January/034506.html>

[4] [CITE[IRC logs: freenode / #whatwg / 20130529]]
( ([TIME[2013-05-30 20:48:40 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20130529#l-176>

[5] [CITE@en[Web Applications 1.0 r7426      Match more implementations.]]
( ([TIME[2012-10-02 03:45:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=7425&to=7426>

[FIG(quote)[
[FIGCAPTION[
[6] [CITE@ja[【皇室ウイークリー】(番外編)佳子さまお誕生日〈45枚のお写真で振り返るこの1年〉(1/6ページ) - 産経ニュース]]
([[SANKEI DIGITAL INC.]] 著, [TIME[2015-12-29 07:04:50 +09:00]] 版)
<http://www.sankei.com/premium/news/151229/prm1512290006-n1.html>
]FIGCAPTION]

> 
> <aside id="modWeather">
> </aside>
> <script src="http://www.sankei.com/apr_news/js/v1/widget/weatherForecast.js"></script>
>

]FIG]

[FIG(quote)[
[FIGCAPTION[
[7] [CITE@ja[【皇室ウイークリー】(番外編)佳子さまお誕生日〈45枚のお写真で振り返るこの1年〉(1/6ページ) - 産経ニュース]]
([[SANKEI DIGITAL INC.]] 著, [TIME[2015-12-29 07:04:50 +09:00]] 版)
<http://www.sankei.com/premium/news/151229/prm1512290006-n1.html>
]FIGCAPTION]

> 
> <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>
>

]FIG]

[FIG(quote)[
[FIGCAPTION[
[8] [CITE@ja[【皇室ウイークリー】(番外編)佳子さまお誕生日〈45枚のお写真で振り返るこの1年〉(1/6ページ) - 産経ニュース]]
([[SANKEI DIGITAL INC.]] 著, [TIME[2015-12-29 07:04:50 +09:00]] 版)
<http://www.sankei.com/premium/news/151229/prm1512290006-n1.html>
]FIGCAPTION]

> 
> <aside id="adTxtpremium" class="clearfix">
> <h1 class="speech">PR</h1>
> 
> <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&amp;ord=' + noCacheParam + '"></scr'+'ipt>');
> </script>
> 
> </aside>
>

]FIG]

[FIG(quote)[
[FIGCAPTION[
[9] [CITE@ja[社労士:書き込み「社員うつにさせる方法」会員権停止に - 毎日新聞]]
([TIME[2015-12-08 15:44:48 +09:00]] 版)
<http://mainichi.jp/articles/20151230/k00/00m/040/090000c>
]FIGCAPTION]

> 
> <aside class="nav">
> <ul class="inline-list">
> <li><a href="/">ニュースサイト・トップページはこちら</a></li>
> </ul>
> </aside>
>

]FIG]

[FIG(quote)[
[FIGCAPTION[
[10] [CITE@ja[社労士:書き込み「社員うつにさせる方法」会員権停止に - 毎日新聞]]
([TIME[2015-12-08 15:44:48 +09:00]] 版)
<http://mainichi.jp/articles/20151230/k00/00m/040/090000c>
]FIGCAPTION]

> 
> 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{
>

]FIG]

[FIG(quote)[
[FIGCAPTION[
[11] [CITE[【ライブレポート】Kalafina、もっと先へ | Kalafina | BARKS音楽ニュース]]
([[ジャパンミュージックネットワーク株式会社]] 著, [TIME[2015-12-31 14:57:19 +09:00]] 版)
<http://www.barks.jp/news/?id=1000122862>
]FIGCAPTION]

> 
> <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>

]FIG]

[FIG(quote)[
[FIGCAPTION[
[12] [CITE[【ライブレポート】Kalafina、もっと先へ | Kalafina | BARKS音楽ニュース]]
([[ジャパンミュージックネットワーク株式会社]] 著, [TIME[2015-12-31 14:57:57 +09:00]] 版)
<http://www.barks.jp/news/?id=1000122862>
]FIGCAPTION]

> 
> <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">

]FIG]

[FIG(quote)[
[FIGCAPTION[
[13] [CITE@ja[【今日は何の日?】あこぎという駅が開業 | 乗りものニュース]]
([TIME[2015-12-31 15:09:31 +09:00]] 版)
<http://trafficnews.jp/post/47402/>
]FIGCAPTION]

> 
> <aside>
> 
> <script type="text/javascript" src="http://sh.adingo.jp/?G=1000024027&guid=ON"></script>
> 
> <script type="text/javascript">
> //<![CDATA[
> if(typeof(adingoFluct)!="undefined") adingoFluct.showAd('1000037212');
> //]]>
> </script></aside>
> <aside>
> 
> <script type="text/javascript" src="http://sh.adingo.jp/?G=1000028968&guid=ON"></script>
> 
> <script type="text/javascript">
> //<![CDATA[
> if(typeof(adingoFluct)!="undefined") adingoFluct.showAd('1000044916');
> //]]>
> </script></aside>
>

]FIG]

[FIG(quote)[
[FIGCAPTION[
[14] [CITE@ja[二次創作について - カクヨムヘルプセンター]]
([TIME[2016-01-01 15:14:08 +09:00]] 版)
<https://kakuyomu.jp/help/entry/fan_fiction_sources>
]FIGCAPTION]

> 
>     <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>

]FIG]

[20] [CITE@en[Restrict the main element to be used once per document by annevk · Pull Request #3354 · whatwg/html]]
([TIME[2018-01-24 12:50:50 +09:00]])
<https://github.com/whatwg/html/pull/3354>

[21] [CITE@en[leverage CORE mappings / issue #119]]
([[jasonkiss]]著, [TIME[2018-02-07 07:29:32 +09:00]])
<https://github.com/w3c/html-aam/commit/a1a661d9874e2674cd99b7dda1cf6962dc91df1b>

[22] [CITE@en[leverage CORE mappings / issue #119]]
([[jasonkiss]]著, [TIME[2018-02-07 07:29:32 +09:00]])
<https://github.com/w3c/html-aam/commit/a1a661d9874e2674cd99b7dda1cf6962dc91df1b>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Errors

Page name(s)