IE8などでCSSでテーブルを中央に、テーブル内のテキストは左寄せにしたい

解決済

  • 質問者：medalgame
  • 質問日時：2009/11/05 04:04
  • 回答数：2件

お世話になっております。
・本文・テーブルは中央揃え
・テーブルの内容は左揃え
というものをCSSで作りたいのですが、
どのようにしたらいいのでしょうか。
現在のページの一部は
<div id="main">
<h1>タイトル</h1>
　 <table border="1">
<p>
本文
</p>
<tr>
<td colspan="2"><h2 align="center">○○○</h2></td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
～行が続きますが省略～
</table>
</div>
のようになっています。

ちなみに cssのmainは「text-align:center;」を指定しておりますが、
IE8にしたところテーブルが左寄せになってしまいました。

なるべく多くのブラウザで同じような配置になるようにしたいのですが
どうしたらよいでしょうか。よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

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

「CSS テキスト」に関するQ&A： CSSのみで画像とテキストに同時にリンクを貼りたい

A 回答 (2件)

No.2ベストアンサー

  • 回答者： t_freak
  • 回答日時：2009/11/05 15:37

No.1さんの方法では、table内部のテキストが中央ぞろえになってしまい、


「テーブルの内容は左揃え」
という質問者さんのご要望を満たすことができません。

以下でどうぞ。

(1)
div#main{
text-align:center;
}

(2)
div#main table{
margin-left:auto;
margin-right:auto;
text-align:left;
}

＜解説＞
div、table、pなどブロック要素をセンタリングするには、左右のmargin（外余白）をautoにすることで、左右均等に外余白が設定され、ブロックがセンタリングされます(2)。
しかし、8より前のIEではmarginのautoを正しく解釈してくれません。

text-align:centerでブロック要素がセンタリングされない（これでセンタリングされるのはテキストや画像などのインライン要素のみ）のは正しい動作なのですが、8より前のIEではなぜかtext-align:centerでブロック要素がセンタリングされてしまうので、このバグを利用して、div#mainにtext-align:centerを設定して8より前のIEでセンタリングされるようにします(1)。
しかしこれでは、tableの中のテキストまでセンタリングされてしまいますので、div#main配下のtableにtext-align:leftを指定します(2)。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
No1さんのソースを見て、ぱっと直感で編集したら
思い通りになったのですが、半分しか理解していなかったため
解説がとても役立ちました。ありがとうございます。

通報する
お礼日時：2009/11/05 17:46

No.1

  • 回答者： 4017B
  • 回答日時：2009/11/05 05:24

cssの記述に



div#main, div#main table {
　margin-left: auto;
　margin-right: auto;
　text-align: center;
}

～を適当に追記してみて下さい。
    • good
    • 0
    • 件
通報する
この回答へのお礼

解凍ありがとうございます。いただいたソースを編集して
div#main table {
　margin-left: auto;
　margin-right: auto;
　text-align: left;
}
にしたところ、うまくいきました。ありがとうございました。

通報する
お礼日時：2009/11/05 17:43

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

「CSS テキスト」に関するQ&A： テキストエリア内の文字の装飾

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

Qの
の幅が:nth-childだけの場合とcolgroupを使った場合とで異なる

<table>の<th><td>の幅を固定するのにCSSの:nth-childを使っていたのですが、
<colgroup>の<col>でも縦の幅を固定できると知り試してみました。
しかし、:nth-childを使った場合と<colgroup>を足した場合とで、幅が異なるようです。
添付画像のように、<colgroup>を使うと幅が狭くなりました。
（:nth-child を使うと幅が広くなる？）
このように幅が異なるのはどのような理由からでしょうか？

試したtest.htmは次の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>てすと</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h1>テスト（colgroupあり）</h1>
<table>
<colgroup>
<col span="1" style="width:300px;">
<col span="1" style="width:70px;">
<col span="1" style="width:250px;">
<col span="10" style="width:62px;">
</colgroup>
<thead>
<tr>
<th>thead</th><th></th><th></th><th></th>
<th></th><th></th><th></th><th></th>
<th></th><th></th><th></th><th></th>
<th></th>
</tr>
</thead>
<tr>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td>
</tr>
</table>

</body>
</html>

test.cssは次の通りです。
@charset "UTF-8";

h1{height:50px;}
table{table-layout:fixed;}
table,tr{width:1240px;}
th,td{border:solid 5px black;text-align:center;height:100px;}
th{background-color:red;}
tr:nth-child(2n+1){background-color:blue;}
tr:nth-child(2n+0){background-color:white;}
th:nth-child(1),td:nth-child(1){width:300px;}
th:nth-child(2),td:nth-child(2){width:70px;}
th:nth-child(3),td:nth-child(3){width:250px;}
th:nth-child(n+4),td:nth-child(n+4){width:62px;}

よろしくお願いします。

<table>の<th><td>の幅を固定するのにCSSの:nth-childを使っていたのですが、
<colgroup>の<col>でも縦の幅を固定できると知り試してみました。
しかし、:nth-childを使った場合と<colgroup>を足した場合とで、幅が異なるようです。
添付画像のように、<colgroup>を使うと幅が狭くなりました。
（:nth-child を使うと幅が広くなる？）
このように幅が異なるのはどのような理由からでしょうか？

試したtest.htmは次の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<tit...続きを読む

Aベストアンサー

CSSボックスモデルにおいて td の幅は padding と border 込みで計算されます
td { width:300px; border-width:5px; padding:1px; }
ならば
幅 = 300 + 5*2 + 1*2 = 312px

col や colgroup には padding と border が無いので
col { width:300px; }
ならば
幅 = 300px

注意
table { border-collapse:collapse; } だとさらに計算がややこしくなります

他の回答も見る

Qhtmlの練習問題をしてます。タグと

タグについてです。

a b

c

htmlの練習問題をしてます。<h>タグと<p>タグについてです。

<h1>a</h>
b
<p>c</p>

と記述したら、

a

b

c

と表示されます。

分からないのが、
b〜c間に1行分スペースが入る理由がわかりません。
a〜bは、<h>タグが前後に1行分スペースなのでわかりますが、
<p>タグは、前には1行分スペースはいりませんよね。終了タグに改行が入り、その後1行分スペースですよね？
bとcの間のスペースはどこからでしょうか？
こんな問題ですみません…m(._.)m

Aベストアンサー

<P>タグはParagraphの略で、<P>～</P>で囲まれた部分がひとつの段落であることを表します。 一般的なブラウザでは<P>～</P>の前後に1行分改行されます。
＜www.htmq.com/html/p.shtml＞

他の回答も見る

Q○○予約用をクリックしたらメールが立ち上がる

以下のプログラムでございますが
-----------------------------------------------------------------------
<html>
<head>
<title>○○予約用をクリックしたらメールが立ち上がる</title>
</head>
<body>
< a href = mailto:123abc@defg.co.jp?cc=456abc@defg.co.jp&subject=○○の予約&body=TO:○○ 様%OD%OAFM: %OD%OAFM: %OD%OA
【○○】"><font size='5'>○○予約用</font></a><br>
</body>
</html>
---------------------------------------------------------------------------
以上のプログラムでメールのccに2件目のアドレスを設定ができたことでメールの2件目の追加
を実現しまして、情報の共有ができております。
　昨日もう一軒メールを追加できないか試行錯誤しましたが実現しておりません。
そこで、全国の皆様方々、何か良い方法はございませんでしょうか？
　お手数でございますがよろしくお願いいたします。

以下のプログラムでございますが
-----------------------------------------------------------------------
<html>
<head>
<title>○○予約用をクリックしたらメールが立ち上がる</title>
</head>
<body>
< a href = mailto:123abc@defg.co.jp?cc=456abc@defg.co.jp&subject=○○の予約&body=TO:○○ 様%OD%OAFM: %OD%OAFM: %OD%OA
【○○】"><font size='5'>○○予約用</font></a><br>
</body>
</html>
---------------------------------------------------------------------------
以上のプログラムでメー...続きを読む

Aベストアンサー

>昨日もう一軒メールを追加できないか

ccにアドレスを追加…ということでしょうか？

「mailto リンク cc 複数」で検索すると、下記のページが見つかります。
http://ffff00.blog123.fc2.com/blog-entry-94.html
>CCは、CCとなります。,(カンマ)を指定することで複数アドレスを指定することが出来ます。
>BCCは、BCCとなります。,(カンマ)を指定することで複数アドレスを指定することが出来ます。

メーラーで複数指定する場合もカンマで区切ることになりますから、概ね同様でしょう。
起動されたメーラーが受付けるか？は別問題になるかも知れませんが。

他の回答も見る

Q中に
が使えるアコーディオンを教えて下さい。

htmlで料金メニューを作成しております。

大項目として7つぐらいの項目があり、それぞれに複数の「料金メニュー」「価格」「説明」等があります。
大項目にアコーディオンを使い、選択した時だけ料金メニューのtableを表示したいのですが、なかなか良い方法が見つかりません。

良くあるアコーディオンは、リスト（<li>）であったり、テキスト（<p>）の場合なら問題ないのですが、テーブルとなるとうまくうごくものが見つかりません。

どうかアドバイスや、参考になるページを教えて下さい。
よろしくお願いいたします。

Aベストアンサー

示されたサイトはjavascriptを使用しています。
　私は通常はjavascriptはブロックしていますので、広がらなかったけど、サイトのjavascriptを許可して初めて動作した。---今は私のようにデフォルトではjavascriptを禁止しているユーザーも多いので、この方法は良くありません。
　また、
＞大項目にアコーディオンを使い、選択した時だけ料金メニューのtableを表示したいのですが、
＞良くあるアコーディオンは、リスト（<li>）であったり、テキスト（<p>）の場合なら問題ないのですが、
　これも、誤解されています。
　普段は、display:none、ないしheight:0pxで、その要素が指定されると、display:block | table なりにすればよいことです。また、ゆっくり開きたいならtransitionを使えばよい・・
　もちろん、リストだろうがtableだろうが関係ないですし、リストとしてマークアップされているものをtableとして表示するのも、tableとしてマークアップされているものをリストとして表示するのも、スタイルシートを使えば簡単にできる。
　また、tableなどのソースがわからないと、作れないわけでもありまません。構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )は、20年前のHTML4.01の勧告以来、ウェブの基本ですからね。プレゼンテーション(表現)は、文書構造とは別の問題ですからね。(^^)

★あなたの間違いは、「良くあるアコーディオンは、・・・テーブルとなるとうまくうごくものが見つかりません。」と、完成品を探してそれを使おうとするからです。
　数学の勉強と同じで、問題集から同じような問題を解いて解き方を流用しようとするから伸びない。数学なんて、基礎からキチンと理解していけば、あれほど簡単でちょろい科目はないでしょ。小学生だって数検２級とか１級がとれる。

要は、
・その要素を条件によって「隠したり表示する」あるいは「小さくしたり大きくしたり」すばよい
　使えるプロパティは、displayか、transition、
　要素の指定は、動的な疑似クラスを使えばよい。

ごく簡単なサンプル
★タブは＿に置換してある
★alignやwidth属性はHTMLの属性ではなく、スタイルシートで指定しましょう。

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA">
<style media="screen">
<!--
section table{width:800px;border-collapse:collapse;}
section table caption{
text-align:left;
}
section table caption a{
text-decoration:none;
font-weight:bold;
font-size:1.2em;
}

section table tbody{
transition-property: line-height color;
transition-duration:2s;
transition-timing-function:ease-in-out;
color:rgb(255,255,255);
line-height:0;
}
section table tbody:target{
display:table-row-group;
color:rgb(0,0,0);
line-height:1.6em;
}
section table tbody:target th,
section table tbody:target td{
border:1px solid black;
}
-->
</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="#">Some</a></li>
＿＿＿＿<li><a href="#">navigation</a></li>
＿＿＿＿<li><a href="#">links</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>価格一覧</h2>
＿＿<table>
＿＿＿<caption><a href="#filing">ファイリング1</a></caption>
＿＿＿<tbody id="filing">
＿＿＿＿<tr>
＿＿＿＿＿<th>ファイリング</th>
＿＿＿＿＿<td class="number">10本</td>
＿＿＿＿＿<td class="price">700円</td>
＿＿＿＿＿<td class="comment">爪の長さや形を整えます。</td>
＿＿＿＿＿<td class="time">15分</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th>ファイリング</th>
＿＿＿＿＿<td class="number">10本</td>
＿＿＿＿＿<td class="price">700円</td>
＿＿＿＿＿<td class="comment">爪の長さや形を整えます。</td>
＿＿＿＿＿<td class="time">15分</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th>ファイリング</th>
＿＿＿＿＿<td class="number">10本</td>
＿＿＿＿＿<td class="price">700円</td>
＿＿＿＿＿<td class="comment">爪の長さや形を整えます。</td>
＿＿＿＿＿<td class="time">15分</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th>ファイリング</th>
＿＿＿＿＿<td class="number">10本</td>
＿＿＿＿＿<td class="price">700円</td>
＿＿＿＿＿<td class="comment">爪の長さや形を整えます。</td>
＿＿＿＿＿<td class="time">15分</td>
＿＿＿＿</tr>
＿＿＿</tbody>
＿＿</table>
＿＿<table>
＿＿＿<caption><a href="#filing2">ファイリング2</a></caption>
＿＿＿<tbody id="filing2">
＿＿＿＿<tr>
＿＿＿＿＿<th>ファイリング</th>
＿＿＿＿＿<td class="number">10本</td>
＿＿＿＿＿<td class="price">700円</td>
＿＿＿＿＿<td class="comment">爪の長さや形を整えます。</td>
＿＿＿＿＿<td class="time">15分</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th>ファイリング</th>
＿＿＿＿＿<td class="number">10本</td>
＿＿＿＿＿<td class="price">700円</td>
＿＿＿＿＿<td class="comment">爪の長さや形を整えます。</td>
＿＿＿＿＿<td class="time">15分</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th>ファイリング</th>
＿＿＿＿＿<td class="number">10本</td>
＿＿＿＿＿<td class="price">700円</td>
＿＿＿＿＿<td class="comment">爪の長さや形を整えます。</td>
＿＿＿＿＿<td class="time">15分</td>
＿＿＿＿</tr>
＿＿＿</tbody>
＿＿</table>
＿＿<aside>
＿＿＿<h3>Something aside</h3>
＿＿</aside>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>

示されたサイトはjavascriptを使用しています。
　私は通常はjavascriptはブロックしていますので、広がらなかったけど、サイトのjavascriptを許可して初めて動作した。---今は私のようにデフォルトではjavascriptを禁止しているユーザーも多いので、この方法は良くありません。
　また、
＞大項目にアコーディオンを使い、選択した時だけ料金メニューのtableを表示したいのですが、
＞良くあるアコーディオンは、リスト（<li>）であったり、テキスト（<p>）の場合なら問題ないのですが、
　これも、誤解されてい...続きを読む

他の回答も見る

Q～の文字の大きさを”いっぺんに”大きくしたい。

プログラムの質問に当たり、自前のホームページから公開を試みております。
　しかし!デフォルトの状態では、文字が小さすぎまして、読まれるお方に失礼と存じまして
文字を大きくしたいのですが、やり方がいまいちわかりません
　<H1～6></H1～6>、で大きくしていた記憶がございます。
　しかし！タグごとに1個1個付けていかないと確かできなかったような記憶がございます。
　参考書が手元にないので詳しいことはわかりません！
　　もし本文にあたる、<body>～<body>の”文字”いっぺんに大きくする方法は可能でしょうか
　馬鹿な質問ではございますが！よろしくお願いいたします。
見出し文字
<!DOCTYPE html>
<html>
<head>
<title>help me</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>サンプル</title>
</head>
<body>

<H5>
<?php

print "<ul>\n";

print "<li>10進数の１０は";
print 10;
print "</li>\n";

print "<li>8進数の10は″;
print 010;
print "</li>\n";

print "<li>16進数の10は″;
print 0x10;
print "</li>\n";

print "<li>16進数のFは″;
print 0xF;
print "</li>\n";

print "</ul>\n";

?>

</body>
</html>

</H5>

</body>
</html>

プログラムの質問に当たり、自前のホームページから公開を試みております。
　しかし!デフォルトの状態では、文字が小さすぎまして、読まれるお方に失礼と存じまして
文字を大きくしたいのですが、やり方がいまいちわかりません
　<H1～6></H1～6>、で大きくしていた記憶がございます。
　しかし！タグごとに1個1個付けていかないと確かできなかったような記憶がございます。
　参考書が手元にないので詳しいことはわかりません！
　　もし本文にあたる、<body>～<body>の”文字”いっぺんに大きくする方法は...続きを読む

Aベストアンサー

そもそも
＞<H1～6></H1～6>、で大きくしていた記憶がございます。
　ここからが違う。
　h1～h6は、見出し(heading)を示すタグです。決して文字の大小ではない。
　HTMLは、もともとSGMLの考え方によるものです。
Standard Generalized Markup Language#背景( https://ja.wikipedia.org/wiki/Standard_Generalized_Markup_Language#.E8.83.8C.E6.99.AF )
　h1,h2が大きく見えるのはブラウザがそのように見せているだけ。

　それはさておき、phpにしろ、出力されるのはHTMLですから、HTMLでは【文書構造】だけを忠実にマークアップして、それをどのように表示するかはスタイルシートに任せます。
<basefont size="数字">　<-- 1999年のHTM4.01で破棄されました。使ってはなりません。
<font size="+1">　font要素の非推奨です。使うべきではありません。もちろんsizeも使えません。
<h1><ul>
　h1要素内にブロック要素である<ul>などは入れることができません。

★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
　というとても素晴らしいサイトがあります。そこであなたのページをチェックすると指摘してくれます。

※単純に<head></head>内かリンクでスタイルシートを適用すればよいです。

★タブは＿に置換してあるので戻す。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
　で検証済み

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA">
<style media="screen">
<!--
body{font-size:3em;/* body以下は3倍 */}
/* おまけ */
header,section,footer{margin:0 auto;width:80%;}
h3{color:green;background-color:yellow;}

-->
</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="/Some">Some</a></li>
＿＿＿＿<li><a href="/Nav">navigation</a></li>
＿＿＿＿<li><a href="/link">links</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>A smaller heading</h2>
＿＿<p>
＿＿</p>
＿＿<aside>
＿＿＿<h3>Something aside</h3>
＿＿</aside>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>

そもそも
＞<H1～6></H1～6>、で大きくしていた記憶がございます。
　ここからが違う。
　h1～h6は、見出し(heading)を示すタグです。決して文字の大小ではない。
　HTMLは、もともとSGMLの考え方によるものです。
Standard Generalized Markup Language#背景( https://ja.wikipedia.org/wiki/Standard_Generalized_Markup_Language#.E8.83.8C.E6.99.AF )
　h1,h2が大きく見えるのはブラウザがそのように見せているだけ。

　それはさておき、phpにしろ、出力されるのはHTMLですから、HTMLでは【文書構造】だけを...続きを読む

他の回答も見る

Q

<div id="container">の使い方についてお尋ねします。

ページの上から下まで帯のようにしたいのですが、例えば以下のように書くとヘッダーのところまでしかcontainerが効いていません。


HTML
<body>
<div id="container">
<div id="header">ヘッダー</div>
<div id="navi">ナビゲーション</div>
<div id="contents">ページの内容</div>
<div id="footer">フッター</div>
</div>
</body>

CSS
#container {
font-size: 21px;
line-height: 28px;
color: #353535;
width: 1050px;
margin: 0 auto;
}

ランディングページのようなものを作りたく、
ページの上からフッターの手前くらいまで<div id="container">を効かせるにはどのように記述すればよいでしょうか？

<div id="container">の使い方についてお尋ねします。

ページの上から下まで帯のようにしたいのですが、例えば以下のように書くとヘッダーのところまでしかcontainerが効いていません。


HTML
<body>
<div id="container">
<div id="header">ヘッダー</div>
<div id="navi">ナビゲーション</div>
<div id="contents">ページの内容</div>
<div id="footer">フッター</div>
</div>
</body>

CSS
#container {
font-size: 21px;
line-height: 28px;
color: #353535;
width: 1050px;
marg...続きを読む

Aベストアンサー

＞HTML５とCSS3に関するおすすめの本があったら教えていただけないでしょうか？
　これがとても難しい。理由は
・進歩の激しいこの世界、出版時には古くなっている
・すべて仕様書に書かれている。それで事足りる物を書き下す意味がない。
　仕様書には、「なぜそうするのか」の理由も含めて完璧に書かれている。
　それを読めば解決する物を、著者の色眼鏡を通して記述しても正確ではない
　しばしば、仕様書を読んだことがあるのか疑問のものがある。

　これについては、No.1でいくつか説明しました。

　よって、一番早くて、しかも正確な参考書は仕様書ということになります。私もHTMLやCSSは仕様書で学びました。
　最初は冗長に感じますが、それは正確性を追求するために致し方ないでしょう。
　まずはHTMLをしっかり学ばれることをお勧めします。いきなり膨大なHTML5ではなく、HTML4.01strict【strictですよ。】を身につけてから、HTML5に進まれるほうが楽でしょう。

1.2 仕様の記述法( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/about.html#h-1.2 )より
　本仕様書は、著者及び実装者という2種類の読者を想定している。著者である読者に対しては、本仕様書が、HTMLの実装詳細に必要以上に触れずに使える、効率的・魅力的でアクセス性のよい文書を著述する際に必要な道具となることを望む。けれども実装者である読者は、仕様に適合するユーザエージェントを作成する上で必要となるすべての情報を見つけることができるだろう。
　本仕様書は様々な方法で利用できるだろう。
・ 最初から最後まで通読する。
・ 必要な情報に直接アクセスする。

　最初は、全体を通して読んで全体像を把握して、いつでも必要な情報にたどり着けるようになること。
　私のブックマークでは
HTML4.01詳細目次( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html#toc )

　ついで、スタイルシートはやはりCSS2.1あたりがベストです。
CSS 2.1目次( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html#toc )
　特に
4 構文と基本データ型
5 セレクタ
6 プロパティ値とカスケーディング、継承の割り当て
　ここを読まれるだけで、あなたが理解しているCSSが如何に不完全か理解できると思います。

　そのうえで、
HTML4からの変更点( http://www.html5.jp/trans/w3c_differences.html )
　で、変更部分を身につけるのが最も最短で効率的でしょう。

★HTMLやCSSの学習は、数学や理科の勉強方法ととても良く似ています。基礎から順を追ってなぜなのかを理解しながら学ぶと、小学生でも数検2級とかが取れるように、簡単なものなのです。結果を急いでうわべだけ学ぼうとしても反って時間と労力を無駄にして、しかもきちんと身についていないから応用問題に果ても足も出ない・・・ということになる。

＞HTML５とCSS3に関するおすすめの本があったら教えていただけないでしょうか？
　これがとても難しい。理由は
・進歩の激しいこの世界、出版時には古くなっている
・すべて仕様書に書かれている。それで事足りる物を書き下す意味がない。
　仕様書には、「なぜそうするのか」の理由も含めて完璧に書かれている。
　それを読めば解決する物を、著者の色眼鏡を通して記述しても正確ではない
　しばしば、仕様書を読んだことがあるのか疑問のものがある。

　これについては、No.1でいくつか説明しました。

　よっ...続きを読む

他の回答も見る

Qtext-align: center;　無視される

table[summary="トップ"] th.トップ_品名{
width: 11em;
text-align: center;
}

このCSSは、書き方が変ですか？
なぜか、
width: 11em;
は適用されるのに
text-align: center;
は無視されます。

Aベストアンサー

CSS の記述自体に誤りはありません。
他のCSSで設定が上書きされているか、CSS のセレクタの記述
が目的の要素と合っていないかのどちらかと推測されます。

回答No.1 さんがおっしゃるように、『CSSの適用状況を目視
できるツール』を利用して確認されることをお勧めします。

他の回答も見る

Q

画像の白い部分に色を付けるにはどうすればいいでしょうか？

<div id="main">の中には、赤、線には青の色を付けることはできたのですが、
<div id="main">の外側に色を付けるにはどうすればいいですか？

コードは、
<style type="text/css">
#main{width: 70%;
margin: 0 auto;
text-align: left;
background-color:red;
border:30px solid blue;}
</style>

</head>

<div id="main">
test
</div>

としています。

よろしくお願いします。

Aベストアンサー

div#main{position:relative;min-height:300px;border:10px blue solid;background-color:red;}
div#main:before{content:"";display:block;width:110%;height:110%;top:-5%;left:-5%;position:absolute;background-color:yellow;z-index:-5;}

borderは簡略化プロパティですから
border-style,border-width,border-colorをあわせて指定します。

他の回答も見る

QHTMLにsvg画像表示したら小さかったので、タグ一杯に要素を拡大したい

■やりたいこと
・HTMLにsvg画像を大きく表示したい


■現状
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="800px" viewBox="0 0 800 800">
<path d="M …


■困っていること
・<svg>範囲のサイズを拡大することは出来るが、<path>範囲を拡大することが出来ないので、svg画像を大きく表示することが出来ない


■知りたいこと
・<svg>サイズ一杯に<path>範囲を拡大するにはどうすればよいでしょうか？
・<path>全体のサイズ指定はどこで実施？

Aベストアンサー

描画する内容にもよってくるかもしれませんが、
http://d.hatena.ne.jp/rikuo/20141203

とか参考になるかもしれませんね。
実際のファイルも置いて下さっているので、
中身を比較してみれば大きさの変更部分も記載があるかと…（・_・）

他の回答も見る

QCSSで、リスト
  • の、アンカー行の、hover された行の、前行・次行の、色を変えたい

    • a:hover {色を指定する指示}
    という指定で、
    hoverしているアンカー行そのものに
    色を付けることまでは
    出来ています。

    しかし、ここで、
    hoverされている隣の
    hover次行をセレクトしようと
    CSSの直接隣接セレクタ（プラス記号）を用いて、
    a:hover + a {色を指定する指示}　
    のように書いてもダメなようでした
    しかも、
    この方法だと
    もし成功しても
    hover行の次行なら選べても
    hover行の前行を選ぶ手段が
    有りませんですしね。

    なので
    hoverされた行の
    前の行も
    次の行も
    選ぶことを可能にするには、

    一旦
    hoverしている当該行が
    リスト内の何番目かをしめす数値
    li:nth-child(数値)
    の数値を何らかの手段で取得して

    その
    数値－1
    数値＋1
    を用いた何らかの指定方法で
    hover行の、前行・次行
    をセレクトするような
    セレクタを書かねば
    駄目なのかな？？
    と思っています。

    これってCSSで出来ますでしょうか
    それか
    CSSにjavascriptを併用して
    やっと可能でしょうか

    どんなコード（スクリプト）
    になりますでしょう

    どなたか是非
    御指南くださいませ。
    よろしくお願い致します。

    a:hover {色を指定する指示}
    という指定で、
    hoverしているアンカー行そのものに
    色を付けることまでは
    出来ています。

    しかし、ここで、
    hoverされている隣の
    hover次行をセレクトしようと
    CSSの直接隣接セレクタ（プラス記号）を用いて、
    a:hover + a {色を指定する指示}　
    のように書いてもダメなようでした
    しかも、
    この方法だと
    もし成功しても
    hover行の次行なら選べても
    hover行の前行を選ぶ手段が
    有りませんですしね。

    なので
    hoverされた行の
    前の行も
    次の行も
    選ぶことを可...続きを読む

    Aベストアンサー

    ごく簡単なサンプルを。
    ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
    　でチェック済みのHTML5+CSS3です。必ず試してください。
    ★タブは＿に置換してあるので戻す。
    ★リキッドでデザインされています。
    　HTMLには文書構造しか書かれていないために、あとで自在にデザインは変更できます。またガラケーや印刷用に適用されません。必要ならガラケーや印刷用のスタイルシートを書き足してください。
    <!doctype html>
    <html>
    <head>
    ＿<meta charset="utf-8">
    ＿<title>サンプル</title>
    ＿<meta name="description" content="">
    ＿<meta name="author" content="IRUKA">
    ＿<link rel="stylesheet" href="css/style.css">
    <style media="screen">
    <!--
    html,body{margin:0;padding:0;}
    h1,h2,h3,h4{margin:0;line-height:1.6em;}
    header,section,footer{
    ＿width:90%;
    ＿max-width:1000px;margin:0 auto;
    ＿position:relative;
    }
    header nav{
    ＿position:absolute;
    ＿top:100%;
    ＿left:10px;
    ＿width:160px;
    ＿z-index:100;
    }
    header nav ul,header nav ul li{
    ＿text-align:center;
    ＿list-style:none;
    ＿margin:0;padding:0;
    ＿line-height:30px;
    ＿position:relative;
    }
    header nav ul,header nav ul li{
    ＿margin-top:5px;
    }
    header nav ul,header nav ul li a{
    ＿display:block;
    ＿width:100%;height:100%;
    ＿text-decoration:none;
    ＿z-index:100;
    ＿position:relative;
    }
    header nav ul li{
    ＿height:30px;
    ＿width:100%;
    ＿border:2px outset gray;
    }
    header nav ul li:hover{
    ＿background-color:lime;
    ＿position:relative;
    }
    header nav ul li+li:hover:before{
    ＿content:"\A";
    ＿display:block;
    ＿width:100%;
    ＿height:100%;
    ＿position:absolute;
    ＿top:-39px;
    ＿left:0;
    ＿z-index:5;
    }
    section h2,section p,section section{
    ＿margin:0 180px;
    }
    section{min-height:300px;}
    section section p,section section section{
    ＿margin:0 10px;min-height:0;
    }
    section aside{
    ＿position:absolute;
    ＿top:0;right:0;
    ＿width:160px;
    ＿height:100%;
    }
    /* 色づけ */
    header{background-color:rgb(200,255,255);}
    section,header nav{background-color:silver;}
    section section{background-color:white;}
    section aside{background-color:fuchsia;}
    footer{background-color:rgb(255,255,160);}
    header nav ul li{background-color:white;}
    header nav ul li:hover{background-color:lime;}
    header nav ul li:hover+li{background-color:yellow;}
    header nav ul li+li:hover:before{background-color:aqua;}
    -->
    </style>
    </head>
    <body>
    ＿<header>
    ＿＿<h1 id="title">Your title</h1>
    ＿＿<nav>
    ＿＿＿<ul>
    ＿＿＿＿<li><a href="/Some">Some</a></li>
    ＿＿＿＿<li><a href="/nav">navigation</a></li>
    ＿＿＿＿<li><a href="/Products">Products</a></li>
    ＿＿＿＿<li><a href="/Books">Books</a></li>
    ＿＿＿＿<li><a href="/Links">links</a></li>
    ＿＿＿</ul>
    ＿＿</nav>
    ＿</header>
    ＿<section>
    ＿＿<h2>A smaller heading</h2>
    ＿＿<p>
    ＿＿＿記事色々
    ＿＿</p>
    ＿＿<section>
    ＿＿＿<h3>見出し</h3>
    ＿＿＿<p>
    ＿＿＿＿記事・・・・・
    ＿＿＿</p>
    ＿＿</section>
    ＿＿<aside>
    ＿＿＿<h3>Something aside</h3>
    ＿＿</aside>
    ＿</section>
    ＿<footer>
    ＿＿<h3>A nice footer</h3>
    ＿</footer>
    </body>
    </html>

    ごく簡単なサンプルを。
    ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
    　でチェック済みのHTML5+CSS3です。必ず試してください。
    ★タブは＿に置換してあるので戻す。
    ★リキッドでデザインされています。
    　HTMLには文書構造しか書かれていないために、あとで自在にデザインは変更できます。またガラケーや印刷用に適用されません。必要ならガラケーや印刷用のスタイルシートを書き足してください。
    <!doctype html>
    <html>
    <head>
    ＿<meta charset="utf-8">
    ＿<title>サン...続きを読む

    他の回答も見る

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

    Q質問する（無料）

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

    関連するQ&A

    関連するカテゴリからQ&Aを探す

    専門家回答数ランキング

    専門家

    ※過去一週間分の回答数ランキングです。

    Q質問する（無料）

    他の専門家の回答をチェック

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

    ページトップページトップ

    Q質問する（無料）

    このQ&Aを見た人がよく見るQ&A

    人気Q&Aランキング

    おすすめ情報