概要
状態:検討中
閲覧数:2,232
投稿日:2016-01-08
更新日:2016-01-08
現状
・ブロック単位でループ表示
・「ブロックの高さ」は「タイトルの長さ」に応じて可変
・画像なし
画像使用プロトタイプ
・ブロック単位でループ表示
・「ブロックの高さ」は「タイトル及び本文の長さ」に応じて可変
※1ブロックの高さがどうしても嵩んでしまう
・その結果、スクロールしないと何が掲載しているか分かりづらい
・一覧表示ではない
・トップページというよりは、カテゴリーページ向き?
・ブロック単位でループ表示
・「ブロックの高さ」は「タイトルの長さ」に応じて可変
・画像なし
<section><div></div></section> |
画像使用プロトタイプ
・ブロック単位でループ表示
・「ブロックの高さ」は「タイトル及び本文の長さ」に応じて可変
※1ブロックの高さがどうしても嵩んでしまう
・その結果、スクロールしないと何が掲載しているか分かりづらい
・一覧表示ではない
・トップページというよりは、カテゴリーページ向き?
<div class= "card" ><div> |
他サイト調査
Yahoo! JAPAN
display:flex;
ピックアップCSS
.List__body{ padding-right : 0 ; padding-left : 0 } .List__item--noBorder .List__body{ border-bottom : 0 } .List__item--disableMinHeight .List__body{ min-height :initial } .List__item--paddingSmall .List__body{ padding : 4px } .List__body{ display :-webkit-box; display :-webkit-flex; display :flex; flex- direction :column; min-height : 44px ; padding : 8px ; border-bottom : 1px solid #eff2f5 ; -webkit-box-orient:vertical; -webkit-box- direction : normal ; -webkit-flex- direction :column; -webkit-box-flex: 1 ; -webkit-flex: 1 ; flex: 1 ; -webkit-box-pack: center ; -webkit-justify- content : center ; justify- content : center } .List__body.is-disabled{ pointer-events: none ; color : #ccc } |
ユニクロ
display: table;
ピックアップCSS
.uni-icon-list a { padding : 12px 16px ; display : table; width : 100% ; table-layout : fixed ; } |
・理解するために設置してみたデモ
今後の方針
1.ブロック OR リスト
・何れの表示にするかを決定
2.実装方法選定
・リストにする場合は、「display:flex;」「display: table;」何れにするかを決定
結論
論点
レスポンシブにするかどうか
・レスポンシブで制作する場合は、出来ることが限られている
・少なくとも出発点は決まっている
・一から作成可能なモバイル専用サイトとは異なる
今回はレスポンシブを採用
・しかも、デスクトップコーディングもほぼ終えていたので
・既存PC画面をどのようにリスト表示するのか、だけを考えた
レスポンシブの問題点
PC画面とモバイル画面はそもそもHTML構成が異なる
極力HTML構成を変更したくない
・「display:flex;」を使用すれば、かなりのことが可能
・同じ階層内であれば、HTML記述とは異なる順番で、要素を出力することがCSSだけで可能
まとめ
1.「レスポンシブ」「専用サイト」の何れで制作するかを最初に決定
2.「レスポンシブ」を選択する場合は、PCメインのデザインにするか、モバイルメインのデザインにするかも予め決定しておく
3.「レスポンシブ」を選択した場合の懸念事項はHTML構成をいかに変更せずコーディングするか。「display:flex;」を使用すると、HTML構成を極力変更せず望む順番で表示することが可能
感想
・これまで「CSSは文書スタイルを装飾するもの」という認識だった
・しかし「レスポンシブ」でスマホ対応させようとすると、HTML構成自体を変更せざるを得ない場面にぶつかる
・「display:flex;」を使用すると、HTML構成変更をある程度まで回避可能
・表示順番変更は、広い意味では装飾だろうが、実際に記述されているHTML構成の順番を上書きするものなので、考えたら結構すごいことだと思う