借り物（ヤシコン・ツァイス）も含めると18本！馬鹿じゃなかろうか？

ふだん使っているのはEF-S24mm F2.8 STMとインダスター50mm F2.8の2本だけですね。寄れる標準系が好きなんだなあ。

他は「ライブ撮影用」と「いざ！女性を撮る時用！！」と「お仕事で使うよ用」です。出番少ない・・。Meyer-optikなんて寄れないし、使い勝手悪いし、女性を撮った時の得も言われぬ立体感以外に取り柄がありません。しかし、それだけのために手元に置きたいレンズです。PENTACON 29mmなんてマウント違いで2本あるし！どちらかを処分しましょう。

本題：スマホで見ると表だけ横スクロール！

こんなまるで意味の無い表を作ったのは、「スマホで見た時に長い表だけ横スクロールする、レスポンシブデザインあるじゃん？あれ作って。」と言われたからです。

• ぽちろぐはレスポンシブデザインで、PCでもスマホでも破綻なくご覧いただけます。
• 表（<table>タグ）はサイズ指定をしていても強制的に横幅100%になるようにしてありますが、桁数があまりにも多いと破綻します。
• 今回の設定変更（CSS編集）で、スマホで見た時に横にぶれず、表だけ横スクロールするようにしました（したつもり）。

さて、無事に動くでしょうか？

動いた・けど

動きました！

でもね、スマホで見ると行列が入れ替わります。そういう需要もあるのはあるんですが・・。

参考：http://weback.net/mobile/2195/

こちら、CSSだけで実装していますので、もう少し研究してみます。

続き

動きました。見た目が悪いけど、なんとか。

戻ってPCで閲覧すると、はみ出し部分が見えない！

参考：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;
}
}

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

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