「table-cell」を使わずにコーディング

コーディング初心者のグラフィックデザイナーです。
昔、htmlとCSSで簡単なコーディングをしたことはありますが
テーブルコーディングしかしたことがありません。
この度仕事で、自力でコーディングをしなければいけないことになり
（数日中に納品しなければいけないのですが）
大変困っています。
無謀なのはわかっていますが、
お力をお貸しいただけないでしょうか；；


「table-cell」を使用してコーディングしたものを
「table-cell」を使わずにコーディングしなおさなければいけないことになりました。
現状使用しているのは
以下のようなタグです。

【CSS】-----------------------------------------------

#table {
display:table;
margin: auto;
}
.row {
display:table-row;
}
.row>div {
display:table-cell;
margin:0px;
padding:0px;
border:0px;
}

【html】-----------------------------------------------

<div id="table">
<div class="row">
ここにコンテンツ
</div>
</div>


時間がないのですが、
table-cellを使わずに組み直す（修正する）には
どんな方法があるでしょうか？

No.4 ベストアンサー 回答者： ORUKA1951 回答日時： 2016/05/25 19:28

と書きながら、そうなっていなかった。

スタイルシート部分を書き直した。
media="screen"
を追加して、ウィンドウ幅で表示を変えるようにmediaqueryを追記した。
これで、ウィンドウを小さくしていくと、デザインが変わるようになる。
そして、印刷やハンドヘルド(携帯電話)などでは、素のデザインのままになる。

★これが、tableを使わないデザインということ。
　たぶん、元のHTMLが酷いものになっていると思うので、
＞時間がないのですが、
　と言われても、少し時間が必要だと思います。もう20年近く言い続けられてきた、構造とプレゼンテーションの分離をされてこられなくて、「テキストを画像に置き換えて表現する。」「余白制御のために画像を用いる。」「ページレイアウトの目的で表を用いる。」「HTMLでページを作らずにプログラムに頼る。」( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )を守ってこられなかったつけが回ってきた。

　大変だと思いますが、身に着ければこれほど楽なものはない。(^^)私のHTMLソース( https://oshiete.goo.ne.jp/qa/9285798.html#an9914 … )を見ればお分かりかと。

　頑張ってくださいね。

<style type="text/css" media="screen">
<!--
/* わかりやすいように色分け */
html{background-color:gtay;}
body{background-color:silver;}
div.header{background-color:aqua;}
div.section{background-color:yellow;}
div.section div.section{background-color:white;}
div.section div.nav{background-color:lime;}
div.section div.aside{background-color:fuchsia;}
div.footer{background-color:orange;}
/* ここから */
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header{min-height:200px;}
div.header,div.section,div.footer{width:90%;min-width:980px;max-width:900px;margin:0 auto;padding:5px;}
div.section{position:relative;}
div.section{min-height:400px;}
div,section div.section{min-height:0;}
div.section div.section,
div.section h2,
div.section p{margin:0 200px;width:auto;min-width:0;}
div.section * p{margin:0;}
div.section div.nav,
div.section div.aside{position:absolute;top:0;width:180px;height:100%;}
div.section div.nav{left:0;}
div.section div.aside{right:0;}
@media screen and (max-width: 979px) {
div.header,div.section,div.footer{width:95%;min-width:0;margin:0 auto;padding:5px;}
div.section{position:relative;}
div.section{min-height:200px;}
div.section div.section,
div.section h2,
div.section p{margin:0 0 0 200px;}
div.section div.aside{position:static;top:auto;width:auto;height:auto;}
div.section div.nav{left:0;}
}
@media screen and (max-width: 640px) {
div.section{position:relative;}
div.section{min-height:200px;padding-top:50px;}
div.section div.section,
div.section h2,
div.section p{margin:0 ;}
div.section div.aside{position:static;top:auto;width:auto;height:auto;}
div.section div.nav{width:100%;left:0;top:0;height:50px;}
}
-->
</style>

No.3 回答者： ORUKA1951 回答日時： 2016/05/24 08:40

スタイルシート部分です。

★ これがtableを使わない本来のHTML/CSSの記述方法です。
　16年以上前から言われ続けているので今更で申し訳ない。

★ media="creen" とPCやスマホなどだけのデザインです。
　携帯電話や印刷、スクリーンリーダー、点字端末には適用されない。
　リキッドですからウィンドウサイズを変えてもよい
★ media="handheld" で携帯電話やPDA用のデザイン
　 media="print" で印刷用
　 media="speach" で音声出力--例えばsafariの読み上げ
　と別途指定できます。
★　そしてデザインはいつでも変えられる
　ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　をIEかfirefoxで訪問して、表示メニューからスタイルシートへ進み、いろいろなスタイルを選択してごらんなさい。HTMLは一切変えずにデザインは好きにできるし、印刷用は別のデザイン(印刷プレビュー)で印刷される。

★ tableを使わないデザイン意味はこういうことです。

　ページ制作もメンテナンスもとても楽になります。なによりも検索エンジンに「本文はsectionだよ」「ここはナビゲーション(nav)だよ」「ここ(aside)は関係ないよ」と示すことができる。

<style type="text/css">
<!--
/* わかりやすいように色分け */
html{background-color:gtay;}
body{background-color:silver;}
div.header{background-color:aqua;}
div.section{background-color:yellow;}
div.section div.section{background-color:white;}
div.section div.nav{background-color:lime;}
div.section div.aside{background-color:fuchsia;}
div.footer{background-color:orange;}
/* ここから */
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header{min-height:200px;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}
div.section{position:relative;}
div.section{min-height:400px;}
div,section div.section{min-height:0;}
div.section div.section,
div.section h2,
div.section p{margin:0 200px;width:auto;min-width:0;}
div.section * p{margin:0;}
div.section div.nav,
div.section div.aside{position:absolute;top:0;width:180px;height:100%;}
div.section div.nav{left:0;}
div.section div.aside{right:0;}

-->
</style>

No.2 回答者： ORUKA1951 回答日時： 2016/05/24 08:29

table-cell を使うことと、tableでデザインするというのは、まったく違うことなのですよ。

・・・何かここが理解できていない気がする。
　1999年(16年前)のHTML4.01の勧告--実際にはその草案が出された18年前あたりから、否定されていたtableを使ってデザインは
「ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
　ですよ。
★ズバリHTMLの問題、HTMLは文書構造だけをマークアップするものなので、表でないものをtableでマークアップするな!!ということ。
《構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )》


一方、display:table-cell; は、文書構造上は、tableデータでないものを、あたかもtableのようにデザインする--プレゼンテーション側の問題。
例えば、次のようなリストがあるとします。
<div class="nav">
　<ol>
　　<li><a href="">製品</a>
　　　　<ul>
　　　　　　<li><a href=""></a></li>
　　　　　　<li><a href=""></a></li>
　　　　　　<li><a href=""></a></li>
　　</li>
・・・。ナビゲーションリストですね。これを表のようにデザインしたい場合に
div.nav ol li{display:table-row;}
div.nav ol li ul li{display:table-cell;}
とか・・
　まあ、table-cellには色々厄介な問題があって、display:bock;ないし、display:inline-block;のほうが良いでしょう。

例えば、
<div class="section">
　<h2>見出し</h2>
　<p>記事</p>
　<div class="section">
　　<h3>見出し</h3>
というHTMLがあったとします。
今更ですが
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』はご存知だと思います・
　HTML5では、他に適切な要素があるときはdivは使えませんから
<section>
　<h2>見出し</h2>
　<p>記事</p>
　<section>
　　<h3>見出し</h3>
となっているはずです。

divはブロック要素です。sectionは、文書のアウトラインを構成するセマンティクなブロック要素です。

　あなたの場合は、別にdispaly:table-cellなんてしなくて、
単純に
div.section{
width:80%;
margin:0 auto;
}
とかでよいはずです。

★table、もしくはtable-cellを使わないというのは、具体的な例で示すとわかりやすいのでサンプルを

1) まず、HTMLをデザインは一切無視して、文書構造をマークアップします。
　　　　　￣￣￣￣￣￣￣￣￣￣￣￣￣￣
※ 文書構造しか書かないのでとっても楽ですし、SEOも、ユーザビリティ・アクセシビリティも完璧です。
★タブは＿に置換してあるので戻してください。文字コードはShift_JIS

<!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">
＿<style type="text/css">
<!--
/* わかりやすいように色分けだしておく */
html{background-color:gtay;}
body{background-color:silver;}
div.header{background-color:aqua;}
div.section{background-color:yellow;}
div.section div.section{background-color:white;}
div.section div.nav{background-color:lime;}
div.section div.aside{background-color:fuchsia;}
div.footer{background-color:orange;}

-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsectionのclass名をつけておく。</p>
＿＿<p>HTML5では&lt;section&gt;要素になる。</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文記事(二階層目)。HTML5では&lt;section&gt;要素</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿<div class="nav">
＿＿＿<h3>ナビゲーション</h3>
＿＿</div>
＿＿<div class="aside">
＿＿＿<h3>関連記事</h3>
＿＿＿<p>
＿＿＿＿ここには本文と直接関係ない(asideな)記事を書く。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿HTML5では&lt;aside&gt;&lt;/aside&gt;要素になる。
＿＿＿</p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistory">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>

No.1 回答者： yambejp 回答日時： 2016/05/23 15:30

フルードグリッドとレスポンシブWEBデザイン