BloggerのHTMLサンプルコード＠写真を横に並べる、表を挿入する

BLOGはじめました。YAMADA@JPNです😊

このブログはBloggerを使っています。

Bloggerで写真を２枚横に並べるって難しくないですか？今回はHTMLで呪文を挿入することで写真を横に並べることが出来る方法を紹介します。

また、表を作るコードも書いておきますので参考にしていただければと思います。

※今回の記事は主に自分用ですのでコメントは手抜き気味です。

写真を横に並べるHTML

下の写真のように写真を２枚や３枚横に並べる方法です

２個並べる場合

<div style="display: grid; gap: 1em; grid-template-columns: 1fr 1fr;">

このコードを写真の前に挿入。最後に</div>を追加します。以上です

３個並べる場合

<div style="display: grid; gap: 1em; grid-template-columns: 1fr 1fr 1fr;">

このコードを写真の前に挿入します。最後は</div>を追加しておきましょう

〈注意〉

写真と写真の間に改行<br>があると横に並びません。

写真のサイズが違うと凸凹になります。

gap:1emは写真と写真の間のギャップの設定です。1em以外にも5px等の好きな数値に変えることができますし、消すと隙間ゼロになります。

画面幅に対して画像サイズが小さい場合は設定値以上に隙間が開く場合があります。

３枚並べるコードで２枚しか写真を挿入しなくても大丈夫です。

<div style="display: grid; gap: 3px; grid-template-columns: 1fr 1fr 1fr;">

ギャップは3px設定にしてみました。写真サイズもさっきのに比べて勝手に小さくなってますね。

display: gridをdisplay: flexに変えても同じように表示されます。素人なので違いはわかりません。

他にも色々な方法があるようですが、比較的簡単なのでこのやり方を愛用してます。

表を作るHTML

下のような表を作りたい場合のコードです

航空会社	１個目荷物料金	２個目荷物料金
アメリカン航空	$75	$100
ユナイテッド航空	0円	10,000円
ZIPAIR	7,000円/$54	7,000円/$54

<tbody>

<tr>

<th>１個目荷物料金</th>

<th>２個目荷物料金</th>

</tr>

<tr>

<td style="text-align: center;">アメリカン航空</td>

</tr>

<tr>

<td style="text-align: center;">ユナイテッド航空</td>

</tr>

<tr>

<td style="text-align: center;">ZIPAIR</td>

</tr>

</tbody>

</table>

最初の行のstyle="width: 100%;" table-layout:auto=""がレスポンシブル対応のコードですね

<th></th>が太字で強調されている部分です。

<th>や<td>の数を調整すれば表の行や列を増減させることが出来ます。

小さい表バージョンはコチラ👇

航空会社	１個目荷物料金
アメリカン航空	$75
ユナイテッド航空	0円
ZIPAIR	7,000円/$54

<tbody>

<tr>

<th>１個目荷物料金</th>

</tr>

<tr>

<td style="text-align: center;">アメリカン航空</td>

</tr>

<tr>

<td style="text-align: center;">ユナイテッド航空</td>

</tr>

<tr>

<td style="text-align: center;">ZIPAIR</td>

</tr>

</tbody>

</table>

みんなでBloggerを盛り上げていきましょう！
その他の記事もよろしくお願いします⇨サイトマップ
バイバイキーン

このブログを検索