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

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

Bootstrap4系

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

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

 閲覧数:576 投稿日: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日

 閲覧数:696 投稿日: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日

 閲覧数:583 投稿日: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日

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

YouTubeアプリ


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

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


感想


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



キャプチャ







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

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

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


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

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


アプリ > スマホサイト


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


今後の方針


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

テーブルタグ
・未使用

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

左上スマホメニュー

 閲覧数:532 投稿日: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/10/05 8:37 更新
週間人気ページランキング / 9-28 → 10-4
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 19
2 鉄道会社毎のカラーコード | カラーコード(色) 18
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 13
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 9
5 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 7
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 6
6 RGBの種類 / ビットカラー | RGB(色) 6
6 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 6
7 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 5
7 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 5
7 「bgcolor」「background-color」「background」の違い | CSS 5
8 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 4
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
9 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
9 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 3
9 aタグで複数のブロック要素を囲むやり方 | CSS 3
9 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 3
10 HTML5では「ブロックレベル要素」「インライン要素」で分類しない | HTML5(HTML) 2
10 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 2
10 Design 0 2
2024/10/5 1:01 更新