手持ちレンズを列挙してテーブルを作成・レスポンシブデザインでテーブルのみスクロールするテストです。
2015年09月18日
メーカー | キヤノン | キヤノン | キヤノン | キヤノン | キヤノン | キヤノン | キヤノン | キヤノン | Induster | ミノルタ | オリンパス | Meyer-optik | PENTACON | PENTACON | PENTACON | ヤシカ | ヤシカ | ヤシカ |
マウント | EF-S | EF-S | EF-S | EF | EF | EF-S | NewFD | NewFD | M42 | MD | OM | M42 | Exakta | M42 | M42 | ヤシコン | ヤシコン | ヤシコン |
焦点距離 | 10-18 | 18-135 | 24 | 35 | 50 | 55-250 | 28 | 35-70 | 50 | 50 | 50 | 50 | 29 | 29 | 50 | 28 | 50 | 85 |
F値 | 4.5-5.6 | 3.5-5.6 | 2.8 | 2.0 | 1.8 | 4-5.6 | 2.8 | 4.0 | 2.8 | 1.4 | 1.8 | 2.8 | 2.8 | 2.8 | 1.8 | 2.8 | 1.4 | 1.4 |
最短撮影距離m | 0.22 | 0.39 | 0.15 | 0.3 | 0.35 | 0.85 | 0.3 | 0.5 | 0.28 | 0.45 | 0.45 | 0.75 | 0.25 | 0.25 | 0.33 | 0.25 | 0.45 | 1.0 |
手ぶれ補正 | ○ | ○ | ○ | ○ | × | ○ | × | × | × | × | × | × | × | × | × | × | × | × |
借り物(ヤシコン・ツァイス)も含めると18本!馬鹿じゃなかろうか?
ふだん使っているのはEF-S24mm F2.8 STMとインダスター50mm F2.8の2本だけですね。寄れる標準系が好きなんだなあ。
他は「ライブ撮影用」と「いざ!女性を撮る時用!!」と「お仕事で使うよ用」です。出番少ない・・。Meyer-optikなんて寄れないし、使い勝手悪いし、女性を撮った時の得も言われぬ立体感以外に取り柄がありません。しかし、それだけのために手元に置きたいレンズです。PENTACON 29mmなんてマウント違いで2本あるし!どちらかを処分しましょう。
本題:スマホで見ると表だけ横スクロール!
こんなまるで意味の無い表を作ったのは、「スマホで見た時に長い表だけ横スクロールする、レスポンシブデザインあるじゃん?あれ作って。」と言われたからです。
- ぽちろぐはレスポンシブデザインで、PCでもスマホでも破綻なくご覧いただけます。
- 表(<table>タグ)はサイズ指定をしていても強制的に横幅100%になるようにしてありますが、桁数があまりにも多いと破綻します。
- 今回の設定変更(CSS編集)で、スマホで見た時に横にぶれず、表だけ横スクロールするようにしました(したつもり)。
さて、無事に動くでしょうか?
動いた・けど
動きました!
メーカー | キヤノン | キヤノン | キヤノン | キヤノン | キヤノン | キヤノン | キヤノン | キヤノン | Induster | ミノルタ | オリンパス | Meyer-optik | PENTACON | PENTACON | PENTACON | ヤシカ | ヤシカ | ヤシカ |
マウント | EF-S | EF-S | EF-S | EF | EF | EF-S | NewFD | NewFD | M42 | MD | OM | M42 | Exakta | M42 | M42 | ヤシコン | ヤシコン | ヤシコン |
焦点距離 | 10-18 | 18-135 | 24 | 35 | 50 | 55-250 | 28 | 35-70 | 50 | 50 | 50 | 50 | 29 | 29 | 50 | 28 | 50 | 85 |
F値 | 4.5-5.6 | 3.5-5.6 | 2.8 | 2.0 | 1.8 | 4-5.6 | 2.8 | 4.0 | 2.8 | 1.4 | 1.8 | 2.8 | 2.8 | 2.8 | 1.8 | 2.8 | 1.4 | 1.4 |
最短撮影距離m | 0.22 | 0.39 | 0.15 | 0.3 | 0.35 | 0.85 | 0.3 | 0.5 | 0.28 | 0.45 | 0.45 | 0.75 | 0.25 | 0.25 | 0.33 | 0.25 | 0.45 | 1.0 |
手ぶれ補正 | ○ | ○ | ○ | ○ | × | ○ | × | × | × | × | × | × | × | × | × | × | × | × |
でもね、スマホで見ると行列が入れ替わります。そういう需要もあるのはあるんですが・・。
参考:http://weback.net/mobile/2195/
こちら、CSSだけで実装していますので、もう少し研究してみます。
続き
動きました。見た目が悪いけど、なんとか。
戻ってPCで閲覧すると、はみ出し部分が見えない!
メーカー | キヤノン | キヤノン | キヤノン | キヤノン | キヤノン | キヤノン | キヤノン | キヤノン | Induster | ミノルタ | オリンパス | Meyer-optik | PENTACON | PENTACON | PENTACON | ヤシカ | ヤシカ | ヤシカ |
マウント | EF-S | EF-S | EF-S | EF | EF | EF-S | NewFD | NewFD | M42 | MD | OM | M42 | Exakta | M42 | M42 | ヤシコン | ヤシコン | ヤシコン |
焦点距離 | 10-18 | 18-135 | 24 | 35 | 50 | 55-250 | 28 | 35-70 | 50 | 50 | 50 | 50 | 29 | 29 | 50 | 28 | 50 | 85 |
F値 | 4.5-5.6 | 3.5-5.6 | 2.8 | 2.0 | 1.8 | 4-5.6 | 2.8 | 4.0 | 2.8 | 1.4 | 1.8 | 2.8 | 2.8 | 2.8 | 1.8 | 2.8 | 1.4 | 1.4 |
最短撮影距離m | 0.22 | 0.39 | 0.15 | 0.3 | 0.35 | 0.85 | 0.3 | 0.5 | 0.28 | 0.45 | 0.45 | 0.75 | 0.25 | 0.25 | 0.33 | 0.25 | 0.45 | 1.0 |
手ぶれ補正 | ○ | ○ | ○ | ○ | × | ○ | × | × | × | × | × | × | × | × | × | × | × | × |
いっそ、「PCでもスマホでも、はみ出した部分はスクロールする」仕様にしちゃった方がいいですね。
改造して、PCにもスクロールを適用
ということで、動きました。一番上の表です。
PCでもスマホでも、レイアウトを崩さずに表だけ横スクロールします。<th>タグがある場合は、そこだけ固定されます。
スタイルシートは以下の通りです。
.post table {
width : 100%;
margin : 0 0 10px 0;
border-collapse : collapse;
border-spacing : 0;
}
.post table th, td {
margin : 0;
padding : 8px 10px; /*枠内の余白・好きなサイズで*/
border-collapse : collapse;
border : 1px solid #ccc; /*罫線色*/
border-spacing : 0;
}
.post table tr:nth-child(even) { /*偶数行に色付け・基本的に不要*/
background-color : #f3f3f3;
}
.post table th { /*タイトル行に色付け・基本的に不要*/
background : #ffc;
}
@media screen and (min-width: 781px) { /*PC用の設定・781pxをしきい値に設定*/
.post table {
display : block;
overflow-x : auto; /*これがスクロール設定!*/
}
.post table th, td {
width : 781px;
white-space : nowrap;
}
}
@media screen and (max-width: 780px) { /*スマホ用の設定・780pxをしきい値に設定*/
.post table {
display : block;
overflow-x : auto; /*これがスクロール設定!*/
}
.post table th, td {
width : 780px;
white-space : nowrap;
}
}
意外なほどシンプルです。
一つ心配事が片付きました。良かった良かった。
この記事は2015/09/18に公開され、17 views読まれました。