エンジニアの効率は、どのぐらいプログラムをキレイに書けるかではなく、どれだけ早く作業を完了できるかに尽きます。
出来上がったプログラムが、キレイなコードになっているとか、コメントが分かりやすいとか、構成が整っているというのは、その後の評価に影響するものの、まずはいかに素早く仕上げられるかという事が、一般的にも評価されるようです。
そんな時、優秀なエンジニアというのは、過去に似たようなプログラムをコーディングした経験があれば、スラスラとプログラミングできますが、そうでなければ、手順に沿って作り上げなければいけません。
ここで一番手際よく、効率的に作業を完了できるのは、コピペであることは、誰が考えても明らかです。
果たしてコピペをするという行為は、何となく後ろめたい感じがしますが、自分で書いたコードであれば、コピペするのは、非常に効率アップの要素と考えても問題ないというのがここで言いたい意見です。
そうした時のために、自分でスニペットを作り貯めておくというのは、プログラマーにとって、とてもいい自分に対する貯蓄であると考えられます。
CSSで縦書きしたい。
どのような場面でCSSの縦書きを使いたいかというと、小説のような原稿用紙表示にしたい場合や、横長よりも縦長が許されるtable構造の内容などです。
スマホで見る時は、横長よりも縦長の方が便利な時が多いですから、縦長処理は、結構利用価値があると思いますよ。
TABLEタグに対するCSSの扱い方
基本
こういうシステムデータのレコード表示のtableデータを表示する事ってよくあると思います。
そんな時に、横長表示にしたくない場合は、縦長にすると、スッキリする場合もあります。
まずは、「１０月」の箇所をrowspanセットしてみます。
Rowspanセット
上下に同じ見出しは、縦に繋げることで、見やすくなる場合があります。
縦書きセット：施策１
Chromeブラウザで、table内のtdに対して下記のコードをセットしてみました。
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
どうやらtable-cellに対しての縦書き仕様は、うまくセットできないようです。
ちなみに、Mac版Firefoxでは以下のような見栄え。
<style>
table th,
table td{
white-space:nowrap;
}
td.tate{
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
</style>
<table class="table-bordered normal">
<thead>
<tr>
<th>#</th>
<th>月</th>
<th>日</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="tate" rowspan="2">10月</td>
<td class="tate">25日</td>
<td>新宿の○○会社でエンジニアセミナーに参加</td>
</tr>
<tr>
<td>2</td>
<td class="tate">27日</td>
<td>渋谷の○○スペースで、ハッカソンに参加</td>
</tr>
<tr>
<td>3</td>
<td class="tate">11月</td>
<td class="tate">3日</td>
<td>丸の内のカンファレンスに参加</td>
</tr>
</tbody>
</table>
縦書きセット：施策2
ChromeとFirefoxではレンダリングに差が出てしまいました。
そこで、tdタグの下にpタグで文字を囲ってみました。
td.tate p{
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
これで、ブラウザ間では、同じような見え方になりました。
全てを縦表示に:施策3
半角文字は、横倒しの表示になってしまうので、強引に縦に並べたい場合は、下記コードを追加すると、いいです。
text-orientation: upright;
-webkit-text-orientation: upright;
全角と半角の入り混じった縦書き表示
半角と言っても、英字ではなく、数値を縦書きにするのは、非常に無理がある事かもしれません。
色々実験してみて、こういうコードを用意しておくことで、その場で最適な見せ方ができるようにしなければいけませんね。
「css 縦書き」で検索すると、沢山の検索結果が出ますが、ブラウザ毎にベンダープレフィックスが必要なモノもあったり、見え方が違う場合もあるので、チェックも怠らないようにしなければいけませんね。
Googleで検索「css 縦書き」
0 件のコメント:
コメントを投稿