• ベストアンサー

テーブル内のスタイルシートについて。

noname#30871の回答

  • ベストアンサー
noname#30871
noname#30871
回答No.1

HTMLの要素(エレメント)は、インライン要素とブロック要素に分けられます。 "text-align" はブロック要素のみに有効です。<SPAN>はインライン要素ですから、使えません。 この場合、<SPAN>の代わりにブロック要素<DIV>を使うと有効になります。 ただし、ブロック要素をブラウザで見ると改行が入ります。これを回避する手段はあるのかもしれませんが、ちょっとそこまで調べきれていません。 ちなみに<SPAN>や<DIV>は、スタイル適用の範囲を示す要素という意味で「スタイルコンテナー」と呼ばれます。

EIZA
質問者

お礼

成程。 すごーくよくわかりました。 普段、改行されるのが嫌で<SPAN>ばかり使っていたのですが、 今回は多少の改行はあっても良いので、<DIV>を使おうと思います。 よく見たら参考にしてた本に、 ボックス要素ってちっちゃな文字で書いてありました(笑)。 でもSPANとDIVの違い(改行されるされない、ね)はわかってても、 ブロック要素とかインライン要素とかって名前はよく知らなかったので (名前とか理論とか気にしないタイプなので……よくないですね) やっぱり教えて頂かなきゃダメだったわけなんですけど(もっと笑)。 お手数おかけしました、ホントに助かりました。 どうもありがとうございます。

関連するQ&A

  • これもスタイルシートっていいますか?

    <div style="text-align:left;"> 文字を 左に寄せる </div> このようなタグはスタイルシートというのでしょうか? style= を使ってるからスタイルシートですか?

    • ベストアンサー
    • HTML
  • htmlの記述。「右揃え」出来ません(困ってます)

    こんばんは。質問の通り、右揃えになりません。 タグ打ちで、制作中。初心者です。 =-=-=-=-=-=-=-=-=-=-=-=-=-= <html> <head> <title>~</title> <style type="text/css"> span.c { text-align: right; } </style> </head> <body><center> … <span class="c"><a href="toppage.html">■ to top-page ■</a></span> </center></body> </html> =-=-=-=-=-=-=-=-=-=-=-=-=-= ■ to toppage ■を右揃えにしたいです。 <span class=""></span>で部分を指定して、 <style type="text/css">span.c { text-align: right; }</style>で条件を指定したのですが、左揃え(条件指定が出来ていない状態)にしかなりません。 <center></center>がダメなのか?っと思い、<center></center>を除いてみましたが、ダメでした。 <span class=""></span>でうまく部分指定が出来ていないのかと思い、<style type="text/css">span.c { text-align: right; }</style>の{}内に、フォントサイズの指定をすると、サイズ変化しました。 私的には、{ text-align: right; }が違うのかな?っと思っているのですが、分かりません。 どこが間違っているのでしょうか?? というか、右揃えの仕方を教えて下さい。どんな方法でもいいです。

  • スタイルシートdivについて

    こんばんは。 スタイルシートのDIVについて教えて下さい。 今、幅720pxのテーブルをDIVに変えようと悪戦苦闘している最中です。 DIVについてはほとんど無知なので、あちこちのサイトのスタイルシート講座を覗きながらなんとか作ってみました。 ようは幅720pxのボックスの中に文字を左寄せで配置し、ボックス自体は画面の中央に(左右のマージンを同じに)したいのです。 そのソースなのですが、スタイルシートを div#main{width:720px; margin-left:auto; margin-right:auto; text-align:left; line-height:175%;} と記述し、 HTMLを <div id="main">○○○</div> としました。○○○がテキスト部分です。 でもIE7で確認したところ、ボックスが左寄りになってしまっています。 しかし、どういうわけかFirefoxとOperaではちゃんと中央に配置されているのです。 いったいどこに問題があるのでしょうか。 わかる方、いらっしゃいましたら教えて下さい。

    • ベストアンサー
    • HTML
  • スタイルシートでの中央揃え

    <html> <head> <title>文書のタイトル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style> body{text-align: center;} </style> </head> <body> <table> <tr> <td> テーブルの内容 </td> </tr> <table> テーブル外の内容 </body> </html> のように、スタイルシートで、 body{text-align: center;} を指定したのですが、IE6ではtableが中央揃えされましたが、NN7.1やFirefox 1.5.0.7ではtableが中央揃えされませんでした。 centerタグを使えば問題ありませんでしたが、非推奨なのであまり使いたくありません。 スタイルシートを用いてIE6と同様にNNやFirefoxでtableを中央揃えするようにするにはどうすればいいでしょうか。

    • ベストアンサー
    • HTML
  • スタイルシートでテーブルやセルを管理する概念と仕組み、HTML

    はじめまして。宜しくお願いいたします。 テーブルやセルの詳細指定について(例えばalignやpaddingなど)、 これまでは個別にやってきました。 しかし上級者の方に「スタイルシートで一括管理を学んだほうが良い」とアドバイスをいただきました。 ただ私は入り口の素人で、スタイルシートについてはまだよく理解ができていません。 概念、しくみ自体が理解できていないのです。 以下、心配な点を挙げてみました。 上級者の方、どうぞお教えください。 1.スタイルシートでテーブルやセルにalignやpaddingなどをやっておくと、 これから新しく作る新規テーブルや新規セルには、alignやpaddingなどを書き込まなくても、それらが効いた状態になるのでしょうか。 またその状態で、当然ながら幅や高さは変えられます…よね? 2.テーブルやセルのいくつかには個別で、すでに、alignやpaddingなどを書き込んでいる場所があります(いわゆる個別で条件が違う部分ですが)。 これら“もともと個別指定があるもの”への影響はどうなるのでしょうか。 個別指定のときには、個別指定のほうが「優先される?」こう考えて正しいでしょうか? 3.テーブルやセルの情報を、「パターンA」「パターンB」「パターンC」のようなイメージでスタイルシートに名付けしておして、 名前を指定して呼び出し反映させる。そういった機能もありますでしょうか。 このテーブルには「パターンA」を呼び出そう。 このテーブルには「パターンB」を呼び出そう。こんな使い方です。 もしあれば、HTMLの基本的な記述方法を教えてください(HTMLの記述については、お時間のある方で結構です)。 参考までに使用ソフトはDreamweaverMX2004です。 宜しくお願いいたします。

  • 段落内の "text-align" の重複

    CSSについての質問です。 <p>タグの段落内で "text-align" を使用して、 文字を寄せる記述をしているのですが、 「中央揃え」と「右寄せ」が重なってしまい、うまく表示されません。 分かりにくい説明だと思いますので、ソース例を書きます。 --------------------------------------------------------- <p style="text-align: center;">文字を中央に <span style="text-align: right;">こちらは右寄せ</span></p> --------------------------------------------------------- 上記のように記述しています。 つまり、段落内は基本的に中央揃えなのだが、 一部は右寄せにする…のようなことが、 CSSで実現できるのでしょうか。 どなたかご回答をよろしくお願いします。

    • ベストアンサー
    • CSS
  • cssでテーブルの位置を設定するには?

    <table border="1" align="left">でテーブルの位置を競ってすることはできたのですが スタイルシートで行いたいです。 そもそも他のテーブルはすべて中央に寄せたいため、 table { margin-left: auto; margin-right: auto; } としています。 そのうえで、任意のテーブルのみ左に寄せて表示したいので table.test { align:left; } としたのですが、うまくいきません。 ---------------------------------------------------------- <html> <head> <title>test</title> <STYLE type="text/css"> table { margin-left: auto; margin-right: auto; width: 40%; } table.test { width: 80%; align:left; } </STYLE> </head> <body> <table border="1"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" align="left"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" class="test"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> </body> </html> ----------------------------------------------------- このコードだと、 table.test { width: 80%; align:left; } の、 width: 80%; の部分は認識されるようですが、align:left;は無視されます。 スタイルシートでテーブルの位置を設定する方法をご教授ください。

    • 締切済み
    • CSS
  • スタイルシートを使って段組でのバディングは?

    書籍にのっていたスタイルシートでの段組を 次のように記述してみました。 <DIV style="float:left;border-right:3px dashed #000000;width:50%;padding-left:10px;"> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ </DIV><DIV style="padding-left:10px">  ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ </DIV> 中央に点線が入って文章が左右に分けられるのですが、 文字と中央線の余白がないので、paddingやmarginを使って みたのですが、特に右側文章の左にある点線と文字の空間がどうしてもできません。(左側部分のの左右余白は機能するのですが) tableを使ったときはpadding-leftで設定できたのですが、正しい方法がありましたらお教えください。 書籍にもここらへんの説明がないのです。

  • <SPAN>で文字を右揃えにしたいのですが...(^-^;

    こんばんは。私は今HPを作っています。 それで質問なんですけど、 HTMLで<SPAN>ってタグありますよね? それにCSSを使って(? <SPAN>で囲まれた場所を 文字を右揃えに表示させたいのですが、何故かうまくいきません。 <SPAN style="text-align: right">○○</SPAN> このようなタグで使いました(上) 何故なのでしょう、教えてください。 よろしくお願いします。 ちなみに、このようなものをつくりたいのです。(下) リンク集なんですけど; HPタイトル   管理者名 ――――――――――――――― バナー ――――――――――――――― このHPの説明 これの管理者名のところを右揃えに表示したいのだが、 うまくいかないのです;<DIV>だと改行されてしまうし...

    • ベストアンサー
    • HTML
  • HTML?スタイルシートの表センタリングについて

    以下のSampleでやってみましたが、うまくセンタリング できません。 表をPageの真ん中に置いて かつ、表の中のセル内、文字列は左によせるには どうしたらよいのでしょうか? またこのような作業、確認は皆さんどうやって書いているのですか? ホームページビルダーでしょうか? 常に表には苦労しています、今までは<CENTER>を使っていました。キレイなHTMLを勉強しようとしているのですが 非常に難しいですね。よい方法ないでしょうか? スタイルシート部分: <style type="text/css"> div.ctable { text-align: center; /* IEでセンタリングさせる方法 */ } div.ctable table { margin: auto; /* 標準のセンタリング方法 */ text-align: left; /* IE用方法の弊害対策用 */ } </style> HTML部分: <div class="ctable"> <table> <tr><th>スタイルシート</th><th>センタリング</th></tr> <tr><td>CSS</td><td>Centering</td></tr> </table> </div>