戯れ言葉

スマホ対応のレスポンシブ tableタグで

カテゴリ:レスポンシブ
タグ:

映画のエンディングでのキャスト等の紹介画面。
特に洋画では必ず担当と人名の文字列をセンターから左右に振り分けて
20160219000 Movie
んな風にデザインしています。
あちゃらの人たちが使っている文字は
ひとつひとつの文字の横幅が全部違っています。
また、日本のように縦横の文字数の決まった原稿用紙に書くという感覚がないようで
縦書きで文字間隔は全部同じという日本の文化とは
文字配置のデザイン感覚が全く違うと感じます。

そんなこんなで
センター分けの表記を私のブログでも実現してみようと
思って調べると
HTML のtable タグと云うものを使用するしか方法がありません。

それを使えば下記のように
センター分けで配置し
左側の文字列は右寄せ
右側の文字列は左寄せ
中央に空白を取る
こんな表現ができます。

プロデューサー,ディレクターヴェルナー・マイヤー
レコーディング・エンジニアギュンター・ヘルマンス
第1番1975/5/5,6
第2番1975/5/6,7
第3番1975/6/2,4
第4番1975/5/5,6


スマホ対応にする為にこれも横幅を自動縮尺(レスポンシブとかやら)にし、
あと、やっぱりHTML5 に引っかかっていた部分も修正します。
横幅が狭くなって同じセル内の文字が折り返されたとき
下のセルとの区別がつくように工夫してみました。

CSS には下記のように記述しました。

/*   Table CSS nonHeader 2column 左右均等   */
table.tblnh_2clmC {
    width: 100%;
    border-collapse: separate;    /* セル同士を離す */
    border-spacing: 17px 9px;     /* セルの間隔 左右:上下 */
    style="table-layout: fixed;"
    padding: 0px;
    line-height: 1.1;               /* 文字が折り返されたときの行間 */ 
}

table.tblnh_2clmC td:nth-child(1) {
    width: 50%;
    text-align: right;
    padding: 0px;
    color: #666666;
}

table.tblnh_2clmC td:nth-child(2) {
    width: 50%;
    text-align: left;
    padding: 0px;
}

ここでびっくりしたのが
border-spacing というプロパティで
他の margin padding とは上下左右の間隔の指定順が違います。
margin padding で2値を指定すると、上下、左右の順なのですが、
border-spacing で2値を指定すると、左右・上下の順になります。
なんで?
次が記事中に記載したHTML のtable タグです。

<table style="border-style: none;" class="tblnh_2clmC">
  <tbody>
    <tr><td>プロデューサー,ディレクター</td><td>ヴェルナー・マイヤー</td></tr>
    <tr><td>レコーディング・エンジニア</td><td>ギュンター・ヘルマンス</td></tr>
    <tr><td></td><td></td></tr>
    <tr><td>第1番</td><td>1975/5/5,6</td></tr>
    <tr><td>第2番</td><td>1975/5/6,7</td></tr>
    <tr><td>第3番</td><td>1975/6/2,4</td></tr>
    <tr><td>第4番</td><td>1975/5/5,6</td></tr>
  </tbody>
</table>

実際の記述は上記のような箇条書きにはしません。
記述中は上記のように箇条書きにした方が判りやすいのでそうしますが、
FC2 ブログの本文編集画面でこうやると
改行分の空白行がこの文章の前に挿入されてしまいます。
記事が書き終わって校正が終わった時点でこの部分の改行を取り
一繋がりにしています。

追記
2017 12
table タグでレイアウトするのは
間違っていると云うことで
順次flexbox の記述に変更中。
最後の空白行云々の話は
この記事の記載時点で
FC2の高機能エディタを使用していたための記述です。

Comments 0

There are no comments yet.

Leave a reply
コメントをどうぞ

ブログやホームページのURLをどうぞ

パスワードを入力すると投稿後、訂正・削除が出来ます