• ベストアンサー

HTML   の繰返し法???

HTML文で文字列の左側に空白を入れたい時には   を使用しています 短い空白なら数回   を連続して記入すれば良いのですが、例えば全角空白10ケの際には    ~   と20回も書かなくてはなりません リストの外見上もブザマですし、メンテの面からも好ましくありません   を繰り返す文法表現はありませんか? また何らかの代替表現はありませんか? 色々調べましたが分かりません、ぜひ教えてください、お願い致します

  • HTML
  • 回答数5
  • ありがとう数7

質問者が選んだベストアンサー

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.5

確かに美しくないですね(全角スペース、&emsp;、画像スペーサーも) ※ それこそメンテで、間隔を変更したい場合に全ページの編集が必要だし・・・ という事で、デザイン部分は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>

sato-may
質問者

お礼

ご指導ありがとうございます 参考にさせて頂きます まことにありがとうございました

その他の回答 (4)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.4

>HTML文で文字列の左側に空白を入れたい時には &nbsp; を使用しています は文字実体参照で、no-break space (non-breaking space)を示す文字をあらわします。英文などで、そこで折り返しては困る単語境界に使用するものです。 ★HTML文で文字列の左側に空白を入れたい時には &nbsp; を使用・・・  最も重要なことですが、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-html401j/struct/text.html#edef-PRE )より  また、用語の説明でしたら <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文で文字列の左側に空白を入れたい時には  ではなく、「こういう文章があり、この部分のテキストを何文字下げる場合はどうすれば良いのか」と、考えてください。質問もそうされたほうが良いです。  

sato-may
質問者

お礼

ありがとうございます ★印の注意は大変参考になりました 今後に活かして参ります ありがとうございました

  • dscripty
  • ベストアンサー率51% (166/325)
回答No.3

> HTML文で文字列の左側に空白を入れたい時には HTML ではなくて CSS を使うよ。 空白 10文字分ぐらいを左に入れたいなら、 <p style="padding-left:10em;">文字列</p> 空白幅は 10em の数字の部分を増やしたり減らしたりすると調節できるよ。 空白じゃなくて、単に文字列の開始位置を右に移動させたいのなら、 <p style="margin-left:10em;">文字列</p> もっと便利な使い方があるから、 『CSS』 というキーワードで検索するといいかも。 ちなみに、HTML で文字列の配置を調整するのに、&nbsp; や半角スペースや全角スペース(その他の空白も全て含めて)使うことは推奨されないけれど、 それは HTML のタグのあいだの文字列には、読んだ人にとって情報として意味のあるもの以外は、書かないことが推奨されているということの中の一つだね。

sato-may
質問者

お礼

ありがとうございます 大変参考になりました 今後も宜しくご指導願います ありがとうございました

回答No.2

&nbsp; は空白(半角スペース)として使用されることが多いですが、これで空白を広げるのは大変です。それに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> こんな記述をすれば簡単に空白を入れることが出来ます。記述例をコピペして確認してみてください。ブラウザ上では綺麗に空白が出来ているはずですよ。もちろん文章の途中にも空白を入れることが出来ます。※ 「空白=全角でスペースキーを押す」と覚えておけば良いと思います。

sato-may
質問者

お礼

ありがとうございます ご指導の通り 「空白=全角でスペースキーを押す」と覚えておきます これでひとつ賢くなりました 誠にありがとうございました

回答No.1

それはどうしても空白を入れなければいけないですか? 整形のためなら,左寄せ,右寄せ,中央寄せにするか,CSS(paddingやmargin) などを使ってで書く方がよいのではないでしょうか。 またはtableを使うのがよいかもしれません。 答えになってないかもしれませんが…。

sato-may
質問者

お礼

ご指導ありがとうございました 参考にさせて頂きます こんごとも宜しくお願い申しあげます

関連するQ&A

  • 「半角スペース」と「&nbsp;」の違い、を教えて

    「半角スペース」と「&nbsp;」の違い、を知りたいです。 ■背景 ・HTMLを秀丸エディタに貼ったりすると、「半角スペース」と「&nbsp;」を別認識します ・「&nbsp;」があると、色々不都合があるので、認識しやすいようにしたいです ・具体的には、「半角スペース」は目立つのでいいのですが、「&nbsp;」は分かりにくいので、これを目立たせたいです ■疑問 ・「半角スペース」と「&nbsp;」の違い、は何ですか? ・「改行されない空白文字」? ・「HTMLで使用可能な文字参照」てことは、HTMLではないのでしょうか? ・HTMLだとしたら、秀丸エディタとかにコピーした際、認識されるのはおかしいと思うのですが ■今の認識 ・HTMLで利用可能な「改行されない空白文字」 ・コピーされると認識されるので、HTMLではない ・だけど、「半角スペース」とも「全角スペース」とも違う ・??? ・もしかして「空白文字」と「スペース」は違う意味??

  • HTMLで空白を入れるには?

    HTMLの勉強をしております。 文字と文字の間に「空白」を入れる場合は、「&nbsp;」を書き込んだほうが良いのでしょうか? それとも、全角や半角の「スペースキー」を、上手に使い分けたほうが良いのでしょうか?

  • 連続した空白を入れたい時は<pre>と&nbsp;

    連続した空白を入れたい時は<pre>と&nbsp; こんにちは、サンタと申します。 連続した空白を入れたい時は<pre>と&nbsp;は、どのようにして挿入することが、適宜なのでしょうか? ソースですが、ul,listタグを使用して、2列にしております。 りんご□□□□□\50 メロン \10 ぶどう□□□□\3000 ミカン \10000 最後の「0」を揃えたいと思います。 ご覧のとおり、りんごと葡萄と比べましたら半角2つ分、りんごの方が空白が多いです。 こういう時に、 &nbsp;&nbsp;などと、&nbsp;の連続はしても宜しいのでしょうか? または、 <pre></pre>タグを使用したほうが良いのでしょうか? ソースですが、ul,listタグを使用して、2列にしております。 宜しくお願い致します。 xhtml -------------------------- <ul> <li>りんご/&yen30</li> <li>メロン/&yen;10</li> <li>ぶどう/&yen;3000 </li> <li>みかん/&yen;10000</li> </ul> ---------------------------- css ---------------------------- #con_main ul { font-size:90%; margin-left:10px; padding: 0; width: 350px; float:left; list-style: none outside; text-align:left; } #con_main ul li { margin: 0; padding: 0; float: left; width:174px; }

    • ベストアンサー
    • CSS
  • HTMLタグの中に文字参照は書いても良い?

    文字列中のHTMLタグを文法チェックする正規表現を考えています。 HTMLのバージョンは4.01 Transitionalを想定しています。 悩んでいるところが文字参照の&nbsp;でして、これはタグの中でも 空白を表すのかどうかという点です。 つまり、以下のタグはタグとして正しいかどうかということです。 (例1) <p&nbsp;id="hoge">aaaaa</p> (例2) <p &nbsp; id="hoge">aaaaa</p> ブラウザでタグとして認識されないので、恐らく誤りなのかなと 思っており、The W3C Markup Validation Serviceや Another html-lint GatewayでもNGと指摘されますが、理由を 仕様として把握したいと考えています。 なんとなく、漠然と仕様上書けないような気はしているのですが、 そのエビデンスがほしいのです。 「この仕様にこう書いてある。だから書けない」と言えれば よいのですが、その在り処がお分かりになる方、ぜひ教えて頂けますか。

  • ソースが崩れる

    Dream WeaverでHTML作成をしています。 ソースをキレイに整えているつもりなのですが、 IEやネスケで見ると、ソースが崩れてしまっています。 (妙に空白部分が長くなっていたり) どうしてなのでしょうか。 Dream Weaverではなく、Note Padなどで、ソースの調整はしたほうが いいのでしょうか。 「&nbsp;タグ」を使うのが面倒で、 全角の空白を使ったりしてるからかもしれません・・・・。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 秀丸を利用して、空白から空白の間で、正規表現を使う

    秀丸を利用して、空白から空白の間で、正規表現を使いたいのですが、 やりかたが分かりません。 ^半角スペース.+?半角スペース と思ったのですが、違いました。 正規表現を使いたいところは、 こんな感じになってます。 謎の空白 半角空白 文字列 謎の空白 半角空白 (行頭からここの文字列の前だけ切りたい)  謎の空白 半角空白 文字列 謎の空白 半角空白 (行頭からここの文字列の前だけ切りたい)          : てっきり、全角空白かと思い、記号表示させてみたけど、違いました。 次に、タブかな、と思い、記号表示させてみたけど、違いました。 空白って、全角と半角とタブしか思いつかないのですが、 それ以外に何かあるのでしょうか? また、それは、正規表現で、どう扱うのでしょうか?

  • VBAを使ってHTMLソースから特定の文字列を抽出したいと思っています

    VBAを使ってHTMLソースから特定の文字列を抽出したいと思っています。 正規表現を利用してタグに挟まれた文字を抽出したいのですがうまくいきません。 タグごと抽出する方法でも構わないので教えてください。 例えば <a href="www.yahoo.com△">○○○</a>   ・・・<1> ※△は(www.yahoo.com)+(半角数字1文字) ※○○○は1文字以上の全角文字 このようなパターンの文字列(<1>を丸ごと)を抜き出すには どのような正規表現を書けばよいでしょうか? 単に<a href ではじまって </a>  で終わる文字列であれば <a href.*</a> で良いと思うのですが、もう少し範囲を絞れば目的の文字列だけを抽出できるので ぜひ実現させたいと思っています。宜しくお願いします。

  • 全角空白が文字エンティティで送信される

    自分で管理している掲示板があるのですが、最近「&#160;」と言う文字列が入っていました。(わざと全角で記入、実際は半角) これは空白を意味する文字エンティティのようですが、 これが2つ連続していて、どうも全角の空白を入力しようとしている、 と思えます。私はWindows使いで、このような状況が良く分かりませんが、MACの人たちはこんなことありますか。 書き込んだ人がMACユーザーかは判らないのですが、Windowsでは、 こうゆうことが無いようなので、ここで聞いてみました。 「森おうがい」の環境依存文字を入力すると、文字エンティティが 送信されると言うのは有名ですが、この全角空白は、どうも。 分かる方、御教授願います。

    • ベストアンサー
    • Mac
  • HTMLで背景を固定した時の誤動作

    1)HTMLで背景を固定(スクロールしても背景は動かないようにする)するため、background-attachment を使いました 2)ところが、スクロールしたところ、添付画面で左側のように表示されるのが正常なのですが、右側(背景がダブって重なる)ようになります 3)ブラウザがfirefoxの場合は正常ですが、IEの場合時々(3回に1回程度)、右側の画面になります 4)再読み込みをして直る場合もありますが、頻発しています 5)文法的には間違っていないと思うのですが、どうすればよいのでしょうか よろしくお願いいたします。

  • 文字列前後の「全角空白/半角空白/改行文字」を取り除く

    PHPで、「文字列の前後に付加されている全角空白/半角空白/改行文字を取り除く」 という処理をしたいのですが、以下のように置換処理を書くとうまくいきません。 $after = preg_replace('/^[  \r\n]*(.*)[  \r\n]*$/u', '$1', $before); // [  \r\n]→[半角空白、全角空白、改行文字]です どううまくいかないのかといいますと、入力として半角スペース+全角文字が入ったときに、全角文字の先頭文字が文字化けしてしまいます。 たとえば、 <半角スペース>あああ をこれにかけると、 <よくわからない文字>ああ となります。 以下のように2回に分けてみると、正常に動きます。 $tmp = preg_replace('/[  \r\n]*$/u', '', $before); $after = preg_replace('/^[  \r\n]*/u', '', $tmp); 最初のように1回の正規表現による置換で済ませたい場合、 どのように書くのが適切なのでしょうか? PHPのバージョンは5.2.3です。

    • ベストアンサー
    • PHP

専門家に質問してみよう