TABLEタグで先に説明させて頂くと
<table style="width:100%;">
<tr>
<td style="background-color:#FFCCCC;">A:指定なしセル</td>
<td style="width:300px;background-color:#FFFFCC;">B:固定幅のセル</td>
<td style="width:300px;background-color:#FFCCFF;">C:固定幅のセル</td>
</tr>
</table>
などとした時「セルA」は600を引いた残り全ての幅になると思います。
これをDIVタグで再現するには、以下の参考URLのようにfloatとmarginなどで行うと思うのですが、
http://14-00.com/archives/18
「セルB」や「セルC」をJavascriptでdisplay:none;などした時に、「セルA」が残り幅全てになるCSSはありますでしょうか。
TABLEタグであればそのままできたのですが、DIVの場合の指定方法が判りませんでした。
Javascriptでmarginを書き直すなどすればもちろんできそうなのですが、CSSだけでも出来る方法があれば教えて頂きたく思います。
よろしくお願いします
No.2ベストアンサー
- 回答日時:
<style>
div.layout { display:table; width:100%;}
div.layout > * { display:table-cell; }
div.layout > nav { width:300px; }
</style>
<div class=layout>
<nav>B</nav>
<article>A</article>
<nav>C</nav>
</div>
No.3
- 回答日時:
実際のサンプルです。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
でチェック済みのHTML4.01strict+CSS2.1のウェブ標準です。
★タブは_に置換してあるので戻す。
試し方
※文字コードはShift_JIS
※このHTMLと同じ場所に[css]というフォルダーを作成し、下の5つのスタイルシートを入れる。
※代替スタイルシートに対応した(Chrome以外の)ブラウザで、[表示]→[スタイル(シート)]に進み、任意のスタイルを選択し、ウィンドウ幅を変えて確認する。。
※印刷プレビューで印刷時の状態を確認する。
※携帯電話にはデザインは適用されません。
※最低限必要なものは、sample.css、sample1.cssだけです。残りは他のデザインと印刷用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<link rel="stylesheet" type="text/css" media="screen" href="./css/sample.css">
_<link rel="stylesheet" type="text/css" media="screen" href="./css/sample1.css" title="右2コマ">
_<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/sample2.css" title="左右">
_<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/sample3.css" title="補足下">
_<link rel="styleSheet" type="text/css" media="print" href="./css/print2.css">
</head>
<body>
_<div class="header">
___<h1>文書のタイトル</h1>
_</div>
_<div class="section">
__<h2>記事タイトル</h2>
__<p>段落(Paragraph)</p>
__<div class="section">
___<h3>項目タイトル</h3>
___<p>記事</p>
__</div>
__<div class="section">
___<h3>項目タイトル</h3>
___<p>記事</p>
__</div>
__<div class="nav">
___<h3>目次</h3>
__</div>
__<div class="aside">
___<h3>補足</h3>
___<p>本文と直接関係ない記事</p>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
_</div>
</body>
</html>
スタイルシート
[sample.css]
@charset "Shift_JIS";
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p{/* これらのマージンを0にして代わりに行高さを大きくする */
margin:0;line-height:1.6em;
}
p{text-indent:1em;}
[sample1.css]
@charset "Shift_JIS";
div.header,div.section,div.footer{
width:100%;
min-width:640px;/* 最小幅 */
margin:0 auto;
}
div.section{
position:relative;
min-height:400px;/* 最小高さ */
}
div.section div.section{
width:auto;
min-height:150px;
}
div.section div.section p,div.section div.aside p{
margin:0;
}
div.section div.nav,div.section div.aside{
position:absolute;
top:0;
width:200px;
height:100%;
}
div.section div.nav{
right:200px;
}
div.section div.aside{
right:0;
}
div.section h2,div.section p,div.section div.section{
margin-right:400px;
width:auto;
}
/* 背景色 */
div.header{background-color:aqua;}
div.section{background-color:fuchsia;}
div.footer{background-color:green;}
div.section div.section{background-color:silver;}
div.section div.nav{background-color:lime;}
div.section div.aside{background-color:orange;}
[sample2.css]
@charset "Shift_JIS";
div.header,div.section,div.footer{
width:100%;
min-width:640px;/* 最小幅 */
margin:0 auto;
}
div.section{
position:relative;
min-height:500px;/* 最小高さ */
}
div.section div.section{
width:auto;
min-height:150px;
}
div.section div.section p,div.section div.aside p{
margin:0;
}
div.section div.nav,div.section div.aside{
position:absolute;
top:0;
width:200px;
height:100%;
}
div.section div.nav{
width:150px;
}
div.section div.nav{
left:0;
}
div.section div.aside{
right:0;
}
div.section h2,div.section p,div.section div.section{
margin:0 200px 0 150px;
width:auto;
}
[sample3.css]
@charset "Shift_JIS";
div.section{
position:relative;
min-height:300px;/* 最小高さ */
}
div.section div.nav{
position:absolute;
top:0;
width:200px;
height:100%;
left:0;
}
div.section h2,div.section p,div.section div.section,div.section div.aside{
margin-left:200px;
width:auto;
}
[print2.css]
@charset "Shift_JIS";
h1,h2,h3,h4,h5,h6,p{
margin:0;line-height:1.8em;
}
div.header,div.section,div.footer{
margin:0 1em;
}
div.section div.nav{
display:none;
}
div.section div.aside{
border:solid 2px blue;
font-size:0.9em;
width:80%;
margin:1em auto;
padding:5px;
}
No.1
- 回答日時:
以下、根拠を示しておきますからそれを必ず読んで理解してから対処を説明します。
質問は、15年前のHTML4.01の勧告以来強く言われてきた
・単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
・ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
だと思います。実はもうひとつ、見落とされがちですが
「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
もあわせて・・。HTML5ではDIVは安易に使えなくなりますから・・
「これをDIVタグで再現するには、以下の参考URLのようにfloatとmarginなどで行うと思うのですが」も正しくはありません。発想自体が誤っています。
--divはデザインのためじゃない。
--floatはテキスト中の画像の周囲にテキストを回りこませるためのもの
★重要な事は、『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』なのです。
それができていれば、まったく難しいものではありません。
以上を踏まえて本題です。本文<body>内の文書構造が下記のようなものだとします。判りやすいHTML5で示すと下記のようになります。HTML5では、文書構造を示す新しい要素が追加されたため、他に適切な要素がある場合DIVは使えません。
【引用】____________ここから
NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[4.4 Grouping content — HTML5( http://www.w3.org/TR/html5/grouping-content.html … )]より
意訳: 他に適切な要素がないときの最後の最後の手段としてdiv要素を使用することが強く奨励される。div要素に代わるより適切な要素を使用することで、読者にとっては、より良いアクセシビリティを著者にはより容易なメンテナンス性につながる。
<body>
<header>
<h1>文書のタイトル</h1>
</header>
<section>
<h2>記事タイトル</h2>
<p>段落(Paragraph)</p>
<section>
<h3>項目タイトル</h3>
<p>記事</p>
</section>
<nav>
<h3>目次</h3>
</nav>
<aside>
<h3>補足</h3>
<p>本文と直接関係ない記事</p>
</aside>
</section>
<footer>
<h2>文書情報</h2>
</footer>
</body>
★HTMLには文書構造だけが、文書構造が分かるように記述されていますから、メンテナンスも楽ですし、tableなんか使わなくてもデザインが自由にできます。
これを、HTML4.01で現すと、従来は下記のように書いてこられたはずです。
<body>
<div class="header">
<h1>文書のタイトル</h1>
</div>
<div class="section">
<h2>記事タイトル</h2>
<p>段落(Paragraph)</p>
<div class="section">
<h3>項目タイトル</h3>
<p>記事</p>
</div>
<div class="nav">
<h3>目次</h3>
</div>
<div class="aside">
<h3>補足</h3>
<p>本文と直接関係ない記事</p>
</div>
</div>
<div class="footer">
<h2>文書情報</h2>
</div>
</body>
デザインは好きにできますが、ここでは本文(section)内で、目次(nav)と補足記事(aside)を本文の右横に固定幅で並べて置くとします。
┌──────┐
│・ヘッダー・│
├──┬─┬─┐
│本文│目│補│ 全体は、リキッドで目次と補足は固定幅で
│記事│次│足│ 本文の右横に並べておく。
├──┴─┴─┤
│・フッター・│
└──────┘
/* リキッド */
div.header,div.section,div.footer{
width:100%;
}
/* 以下の要素の基準 */
div.section{
position:relative;
}
/* それ基準に絶対配置 */
div.section div.nav,div.section div.aside{
position:absolute;
top:0;/* 上に */
width:200px;/* 固定幅 */
height:100%;/* 高さは100% */
}
/* 目次は 右から200px */
div.section div.nav{
right:200px;/* 右から200px */
}
/* 補足は右端 */
div.section div.aside{
right:0;
}
/* それ以外は右を空ける */
div.section h2,div.section p,div.section div.section{
margin-right:400px;
width:auto;
}
/* 下位要素の再指定 */
div.section div.section{
width:auto;
}
div.section div.section p,div.section div.aside p{
margin:0;
}
具体的なサンプルは次にまわしますが、このように文書構造とプレゼンテーションを分離すると、
・HTMLはシンプルで判りやすく。作りやすくなる。
・デザインに文書構造が引きずられることもない
左右を入替えるためにHTMLを書き直すなんて事はなくなる
・メンテナンスも容易
・検索エンジンにも理解されやすく
・デザインはHTMLに手を加えず随時変更できます。
気が変わったらHTMLには一切手を加えずデザインだけ変えられる。
スタイルシートを外部に置くとスタイルシート書き直すだけで全ページが一挙に変更される
・端末--携帯電話や印刷、スマホ--ごとにデザインを変える
などと、作るのは無論、デザインの自由度もメンテナンスもとても楽になるのです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSで、contentsがfooterに重な...
-
AWSのhtml
-
携帯サイト、ナノでのタグ編集...
-
html の divとtable の役割
-
htmlのolやulなどlistにtitleや...
-
ヘッダーとフッターだけ背景を...
-
<section>タグと<div>タグ
-
複数のボタンを等間隔に、かつ...
-
オシャレな区切り線はありませ...
-
リストで画像を右に表示したい
-
音声ブラウザ、スクリーンリー...
-
3カラムレイアウトで「常に残り...
-
idとclassの指定方法
-
HTMLでのコメントアウト
-
CSSレイアウト IEでclear指定...
-
RMS レフトナビ問題
-
div要素が重なってします
-
ホームページ初心者です。入力...
-
【ヒトの神秘】美男美女から何...
-
CSSでつくったメニューのアニメ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
HTML属性での「""」 「''」違い
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
divとpの使いわけ
-
min-heightとheightの違いについて
-
HTML5 iframe の代わり
-
divの中に外部のHTMLを埋め込む
-
3カラムレイアウトで「常に残り...
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
-
reuterのScraypingで不思議な現...
-
htmlの見出しタグ(<h1>)の次...
-
1サイト内にHTML5とXHTMLが混在...
-
inline-blockをネストすると表...
-
html5でheaderの中にnav
-
<!-- #BeginLibraryItemとは
おすすめ情報