モバイルデザイン2 / スマホサイトにおけるtableタグ使用可否を検討

デザインモバイルデザイン

Bootstrap4系

 状態:検討中  閲覧数:2,825  投稿日:2015-12-20  更新日:2015-12-21
公式サンプルを設置してみた限りでは、従来から大きな変更はなし
・デザイン的に気になる点で言えば、フォントアイコン数が減少したことぐらい

スマホテーブルをどうするか? という問題

 閲覧数:504 投稿日:2015-12-20 更新日:2015-12-20

Bootstrapで採用している手法


指定クラスを付与すると、テーブル内だけ横スクロール可能な状態になる

スマホで初めて確認してみた感想
・動作自体はスムーズ
・しかし、「テーブル内が横スクロール可能な状態である」ことに誰も気が付かないのでは?


候補案


A.FooTable使用
B.Bootstrapで横スクロール
C.テーブル以外の実装へ変更


A.FooTable


導入見送り
・2から3へバージョンアップしていた
・これは! と思い期待するも、検索結果でほとんどヒットせず
・全く流行っていないことが判明

考えられる理由
・モバイルファーストで考えた場合、非表示対応するという行為自体が、嫌われているのかも
・「PCサイトをモバイルにも対応させる」場合なら最適だと思うが、モバイルファーストで考えた場合、重くなる可能性がある処理は敬遠されるのかも
・他で考えられる理由としてはjQuery依存だから?

導入見送り理由
・これからモバイルファーストへシフトしていく予定だから
・テーブルをリスト表示したり縦表示したりする手法も存在するが、それはPCメインでモバイルにも対応する場合の話
・モバイルファーストなら、そもそも出発点が異なる(テーブルありきではない)
・掲載情報は極力制限していく
・頭の切り替えが大事


C.テーブル以外の実装へ変更


他モバイルサイトがどうなっているか調査
・テーブル使用している?
・それ以外?
・テーブルっぽい表示は、どんな実装?

Yahoo! JAPAN / 2015年12月20日

 閲覧数:620 投稿日:2015-12-20 更新日:2015-12-20

アイコンナビゲーション


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」といういかにもそれっぽいクラス名が存在
・実際に表示されていない


キャプチャ





ユニクロ / 2015年12月20日

 閲覧数:507 投稿日:2015-12-20 更新日:2015-12-22

感想


ユニクロスマホサイト
・「Yahoo! JAPAN」でも感じたことだが、余計な情報がない分、PCサイトより見やすいかも

Chromeデベロッパーツール
・「Toggle device mode」が効かない
・PCからスマホ指定しているのに、PC画面で表示されてしまう

Chromeデベロッパーツールで、スマホソースコードを確認 → 終了後再開

display: table;
・tableタグは使用していないが、「display: table;」を使用している

スマホメニュー位置
・「Yahoo! JAPAN」「ユニクロ」のメニュー位置は左上
・しかし、Bootstarap4のメニュー位置は左上
・そんなので本当に大丈夫なのだろうか?

スマホメニュークリック後
・全体にメニューが広がる
・階層構造になっているが、写真を使用しているため大変見やすい
・「4つあるグローバルメニュー項目の一つ」と、「スマホメニュークリック後の階層構造一番上」の遷移先は同じ
・スマホメニュークリックした方が、より詳しい場所を選定できるよう工夫されている
・要は、カテゴリー単位のサイトマップのようなもの

グローバルメニュー
・「Yahoo! JAPAN」「ユニクロ」ともに、「スマホメニュー」以外に「グローバルメニュー」も配置している
・そういうものかな?


キャプチャ









YouTube / 2015年12月21日

 閲覧数:476 投稿日:2015-12-21 更新日:2015-12-22

YouTubeアプリ


NexusにはデフォルトでYouTubeアプリがインストールされている
・そのため、YouTubeサイトを見ることが出来ない
・Yahoo検索結果で、YouTubeサイトを指定しても、自動的に「YouTubeアプリ」が起動する仕様

USBデバッグ機能
・アプリに対しては無効


感想


YouTubeサイトはtableタグを使用している
<table id="suggestTable"></table>



キャプチャ







調査してみて気が付いたこと / 感想 / 今後の方針

 閲覧数:481 投稿日:2015-12-21 更新日:2015-12-21

モバイル画面はデザイン的に差がつきにくい


PC画面より小さいため、似たようなデザインばかり
・出来ることは限られている
・動きの部分を除けば、大体似たようなページになるのではないか
・少なくとも、PCサイトのような違いはあまり感じなかった

情報 > デザイン
・重視されるのは情報であって、イメージや雰囲気ではない
・既にブランドを確立しているサイトならともかく、スマホサイトデザインだけで注目を集めることは極めて難しい気がする


アプリ > スマホサイト


スマホサイトに魅力を感じない
・誰が何をやってもあまり差がつかない気がする
・デザイナー泣かせ?
・アプリ開発に注力すべきなのかもしれない、と改めて思った


今後の方針


ベースはユニクロ
・一番いいなと思ったのはユニクロなので、見た目はこのサイトを参考にしていく

テーブルタグ
・未使用

どうやってテーブルのように見せるか?
・まずは、「display:table;」で何が出来るかを確認

左上スマホメニュー

 閲覧数:456 投稿日:2015-12-22 更新日:2015-12-22
転職サイトなら日本最大級の【エン転職】


モバイルデザイン1 / スマホサイトのベースとなるフレームワークを検討

Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない



類似度ページランキング
順位 ページタイトル抜粋
1 モバイルデザイン2 / スマホサイトにおけるtableタグ使用可否を検討 92
2 モバイルデザイン1 / スマホサイトのベースとなるフレームワークを検討 51
3 モバイルデザイン8 / スマホはbodyタグに余白なしがデフォ?  46
4 モバイルデザイン3 / display: table; 44
5 モバイルデザイン4 / スマホメニュー  43
6 モバイルデザイン7 / スマホ pc 広告 切り替え bootstrap 42
7 モバイルデザイン10 / aタグ範囲「切り替え」 40
8 Privateスマートフォンデザインルール 39
9 モバイルデザイン9 / トップページリスト表示 37
10 レスポンシブWebサイトにおけるブレイクポイント 37
11 モバイルデザイン6 / フォーム 35
12 サイトにプログラムコードを貼り付ける preタグのCSS 34
13 モバイル フレンドリー テスト / viewport設定 34
14 モバイルデザイン5 / スクロールアニメーション 33
15 ホーム・トップ・サイト名・ロゴ / グローバルナビゲーション 30
16 Google Chrome™ デベロッパーツールで表示できないスマホ画面を確認するためには、「mobile browser emulator」を使用 29
17 PHPでスマホ振り分けを検討 28
18 Braveインストールしてみたけれども、全ての広告を必ず非表示に出来るわけではないみたい 28
19 WebサイトをHTML5で作成したら、IE8で、グローバルナビゲーション表示がおかしくなった 27
20 Adobe Creative Suite 3 Master Collection インストール 27
2024/3/29 2:34 更新
週間人気ページランキング / 3-22 → 3-28
順位 ページタイトル抜粋 アクセス数
1 Design 0 42
2 LOCK: File currently in use. / マニフェストを読み込めませんでした 10
3 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 7
4 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 6
4 16進数カラーコード / 2進数 6
4 navタグで定義している部分だけCSSが効かない【html5】 | HTML5(HTML) 6
5 HLS / HSL 4
5 HTML5でiframeスクロールバーを表示しない方法が不明 | HTML5(HTML) 4
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 2
6 画像大きさ | 他サイト調査(HTML) 2
6 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 | Backgrounds and Borders Module(CSS) 2
6 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 2
7 Google Chrome を閉じた際にバックグラウンド アプリの処理を続行する / ハードウェア アクセラレーションが使用可能な場合は使用する 1
7 Chromeで名前を付けて保存する際、ファイルを一つにする方法 1
7 ログイン 1
7 「font-size」効果を打ち消すスタイルシートは、「font-size:100%;」? 1
7 イラスト素材 | デザイン 1
7 RGB → 色相H … 最小値基準 × 図形 の考え方 | 色変換(色) 1
7 36ビットカラー 1
7 RGBの種類 / ビットカラー | RGB(色) 1
2024/3/29 1:01 更新