htmlの文字列の位置について質問です

質問

ｈｔｍｌで文字の位置を１行ずつ自由な位置にずらしたいのですがｐタグやdivで囲んでｃｓｓで位置指定とすると１行ずつ位置を指定しなければならないので他にいい方法がないか探しています。
　テーブルはあまり使わないほうが良いと聞いたのですが、テーブルで位置をずらすしかないでしょうか？
　他にいい方法をご存じの方いらっしゃったらご教示よろしくお願いします。

回答No.2

tkmojo · ベストアンサー

その場合は下記の様にすれば実現できます。

■html
<p class="a">あいうえお</p>
<p class="k">かきくけこ</p>
<p class="s">さしすせそ</p>

■css
.a{
margin-left:10px;
}
.k{
margin-left:20px;
}
.s{
margin-left:30px;
}

基本的にhtmlは「文書」ですので情報のマークアップのみを行い、
レイアウトは全てcssで行うのが基本です。
スペースで間隔を空ける、という事はしてはいけません。

といっても、仕事ではなく趣味のサイトか何かで検索エンジンも考慮せず、
とりあえず表示だけさせればいい、という事なら
スペースを使うのも自由です。

半角スペースはいくつ打ってもひとつ分の間隔しか空きませんが、
全角スペースまたは「&nbsp;」なら打てば打っただけ間隔があきます。

上記の様に、適当に作るならスペースもありだと思います。
が、cssを覚えないと結局はそのうちレイアウトでつまづきますよ。

お礼

全角スペースで間隔が空きました。が、使ってはいけないのですね。
ｃｓｓは勉強中ですが使い方がまだよくわかってない段階です。
今後はｃｓｓで設定するようにします。
とても わかりやすいご説明ありがとうございました。

回答No.1

tkmojo

画像文字にするのが一番楽かなと思いますが、プレーンテキストでやりたいなら<p></p>と<span></span>でやるのが普通でしょうね。
<p><span>こ</span><span>ん</span><span>に</span><span>ち</span><span>は</span></p>
という感じで、一文字ずつspanで囲んで、cssでレイアウトするのが良いと思います。

tableでやるのはそもそも意味がないですね。
表じゃないものを表としてマークアップするのはよくないというのは当然として、
ひとつひとつの文字をtdに入れてしまったら、文章の意味が無くなります。

「こ」と「ん」と「に」と「ち」と「は」が別々になるので、音声ブラウザは「こんにちは」と読んでくれないし、検索エンジンも「こんにちは」とは認識しません。
情報としての意味がないならそもそもhtmlでやる必要が無いですし、それをやるくらいなら最初から全部画像文字にした方がマシです。

お礼

丁寧なご説明ありがとうございます。
tableを使わないほうがいいと言われるのは表としてマークアップするのがよくないのですね。
画像文字は極力使わないようにしたいので<p>や<span>を使用してみようと思います。
ただ下記のように位置をずらしたい場合位置の指定はやはりｃｓｓで一行ずつ指定する必要がありますか？重ねて質問ですみません。
　　　　　　　　あいうえお
　　　　　　　　　　　かきくけこ
　　　　　　　　　　　　　　さしすせそ
　初歩的な事ですが文字を右にずらす場合スペースがきかないのでｃｓｓで１つずつ設定しなければならないのか悩んでいます。
　よろしくお願いします。