概要
状態:検討中
閲覧数:1,462
投稿日: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;」何れにするかを決定
問題発生 ／ どこへaタグを設定するの？
Yahoo! JAPAN
PC
・リンクはテキストに対して実施
・余白スペースをクリックしても遷移しない
モバイル
・aタグでブロック要素を囲っている
・余白スペースをクリックしても遷移
ユニクロ
PC＆モバイル
・aタグでブロック要素を囲っている
・余白スペースをクリックしても遷移
結論
論点
レスポンシブにするかどうか
・レスポンシブで制作する場合は、出来ることが限られている
・少なくとも出発点は決まっている
・一から作成可能なモバイル専用サイトとは異なる
今回はレスポンシブを採用
・しかも、デスクトップコーディングもほぼ終えていたので
・既存PC画面をどのようにリスト表示するのか、だけを考えた
レスポンシブの問題点
PC画面とモバイル画面はそもそもHTML構成が異なる
極力HTML構成を変更したくない
・「display:flex;」を使用すれば、かなりのことが可能
・同じ階層内であれば、HTML記述とは異なる順番で、要素を出力することがCSSだけで可能
まとめ
1.「レスポンシブ」「専用サイト」の何れで制作するかを最初に決定
2.「レスポンシブ」を選択する場合は、PCメインのデザインにするか、モバイルメインのデザインにするかも予め決定しておく
3.「レスポンシブ」を選択した場合の懸念事項はHTML構成をいかに変更せずコーディングするか。「display:flex;」を使用すると、HTML構成を極力変更せず望む順番で表示することが可能
感想
・これまで「CSSは文書スタイルを装飾するもの」という認識だった
・しかし「レスポンシブ」でスマホ対応させようとすると、HTML構成自体を変更せざるを得ない場面にぶつかる
・「display:flex;」を使用すると、HTML構成変更をある程度まで回避可能
・表示順番変更は、広い意味では装飾だろうが、実際に記述されているHTML構成の順番を上書きするものなので、考えたら結構すごいことだと思う