HTML5をCSSでレイアウトする場合の最適な方法とは？
- HTML5でのレイアウトにおいて、sectionやarticleなどの新しい要素をCSSのfloatなどで使用するのは適切ではありません。
- div要素を使用してレイアウトする方法や、CSSでカラムレイアウトを実現する方法もあります。
- HTML5の新しい要素を使用してレイアウトする場合には、無駄なネストを避けることが重要です。より効率的な方法を探求しましょう。
- ベストアンサー
HTML5をCSSでレイアウトする場合
section articleといった新しい要素をCSSのfloat等でレイアウトするのは間違いなのでしょうか？ いろいろと調べてみましたが、sectionを使ったレイアウトは駄目で、divでレイアウトするとか… また、article aside nav 等をCSSでカラムレイアウト解説をしているサイトもありました… また、Q&Aサイトで <div id="article_1"> <article> …………… </article> </div> のようなsampleで、わざわざ無駄なことをせずにhtml5の新しい要素でレイアウトしましょう…？ <article id="article_1"> …………… </article> と言うような回答もありましたが… 確かに、HTML5でWEBページ作成をするのに、レイアウトは<div>でネストするのは意味がないように思いますが… よりよい方法を教えてください。m(_ _)m
- ok-sakana
- お礼率86% (26/30)
- HTML
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
No.1です。 仕様書を一度は目を通すと疑問は払拭されるでしょう。 HTML4.01自体がなぜ作られたかを御存知でしたら、HTML5の目的のひとつがよくわかると思います。 ユーザー登録（無料）が必要かもしれませんが ⇒HTML5“とか”アプリ開発入門（1）：Webの3つの問題を解決する「HTML5」とは何なのか (2/2) - ＠IT( http://www.atmarkit.co.jp/ait/articles/1008/30/news106_2.html ) 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから □ 【問題2】文書内に埋め込まれた「意味」が不明確 ・・・前略・・・「以前のHTMLは、文書構造の「意味」を表すための機能が不足していた」ということが挙げられます。 例えば、「見出し」「本文」といった文書構造を表すのに、これまでは＜div＞要素を用いることが一般的でした。しかし、＜div＞要素は厳密にいうと「意味を持たない」という意味の要素です。＜div＞が多用されたHTML文書は、開発者が目で見て読むのであれば、文書構造の意味を把握することは容易かもしれません。 しかし、例えば検索エンジンやスクリーンリーダーなどのプログラムにとっては、「どこからどこまでが重要な本文なのか」「この＜ul＞要素はナビゲーションメニューを表しているのか、文書中の個条書きなのか」すらも分からないのです。 → 【解決】文書内に埋め込まれた「意味」を明確にする HTML5では、この問題に対処するため、数多くの意味的要素（「セマンティックな要素」と呼ばれます）が追加されました。それだけではなく・・・【後略】・・・ ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで この記事を読まれただけで、『そもそも、DIVでレイアウトする』という思考自体が誤りであることに気が付かれると思います。 [例] タブは (全角スペース二個)に置換してあるので戻す。 <body> <div class="header"> <h1>タイトル</h1> </div> <div class="section"> <h2>本文タイトル</h2> <div class="section"> <h3>項目タイトル</h3> </div> <div class="section"> <h3>項目タイトル</h3> </div> <div class="nav" id="cointentTable"> <h3>目次</h3> </div> <div class="aside"> <h3>補足記事</h3> </div> </div> <div class="footer"> <h2>文書情報</h2> </div> </body> ★HTML4.01が仕様どおりに記述されていれば、文書構造が分かりますよね。 これをスタイルシートで div.header,div.section,div.footer{ width:80%;min-width:620px;max-width:900px; margin:0 auto; padding:5px; } div.section{position:relative;min-height:400px;} div.section div.nav,div.section div.aside{/* 子孫セレクタ */ position:absolute;top:0; width:200px;height:100%; } div.section div.nav{left:0;} div.section div.aside{right:0;} div.section h2,div.section div.section{ width:auto;min-width:0;min-height:0; margin:0 210px; } /* たったこれだけ!---おまけに分かりやすく色分け */ body{background-color:gray;} div.header{background-color:aqua;} div.section{background-color:silver;} div.section div.section{background-color:white} div.section div.nav{background-color:yellow;} div.section div.aside{background-color:lime;} div.footer{background-color:fuchsia;} とすると5カラムのスマホにも対応したリキッドのデザインができます。 ★必ず試してください。 なお、DOCTYPEは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ブラウザ間の差もないはずです。 もちろん、div.section div.navやdiv.section div.asideの左右を入替えたり、すべて右によせたりとデザインの自由度も高くなりますし、文書構造自体も分かりやすいのでメンテナンスも容易になるでしょう。 HTMLを見なくてもスタイルシートが記述できますよ。 ★そして、そのままHTML5に変更できます。 <div class="header"></div>⇒<header></header> section,nav,aside,footerも同様 No.1で引用した『文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。』 の意味が理解いただけると思います。 ★HTML4.01strictでDIVを本来の使い方で使用して文書構造をマークアップする。 ★HTML5で要素を正しく使用して文書構造をマークアップする。 いずれであっても構いません。プレゼンテーションとは切り離して・・・ さすれば、自由自在にデザインできますし、そもそも製作やメンテナンスが楽になる。
その他の回答 (3)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
>No.3回答 >No.3お礼 一応補足しておきます。 <section>でレイアウトが可能というのは、 スタイルシートで div {position: absolute; width: 50%; right: 0;} このように書けば<div>を右寄せする事が可能ですが、 section {position: absolute; width: 50%; right: 0;} このように書けば<section>を右寄せする事が可能だというだけです。 レイアウトを目的として<section>を使うのではなく、 sectionは「セクション（和訳すると章や節など）」の区切りのために使用し、レイアウトを行う場合は上記の様にスタイルシートで指定してください。 また、たとえばナビゲーションには<nav>を使用し、<nav>のレイアウトを変更したいのであれば<nav>に対してスタイルシートを適用してください。（つまり、<nav>のレイアウトを目的として<section>の入れ子にしない。） 再度書きますが、 sectionでもレイアウトできる（sectionにスタイルを適用できる）ものを、わざわざスタイルシートを適用するためだけに<div>の入れ子にする必要はありません。 しかし、ブラウザのサポート状況を理由にわざわざ<div>の入れ子にする方が良い事もあります。
お礼
再度の追加情報、ありがとうございます。 疑問は<section>とか<nav>とか<aside>とかを、CSSで装飾を加えて、ブラウザの表示画面のどの場所に、どの大きさで表示させるか…そういう意味でのレイアウトでした。 …が、いろいろな情報を知り得ることができました。 HTML5のプロパティのそれぞれの意味を考えながら情報を記述はしていましたが…。 改めて、重要性がわかったような…笑// ありがとう御座いました。m(_ _)m
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
<section>や<article>、もちろん<header>、<footer>、<aside>、<nav>など、全要素でレイアウトしてもかまいません。 HTMLをシンプルにするのが推奨されますので、その方が良いです。 古いブラウザはこれらHTML5で導入されたタグはHTML4のインライン要素と同じ表示（旧IEは空要素）になりますので、 それに対応するために<div>を併用する方法がとられます。 IE限定では、いわゆるhtml5.js、shiv.jsと呼ばれるスクリプトと、display:blockスタイルを使ってブロック要素のような表示に変える事ができます。 これ以上は「どのブラウザをサポートするか」という制作者の考え方次第です。 新しいブラウザ限定、またはJavaScript必須であればHTML5で作れば良いですし、 古いブラウザもサポートしつつ、HTML5のタグを使いたいのであれば<div>を併用するのも良いです。 古いブラウザでJavaScript停止環境を最優先にするならHTML4で作るのが良いです。 サイトごとに違うのは、そのサイトの作者ごとに考え方が違うからです。
お礼
回答ありがとう御座います。 CSS3の新規プロパティをいろいろと…HTML5で検証・確認していました。<section><article>で迷ってしまって、書籍とかネットとかで調べるにあたり、<section>をレイアウトに使うのは意味が違う<div>でレイアウトしましょう…的な！！が何度も出てきましたので… 質問をＵＰしました。 ありがとう御座いました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
一度、仕様書を通して読んでください。 HTML 4.01仕様書(邦訳)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) HTML5( http://www.w3.org/TR/html5/ ) ネット上に散乱している情報をいくら見ても役には立ちません。とりあえず、HTML4.01strictをマスターしてください。★ただしstrict★ですよ。HTML5は、その改訂ですから、 HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ ) で概略は理解できます。 そもそもDIVはHTML4.01のときから 『HTMLの性質上、プレゼンテーションに関する要素や属性は、次々と他の機構、とりわけスタイルシートに置換えられていく。 また、文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 と書かれていました。必ず私の説明ではなく仕様書を読んで確認すること!! それを理解しているだけで、そのような質問は出てこないはずです。 HTML4.01で「文書構造とプレゼンテーションの分離」が言われながら、DIVをデザインのために使用したページや解説がたくさん存在しています。 DIVやSPANはidやclassを併用して文書構造を補完する為のものです。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ その文書構造に基づいてスタイルシートでデザインしていくと書かれていたのに!!! これは非常に多くの利点があります。 ・誰が見ても、自身が後日見返しても、検索エンジンにも内容が理解しやすくなります。 ・HTMLに余計なものがないためHTMLもスタイルシートも簡潔で分かりやすくなります。 もちろん文書構造とデザインが分かれていますから、スタイルシートを変更するだけでデザインを簡単に変更できます。スクリーンリーダー、プリンターは無論、幅の狭いディスプレイや広いディスプレイ用にスタイルシートを用意できます。 [HTML4.01]だと、下記のように書かなければならなかった物が <body> <div class="header"> <h1>タイトル</h1> <div class="nav"></div> </div> <div class="section"> <div class="section"> <div class="section"> </div> <div class="section"> </div> </div> <div class="section"> <div class="aside"></div> <div class="article"> <div class="header"></div> <div class="section"></div> <div class="footer"></div> </div> </div> </div> <div class="footer"> </div> </body> [HTML5]だと <body> <header> <h1>タイトル</h1> <nav></nav> </header> <section> <section> <section> </section> <section> </section> </section> <section> <aside></aside> <article> <header></header> <section></section> <footer></footer> </article> </section> </section> <footer> </footer> </body> と書くことになります。 ★HTML5でWEBページ作成をするのに、レイアウトは<div>でネストするのは意味がないように じゃないです。重要なのでわざわざMEMOとして、 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 著者は、他に適切な要素がないときの、最後の手段の手段としてdiv要素を使用することが強く奨励される。divの代わりにより適切な要素を使用することにより、読者にとってはアクセシビリティの向上に、著者にとってはメンテナンス性の向上につながる。 ⇒4.5 Grouping content — HTML5( http://www.w3.org/TR/html5/grouping-content.html#the-div-element ) ★HTMLはデザインのための物じゃないです!!!! 文書構造をマークアップするマークアップ言語です。 ★スタイルシートは、その文書楮を利用して、プレゼンテーションを指定する物です。 この二つが理解できていないサイトがあまりにも多すぎます。 仕様書を全く読んだ形跡もないのに解説しているのじゃないかと・・(^^) ＞sectionを使ったレイアウトは駄目で、divでレイアウトするとか… ★新しい要素を使わずにDIVを使用するのは、古いブラウザに新しい要素が理解できないからです。javascript・・ <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> と書いておけば、古いIEはとりあえず使える。
補足
［回答］ありがとうございます。 W3Cは、後ほど見てみます。 「う～ん」 正しい意味でHTML5の新要素でコーディングをしていれば、section,article等を直接CSSでwidth,height,float,positionを指定して見栄えのためのレイアウトをしていても間違いではない…と言うことになるのでしょうか？ CSS3の確認のためにHTML5を使ってみたのですが、<section>でレイアウトが可能なのですが、それは間違っている…というようなことで？？じゃぁ～やっぱり<div>かぁ…？でした。 WindowsXPでIE8なのでGoogleのhtml5.jsとCSS_resetを指定して、他のブラウザでも確認。
関連するQ&A
- 【HTML５】セクションを示す要素の使い分け
HTML、CSSを勉強中の者です。 HTML５のセクションを示す要素（section・article・aside など）をどのように使い分けるべきなのかいまいちわからず、質問させていただきました。 様々なサイトで調べてみたのですが、サンプルを見るとどれも微妙に定義が違っているように見受けられ、理解が曖昧です。 あまり詳しくないサイトだと、単純にヘッダー部分はheader要素、フッター部分はfooter要素、タブメニューなどはnav要素、リンクなどはaside要素、そしてメインとなるコンテンツ部分はsection要素、といったことしか書かれていませんでしたが、別のサイトにはsection要素の中にarticle要素やaside要素が入ってくると書かれており、「？？？」という感じです。 例えばですが、添付した画像のようなサイトの場合は、下記の考え方で合っているのでしょうか？ header・・・ヘッダー（オレンジ） nav・・・タブメニュー（薄青） section・・・タイトル（緑）、コンテンツ（濃青） article・・・記事（黄色） aside・・・サブメニュー（紫）、リンク（ピンク） footer・・・フッター（薄赤） また、section要素やarticle要素の中にarticle要素やaside要素が入ってくる、というのはどのような場合でしょうか。 最初のうちにきちんと使い分けを覚えたいと思いますので、よろしくお願いします。
- ベストアンサー
- HTML
- HTML5のsection,articleについて
１．sectionについて h2とh2に関する記事pがある場合 <section> -<h2></h2> -<p></p> </section> でいいですよね？h2はsectionの外・・・ではないですよね？ （<div id="section">的に使う） 2.article/asideについて <article> -コンテンツ -<aside>関連ないもの</aside> </article> みたいに「article内」でasideを使い除外していいのでしょうか？ （<div id="container">的に使う） 3.全体として <article id="container"> -<h1></h1> -<aside> --<header></header> --<nav></nav> -</aside> -<section> --<h2></h2> --<p></p> -</section> -<aside> --<footer></footer> -</aside> </article> ではどうなんでしょうか？ header/nav/footerを除外するかどうか h1をロゴ・会社名にせず、サイト上部の１行文にするべきか そこらへん調べたのですが納得できるはっきりしたものがないので、よろしければご回答願います
- ベストアンサー
- HTML
- CSSによるデザインの切り替えに際して
HTML、CSSについて勉強中の者です。 HTMLで文書構造を書き、複数のCSSでデザインを切り替える、ということを勉強しているのですが、例えばあるCSSではnav要素とarticle要素（更新情報のお知らせ欄）をheader要素に入れるのに対し、別のCSSではnav要素のみをheader要素に入れ、article要素はsection要素内に表示させたい、となった場合、同じHTMLを使用することは難しいのでしょうか。 CSSである要素にある要素を入れるということはできるのか、できない場合は諦めてそれぞれHTMLを作成するべきなのか悩んでいます。 HTML側で全要素をそれぞれdiv要素にしてしまえばできるのかも？と思うのですが、それでは正しい文書構造にはならないと思いますので、あまり考えてはいません。 お詳しい方がいらっしゃれば、教えていただきたいです。
- 締切済み
- CSS
- CSSによる3カラムレイアウト
CSSによる3カラムレイアウト 以下のHTML(A)をCSSで(B)の様に表示させたいのですが、どの様にすると良いでしょうか？ HTML(A) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr"> 省略 <body> <div id="container"> <div id="wrapper"> <div id="content">コンテンツ</div> </div> <div id="header">ヘッダー</div> <div id="navigation">ナビゲーション</div> <div id="widget">ウィジェット</div> <div id="footer">フッター</div> </div> </body> </html> 表示(B) |ヘッダー | |ナビゲーション｜コンテンツ｜ウィジェット| |フッター | 自分でも大分試行錯誤したのですが、思い通りの結果が得られません。 今のところは、コンテンツとナビゲーションをfloatで横並びにし、ヘッダー分の高さをmarginで下げて、ヘッダーはposition: absolute;で上部に表示させています。 ウィジェットが無い2カラムの状態ならそれで解決しているのですが、ウィジェットを追加して表示(B)の様に3カラムにしようとすると上手くいきません。 HTMLを変えれば他にやり様は思いつくのですが、containerとwrapperを除く要素の並びは(A)の通りで実現させたいです。 また、上記のソース自体あまりスマートではないのですが、もっとスマートなやり方があればそちらも指南頂けると幸いです。
- ベストアンサー
- HTML
- HTML5コメント欄の<article>について
現在HTML5でブログテンプレートをコーディングしています。 その中で、<article>について調べるとコメント欄にも<article>を使うと良い、といった記述をよく見かけます。 導入しようと思ったのですが、私のサイトは3カラムの幅固定floatで構築してあり ソースの記述順序上、メインカラムの中にコメント欄が入りません。 簡単に構造を書くと <div id="wrapper"> <div id="main"> //メインカラム ～～ </div><!-- #main--> <div id="left"></div> <div id="right"></div> <div id="comment"></div> </div><!-- #wrapper--> こんな感じになっており、#main,#left,#rightの3つをfloatさせて横並びにしています。 このサイトバー2つを"div#comment"の下にしてしまうと3カラムが崩れてしまいます。 (勉強不足かもしれませんが、どうCSSで弄ってもコメント欄より上にサイドバーが上がらなくなります) なので、<article>でメインカラムを囲みたいのですがコメント欄が<article>に入らない。 かといって、<article>で全体を囲むとサイドバーまで<article>に含まれてしまう、という状況です。 このような状況の上で、コメント欄を<section>で括り、コメント1件1件を<article>で括るのは間違いでしょうか？ http://www.w3.org/TR/html5/sections.html#the-article-element ここにあるコード例ではまず<article>で記事全体を囲み(コメント欄も含み) コメント欄にきたら<section>に入り、<article>で1件1件を囲っていますね。 その<article>に<hn>タグがないことが疑問に思わせた発端なのですが 恐らく、<article>内<article>は親の<article>(記事全体)に関連した独立コンテンツ、という名目があるので <hn>タグをつけていないのだと思われます。 だけど私の場合、<article>でまず記事があって、それとは離れてコメント欄があり 記事<article>とは親子関係のない<section>の中に<article>が来ることとなります。 これが合っているのかどうか、調べてもよく分からなかったので質問させて頂きました。 どなたかご教授宜しくお願い致します。
- ベストアンサー
- HTML
- HTML5の記述について
現在、HTML5について勉強をしているのですが、下記サンプルコードが間違っているのではないかと思います。サンプルコードでは、途中にsectionタグでarticleタグを囲っている部分があります。今回の場合、articleタグでsectionタグを囲ったほうがいいのではないでしょうか？様々なサイトを見て回ってこのように感じたんですが、自分の見解が合っているかがわかりません。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf8"> <title>おかずまみれ</title> </head> <body> <header> おかずの部屋 <nav> ホーム リンク集 プロフ </nav> </header> <section> 今日のおかず <article> おいしいおかず 25 おかず25のレシピ </article> </section> <section> 新着!おかず!! <article> おいしいおかず 01 おかず01のレシピ </article> <article> おいしいおかず 02 おかず02のレシピ </article> </section> <aside> おかず本がいっぱい おかず本 1 おかず本 2 おかず本 3 </aside> <footer> このサイトは xxxxxによって運営されています。 </footer> </body> </html>
- ベストアンサー
- HTML
- CSS＆HTML
はじめまして、こんばんは ご質問です。 今htmlとCSSを使いHPを作成いたしています。 二段コラムの雛型にあてはめています。 メインコラムに ボックスを指定いたしたいのですが 上手く作成できません。＜div id=main> </div>の中にタグは入れられますか？ mainはCSS HTML記述が終わっています。 幅 ２００ 高さ100ぐらいのBOXボーダーラインで囲み 作成いたしたいのですがどうすれば出来ますか ボックスのタイトルをH3にしたいのですが CSSHTMLどう記述すれば いいのでしょうか ご指導ください 私がやりますとレイアウトが崩れます。
- 締切済み
- その他（インターネット・Webサービス）
- CSSでレイアウト
3つのブロック要素div1,div2,div3があった場合に添付のような レイアウトにするにはどうすればよいでしょうか？ div2,div3をさらにレイアウト用のdiv4でグループ化してしまえばできますが、 今後もできるだけHTMLをいじることなくCSSだけで自由にレイアウト変更をできるように なっておきたいと思っています。 できれば座標指定はしたくないのでPositionのStaticは使わないほうが嬉しいです。 全部Staticにする方法はわかっておりますので全箇所Staticではなく、 「全部相対postionではなく1か所だけStaticを使う」などが効率的だ、というのであれば そちらのやり方でも教えていただけると助かります。 特定の環境での実行を意図していませんが必要な場合はIE8以降、などイマドキな環境 での利用しやすいものがより助かります。HTML/CSSのバージョンはそれに応じる形で 特に指定はございません。 よろしくお願いいたします。
- ベストアンサー
- CSS
- IE8でサイドバーのレイアウトが崩れる場合の対処法
CSSについての質問です。 IE8よりも古いバージョンでのみレイアウトが崩れて困っています。 簡単な抜粋ですが、以下のような感じでfloatを使ってレイアウトを作成しています。 [HTML] ---------------- <div id="main"> </div> <div id="sidebar"> </div> <div id="footer"> </div> ---------------- [CSS] ---------------- #main{ float:left; width:620px; } #sidebar{ float:right; width:300px; } #footer{ clear:both; } ---------------- IE8よりも古いバージョンでは、サイドバーが下に落ちてレイアウトが崩れてしまいます。 しかもIEの開発ツールでHTMLを確認したところ、なぜかサイドバーがメインコンテンツの中に入っていました。 ---------------- <div id="main"> <div id="sidebar"> </div> </div> ---------------- なので、全体の幅を広げても、下に落ちてしまったサイドバーは全く上がってきてくれません。 どうにか解決する方法はありませんでしょうか？ 文章だと伝わりくいかもしれませんが、よろしくお願いいたします。
- ベストアンサー
- CSS
- CSSで高さ100％のレイアウト
テーブルを使用せずCSSでのレイアウトなのですが フッター位置をブラウザの一番下にマージン無しで指定したいのですが出来ません。 テーブルでは <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top">内容</td> </tr> <tr> <td valign="bottom">フッター</td> </tr> </table> というように指定していたのですが CSSでのレイアウトはHTMLを <div id="container"> <div class="content">内容</div> <div id="footer">フッター</div> </div> .CSS では #container { height: 100%; } は無効なのでしょうか？ 他のやり方でもフッターをブラウザの一番下にマージン無しでレイアウトできる方法があったら教えて下さい。
- ベストアンサー
- CSS
お礼
丁寧にわかりやすい回答をありがとう御座いました。 ブラウザで表示確認した画像をUPしようかと思いましたが…画像のUPはできないようなので、残念。 HTML5の開設サイトをいろいろ巡回していて、そのページをHTML5で記述してあるのですが、結局<section>や<article>は、利用しておらず、<div>でレイアウトしているページばかりのようでした、そこは古いブラウザに配慮しているのかな…？でしたが。笑// 改めて、ありがとう御座いました。
補足
上記記載URLサイト見てみました、何となくですがわかりました。 テーブルレイアウトからHTMLを本来の意味でコーディングしてCSSでレイアウトをするようになって、<div>は特別な意味を持っていないからレイアウトに利用できるんだなぁ～と思って利用していました。でも結局は<div>の入れ子自体が、HTMLの意味を、不明にしているということなんですねぇ～。 確かに<ul>がサイトナビに利用されているか、単なるリストか…等はブラウザにはわからないですものね。 参考に記述していただいたコーディングをHTML4.01とHTML5で確認してみました。IE8,Chrome,Safali,Firefox,Operaで同じ3カラムに表示できました。 画像のUPができるようならUPしておきます。