表にした方が分かりやすい事も
画像の上または下に説明をつけるより
隣に書いた方が見やすい事も有ります。
HTMLで指定することもできますが
画像の大きさや文字の量によっては崩れてしまう事も。
そして一つの画像だけではなくいくつも並べる時は
表に入れてしまった方が簡単で
見栄えも良くなります。
HTMLは定型文で保存
表の説明の前に大事なPOINT！
HTMLを全部覚えてスラスラ書けるなら
問題はありませんが
私レベルの人はたいてい
どこかで見つけてきてコピペ。
ワードにコピーした保存とか
ブラウザのお気に入りにブックマーク。
頻繁に使う場合はそれもいちいち面倒だし
面倒だとだんだん使わなくなる。
そんな時のために、はてなブログには
定型文を保存する機能が有ります。
これは文章だけでなく
ＨＴＭＬにも使えます。
サイドバーの定型文の貼り付け。
（クリップボードのアイコン）
もし表示されていなければ
一番下に有る＋で追加できます。
使い方は下記の通りです。
最後に保存を押すのをお忘れなく！
使い方ですが
”作成する”の下の
定型文一覧の中からクリックすると
選択した定型文を貼りつけ
がアクティブになります。
これが一例です。
表2行 20:80
これ、2行じゃなく2列ですね。
私が分かればそれでいい。
数字は左右の幅の％です。
スマホ写真部入部
はてなスマホ写真部の記事を書く時に
入部の説明を入れていますが
毎回部長のページに飛んで
リンクをコピペしに行くより
ここに保存しておいた方が
ひと手間省けるのでこんな風にも使っています。
もしこの表がお役に立ちそうなら
定型文として保存して使ってください。
表のコード
いくつかあります。
簡単なのはエクセルで作って貼り付ける。
ただ、編集画面の上で様子を見ながらの方が
イメージが湧きます。
難しいことはわかりませんが
そんな私でもできる方法をご紹介します。
こちらがサンプル。
2022/2/14投稿の記事の抜粋です。
スクショなので文字は見えにくいと思いますが
スマホで見ても表として成り立っています。
※左がPC、右がスマホの画面です。
コピペするコード
<style>から</table>までをコピーして
ＨTML画面に貼り付けます。
↓この下から
<style>
table td:nth-child(1) {
width: 20%;
}
table td:nth-child(2) {
width: 80%;
}
</style>
<table>
<tbody>
<tr>
<td> 1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
</tr>
</tbody>
</table>
↑ここまでをコピー
横２列・縦9列のこんな表が表示されます。
| 1 | 1 |
| 2 | 2 |
| 3 | 3 |
| 4 | 4 |
| 5 | 5 |
| 6 | 6 |
| 7 | 7 |
| 8 | 8 |
| 9 | 9 |
数字の部分に文字を入れます。
ただし画像を入れる場合は
HTML画面で画像のＵRLを入れてください。
左右とも1～9の数字を入れていますが
列が多くなるとわかりにくいので
１１，１２，１３と書いて
1行目の１、1行目の２とした方が
区別しやすいかもしれません。
細かい説明 表の幅
<style>
table td:nth-child(1) {
width: 20%;
}
table td:nth-child(2) {
width: 80%;
}</style>
この部分は表のスタイルです。
table td:nth-child(1) {
width: 20%;
}
（１）の部分を3，4と増やしていけば
横列の数が増えます。
ただし%の数字は合計して100にして下さい。
tableから始まって
}までがワンセットです。
このセットを増やしていけば
横並びのセル数を増やせます。
＜＞＜/＞
これもワンセット。
<style>で始まったら
終わりに</style>を付けます。
細かい説明 横に並ぶセルの数
<tr>
<td> 1</td>
<td>1</td>
</tr>
横にセルが2つ並ぶセットです。
横に3つセルを並べたい場合は
<tr>
<td> 1セル</td>
<td>2セル</td>
<td>3セル</td>
</tr>
こんな風に増やせばいいわけです。
ただし最初の<style></style>で
(１)(２)と、横に2つという
設定になっているので
必ず（３）も作り、％も合計100にしてください。
細かい説明 縦に並ぶセルの数
<table>
<tbody>
この間に行を入れる。
</table>
</tbody>
＜＞で囲んだ四つのセットは
行を増やしても減らしても
変更せず残しておいてください。
こう見えても私親切なので
下記リンクにセルの数違いの
サンプルコードを置いてあります。
そちらをコピペすれば
簡単です。
