マンガでわかるホームページ作成

CSSを使わないでhtmlだけで横並びにする方法【WordPressでできる】

横並びの方法を調べるとやれfloatだ、やれdisplay:flexだ、やれdisplay:inline-blockだ、とCSSでの方法をオススメされます。

CSSなんか知らん!htmlだけでなんとかならんのか!こちとらWordPressだぞ!

そんなあなたのためにCSSを使わないでhtmlだけで横並びにする方法を説明します。

結論:table(表)を使う

1行2列の表を使えば横並びは完成です。

<table border="1">
    <tr>
        <td>左</td>
        <td>右</td>
    </tr>
</table>

線がいらないときはborder="1"を消しましょう。

tableを使えば画像とテキストを横並べにすることもできます。

  テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

WordPressの場合

WordPressをお使いのあなた。超ラッキーです。htmlすら書かずに横並べができます。

WordPressって何?という方はこちら↓

テーブルブロック

「テーブルブロック」を利用しましょう。

以下のように表示されるのでカラム数(列数)行数を設定し表を作成で完成です。

以下は完成した表です。マスの中には文字がインライン画像のみ追加できます。ブロックは追加できません。

カラムブロック

ブロックを追加する場合は「カラムブロック」を使いましょう。

以下のように選ぶことができます。3列も可能です。

以下は「50/50」を選択した場合です。

この中にさらにブロックを追加していきます。

まとめ

CSSを使わないでhtmlだけで横並びにするにはtable(表)を使いましょう。

WordPressならhtmlすら書かずに横並べにできます。

以上、CSSを使わないでhtmlだけで横並びにする方法でした。

関連記事