EOS Kiss X7・8000D・α7のお散歩カメラブログ。カメラとか写真とか料理とか。

ぽちろぐ

手持ちレンズを列挙してテーブルを作成・レスポンシブデザインでテーブルのみスクロールするテストです。

メーカー キヤノン キヤノン キヤノン キヤノン キヤノン キヤノン キヤノン キヤノン 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
手ぶれ補正 × × × × × × × × × × × × ×

参考:http://neareal.com/2021/

いっそ、「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;
}
}

意外なほどシンプルです。

一つ心配事が片付きました。良かった良かった。

コメントを残す

 こちらの記事も読んで見ましょう

手持ちレンズを列挙してテーブルを作成・レスポンシブデザインでテーブルのみスクロールするテストです。 EOS Kiss X7・8000D・α7のお散歩カメラブログ。カメラとか写真とか料理とか。

Copyright©ぽちろぐ,2015 All Rights Reserved.

ページ先頭へ