あなたの映画力を試せる!POPLETA映画検定(無料) >>

こんばんは。私は今HPを作っています。
それで質問なんですけど、
HTMLで<SPAN>ってタグありますよね?
それにCSSを使って(? <SPAN>で囲まれた場所を
文字を右揃えに表示させたいのですが、何故かうまくいきません。
<SPAN style="text-align: right">○○</SPAN>
このようなタグで使いました(上)
何故なのでしょう、教えてください。
よろしくお願いします。

ちなみに、このようなものをつくりたいのです。(下)
リンク集なんですけど;

HPタイトル   管理者名
―――――――――――――――
バナー
―――――――――――――――
このHPの説明

これの管理者名のところを右揃えに表示したいのだが、
うまくいかないのです;<DIV>だと改行されてしまうし...

A 回答 (3件)

span要素に対しては、text-alignの指定は有効にならないと思います。

こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー">
<hr>
<p>このHPの説明</p>
</div>

こうすると、お望みどおりになるのではないかと思います。 なお、「<span style="float: right;">管理者名</span>」これは、回り込みさせるテキストの前、この場合はHPタイトルの前に入れてください。 HPタイトルの後ろに入れてしまうと、管理者名が一段下にずれて表示されると思います。

参考になれば幸いです。
    • good
    • 3
この回答へのお礼

ご解答ありがとうございます。
こんなタグがあったんですねぇ...(←勉強不足
さっそく使わせていただこうと思います。

お礼日時:2003/06/16 22:36

テーブルで幅(widthタグ)をきめて、<td align="right">タグではだめですか?


<span>は<div>と違って文字位置を指定できなかったと思います。
<TABLE>
<TR>
<TD width="〇〇">HPタイトル</TD>
<TD width="〇〇" align="right">管理者名</TD>
</TR>
</TABLE>
例ですが、こんな感じではいかがでしょう

この回答への補足

spanでは文字位置設定できないんですか;
c⌒っ*゜ー゜)っφ メモメモ...

補足日時:2003/06/16 22:30
    • good
    • 1
この回答へのお礼

ご解答ありがとうございます。
例まで書いて下さってありがとうございました!

お礼日時:2003/06/16 22:35

tableでそのセルだけ右揃えにすれば簡単ですが・・・。


tableは使いたくないとか理由があるのでしょうか?

この回答への補足

なんかテーブルだと中身が読み込まれるまで表示できないとかいう短所(? のようなものがあって、あまりオススメできないとの話を聞いたことがあるのでちょっとテーブルは使いたくないんです;
テーブルは元は表だってのもありますし・・・;

補足日時:2003/06/16 22:27
    • good
    • 0
この回答へのお礼

ご解答ありがとうございます!
テーブルを使えば簡単なんですけどね~;

お礼日時:2003/06/16 22:33

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

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

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

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

Qdivの中にspanを右寄せにするには?

画像のような要素構成をしたいと思うのですがうまくできません・・・
詳しい方教えていただけませんでしょうか?

divの中にspanを何個か右寄せで配置したいと考えています。
最近のマイクロソフトのサイトのようにボタンをspanで作りたいと思っています。
divで右寄せをしようとするとdivの中にa hrefを含めることは出来ないといったエラーが出てしまい困っております・・・

Aベストアンサー

ソースを書くだけで許容文字数をオーバーしてしまったので説明を
 右寄せに配置したい=text-align:rightですから、左寄せにしたい要素をdisplay:inline-blockにします。line-heightをそのinline-blockの高さに合わせておくと高さ中心に配置されます。また、text-align:centerでその内部で左右中央になります。

次にそれを収める外枠--親コンテナブロックを指定します。これはboxですからdisplay:blockですね。そして、高さを先のinline-blockが収まって十分な余白が取れるように高さを指定します。そして、text-align:rightをここで指定します。

 基本的には、これだけの指定です。あとは、それぞれの細かいデザインをお好きにしてください。
 なお、aは基本的にインライン要素でかつ内部にブロック要素は含むことができません。★ただし、あくまでHTML上の問題です。★
 これをスタイルシートでinline-blockにしようが、list-itemにしようがそれとは別問題です。
 したがって、もしその直近の親要素がすでにblockなり、inline-blockなどblock系に指定されていれば、その親をposition:relativeでサイズを参照できるようにしてしまえば、a{display:block;width:100%;height:100%;}として、ボタン的な動作をさせることができます。
 よって、最も簡単なHTMLは、
<p class="breadcrumbList">
 <a href="/">TOP</a>
 <a href="/abc">カテゴリー</a>
 <a href="/abc/sss/index.html">サブ</a>
</p>
 なのです。divやspanで囲む必要すらなく、
p.breadcrumbList{
_width:640px;height:100px;margin:20px auto;
_border:solid gray 3px;background-color:aqua;text-align:right;
_position:relative;
}
p.breadcrumbList a{
_display:inline-block;width:80px;height:80px;
_background-color:white;border:1px black solid;
_text-align:center;margin:10px;line-height:80px;
}
p.breadcrumbList a:hover{background-color:yellow;}
で、あなたが期待されたとおりの表示になりますね。本当にボタン風にしたければ
p.breadcrumbList a{border:3px lime outset;border-radius:10px;}
p.breadcrumbList a:active{border-style:inset;}

 このようにHTMLは、あなたが数年後に、あるいは他人が見てもわかるように文書構造だけを記述したのでよいのです。とても楽になると思います。

 そのうえで、スタイルシートでお好きなようにデザインすれば良いのです。HTMLもCSSのもとてもシンプルでわかりやすくなるでしょう。

 今までは、デザインのためにHTMLをマークアップするなど、異なった手法--本来の方法でない手法--で学ばれたのだと思います。慣れるまで大変だと思いますが、HTML5の時代には、この文書構造とプレゼンテーションの分離は最重要になります。頑張ってください。

 必ずしも有名サイトが正しいわけじゃありません。特にMicrosoftのサイトは古い--Microsoft自身が撲滅しようとしている古いIEにも対応させるため、いびつなマークアップやスタイルシートが使われています。あまり参考にはならないと思います。
 ただ、デザインはこなれていますから、外観だけはとても良い参考になりますね。--ソースは糞ですが(苦笑)---

ソースを書くだけで許容文字数をオーバーしてしまったので説明を
 右寄せに配置したい=text-align:rightですから、左寄せにしたい要素をdisplay:inline-blockにします。line-heightをそのinline-blockの高さに合わせておくと高さ中心に配置されます。また、text-align:centerでその内部で左右中央になります。

次にそれを収める外枠--親コンテナブロックを指定します。これはboxですからdisplay:blockですね。そして、高さを先のinline-blockが収まって十分な余白が取れるように高さを指定します。そして、text...続きを読む

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

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

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

Aベストアンサー

<select style="width: 200px">

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

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

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Q1行で左寄せと右寄せと中央揃えというのはできますでしょうか?

お世話になります。タイトルのとおりCSS等を駆使して
1行で左寄せと右寄せと中央揃えというのはできますでしょうか?

左寄せと右寄せは下記のアドレスのとおりにして出来たのですが、
中央もいれるとずれてしまいます。
http://allabout.co.jp/internet/hpcreate/closeup/CU20060209A/index.htm


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

Aベストアンサー

1行に3つの情報を、左寄せ・中央・右寄せとの事ですが、以下でいかがでしょうか。
WinIEのみで確認しました。

◎まずはHTML

<div id="title">
<span id="a">aaaa</span>
<span id="c">cccc</span>
bbbb
</div>

◎次にCSS
<!--
div#title{width: 650px;
     padding: 5px;
     background-color: #666666;
     color: #FFFFFF;
     text-align: center;
     }
span#a{float: left; }
span#c{float: right; }
-->

上記の方法でid「title」のボックスにa,b,cが一行に表示されます。
span id「a」と「c」にはそれぞれfloat設定を、「b」の情報がcenterにくるよう
div「title」自体にtext-align:centerの設定をしました。

opera、firefox、Mac環境では未確認です。

1行に3つの情報を、左寄せ・中央・右寄せとの事ですが、以下でいかがでしょうか。
WinIEのみで確認しました。

◎まずはHTML

<div id="title">
<span id="a">aaaa</span>
<span id="c">cccc</span>
bbbb
</div>

◎次にCSS
<!--
div#title{width: 650px;
     padding: 5px;
     background-color: #666666;
     color: #FFFFFF;
     text-align: center;
     }
span#a{float: left; }
span#c{float: right; }
-->

上記の方法でid「title」のボックスにa,b,c...続きを読む

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を見た人がよく見るQ&A

人気Q&Aランキング