ここから本文です

Webページを作成しているのですが文字列を揃える方法に困っています。

yam********さん

2019/2/2105:23:50

Webページを作成しているのですが文字列を揃える方法に困っています。

例えば
aiueo あいうえお
kakikukeko かきくけこ
これを
aiueo あいうえお
kakikukeko かきくけこ
と読みがなをそろえることがしたいのですがうまくいきません。どのようにすればHTMLできれいに文字を揃えることができるのでしょうか?全角スペースを入れる方法以外で教えていただけないでしょうか。よろしくお願いします。

この質問は、活躍中のチエリアン・専門家に回答をリクエストしました。

閲覧数:
58
回答数:
3
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

glo********さん

2019/2/2118:19:01

◎ 案1 - - - - - - - - - - - -

<pre> タグ内に Tab 文字を入れる方法とかはどうでしょう?


<html>
<head>
<meta charset="shift_jis">
<title>Idea 1</title>
</head>
<body>
<pre>
aiueo[Tab][Tab]あいうえお
kakikukeko[Tab]かきくけこ
</pre>
</body>
</html>


※【注】 [Tab] の部分は実際には [Tab] と入力するのではなく
         Tab キーで タブ を入力するという意味です。



◎ 案2 - - - - - - - - - - - -

テーブル(<table>)レイアウトは推奨されていませんが
単語帳のような本当の表であれば
テーブルを使ってもかまわないと思います。


<html>
<head>
<meta charset="shift_jis">
<title>Idea 2</title>
</head>
<body>
<table cellpadding="5">
<tr><td>aiueo</td><td>あいうえお</td></tr>
<tr><td>kakikukeko</td><td>かきくけこ</td></tr>
</table>
</body>
</html>



◎ 案3 - - - - - - - - - - - -

<div> を横並びにするとか。。。


<html>
<head>
<meta charset="shift_jis">
<title>Idea 3</title>
</head>
<body>
<div style="float: left; padding: 5px;">
aiueo<br>
kakikukeko
</div>
<div style="float: left; padding: 5px;">
あいうえお<br>
かきくけこ
</div>
</table>
</body>
</html>



◎ 案4 - - - - - - - - - - - -

文字コードを UTF-8 にして \u00a0 の文字を適当数入れるとか...。
(キッチリ揃わないので個人的には非推奨ですが。)


<html>
<head>
<meta charset="utf-8">
<title>Idea 4</title>
</head>
<body>
aiueo           あいうえお<br>
kakikukeko  かきくけこ
</div>
</table>
</body>
</html>


※↑スペースは確かに入っているでしょう?
    (レイアウトは少々ズレてると思いますけど。)

この回答は投票によってベストアンサーに選ばれました!

ベストアンサー以外の回答

1〜2件/2件中

並び替え:回答日時の
新しい順
|古い順

不適切な内容が含まれている可能性があるため、非表示になっています。

投稿内容に関する注意

syn********さん

2019/2/2109:27:05

aiueo_______:あいうえお
kakikukeko_:かきくけこ

こうしたいってことかな?

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

ero********さん

2019/2/2109:22:11

&nbsp;を入れる

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる