qiitaのtagsページのページネーションが微妙と感じたので今後のUIデザインの反面教師とした際のメモ

6484 ワード
デザイン CSS3 flexbox UI CSS3 テキストリンク

概要

普段はReactNativeでiOSアプリを開発、改善を行なっている

今回は、qiitaで記事を書くにあたり自分が持ってる技術について現在何がqiitaで受けてるか事前に該当技術のタグの一覧(例：Javascript）を調べてから描き始めるが、この一覧のページ遷移が扱いにくかったので、自分が開発運営しているサービスのUI改善などに活かすべくメモを共有する

現状

サイトに入った直後

ページネーションに注目した動作

上記のように、次ページを押すと戻るリンクが出現しそれに押されるようにページネーションエリアが右に移動している
その結果、次ページリンクもズレてしまい戻るリンクが出る2ページ以降同じ位置でクリックすることができずにそのズレに対応する位置にカーソルを動かさざるを追えなくなってしまう

下記に該当HTMLを記述する

first_page_.html
<ul class="st-Pager">

   <li class="st-Pager_count"><span>1 / 2935</span></li>
   <li class="st-Pager_next">
       <a class="st-Pager_link" rel="next"><span class="fa fa-angle-right"></span></a>
   </li>
</ul>
next_page_.html
<ul class="st-Pager">
   <li class="st-Pager_prev">
      <a class="st-Pager_link" rel="prev">
        <span class="fa fa-angle-left"></span>
      </a>
   </li>
   <li class="st-Pager_count"><span>2 / 2935</span></li>
   <li class="st-Pager_next">
       <a class="st-Pager_link" rel="next"><span class="fa fa-angle-right"></span></a>
   </li>
</ul>

この二つを見比べるとli.st-Pager_prevが新しく出現していることがわかる

解決案

解決案としてあらかじめ1ページからでも戻るリンクを出現させることがqiitaのcssを見てすぐ解決できる方法だと感じた

どうやらjustify-content: centerの仕様がそもそもこのcssを設定したタグを中心に置くことに特化した設計なようで、タグが幅が変化した際に同様に中央も変化していくのが原因だった

つまり初めから変化させない前提でデザインしていくことが解決への最短距離ではないかと思っている

proposal_first.html
<ul class="st-Pager">
   <li class="st-Pager_prev">
      <a class="st-Pager_link disabled" rel="prev">
        <span class="fa fa-angle-left"></span>
      </a>
   </li>
   <li class="st-Pager_count"><span>1 / 2935</span></li>
   <li class="st-Pager_next">
       <a class="st-Pager_link" rel="next"><span class="fa fa-angle-right"></span></a>
   </li>
</ul>

上記HTMLはfirst_page_.htmlに戻るリンクを追加させた構成となっている
その戻るリンクのクラスに新しくdisabledを追加した　このクラスに1ページ目だけはクリックさせないようにcssに記述する

paginate.css
a.disabled{
   pointer-events: none;
}

これで1ページ目に存在する戻るリンクが押されない状態になった
そのため配置バランスは1ページ目と2ページ目以降共に同じになり、ページ送りの煩わしさが減ったと思う

ただこのままではページを送っても戻るリンクを押すことができないのでJavaScriptでaタグのdisabledクラスを消して再度ページを戻れるように細工をしたい

今回のメモでは1ページ目と2ページ目以降のリンクデザイン崩れについて言及したが最終ページとその前のページも上記記述の応用で解決する

参考文献

ST40PG: ＜a＞タグのリンクを無効(disabled)にする