HTMLのtabindexプロパティの使い方

2016/10/13

css

こんにちは、

フェノメナ技術担当のレミです。今回はHTML「tabindex」の使い方をご紹介します。

tabindexプロパティは、２つの役割をもっています。

　　1. 本来tabキーでフォーカス（選択）不可能なエレメントをフォーカス可能にする。そしてその逆。
　　2. フォーカスの順番を指定する

書き方はこの通りです :

デフォルトでフォーカスできるエレメントはいくつかあり、、、</code>がその例です。ユーザが「tabキー」を押すと、それぞれのエレメントにフォーカスが移ります。UIに関しても、アクセシビリティーに関しても大切な機能を果たしています。</p> <p>しかし、<code><span></code>をボタンに見せたデザインにしたときは、どうなるでしょうか？<br />tabキーを押してもそのspanボタンが選択されないですね。。。それを選択 / フォーカスを出来るようにするためには、「tabindex=番号」を付ける必要があります。（番号は、1以上です。）</p> <p>その「番号」というのは、選択されていく順番を示すものです。デフォルトでは、HTMLのDOMを上から下に選択されていくのですが、それを微調整したくなったときに細かく番号を設定してみると便利です。</p> <p>また、<code><a></code>を使っているが、それをフォーカスされると困ると言う場合もあるかもしれません。そのときは、tabindex=0（ゼロ）にすることによって、tabキーを押してもフォーカスが移らなくなります。</p> <p>以上になります。ぜひ、次のプロジェクトに、このtabindexプロパティの実装を検討してはいかがでしょうか！</p> </div> <footer class="entry-footer"> </footer><div class="entry-meta"></div> </div> </article>  <p class='entry-content' id='descriptionHP'>このブログから情報発信しているUIデザイン専門家集団のホームページ : <br><a href="http://www.phenomena.co.jp/">フェノメナエンターテインメント株式会社</a></p>  <nav role="navigation" id="nav-below" class="navigation post-navigation"> <div class="nav-previous alignleft"><a href="https://www.phenomena.co.jp/blog/2016/10/11/%e3%83%aa%e3%82%ad%e3%83%83%e3%83%89%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e5%bf%85%e9%a0%88%ef%bc%9f-android7%e3%81%ae%e8%a7%a3%e5%83%8f%e5%ba%a6%e5%a4%89%e6%9b%b4%e6%a9%9f%e8%83%bd%e8%bf%bd%e5%8a%a0/" rel="prev"><span class="meta-nav">←</span> リキッドデザイン必須？ Android7の解像度変更機能追加</a></div> <div class="nav-next alignright"><a href="https://www.phenomena.co.jp/blog/2016/11/04/ios10%e3%81%a7%e3%81%ae%e5%a4%89%e5%8c%96/" rel="next">iOS10での変化 <span class="meta-nav">→</span></a></div> </nav> </main> <aside class="sidebar sidebar-primary widget-area" role="complementary" itemscope="itemscope" itemtype="http://schema.org/WPSideBar"> <section id="nav_menu-2" class="widget widget-1 even widget-first widget_nav_menu"><div class="widget-wrap"><div class="widget-title"><p class="iconArea"></p><h4 class="wTitle">ホームページ</h4></div><div class="menu-%e3%83%9b%e3%83%bc%e3%83%a0%e3%83%9a%e3%83%bc%e3%82%b8-container"><ul id="menu-%e3%83%9b%e3%83%bc%e3%83%a0%e3%83%9a%e3%83%bc%e3%82%b8" class="menu"><li id="menu-item-304" class="menu-item menu-item-type-custom menu-item-object-custom first last menu-item-304"><a href="https://www.phenomena.co.jp"><img src="https://www.phenomena.co.jp/blog/wp-content/themes/omega/img/logo_phenomena_s.png" alt="フェノメナエンターテインメント株式会社"></a></li> </ul></div></div></section><section id="categories-2" class="widget widget-2 odd widget_categories"><div class="widget-wrap"><div class="widget-title"><p class="iconArea"></p><h4 class="wTitle">カテゴリー</h4></div> <ul> <li class="cat-item cat-item-11"><a href="https://www.phenomena.co.jp/blog/category/android/">Android</a> </li> <li class="cat-item cat-item-15"><a href="https://www.phenomena.co.jp/blog/category/animation/">animation</a> </li> <li class="cat-item cat-item-14"><a href="https://www.phenomena.co.jp/blog/category/apple/">apple</a> </li> <li class="cat-item cat-item-42"><a href="https://www.phenomena.co.jp/blog/category/business/">Business</a> </li> <li class="cat-item cat-item-3"><a href="https://www.phenomena.co.jp/blog/category/css/">css</a> </li> <li class="cat-item cat-item-13"><a href="https://www.phenomena.co.jp/blog/category/design/">design</a> </li> <li class="cat-item cat-item-23"><a href="https://www.phenomena.co.jp/blog/category/fonts/">fonts</a> </li> <li class="cat-item cat-item-4"><a href="https://www.phenomena.co.jp/blog/category/html/">html</a> </li> <li class="cat-item cat-item-45"><a href="https://www.phenomena.co.jp/blog/category/icon/">icon</a> </li> <li class="cat-item cat-item-12"><a href="https://www.phenomena.co.jp/blog/category/ios/">iOS</a> </li> <li class="cat-item cat-item-25"><a href="https://www.phenomena.co.jp/blog/category/macintosh/">Macintosh</a> </li> <li class="cat-item cat-item-16"><a href="https://www.phenomena.co.jp/blog/category/mobile/">mobile</a> </li> <li class="cat-item cat-item-5"><a href="https://www.phenomena.co.jp/blog/category/tools/">tools</a> </li> <li class="cat-item cat-item-1"><a href="https://www.phenomena.co.jp/blog/category/uncategorized/">Uncategorized</a> </li> <li class="cat-item cat-item-33"><a href="https://www.phenomena.co.jp/blog/category/universal-design/">universal design</a> </li> <li class="cat-item cat-item-41"><a href="https://www.phenomena.co.jp/blog/category/ux-ui/">UX / UI</a> </li> <li class="cat-item cat-item-24"><a href="https://www.phenomena.co.jp/blog/category/windows/">Windows</a> </li> <li class="cat-item cat-item-28"><a href="https://www.phenomena.co.jp/blog/category/workshop/">Workshop</a> </li> </ul> </div></section><section id="search-2" class="widget widget-3 even widget_search"><div class="widget-wrap"><div class="widget-title"><p class="iconArea"></p><h4 class="wTitle">検索</h4></div><form role="search" method="get" class="search-form" action="https://www.phenomena.co.jp/blog/"> <input type="search" class="search-field" placeholder="Search ..." value="" name="s" title="Search for:"> <input type="submit" class="search-submit" value="Search"> </form> </div></section> <section id="recent-posts-2" class="widget widget-4 odd widget_recent_entries"><div class="widget-wrap"> <div class="widget-title"><p class="iconArea"></p><h4 class="wTitle">最近の記事</h4></div> <ul> <li> <a href="https://www.phenomena.co.jp/blog/2022/12/02/winui-3-gallery%e3%81%ae%e3%82%b9%e3%82%b9%e3%83%a1/">WinUI 3 Galleryのススメ</a> </li> <li> <a href="https://www.phenomena.co.jp/blog/2022/07/21/__trashed-2/">ダークモード調査レポート（2022年1月時点）</a> </li> <li> <a href="https://www.phenomena.co.jp/blog/2022/05/19/%e3%80%90photoshop%e3%80%91%e7%b0%a1%e5%8d%98%e3%81%ab%e7%a9%ba%e3%82%92%e5%a4%89%e3%81%88%e3%82%8b%e6%96%b9%e6%b3%95/">【Photoshop】簡単に空を変える方法</a> </li> <li> <a href="https://www.phenomena.co.jp/blog/2022/04/18/flutter/">Flutter</a> </li> <li> <a href="https://www.phenomena.co.jp/blog/2022/03/23/%e3%80%90photoshop%e3%80%91%e3%83%8b%e3%83%a5%e3%83%bc%e3%83%a9%e3%83%ab%e3%83%95%e3%82%a3%e3%83%ab%e3%82%bf%e3%83%bc%e3%81%8c%e9%80%b2%e5%8c%96%e3%81%97%e3%81%a6%e3%81%84%e3%81%9f%ef%bc%81/">【Photoshop】ニューラルフィルターが進化していた！</a> </li> </ul> </div></section><section id="jal_widget-2" class="widget widget-5 even widget_jal_widget"><div class="widget-wrap"><div class="widget-title"><p class="iconArea"></p><h4 class="wTitle">アーカイブ</h4></div><ul class="jaw_widget"> <li class="jaw_years"><a class="jaw_years" title="2022" href="https://www.phenomena.co.jp/blog/2022/"><span class="jaw_symbol"> </span> 2022</a><ul> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2022/12/" title="12月">12月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2022/07/" title="7月">7月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2022/05/" title="5月">5月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2022/04/" title="4月">4月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2022/03/" title="3月">3月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2022/01/" title="1月">1月</a></li></ul></li> <li class="jaw_years"><a class="jaw_years" title="2021" href="https://www.phenomena.co.jp/blog/2021/"><span class="jaw_symbol"> </span> 2021</a><ul> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2021/12/" title="12月">12月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2021/11/" title="11月">11月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2021/07/" title="7月">7月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2021/06/" title="6月">6月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2021/05/" title="5月">5月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2021/04/" title="4月">4月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2021/03/" title="3月">3月</a></li></ul></li> <li class="jaw_years"><a class="jaw_years" title="2020" href="https://www.phenomena.co.jp/blog/2020/"><span class="jaw_symbol"> </span> 2020</a><ul> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2020/12/" title="12月">12月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2020/11/" title="11月">11月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2020/10/" title="10月">10月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2020/03/" title="3月">3月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2020/02/" title="2月">2月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2020/01/" title="1月">1月</a></li></ul></li> <li class="jaw_years"><a class="jaw_years" title="2019" href="https://www.phenomena.co.jp/blog/2019/"><span class="jaw_symbol"> </span> 2019</a><ul> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2019/09/" title="9月">9月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2019/08/" title="8月">8月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2019/05/" title="5月">5月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2019/04/" title="4月">4月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2019/03/" title="3月">3月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2019/01/" title="1月">1月</a></li></ul></li> <li class="jaw_years"><a class="jaw_years" title="2018" href="https://www.phenomena.co.jp/blog/2018/"><span class="jaw_symbol"> </span> 2018</a><ul> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2018/11/" title="11月">11月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2018/08/" title="8月">8月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2018/07/" title="7月">7月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2018/06/" title="6月">6月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2018/05/" title="5月">5月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2018/03/" title="3月">3月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2018/02/" title="2月">2月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2018/01/" title="1月">1月</a></li></ul></li> <li class="jaw_years"><a class="jaw_years" title="2017" href="https://www.phenomena.co.jp/blog/2017/"><span class="jaw_symbol"> </span> 2017</a><ul> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2017/12/" title="12月">12月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2017/11/" title="11月">11月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2017/10/" title="10月">10月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2017/09/" title="9月">9月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2017/08/" title="8月">8月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2017/07/" title="7月">7月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2017/06/" title="6月">6月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2017/05/" title="5月">5月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2017/04/" title="4月">4月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2017/03/" title="3月">3月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2017/02/" title="2月">2月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2017/01/" title="1月">1月</a></li></ul></li> <li class="jaw_years expanded"><a class="jaw_years" title="2016" href="https://www.phenomena.co.jp/blog/2016/"><span class="jaw_symbol"> </span> 2016</a><ul> <li class="jaw_months " style="display:list-item;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2016/12/" title="12月">12月</a></li> <li class="jaw_months " style="display:list-item;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2016/11/" title="11月">11月</a></li> <li class="jaw_months expanded" style="display:list-item;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2016/10/" title="10月">10月</a></li> <li class="jaw_months " style="display:list-item;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2016/09/" title="9月">9月</a></li> <li class="jaw_months " style="display:list-item;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2016/08/" title="8月">8月</a></li> <li class="jaw_months " style="display:list-item;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2016/07/" title="7月">7月</a></li> <li class="jaw_months " style="display:list-item;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2016/06/" title="6月">6月</a></li> <li class="jaw_months " style="display:list-item;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2016/05/" title="5月">5月</a></li> <li class="jaw_months " style="display:list-item;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2016/04/" title="4月">4月</a></li> <li class="jaw_months " style="display:list-item;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2016/03/" title="3月">3月</a></li> <li class="jaw_months " style="display:list-item;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2016/02/" title="2月">2月</a></li> <li class="jaw_months " style="display:list-item;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2016/01/" title="1月">1月</a></li></ul></li> <li class="jaw_years"><a class="jaw_years" title="2015" href="https://www.phenomena.co.jp/blog/2015/"><span class="jaw_symbol"> </span> 2015</a><ul> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2015/12/" title="12月">12月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2015/11/" title="11月">11月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2015/10/" title="10月">10月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2015/09/" title="9月">9月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2015/08/" title="8月">8月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2015/07/" title="7月">7月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2015/06/" title="6月">6月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2015/05/" title="5月">5月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2015/04/" title="4月">4月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2015/03/" title="3月">3月</a></li> <li class="jaw_months " style="display:none;"><a class="jaw_months" href="https://www.phenomena.co.jp/blog/2015/02/" title="2月">2月</a></li></ul></li></ul><input type="hidden" id="widget-jal_widget-2-fx_in" name="widget-jal_widget[2][fx_in]" class="fx_in" value="slideDown" /><input type="hidden" id="widget-jal_widget-2-ex_sym" name="widget-jal_widget[2][ex_sym]" class="ex_sym" value=" " /><input type="hidden" id="widget-jal_widget-2-con_sym" name="widget-jal_widget[2][con_sym]" class="con_sym" value=" " /><input type="hidden" id="widget-jal_widget-2-only_sym_link" name="widget-jal_widget[2][only_sym_link]" class="only_sym_link" value="0" /></div></section><section id="calendar-2" class="widget widget-6 odd widget-last widget_calendar"><div class="widget-wrap"><div id="calendar_wrap" class="calendar_wrap"><table id="wp-calendar" class="wp-calendar-table"> <caption>2016年10月</caption> <thead> <tr> <th scope="col" title="月曜日">月</th> <th scope="col" title="火曜日">火</th> <th scope="col" title="水曜日">水</th> <th scope="col" title="木曜日">木</th> <th scope="col" title="金曜日">金</th> <th scope="col" title="土曜日">土</th> <th scope="col" title="日曜日">日</th> </tr> </thead> <tbody> <tr> <td colspan="5" class="pad"> </td><td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> </tr> <tr> <td>10</td><td><a href="https://www.phenomena.co.jp/blog/2016/10/11/" aria-label="2016年10月11日に投稿を公開">11</a></td><td>12</td><td><a href="https://www.phenomena.co.jp/blog/2016/10/13/" aria-label="2016年10月13日に投稿を公開">13</a></td><td>14</td><td>15</td><td>16</td> </tr> <tr> <td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td> </tr> <tr> <td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td> </tr> <tr> <td>31</td> <td class="pad" colspan="6"> </td> </tr> </tbody> </table><nav aria-label="前と次の月" class="wp-calendar-nav"> <span class="wp-calendar-nav-prev"><a href="https://www.phenomena.co.jp/blog/2016/09/">« 9月</a></span> <span class="pad"> </span> <span class="wp-calendar-nav-next"><a href="https://www.phenomena.co.jp/blog/2016/11/">11月 »</a></span> </nav></div></div></section> </aside> </div> </div>  <footer id="footer" class="site-footer" role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter"><div class="wrap"><div class="footer-content footer-insert"><p class="copyright">© <a class="site-link" href="http://www.phenomena.co.jp/" rel="�t�F�m��i�G��^�[�e�C��g��">Phenomena Entertainment Inc</a>.</p> </div></div></footer> </div> <script type='text/javascript' src='https://www.phenomena.co.jp/blog/wp-includes/js/wp-embed.min.js?ver=5.7.12' id='wp-embed-js'></script> <script type='text/javascript' src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?ver=5.7.12' id='none-js'></script> <script type='text/javascript' src='https://www.phenomena.co.jp/blog/wp-content/plugins/jquery-archive-list-widget/jal.js?ver=5.7.12' id='jquery_archive_list-js'></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $('.close-btn').click(function() { $(this).parent().hide(); }); </script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-61329117-1', 'auto'); ga('send', 'pageview'); </script> </body> </html>