• 御子柴
• 2020-05-19 19:59:34

スマホで見るとズレてしまうとのこと、見た目はキレイにしたいですよね。

まず、パソコンとスマホでは画面の幅(表示の幅)が違うので、とりあえずHPで作成したかどうかに限らず、パソコンでは改行されずに表示される文章が、スマホでは途中で改行されてしまったり、パソコンであってもブラウザの表示幅を狭くすると途中で改行されてしまったりすることがあります。
恐らくですが①の前にスペースを入力されていて、スマホでは「テキストの」で改行されるために「問題を解きましょう。」が①よりも前に来てしまっているのではないかと思います。

回避するとしたら、HTMLモードで枠線が見えない表を作成するぐらいしか思いつきませんでした。
※HTMLモードは「各ページの編集」から編集したいページを選択して、編集したい記事の「本文」欄の右上のHTMLアイコンをクリックすると使用できます。

以下が枠線が見えない表を作成して、文章の途中で改行されても行頭が揃うようにしたHTMLタグです。

<table style="width: 100%;">
<tbody>
<tr>
<td width="5%" style="text-indent:1em;border: none; vertical-align: top;">①</td>
<td style="border: none; vertical-align: top;">まず、動画を見ながらテキストの問題を解きましょう。</td>
</tr>
<tr>
<td width="5%" style="text-indent:1em;border: none; vertical-align: top;">②</td>
<td style="border: none; vertical-align: top;">回答を照合しましょう。</td>
</tr>
</tbody>
</table>

ちょっと解説すると
table部分のwidth: 100% → 表示できる枠一杯の幅にする。
text-indent:1em → 行頭に1文字分のスペースを空ける。
td部分のwidth="5%" → 左側部分(①の行)を表全体の5%の幅にする。
border: none → 罫線を表示しない。
vertical-align: top → 上揃えにする。

③以降は②が含まれる<tr>から</tr>までをコピーして</tbody>の前に追加していくと良いと思います。

HTMLの知識が必要になりますし、他にも回避策があるかもしれませんが、私はこれぐらいしか回避策が思いつきませんでした。

記事を編集する