カテゴリー:
モバイルデザイン
閲覧数:718 配信日:2015-12-20 20:16
アイコンナビゲーション
section
┗div
┗article
<section class="Lifetool Section js-Lifetool" id="Lifetool">
<h1 class="util-displayHiddenVisually">サービス</h1>
<div class="Grid Lifetool__body">
<article class="Grid__item Grid__item--1of5 LifetoolItem LifetoolItem--mail">
<a class="Grid__body LifetoolItem__link" href="http://mail.yahoo.co.jp/" data-ylk="rsec:lifetool;slk:mail_45;pos:1;svcid:45;ctype:d" data-rapid_p="1" id="yui_3_18_1_1_1450608329704_182">
<h1 class="LifetoolItem__title util-textEllipsis">メール</h1>
<div class="LifetoolItem__body">
<div class="ServiceIcon" style="background-image: url('http://i.yimg.jp/c/icon/s/bsc/2.0/mail80.png');"></div>
</div>
</a>
</article>
<article class="Grid__item Grid__item--1of5 LifetoolItem">
<a class="Grid__body LifetoolItem__link" href="http://weather.yahoo.co.jp/weather/jp/13/4410/13103.html" data-ylk="rsec:lifetool;slk:weather_10;pos:2;svcid:10;ctype:d" data-rapid_p="2" id="yui_3_18_1_1_1450608329704_183">
<h1 class="LifetoolItem__title util-textEllipsis">港区</h1>
<div class="LifetoolItem__body LifetoolItem__body--column">
<div class="LifetoolItem__weatherForecastIcon" style="background-image: url('http://i.yimg.jp/images/weather/general/newforecast/moon_clouds_af.png');"></div>
<p class="LifetoolItem__weatherInformations">
<span class="LifetoolItem__temperature LifetoolItem__temperature--max">11</span>
<span class="LifetoolItem__temperature LifetoolItem__temperature--min">2</span>
<span class="LifetoolItem__precipitation">0<i class="LifetoolItem__precipitationMark">%</i></span>
</p>
</div>
</a>
</article>
<article class="Grid__item Grid__item--1of5 LifetoolItem js-LifetoolItem--transit" id="yui_3_18_1_1_1450608329704_817">
<a class="Grid__body LifetoolItem__link" href="http://transit.loco.yahoo.co.jp/" data-ylk="rsec:lifetool;slk:transit_26;pos:3;svcid:26;ctype:d" data-rapid_p="3" id="yui_3_18_1_1_1450608329704_184">
<h1 class="LifetoolItem__title util-textEllipsis">路線</h1>
<div class="LifetoolItem__body">
<div class="ServiceIcon" style="background-image: url('http://i.yimg.jp/c/icon/s/bsc/2.0/transit80.png');"></div>
</div>
</a>
<p class="Icon Icon--triangleBadge LifetoolItem__badge LifetoolItem__badge--transit js-LifetoolItem__badge--transit is-hide">!</p>
</article>
<article class="Grid__item Grid__item--1of5 LifetoolItem">
<a class="Grid__body LifetoolItem__link" href="http://shopping.yahoo.co.jp/" data-ylk="rsec:lifetool;slk:shopping_1;pos:4;svcid:1;ctype:d" data-rapid_p="4" id="yui_3_18_1_1_1450608329704_185">
<h1 class="LifetoolItem__title util-textEllipsis">ショッピング</h1>
<div class="LifetoolItem__body">
<div class="ServiceIcon" style="background-image: url('http://i.yimg.jp/c/icon/s/bsc/2.0/shopping80.png');"></div>
</div>
</a>
</article>
<article class="Grid__item Grid__item--1of5 LifetoolItem">
<a class="Grid__body LifetoolItem__link rapid-noclick-resp" href="/set/fortune" data-ylk="rsec:lifetool;slk:fortune_17;pos:5;svcid:17;ctype:d" data-rapid_p="5" id="yui_3_18_1_1_1450608329704_186">
<h1 class="LifetoolItem__title util-textEllipsis">占い</h1>
<div class="LifetoolItem__body">
<div class="ServiceIcon" style="background-image: url('http://i.yimg.jp/c/icon/s/bsc/2.0/fortune80.png');"></div>
<p class="LifetoolItem__unsetStatus">未設定</p>
</div>
</a>
</article>
<article class="Grid__item Grid__item--1of5 LifetoolItem">
<a class="Grid__body LifetoolItem__link" href="http://auctions.yahoo.co.jp" data-ylk="rsec:lifetool;slk:auctions_2;pos:6;svcid:2;ctype:d;badge:off" data-rapid_p="6" id="yui_3_18_1_1_1450608329704_187">
<h1 class="LifetoolItem__title util-textEllipsis">ヤフオク!</h1>
<div class="LifetoolItem__body">
<div class="ServiceIcon" style="background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAACB0lEQVR42u3aQU4CMRiGYS7AZOLCFYMcgSMQowtZujKKRD0JJzAx7kyEpRsTjBp0JUeYo/QItUWIk5hhOm1nEPp+yReXjI9CW/o3GoQQQkiImd8cxKqpqlS9QsQeT4LojgdiCcBpDh6IhoCjAkAQDRAnX9cgWuf5rDV5OU8kiBb5GLYnClDqgmjx1tUon8O2BNESb1UQHfBA9IAHogc8ED3ggegBD0QPeCB6wAsa0RdekIi+8YJCrArPEnEOnj2iUO2CZ4D4epEI8OwRU9U48wzglai+jIozz9JT7YBngcdqCx544HmGipeX3tPVQ78PEvBK4GXHLfRWYXF79jZIwCuJt6iGW21ca0bcrs+8NYM+tSPOBi350N/rbdsiIdb9UnUhary7o0jeHjbF/XFzq04W3U0jZvDUz6Z8PInEuB+BaIXXj+T4pyA64IFosto+ne53FF6agweiyVZFAcbqMy8d5wOCWLTPUzixKogum2QQixELTxgg5iMaH89A/ItY+mwL4i+i9RcDIC5vz1xeL1jE2WVb18ttWbCIPr/XCxlx5Ov1QkT0PjEQEmJl4xYhIFY+q7LLiKO6Bn12ErHugFgjIlJuiPq/MEbKDpG3sAMieA6I4P2Xv4goWKFsKkIClFUUQADNoscmqiiAAOYe6sUGRnLFLgFuZCgcQAABBJBFhBBCCAkk375sKLVcNDz9AAAAAElFTkSuQmCC');"></div>
</div>
</a>
</article>
<article class="Grid__item Grid__item--1of5 LifetoolItem">
<a class="Grid__body LifetoolItem__link" href="http://m.finance.yahoo.co.jp/" data-ylk="rsec:lifetool;slk:m_finance_12;pos:7;svcid:12;ctype:d" data-rapid_p="7" id="yui_3_18_1_1_1450608329704_188">
<h1 class="LifetoolItem__title util-textEllipsis">ファイナンス</h1>
<div class="LifetoolItem__body">
<div class="ServiceIcon" style="background-image: url('http://i.yimg.jp/c/icon/s/bsc/2.0/finance80.png');"></div>
</div>
</a>
</article>
<article class="Grid__item Grid__item--1of5 LifetoolItem">
<a class="Grid__body LifetoolItem__link" href="http://m.sports.yahoo.co.jp" data-ylk="rsec:lifetool;slk:m_sports_11;pos:8;svcid:11;ctype:d" data-rapid_p="8" id="yui_3_18_1_1_1450608329704_189">
<h1 class="LifetoolItem__title util-textEllipsis">スポーツ</h1>
<div class="LifetoolItem__body">
<div class="ServiceIcon" style="background-image: url('http://i.yimg.jp/c/icon/s/bsc/2.0/sports80.png');"></div>
</div>
</a>
</article>
<article class="Grid__item Grid__item--1of5 LifetoolItem js-LifetoolItem--point" id="yui_3_18_1_1_1450608329704_826">
<a class="Grid__body LifetoolItem__link" href="http://points.yahoo.co.jp/" data-ylk="rsec:lifetool;slk:points_73;pos:9;svcid:73;ctype:d" data-rapid_p="9" id="yui_3_18_1_1_1450608329704_190">
<h1 class="LifetoolItem__title util-textEllipsis js-LifetoolItem__title">ポイント</h1>
<div class="LifetoolItem__body">
<div class="ServiceIcon" style="background-image: url('http://i.yimg.jp/c/icon/s/bsc/2.0/points_a80.png');"></div>
</div>
</a>
</article>
<div class="Grid__item Grid__item--1of5 LifetoolItem LifetoolItem--button">
<a class="LifetoolItem__link js-LifetoolItem--button rapid-noclick-resp" href="/svc" data-ylk="rsec:lifetool;slk:all;pos:0" data-rapid_p="10" id="yui_3_18_1_1_1450608329704_191">
<div class="LifetoolItem__buttonText">すべて</div>
</a>
</div>
</div><!--./Lifetool__items-->
</section>
グローバルナビゲーション
header
┗div
┗ul
┗li
<header class="Stream__header js-Stream__header">
<div class="TabStrong TabStrong--center TabStrong--noBorder Stream__tab js-Stream__tab is-animationSlideCurrent" id="yui_3_18_1_1_1450608329704_511">
<ul class="TabStrong__items Stream__tabItems" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 300ms; transform: translate(0px, 0px) translateZ(0px);">
<li class="TabStrong__item"><a class="TabStrong__link rapid-noclick-resp is-current" data-ylk="rsec:tabs;slk:all;pos:1" data-rapid_p="1" id="yui_3_18_1_1_1450608329704_192" href="#">すべて</a></li>
<li class="TabStrong__item"><a class="TabStrong__link rapid-noclick-resp" data-ylk="rsec:tabs;slk:tp;pos:1" data-rapid_p="2" id="yui_3_18_1_1_1450608329704_193" href="#">ニュース</a></li>
<li class="TabStrong__item"><a class="TabStrong__link rapid-noclick-resp" data-ylk="rsec:tabs;slk:buzz;pos:1" data-rapid_p="3" id="yui_3_18_1_1_1450608329704_194" href="#">話題</a></li>
<li class="TabStrong__item"><a class="TabStrong__link rapid-noclick-resp" data-ylk="rsec:tabs;slk:gein;pos:1" data-rapid_p="4" id="yui_3_18_1_1_1450608329704_195" href="#">芸能</a></li>
<li class="TabStrong__item"><a class="TabStrong__link rapid-noclick-resp" data-ylk="rsec:tabs;slk:sprt;pos:1" data-rapid_p="5" id="yui_3_18_1_1_1450608329704_196" href="#">スポーツ</a></li>
<li class="TabStrong__item"><a class="TabStrong__link rapid-noclick-resp" data-ylk="rsec:tabs;slk:shop;pos:1" data-rapid_p="6" id="yui_3_18_1_1_1450608329704_197" href="#">お買い物</a></li>
<li class="TabStrong__item"><a class="TabStrong__link rapid-noclick-resp" data-ylk="rsec:tabs;slk:mov;pos:1" data-rapid_p="7" id="yui_3_18_1_1_1450608329704_198" href="#">動画</a></li>
<li class="TabStrong__current js-Stream__currentTab is-animationEnabled" style="transform: translate(30px, 0px);"><div class="TabStrong__currentRect js-Stream__currentTabRect" style="transform: scaleX(61);"></div></li>
</ul><!--/.TabStrong__items-->
</div><!--/.TabStrong-->
<label class="Stream__selectCategory">
<select class="Stream__selectCategorySelect js-Stream__selectCategorySelect" id="yui_3_18_1_1_1450608329704_528">
<option value="0" selected="">すべて</option>
<option value="1">ニュース</option>
<option value="2">話題</option>
<option value="3">芸能</option>
<option value="4">スポーツ</option>
<option value="5">お買い物</option>
<option value="6">動画</option>
</select>
<span class="Icon Icon--expandOpen" aria-hidden="true"></span>
</label>
</header>
ニュース項目
section
┗div
┗article
<section class="StreamCategory__section StreamCategory__section--topics">
<h1 class="util-displayHiddenVisually">主要ニュース</h1>
<div class="List List--noBorderTop util-paddingSmallV js-StreamCategory__topicsList theme-Kisekae__streamList">
<article class="List__item theme-Kisekae__streamItemArticle">
<a class="StreamItem StreamItem--topics FlexBox" href="http://news.yahoo.co.jp/pickup/6184787" data-ylk="rsec:tpto;slk:title;pos:1;tpcnid:6184787" target="_blank" data-rapid_p="8" id="yui_3_18_1_1_1450608329704_199">
<div class="FlexBox__item">
<div class="StreamItem__item">
<div class="StreamItem__image StreamItem__image--left" style="width:52px; height:52px; background-image:url(http://giwiz-tpc.c.yimg.jp/q/tpc/images/tpc/2015/12/20/1450606282_20151220-00000024-jnn-000-thumb-x104-y104.jpg);"></div>
</div>
</div>
<div class="List__body FlexBox__item util-padding0">
<div class="StreamItem__item util-paddingL0">
<div class="StreamItem__main">
<h1 class="StreamItem__title StreamItem__title--ellipsis">沈没70人超不明 インドネシア</h1>
<time class="StreamItem__time">
12/20(日) 19:17 </time>
</div>
</div><!--/.StreamItem__item-->
</div><!--/.List__body-->
</a><!--/FlexBox.StreamItem-->
</article><!--/.List__item-->
<article class="List__item theme-Kisekae__streamItemArticle">
<a class="StreamItem StreamItem--topics FlexBox" href="http://news.yahoo.co.jp/pickup/6184784" data-ylk="rsec:tpto;slk:title;pos:2;tpcnid:6184784" target="_blank" data-rapid_p="9" id="yui_3_18_1_1_1450608329704_200">
<div class="FlexBox__item">
<div class="StreamItem__item">
<div class="StreamItem__image StreamItem__image--left" style="width:52px; height:52px; background-image:url(http://giwiz-tpc.c.yimg.jp/q/tpc/images/tpc/2015/12/20/1450604156_20151220-00000031-nnn-000-thumb-x104-y104.jpg);"></div>
</div>
</div>
<div class="List__body FlexBox__item util-padding0">
<div class="StreamItem__item util-paddingL0">
<div class="StreamItem__main">
<h1 class="StreamItem__title StreamItem__title--ellipsis">名古屋殺害 逃走車捉えた映像</h1>
<time class="StreamItem__time">
<span class="Icon Icon--new" aria-hidden="true"></span>
12/20(日) 18:52 </time>
</div>
</div><!--/.StreamItem__item-->
</div><!--/.List__body-->
</a><!--/FlexBox.StreamItem-->
</article><!--/.List__item-->
<article class="List__item theme-Kisekae__streamItemArticle">
<a class="StreamItem StreamItem--topics FlexBox" href="http://news.yahoo.co.jp/pickup/6184785" data-ylk="rsec:tpto;slk:title;pos:3;tpcnid:6184785" target="_blank" data-rapid_p="10" id="yui_3_18_1_1_1450608329704_201">
<div class="FlexBox__item">
<div class="StreamItem__item">
<div class="StreamItem__image StreamItem__image--left" style="width:52px; height:52px; background-image:url(http://giwiz-tpc.c.yimg.jp/q/tpc/images/tpc/2015/12/20/1450577486_20151220-00000016-asahi-000-view-x104-y104.jpg);"></div>
</div>
</div>
<div class="List__body FlexBox__item util-padding0">
<div class="StreamItem__item util-paddingL0">
<div class="StreamItem__main">
<h1 class="StreamItem__title StreamItem__title--ellipsis">熱気球が接触し墜落、2人重傷</h1>
<time class="StreamItem__time">
<span class="Icon Icon--new" aria-hidden="true"></span>
12/20(日) 18:49 </time>
</div>
</div><!--/.StreamItem__item-->
</div><!--/.List__body-->
</a><!--/FlexBox.StreamItem-->
</article><!--/.List__item-->
<article class="List__item theme-Kisekae__streamItemArticle">
<a class="StreamItem StreamItem--topics FlexBox" href="http://news.yahoo.co.jp/pickup/6184763" data-ylk="rsec:tpto;slk:title;pos:4;tpcnid:6184763" target="_blank" data-rapid_p="11" id="yui_3_18_1_1_1450608329704_202">
<div class="FlexBox__item">
<div class="StreamItem__item">
<div class="StreamItem__image StreamItem__image--left" style="width:52px; height:52px; background-image:url(http://giwiz-tpc.c.yimg.jp/q/tpc/images/tpc/2015/02/13/1423805087_1415160359_aflo_WKEB341107-x104-y104.jpg);"></div>
</div>
</div>
<div class="List__body FlexBox__item util-padding0">
<div class="StreamItem__item util-paddingL0">
<div class="StreamItem__main">
<h1 class="StreamItem__title StreamItem__title--ellipsis">「旧車會」摘発 10年で5倍に</h1>
<time class="StreamItem__time">
<span class="Icon Icon--new" aria-hidden="true"></span>
12/20(日) 15:19 </time>
</div>
</div><!--/.StreamItem__item-->
</div><!--/.List__body-->
</a><!--/FlexBox.StreamItem-->
</article><!--/.List__item-->
<article class="List__item theme-Kisekae__streamItemArticle">
<a class="StreamItem StreamItem--topics FlexBox" href="http://news.yahoo.co.jp/pickup/6184788" data-ylk="rsec:tpto;slk:title;pos:5;tpcnid:6184788" target="_blank" data-rapid_p="12" id="yui_3_18_1_1_1450608329704_203">
<div class="FlexBox__item">
<div class="StreamItem__item">
<div class="StreamItem__image StreamItem__image--left" style="width:52px; height:52px; background-image:url(http://giwiz-tpc.c.yimg.jp/q/tpc/images/tpc/2015/12/20/1450606416_20151220-00000125-sph-000-view-x104-y104.jpg);"></div>
</div>
</div>
<div class="List__body FlexBox__item util-padding0">
<div class="StreamItem__item util-paddingL0">
<div class="StreamItem__main">
<h1 class="StreamItem__title StreamItem__title--ellipsis">速報クラブW杯 メッシら先発</h1>
<time class="StreamItem__time">
<span class="Icon Icon--live" aria-hidden="true"></span>
12/20(日) 19:30 </time>
</div>
</div><!--/.StreamItem__item-->
</div><!--/.List__body-->
</a><!--/FlexBox.StreamItem-->
</article><!--/.List__item-->
<article class="List__item theme-Kisekae__streamItemArticle">
<a class="StreamItem StreamItem--topics FlexBox" href="http://news.yahoo.co.jp/pickup/6184778" data-ylk="rsec:tpto;slk:title;pos:6;tpcnid:6184778" target="_blank" data-rapid_p="13" id="yui_3_18_1_1_1450608329704_204">
<div class="FlexBox__item">
<div class="StreamItem__item">
<div class="StreamItem__image StreamItem__image--left" style="width:52px; height:52px; background-image:url(http://giwiz-tpc.c.yimg.jp/q/tpc/images/tpc/2015/12/20/1450599071_20151220-00000126-spnannex-000-view-x104-y104.jpg);"></div>
</div>
</div>
<div class="List__body FlexBox__item util-padding0">
<div class="StreamItem__item util-paddingL0">
<div class="StreamItem__main">
<h1 class="StreamItem__title StreamItem__title--ellipsis">壇蜜 橋本マナミに路線譲る</h1>
<time class="StreamItem__time">
12/20(日) 17:33 </time>
</div>
</div><!--/.StreamItem__item-->
</div><!--/.List__body-->
</a><!--/FlexBox.StreamItem-->
</article><!--/.List__item-->
</div><!--/.List-->
</section>
感想
テーブル未使用
・テーブルのように見えるが、tableタグは未使用
非表示項目あり
・「displayHiddenVisually」といういかにもそれっぽいクラス名が存在
・実際に表示されていない
キャプチャ
