ウォーターサーバーとコーヒーマシンが一体化した画期的マシン >>

こんにちは。

HTMLとCSSを勉強中の者です。

下の図のようにそれぞれの項目の語の先頭をそろえるには、テーブルを使うしかないでしょうか?

ワードのようにタブでそろえる方法があるのでしょうか?

いろいろ検索して調べたのですが、テーブルを使う以外の方法は見つけることができませんでした。

「HTMLで語の先頭をそろえるには?」の質問画像

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

A 回答 (4件)

その用途なら、枠のないテーブルが一番かと思いますが、


別の手としては

<style>
.schedule ul { margin:0; padding:0; }
.schedule ul > li { display:inline-block; width:8em; }
.schedule ul > li:nth-child(2) { width:4em; } /* 特定の列を短く */
</style>
<div class=schedule>
<ul><li>A<li>B<li>C<li>D</ul>
<ul><li>a<li>b<li>c<li>d</ul>
<ul><li>bo<li>po<li>mo<li>fo</ul>
</div>
    • good
    • 1
この回答へのお礼

忙しい中、回答ありがとうございます。

リストを使ってもできるんですね。勉強になりました。

>その用途なら、枠のないテーブルが一番かと思いますが、
私は逆に枠がないなら、テーブルにする必要はないと思ったんです。
Wordでなら、たぶん表を使わずにタブを使いますし。

text-indentみたいなもので、特定の語をその行の○○文字目から始めるみたいな命令がないのかなと思った次第です。

お礼日時:2015/06/08 11:50

難しいことばかり勉強しないで、基礎を勉強してください。


一つだけ教えると「PRE」を使う。
    • good
    • 0
この回答へのお礼

忙しい中、回答ありがとうございます。

まだ勉強を始めたばかりで、何が基礎で、何が難しいことなのかもよくわかっていません。(~_~;)

PREという命令を調べてみます。

お礼日時:2015/06/09 08:04

古い知識なんだけど, 「タブ」の存在意義ってもともとは


表を作るための桁合わせ
なんだよね. だからこそ table から名前をとって「タブ」なんだけど.

つまり「Wordでなら、たぶん表を使わずにタブを使います」ってのは「明確な意思をもって表を作る」かわりに「表を作るための桁合わせ機能を使う」と言っていることに等しいわけだ. どっちにしても「表を作る」というのは同じこと.
    • good
    • 0
この回答へのお礼

忙しい中、回答ありがとうございます。

tabというのはtableからできたのは知りませんでした。一つ賢くなりました。ありがとうございます。m(__)m

なるほど。tabだけ使うのも、表を作るのといっしょなんですね。

お礼日時:2015/06/08 15:31

ul、liでもできるでしょうが、表形式なのにtableを使わない理由はなぜでしょう。



タブで揃える、ということはできません。
    • good
    • 0
この回答へのお礼

忙しい中、回答ありがとうございます。

Wordでなら、たぶん表を使わずにタブを使いますので、そのような命令がないのかなと思った次第です。

お礼日時:2015/06/08 11:55

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

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

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

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

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

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...続きを読む

QHTMLで文字頭をそろえるには

メモ帳でHTMLを作っています。

ホームページの場合ですが、
通常だとメモ帳で文字を打ち、ブラウザで見ると左に寄せられた状態です。

いろはにほへと
123456789
ABCDEFGHIJ

これを左端に空も自分のスペースを設けて文字を打つにはどうしたらいいですか。

例えば、

****いろはにほへと
****123456789
****ABCDEFGHIJ

・・・・・・といった具合です。

Aベストアンサー

タイトルの「文字頭をそろえるには」と質問内容の「左端に・・・スペースを設けて文字を打つには」は少し話がずれています。
ここでは「左端に・・・スペースを設けて文字を打つには」について回答します。
サイト上で文字をHTMLと同じ状態で表示したいときに一番簡単なタグは「<pre>」です。
ですので、たとえば
<pre>
    いろはにほへと
    123456789
    ABCDEFGHIJ
</pre>
と書けば、左側に必要なスペースが空いて表示できます。
(ただし文字の場合だけ。)   

Q文字、センタリングの中での行頭左端揃え

すみません、質問です。

文字(短文)をページの中央におきたいのですが
「センタリング<タグ>」を使うと

***********
__*******
____***
***********
_*********
__*******
_*********

(*が文字で、『_』がスペースです)。

・・・とゆうようになります。

そうではなくて、ページの中央で
行頭をきちんとそろえたいんです。。

***********
******
********
****
*********
*****

といった具合に。。

これは leftmargin でやるしかないんでしょうか?
leftmargineだと、正しい中央の値がわからないんです。
なので、センターでの文頭左端揃え、といった具合に
したいのです。

お願いします。

Aベストアンサー

TR,TDタグで表を作成し
┏━┳━━┳━┓
┃ ┃  ┃ ┃
┃A┃B ┃C┃
┃ ┃  ┃ ┃
┗━┻━━┻━┛
こんな感じで表を作って、表全体を100%にして、A:B:Cを希望の割合にします。Bを文字列の長さにしてAとCを残りにしても良い。
で、Bの中に左そろえで文字を書きます。
当然表のborderは0を指定して見えないようにします。

Qウィンドウのサイズを変えても表示を崩れないようにしたい

ウインドウサイズをドラッグドロップして大きさを変えると
表示が崩れまくって困ります
固定する方法はないですか?ウインドーの大きさにかかわらずに
常に表示が同じな。

Aベストアンサー

表というのはtableタグでしょうか?でしたら
<table width="">(幅)
<table height="">(高さ)
で大きさを指定するとウィンドウサイズを変えてもテーブルのサイズは変わらないと思います。

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)はこれら以外にも
いろいろな設定方法があります。

QJSPでのリストボックス表示

いつもお世話になっております。
サーブレット&JSPでプログラミングの勉強をしています。

JSPでリストボックスを表示させる際に、リストのアイテムをハードコーディングではなく、DBから取得したデータをArrayList等に格納し、表示させたいと思っています。

この場合、ループでArrayListのアイテムを1件ずつ取り出して、JSP内の<select><option></option></select>に当て込む方法が良いのでしょうか?

ちなみに以下のテーブル内容で、リストボックスには“作業内容”を表示させて、選択されたときには、“作業コード”を取得させたいのですが、どのようにすれば良いでしょうか?

テーブル
--------------------
作業コード|作業内容
--------------------
0000000001|プログラミング
0000000002|実装
0000000003|テスト

よろしくお願いします。

Aベストアンサー

<select>
<option value="0000000001">プログラミング</option>
<option value="0000000002">実装</option>
<option value="0000000003">テスト</option>
</select>

↑こういう状態を作れば、見た目には内容が、値には番号が入ります。

あとは単純にぐるぐるまわせばいいだけですね。

<select name=hoge>
<%for(i=0;i<arrayA.length();i++){%>
<option value="<%=arrayA[i]>">arrayB[i]</option>
<%}%>
</select>

スクリプトで
form.hoge[i].value = <%=arrayA[i]%>;
form.hoge[i].text = <%=arrayB[i]%>;
とかで埋め込むこともできます。
内容を書き換えたりすることがあるのなら、スクリプトを併用したほうが良いですね。

Qテーブルの位置を細かく指定したい。

現在、テーブルを組み合わせたサイトを作っていまして
そのテーブルの位置に悩んでおります。


背景固定で一つ大きめのイラストを置いていまして
そこに合わせてテーブルの位置を細かく調整したいのです。

center、left、rightの偏った3種類の位置じゃなく
左から200ピクセル程度の位置にテーブルを置きたいのです。

この様なタグはありませんか?

これはCSSなどて指定するしかないのでしようか?

Aベストアンサー

>左から200ピクセル程度の位置にテーブルを置きたいのです

<TABLE style="margin-left:200px;">
<TR><TD></TD></TR>
</TABLE>

CSSを使っての指定になると思います。

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

Q入力したテキストボックスのデータを別Webページに渡したい

テキストボックスを持つ2つのWebページ(A.html,B.htmlとします)があります。
A.html内にB.htmlを開くJavaScript
(window.open("B.html");)を記述しています。

このスクリプトを実行したらB.htmlを新しいウィンドウで開きますが、
このBページ内のテキストボックスに文字データを入力して、
OKを押したら、A.htmlのテキストボックスにデータを表示させたいのです。
こういうことはJavaScriptだけでできないのですか?
cgi+JavaScriptを使わないとできないのでしょうか?

フレーム間の場合はできそうですが、ウィンドウ間と言うのは出きるのか
不明です。
ご存知の方、よろしくお願いします。

Aベストアンサー

説明のために、
A.html、B.htmlのフォーム、テキストボックスをそれぞれform_a、form_b、txtbox_a、txtbox_b
としますね。

B.html内で、テキストボックスの文字データは
document.form_b.txtbox_b.value
と表せます。同様に、A.html内で、テキストボックスの文字データは
document.form_a.txtbox_a.value
と表せます。
ここで、B.htmlはA.htmlから開いた子ウィンドウですので、B.htmlから見てA.htmlは「このウィンドウを開いたウィンドウ」と表すことができるため、
window.opener
でアクセスできます。
つまり、B.htmlで、JavaScriptで
window.opener.document.form_a.txtbox_a.value = document.form_b.txtbox_b.value ;
と表記すれば実現できるかと思います。


人気Q&Aランキング