電子書籍の厳選無料作品が豊富！

おしえて

3カラムレイアウトで「常に残り幅全て・固定幅・固定幅」にできますか？

解決済

  • 質問者：spe7
  • 質問日時：
  • 回答数：3件

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だけでも出来る方法があれば教えて頂きたく思います。

よろしくお願いします

通報する

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

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

  • 回答者： Ogre7077
  • 回答日時：

<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>
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： ORUKA1951
  • 回答日時：

実際のサンプルです。


★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&#64;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;
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

想像していた動作とは異なりましたが、HTMLの仕組みについての丁寧なアドバイスありがとうございました。勉強になりました。

通報する
お礼日時：2015/04/15 12:57

No.1

  • 回答者： ORUKA1951
  • 回答日時：

以下、根拠を示しておきますからそれを必ず読んで理解してから対処を説明します。



質問は、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には一切手を加えずデザインだけ変えられる。
　スタイルシートを外部に置くとスタイルシート書き直すだけで全ページが一挙に変更される
・端末--携帯電話や印刷、スマホ--ごとにデザインを変える

　などと、作るのは無論、デザインの自由度もメンテナンスもとても楽になるのです。
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報