文字の配置が不揃いになるのですが

  • # ホームページ制作について
  • Eye99
  • Userきやま
  • Calender2020/04/23

解決
済み

文章を箇条書きで入力する際に、行の先頭又は途中にスペースを入れながら入力しました。その後ホームページを確認すると、行によって文字と文字との間のピッチが異なり、縦横の文字配列がズレて表示されます。
また、PCとスマホとでもホームページに表示される文字の配置が異なっています。
先頭又は途中に空白を入れた文書を縦横揃えて綺麗に表示できませんか?

ワードで作成した文書を一旦メモ帳に張り付けて、さらにHPに張り付けても同じでした。

みんなの回答を見る

  • User猫侍
  • Calender2020-04-23 12:09:54

私も以前、空白やタブ文字をいれて調整していました。
エディタ上ではきれいに見えるのですが、いざブラウザで確認するとずれてしまいますよね。。

空白もタブ文字もHTMLでは文字と認識されてしまうので、ブラウザによっては解釈が異なり崩れる原因になります。

HTMLとCSSで調整するときれいに表示されます。

記事ボックスのHTML編集モードを開いていただくと、
多くの文章が <p> というコードで始まっているかと思います。
この <p> タグがひとつの段落を表しています。
(因みに、<br> というコードは「改行」という意味です。)

文頭を1文字字下げしたい場合、
まずそれをひとつの段落として <p> タグで始め、(段落の最後を </p> で閉じ、)
この「 <p> タグ」に、「1文字字下げする」という意味のCSSコード追記をします。

追記部分の書き方は下記のとおりです。

<p style="text-indent:1em;">あいうえお</p>

上記の「style="text-indent:1em;"」というところが
「1文字の字下げをする」という意味の記述になります。

記事のひとつの段落ごとにこの追記が必要になってしまいますが、
この方法ですと、閲覧環境に関係なく、スペースを調整することができます。
ひとつの方法としてご検討いただければと幸いです。


記事を編集する
  • Userhiguita
  • Calender2020-04-23 15:26:14

すでに猫侍さんが回答してくれていますが、文中の空白も揃えたい場合は<pre>というタグを利用するのもいいかと思います。
<pre>は</pre>までの範囲内で、半角スペース・改行などを入力されたそのまま表示するHTMLタグです。

例えば

あいうえおかきくけこ
さしすせたちつてと

という内容があったとして、「あ」と「さ」の前に同じスペースを空けて、「か」と「た」の位置を揃えたいということであれば、HTML編集モードで以下のように入力します。

----------- ここから -----------
<pre>
 あいうえお かきくけこ
 さしすせ  たちつてと
</pre>
----------- ここまで -----------
※「あ」と「さ」の前に全角スペースを1つ、「お」と「か」の間に全角スペースを1つ、「せ」と「た」の間に全角スペースを2つ入れています。

ただ、<pre>タグの使用にはいくつかの注意点があります。
1)「改行などを入力されたそのまま表示する」ので、逆に言えば改行してないと、ずっと横に文字が表示されて、記事枠からはみ出す可能性があります。
2)一部の文字は以下のように書き換えないと正常に表示されません。
「<」 → 「&lt;」
「>」 → 「&gt;」
「&」 → 「&amp;」

ちょっと使い方が難しいかもしれませんが、一応一つの方法として参考になればいいかなと思います。

記事を編集する
次のページ