【復活求む!】惜しくも解散してしまったバンド|J-ROCK編 >>

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

こんにちは、サンタと申します。

連続した空白を入れたい時は<pre>とは、どのようにして挿入することが、適宜なのでしょうか?

ソースですが、ul,listタグを使用して、2列にしております。

りんご□□□□□\50 メロン \10
ぶどう□□□□\3000 ミカン \10000

最後の「0」を揃えたいと思います。

ご覧のとおり、りんごと葡萄と比べましたら半角2つ分、りんごの方が空白が多いです。
こういう時に、
などと、の連続はしても宜しいのでしょうか?
または、
<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;
}

このQ&Aに関連する最新のQ&A

A 回答 (3件)

価格表なら、tableを使えば済むことです。


★デザインのために意味のない、preやを入れるのは間違いです。

<table class="priceList" border="1" summary="価格表">
_<tbody>
__<tr>
___<td>りんご</td><td>&yen;30</td>
__</tr>
__<tr>
___<td>メロン</td><td>&yen;10</td>
__</tr>
__<tr>
___<td>ぶどう</td><td>&yen;3000</td>
__</tr>
__<tr>
___<td>みかん</td><td>&yen;10000</td>
__</tr>
_</tbody>
</table>
[CSS]
table.priceList{border-collapse:collapse}
table.priceList td{width:5em;}
table.priceList td+td{
_text-align:right;
}
古いブラウザ対応なら二番目の<td>を<td class="price">にして
td.price{
_text-align:right;
}

 これが表ではなく、リストでのマークアップの方が適しているなら、
<ul class="priceList">
_<li>りんご<span>&yen30</span></li>
_<li>メロン<span>&yen;10</span></li>
_<li>ぶどう<span>&yen;3000</span></li>
_<li>みかん<span>&yen;10000</span></li>
</ul>

[CSS]
ul.priceList,ul.priceList li{list-style:none;display:block;margin:0;padding:0}
ul.priceList{width:10em;border:solid black;border-width:1px 1px 0 1px;}
ul.priceList li{width:100%;position:relative;border-bottom:solid 1px black;}
ul.priceList li span{display:block;width:5em;position:absolute;right:0;top:0;border-left:solid 1px black;text-align:right;}
    • good
    • 0
この回答へのお礼

ORUKA1951 様

すみません、いつも、ありがとうございます。
そうですね、
「果物」「値段」
「果物」「値段」
「果物」「値段」
の繰り返しですので、素直にテーブルでもよかったのですね。
ソースを書いてくださって、ありがとうございます。
今回は、テーブルを使おうと思ういます。

table,list,dldtddの使い分けって、考えてしまいます。tableは今では余り使用しないと思っておりました。

解決しました、ありがとうございました。
失礼致します。

お礼日時:2011/12/13 17:27

#1で終了してるけど一応追加。



>の連続はしても宜しいのでしょうか?
問題ない。
><pre></pre>タグを使用したほうが良いのでしょうか?
<pre>がふさわしい場所ならね。今回<pre>が使えたとして、じゃあ使っていい場所なのかどうかご自分で考えてください。

>最後の「0」を揃えたいと思います。
IEデフォルトの「MS Pゴシック」で見る場合、全角文字の組み合わせによってはどう頑張っても永久に揃わないケースがあります。なのでスペースでどう頑張ろうが意味がない。

ついで。
>ul,listタグを使用して
<li>は「L」ist「I」temの略。
    • good
    • 0
この回答へのお礼

tk-is-pg_1206 様

ありがとうございます。
&nbsp;の連続でも良いのですね。わかりました。
<pre>ですが、ふさわしい場所かどうか、PREformatted textという意味だそうですが、整形済みテキストにしようと思えば、できますが、&nbsp;の方がふさわしい場所かどうか、判断がつきかねました。

>IEデフォルトの「MS Pゴシック」で見る場合、全角文字の組み合わせによってはどう頑張っても永久に揃わないケースがあります。なのでスペースでどう頑張ろうが意味がない。

そうですね。考えが抜けておりました。デフォルトでは、
ヒラギノ角ゴ Pro W3
を使用しております。

><li>は「L」ist「I」temの略。

ありがとうございます。勉強になりました。

お礼日時:2011/12/13 17:17

表形式で表示したいのであればtableを使うのが一番。


右揃えは text-align:right; で揃えましょう。
    • good
    • 0
この回答へのお礼

t_ohta 様

ありがとうございます。
tableで良いのですね。リストにしたほうが良いと思っておりました。
text-align:right;
でやります。

ありがとうございます。

お礼日時:2011/12/13 17:09

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

QDirコマンドでフォルダ内ファイルの合計サイズをだすには?(コマンドプロンプトにて)

いろいろ調べましたが不明な点があり、質問します。

WindowsのDOSプロンプトでdirコマンドを打つとフォルダ・ファイルの一覧が表示されますが、その中にファイルサイズが表示されています。
このサイズを合計できるコマンドはありませんか?
DIRコマンドのオプションを調べましたがそれらしいものが見当たりません。
具体的には
C:\xxx\配下に50個程度のファイルがあります。
その50個の合計サイズを知りたいです。
xxxフォルダの親フォルダにはアクセス不可です。

ずーっと悩んでいます。よろしくお願いします。

なお、OSはWindowsNTか2000で使用予定です。

Aベストアンサー

カレントドライブ、カレントフォルダを
C:\xxx\
にした状態で、

dir /s /a-d

/sパラメータででサブディレクトリすべてを検索
/a-dパラメータでディレクトリ以外のファイル(つまり属性に関係なくすべてのファイル

これを実行すると最後にファイルの個数とファイルサイズの合計を表示します。

もし、隠し属性のファイルは合計しないのであれば、

dir /s

だけで良いと思われます。

Qhtml、テーブル内にテーブル。表示位置

htmlで<table>タグを使って テーブルを作成しました。(これをテーブル(1)とします。)
このテーブルのなかに表を作成したいため、テーブル内で<table>タグを使用し表を作成しました。(ここで作成したテーブル(表)をテーブル(2)とします。)
つまり、テーブル(1)の中にテーブル(2)(表)が存在する。といった状況です。

ところがテーブル(2)がテーブル(1)の真ん中に表示されてしまいます。
そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。
どうしたらよいでしょうか?
教えてくださいよろしくお願い致します。

Aベストアンサー

> そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。

テーブル(2)ではなくてテーブル(1)を次のようにすればテーブル(2)が左に寄ります。

<TABLE> ここはテーブル(1)
<TBODY>
<TR>
<TD align="left">
<TABLE> ここからテーブル(2)
<TBODY>
<TR>
<TD> 

QCSSでreadonlyの機能はありますか?

ASPにてCSSを使用しています。
inputタグを読取専用(readonly)にしたいのですが、
スタイルシートでの指定の仕方がわかりません。
よろしくお願いします。

Aベストアンサー

> スタイルシートでも「IME-mode」の設定等、入力に関する制御も可能でしたので

それは某ブラウザが勝手に CSS を拡張して付けた機能で、本来の CSS ではそのようなことはできません。
CSS はあくまでも見た目つまりスタイルをデザインするためのものだと考えるべきです。

QCSSでボックス幅を文字列に合わせたい

ボックス幅を文字列の幅に合わせるにはどうしたらいいのでしょうか。
テーブルではセルにwidth属性を指定しなくても文字列の幅になりますが、ボックスではwidthプロパティを指定しなかったら領域全体の幅になります。white-spaceプロパティでnowrap指定し、widthプロパティで文字列より小さいサイズに指定するとできるのですが、他に指定する方法があれば教えて下さい。

Aベストアンサー

div等のblock要素ではなくspan等のinline要素によって行う。

<span style="border:solid 1px">文字幅に合わせた枠線</span>

Q  これの意味教えて下さい。

これの意味教えて下さい。
タグの
<tr>
<td></td>
</tr>
中に入っている
意味はなんですか?

Aベストアンサー

空白(半角スペース)として使用されることが多いですが、
を使用すると改行されません。

たとえばOK WaveのOKが行末あたりに来たときに、
(1)OKとWaveの間を半角スペースとする場合
~~~OK<改行>
Wave~~~

となりますが、
(2)OKとWaveの間をとする場合
~~~<改行>
OK Wave~~~

となります。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

QinputタグのテキストBOXだけ右寄せにする方法

inputタグのボタンやテキストBOXが混在しているページがあります。
この中のテキストBOXだけ右寄せにしたいと思っています。

原始的なJavaSctiptは使わずに、かつID指定・class指定なしに。
シンプルにきれいに、が希望です。1つ1つ指定というのはしたくないです。

昔はJavaScriptでinputタグのものを全部持ってきて
全ループさせながらtypeを判定しテキストBOXのものだけを
どうこうするとか書きましたが、原始的なので書きたくありません。
というかもう少しスマートな書き方はないものかと思い
質問をすることにしました。


スタイルシートだけで書ければいいなと思いますがこれを知りません。
input:text {…}
みたいな書き方があればいいなと思っています。

これがダメな場合でもprototypeやjquery等のライブラリを使用し
シンプルなJavaScriptの記述で実現できればそれを知りたいです。


・原始的なJavaScriptは使わない
・id・class指定のスタイルシートは使わない
・スタイルシートだけでテキストBOXだけを右寄せにする方法
・JavaScriptライブラリを使用してテキストBOXだけを右寄せにする方法
・スタイルシート単独もJavaScriptライブラリを使用しても出来ない場合は
 「出来ない」との明言を

こんな感じでお願いします。
よろしくお願いします。

inputタグのボタンやテキストBOXが混在しているページがあります。
この中のテキストBOXだけ右寄せにしたいと思っています。

原始的なJavaSctiptは使わずに、かつID指定・class指定なしに。
シンプルにきれいに、が希望です。1つ1つ指定というのはしたくないです。

昔はJavaScriptでinputタグのものを全部持ってきて
全ループさせながらtypeを判定しテキストBOXのものだけを
どうこうするとか書きましたが、原始的なので書きたくありません。
というかもう少しスマートな書き方はないものかと思い
質...続きを読む

Aベストアンサー

はじめまして。
CSSだけで実現する方法としては属性セレクタ(Attribute selectors)と呼ばれる指定方法があります。ただしこれは、一般的なモダンブラウザでは対応しているはずですがIE6以下では反応しません。

書き方としては、
[attribute=value]

inputの1行テキストボックスだけに適応させるには、
input[type="text"] { (ここにスタイル) }

という書き方ができます。
ご参考になれば幸いです。

Qスペースを使わず文字位置を揃える方法

素人な者で大変申し訳ありません
以下のように、複数行の文字位置を揃えるタグはどうなるのでしょうか?
(下の例は揃っていませんが・・・)

1.あ        :ABC
2.abc       :ABC
3.あいう      :ABC
4、えお       :ABC

のように、空白部にスペースを使わずに文字位置を揃える方法です
ワードなどの「tabキー」の役割をするタグなんてありますか?

ご教示の程、宜しくお願い致します

以上

Aベストアンサー

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(Li)、原子量6.941、リチウムイオン電池</dd>
</dl>

<h3>元素</h3>
<ol class="periodic table">
<li><span class="element">水素</span>元素記号(H)、原子量1.008、酸素と共に水をくつる。</li>
<li><span class="element">ヘリウム</span>元素記号(He)、原子量4.003、不活性ガス</li>
<li><span class="element">リチウム</span>元素記号(Li)、原子量6.941、リチウムイオン電池</li>
</ol>

これに対して、スタイルシートを次のように書いたりします。
dl.periodic.table{counter-reset: atomicNum 0;padding-left:2em;}
dl.periodic.table dt{float:left;font-weight:bold;}
dl.periodic.table dt:before{
content: counter(atomicNum) ". ";
counter-increment: atomicNum;
}
dl.periodic.table dd{margin-left:7em;}
dl.periodic.table dd:before{content:": ";}

ol.periodic.table span.element{float:left;width:7em;position:relative;font-weight:bold;}
ol.periodic.table span.element:before{content:": ";position:absolute;right:0.5em;}

★他にどのようにマークアップされていても、用語とその説明がが区別できるようにマークアップされていれば、デザインはできます。
★デザインのためにDIVやSAPNを追加しているわけではありません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ものです。デザインのために書いてしまうと、デザインのためにtableを使ったのと大差ありません。
 HTML5では、
※DIVやSPANは他に適した要素がないときのための最後の手段
※文書構造を示すため
 となります。

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(L...続きを読む


人気Q&Aランキング