dポイントプレゼントキャンペーン実施中!

HTML文で文字列の左側に空白を入れたい時には を使用しています

短い空白なら数回 を連続して記入すれば良いのですが、例えば全角空白10ケの際には ~ と20回も書かなくてはなりません
リストの外見上もブザマですし、メンテの面からも好ましくありません

を繰り返す文法表現はありませんか?
また何らかの代替表現はありませんか?

色々調べましたが分かりません、ぜひ教えてください、お願い致します

A 回答 (5件)

確かに美しくないですね(全角スペース、 、画像スペーサーも)


※ それこそメンテで、間隔を変更したい場合に全ページの編集が必要だし・・・
という事で、デザイン部分はCSSで!

どんなリストかわかりませんが、
それをリストと認識しているなら
dt,ddの定義リストやul,liで箇条書きリストでマークアップするべきで、
CSSで間隔を空けてデザインできます。
marginでもpaddingでもtext-indentでも可能ですし、
widthとtext-alignを絡めたり、positionでも配置できます。

上記が理解できなとか難しいとか、マークアップは不要とかなら
word-spacing:20em;
などで間隔が空きます(該当単語を半角スペース区切りる)

<p style="word-spacing:200px;">1文字目 2文字目 3文字目</p>

外部CSSなら、
p.sp1{word-spacing:8em;}
<p class="sp1">1文字目 2文字目 3文字目</p>
    • good
    • 0
この回答へのお礼

ご指導ありがとうございます

参考にさせて頂きます

まことにありがとうございました

お礼日時:2012/03/11 17:57

>HTML文で文字列の左側に空白を入れたい時には を使用しています


は文字実体参照で、no-break space (non-breaking space)を示す文字をあらわします。英文などで、そこで折り返しては困る単語境界に使用するものです。

★HTML文で文字列の左側に空白を入れたい時には を使用・・・
 最も重要なことですが、HTMLは「文字列の左側に空白を入れ」る目的で書いてはなりません。あくまで、文書を構成する要素をマークアップするものです。どのように見せるかを目的にHTMLがあるのではありません。

 これは、HTMLの根幹に関わる重要な、もっとも理解しておかなければならない部分です。すなわち、HTMLのタグは、<h1>ここは見出し</h1><p>ここはひとつの段落</p>とマークアップするためのもので、<h1>ここは太く大きな字で表す</h1>ためにでも、<p>上下にマージンをとる</p>ために書くのではない。

 空白を入れるために   全 角 空 白  を入れるのは誤りです。
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 ※読み上げソフトは、『空白を入れるために「空白」「空白」「空白」全「空白」角「空白」空「空白」白「空白」「空白」をいれるのは・・と読み上げますし、検索エンジンにもそこに何が書いてあるか理解できなくなります。

 たとえば詩などでテキストを記述どおり記載したいなら
<pre>
Higher still and higher
From the earth thou springest
Like a cloud of fire;
The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.
</pre>
とすべきです。9.3.4 整形済テキスト: PRE要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )より

 また、用語の説明でしたら
<h2>3.1. 新しい要素</h2>
<p>HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。</p>
<dl>
  <dt>section</dt>
  <dd>article要素は、文書やアプリケーションにおける一般的なセクションを表します。h1, h2, h3, h4, h5, h6 要素と共に使用することで、文書構造を表すことができます。</dd>
  <dt>section</dt>
  <dd>section要素はブログのエントリや新聞記事など、文書内で自己完結可能な箇所を示します。</dd>
  <dt>aside</dt>
  <dd>要素はページ内にあるその他の内容と、少ししか関係していないものを表します。</dd>
  <dt>hgroup</dt>
  <dd>要素はセクションの見出しを表します。</dd>
</dl>
 のようにマークアップします。その上で、横に並べるとか、説明文をどの程度ずらすかをスタイルシートで指定します。
dd{
margin-left:5em;/* 左側を5文字分空ける */
text-indent:1em;/* 一行目は1文字、字下げする */
}

★HTML文で文字列の左側に空白を入れたい時には
 ではなく、「こういう文章があり、この部分のテキストを何文字下げる場合はどうすれば良いのか」と、考えてください。質問もそうされたほうが良いです。
 
    • good
    • 0
この回答へのお礼

ありがとうございます

★印の注意は大変参考になりました

今後に活かして参ります

ありがとうございました

お礼日時:2012/03/11 18:00

> HTML文で文字列の左側に空白を入れたい時には


HTML ではなくて CSS を使うよ。

空白 10文字分ぐらいを左に入れたいなら、
<p style="padding-left:10em;">文字列</p>
空白幅は 10em の数字の部分を増やしたり減らしたりすると調節できるよ。

空白じゃなくて、単に文字列の開始位置を右に移動させたいのなら、
<p style="margin-left:10em;">文字列</p>

もっと便利な使い方があるから、
『CSS』 というキーワードで検索するといいかも。


ちなみに、HTML で文字列の配置を調整するのに、 や半角スペースや全角スペース(その他の空白も全て含めて)使うことは推奨されないけれど、

それは HTML のタグのあいだの文字列には、読んだ人にとって情報として意味のあるもの以外は、書かないことが推奨されているということの中の一つだね。
    • good
    • 0
この回答へのお礼

ありがとうございます

大変参考になりました

今後も宜しくご指導願います

ありがとうございました

お礼日時:2012/03/11 18:02

は空白(半角スペース)として使用されることが多いですが、これで空白を広げるのは大変です。

それにw3cにも推薦されていないので記述方法としてはNGですよ。簡単な方法があります。参考にしてみてください。空白を入れるには・・・。

HTMLで文章を入力する時に空白を挿入したい場合は全角スペースを使います。文章に空白を入れるには全角でスペースキーを押します。半角や「tab」キーではブラウザーに反映されません。

記述例

<html>
<head>
<title>題名</title>
</head>
<body>
0回<br /><!-- 全角でスペースキーを押します。0回 -->
 1回<br /><!-- 全角でスペースキーを押します。1回 -->
  2回<br /><!-- 全角でスペースキーを押します。2回 -->
   3回<br /><!-- 全角でスペースキーを押します。3回 -->
    4回<br /><!-- 全角でスペースキーを押します。4回 -->
     5回<br /><!-- 全角でスペースキーを押します。5回 -->
      6回<br /><!-- 全角でスペースキーを押します。6回 -->
       7回<br /><!-- 全角でスペースキーを押します。7回 -->
        8回<br /><!-- 全角でスペースキーを押します。8回 -->
         9回<br /><!-- 全角でスペースキーを押します。9回 -->
          10回<br /><!-- 全角でスペースキーを押します。10回 -->
</body>
</html>

こんな記述をすれば簡単に空白を入れることが出来ます。記述例をコピペして確認してみてください。ブラウザ上では綺麗に空白が出来ているはずですよ。もちろん文章の途中にも空白を入れることが出来ます。※ 「空白=全角でスペースキーを押す」と覚えておけば良いと思います。
    • good
    • 0
この回答へのお礼

ありがとうございます

ご指導の通り 「空白=全角でスペースキーを押す」と覚えておきます

これでひとつ賢くなりました

誠にありがとうございました

お礼日時:2012/03/09 20:43

それはどうしても空白を入れなければいけないですか?



整形のためなら,左寄せ,右寄せ,中央寄せにするか,CSS(paddingやmargin)
などを使ってで書く方がよいのではないでしょうか。

またはtableを使うのがよいかもしれません。

答えになってないかもしれませんが…。
    • good
    • 0
この回答へのお礼

ご指導ありがとうございました

参考にさせて頂きます

こんごとも宜しくお願い申しあげます

お礼日時:2012/03/09 20:30

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!