爆速コーディングテクニックその1：テーブルレイアウト編｜スタッフブログ

制作部部長

小島和剛

2020.05.21 コーディング

爆速コーディングテクニックその1：テーブルレイアウト編

こんにちはデザイナーの小島です。

先日クレヨンしんちゃんの映画を見ていたら、野原ひろしとスペックが割と似ている事が判明しました。
年齢35歳、子供の年齢5歳、勤続年数15年、最近足の匂いが気になり始めた、メタボ傾向(ビール腹)。
※なお、先日36歳になってしまったので、少し年上になってしまいました。

野原ひろしの勤務する双葉商事では勤続15年のご褒美に家族で沖縄旅行をプレゼントされていました。

さて、Web制作を長年やっているとコーディング（マークアップ）のスピードがとても重要だと感じる事がたくさんあります。

スピードアップの方法は、EmmetやSass、フレームワークなど技術的・機能的なものなどたくさんありますが、地味に時間が掛かる作業をちょっとしたテクニックで爆速化させるテクニックを紹介したいと思います。

今回は第一弾として、テーブルレイアウトの爆速術です。

エクセルで届いた原稿の表組みがめっちゃ長くて流し込み大変。。
そんな時に使える技です。

実はテーブルのセルをまとめてコピーして、テキストエディターに貼り付けると、そのままの形で貼り付けられるんです。

たとえばこんな表があったとします。

名前	年齢	すきなもの
野原ひろし	35歳	ビール
野原みさえ	29歳	魔法少女
野原しんのすけ	5歳	おねえさん
野原ひまわり	0歳	宝石

一つずつコピペしていくのは大変なので、前後に列を追加してHTMLに流し込みやすいように
こんな感じに作り変えてみます。

<tr><th>	名前	</th><th>	年齢	</th><th>	</th><th>	すきなもの	</th><th>
<tr><td>	野原ひろし	</td><td>	35歳	</td><td>	</td><td>	ビール	</td><td>
<tr><td>	野原みさえ	</td><td>	29歳	</td><td>	</td><td>	魔法少女	</td><td>
<tr><td>	野原しんのすけ	</td><td>	5歳	</td><td>	</td><td>	おねえさん	</td><td>
<tr><td>	野原ひまわり	</td><td>	0歳	</td><td>	</td><td>	宝石	</td><td>

すべてのセルを選択してテキストに貼り付けると

<tr><th>名前</th><th>年齢</th><th></th><th>すきなもの</th><th>
<tr><td>野原ひろし</td><td>35歳</td><td></td><td>ビール</td><td>
<tr><td>野原みさえ</td><td>29歳</td><td></td><td>魔法少女</td><td>
<tr><td>野原しんのすけ</td><td>5歳</td><td></td><td>おねえさん</td><td>
<tr><td>野原ひまわり</td><td>0歳</td><td></td><td>宝石</td><td>

このようにそのままの形式で貼り付けられます。

ちなみにそのまま貼り付けるとタブスペースなどが入ってしまうので
一括置換で消してあげると良いかと思います。

また、表組みなら応用出来るので「table / tr / th / td」以外にも「ul / li」「dl / dt / dd」など何でも使えると思いますので、是非活用していただければと思います。