DWCCを使っています。どのパソコンから見ても、ヘッダー領域(会社のロゴやお問い合わせのバナーが入ります)、ナビ領域、メイン画像、フッター領域がそれぞれ100%表示になるようにHTMLおよびCSSで設定がしたいと思っています。
これまでwrapper860pxといったようにきっちりと決めてコーディングすることしかしていないため、何からどうしたら良いのか全くわかりません。また、それをコーディングする際にトップの画像の大きさは、どうなるのでしょうか?大きいサイズの画像を1枚使い回す形なのでしょうか?
恐れ入りますが、ほぼほぼ初心者なので、なるべく簡単な方法をわかりやすく教えていただけますと幸いです。
No.1ベストアンサー
- 回答日時:
Dreamweaverをお使いだと思いますが、そのようなWebオーサリングツール(
https://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83 … )を使うには、HTMLやCSSに関する基礎的な知識がないと使えません。少なくともテキストエディタで作り上げられる程度の知識は必要です。HTMLやCSSの知識がなくてもウェブページができると誤解されている人がいますが、残念ながら逆です。ツールはあくまで「補助ツール」ですから。説明が必要なので少し長いですが今後のためにもしっかり読んでおいてください。
>ヘッダー領域(会社のロゴやお問い合わせのバナーが入ります)、ナビ領域、メイン画像、フッター領域
まず、根本的に思い違いされている部分です。
オーサリングツールを、あたかもワープロやDTP( https://ja.wikipedia.org/wiki/DTP )のひとつだと誤解されてきた。初学者が決して踏み込んではならない脇道を進んでこられたのだと思います。
HTMLは、文書構造だけをタグを使ってマークアップする言語であってデザインとは無縁なものです。デザインはスタイルシートで行います。
★構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
HTML
『ヘッダー(ロゴや問合せバナー、グローバルなナビゲーションを含む)、セクション(本文)、フッター』を含む文書を
スタイルシート
『すべて、画面幅一杯に表示したい』
と言うことです。
wrapperなんて使ってはなりません。
16年前(1999年)に勧告されたHTML4.01では、デザインのためにタグが使われてきた反省から・・『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』となりました。
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,section,footerを含みますので不要ですが、内部にheader,section,footerを含む一連の記事が複数あるときはarticleを使うべきです。
HTML5の例
<body>
<header>
<nav>サイト全体のものならheader内</nav>
</header>
<section>
<article><!-- 記事article -->
<header></header>
<section></section>
<footer></footer>
</article>
<nav>本文の目次ならここ</nav>
</section>
<footer></footer>
</body>
HTML4.01でしたら、header,section,footerなどは<div class="header">となる。複数存在しうるのでclassでしょうね。
HTML5の例ですが、こんな簡単な物になります。HTML4.01の場合は<div class="header">など
★タブは_に置換してあるので戻す。文字コードはUTF-8です。
★最初にデザインは一切考えずに文書構造だけをマークアップする。
★文書構造を見てスタイルシートを書く。
例) header nav{text-align:center;}
header内のnavは、テキストは中央ぞろえ
残念ながら、DWに限らず、これはツールには不可能
--ツールには文章を読んで理解する能力はなので--
★幅は分かりやすくするために最大幅max-width:800px;にしてありますので、この行を消すとディスプレイ幅に関わらず全幅になります。
なお、このデザインは印刷には適用されません。
<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="IRUKA">
<style media="screen">
<!--
body{margin:0;padding:0;}
h1,h2,h3,p,ul{margin:0;line-height:1.7em;}
p{text-indent:1em;}
header,section,footer{
width:100%;
max-width:800px;/* 分かりやすくするため最大幅を指定しておく */
margin:0 auto;
position:relative;
}
header h1 img{width:100%;height:auto;}
header nav ul{text-align:center;}
header nav ul li{list-style-type:none;display:inline-block;width:5em;}
p#form{text-indent:0;width:5em;position:absolute;right:20px;top:10px;}
section{
min-height:400px;
}
section h2,section p{
margin-left:210px;
}
section nav{width:200px;position:absolute;top:0;left:0;height:100%;}
/* 分かりやすくするため色をつける */
html{background-color:gray;}
body{background-color:silver;}
header{background-color:aqua;}
section{background-color:white;}
nav{background-color:yellow;}
aside{background-color:lime;}
footer{background-color:orange;}
section nav{background-color:fuchsia;}
-->
</style>
</head>
<body>
_<header>
__<h1 id="title"><img src="./images/Logo.jpg" width="860" height="80" alt="会社名"></h1>
__<nav>
___<ul>
____<li><a href="#">Some</a></li>
____<li><a href="#">navigation</a></li>
____<li><a href="#">links</a></li>
___</ul>
__</nav>
__<p id="form">問い合わせ</p>
_</header>
_<section>
__<h2>A smaller heading</h2>
__<p>
___DWを使う場合も、ひたすら文書構造だけをマークアップし、必要ならclassで文書構造を補完しておく。
__</p>
__<p>
___その後、スタイルシートでデザインをしていきますが、DWに限らずツールには文書構造からセレクタを記述する能力はありませんので、ここだけは自分で。
__</p>
__<nav>
___<h3>本文目次</h3>
__</nav>
_</section>
_<footer>
__<h3>A nice footer</h3>
_</footer>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- ホームページ作成・プログラミング CGIが実行可能なHP領域又はレンタルサーバーでおすすめの所を教えてください 現在ホームページ領域の 1 2023/01/01 11:47
- その他(ブラウザ) bingチャットの内容(縦長)をスクリーンショットで保存する方法 3 2023/02/28 02:13
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 要素の幅をいろんな写真の幅に合わせたい。 1 2022/07/25 20:11
- C言語・C++・C# あまりわかりません。 複素数$c$を具体的に定めた複素写像写像$f_c(z)$に対して、原点を含む領 4 2022/10/25 09:17
- その他(プログラミング・Web制作) Leafletで画像をon、offさせる方法について 2 2022/11/01 15:34
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- その他(プログラミング・Web制作) 次に、楽天のアジャイル就活に参加して、1日で内定を獲得できる。私は大企業に就職できる? 2 2022/04/17 13:38
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- ドライブ・ストレージ HDDの未割り当て領域が認識されない 7 2022/11/27 18:51
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
1時間30分を簡単に表したいで...
-
HTML属性での「""」 「''」違い
-
複数のボタンを等間隔に、かつ...
-
<div id="container">の使いか...
-
html の divとtable の役割
-
min-heightとheightの違いについて
-
iframeを使わずに上下50%ずつに...
-
divの中に外部のHTMLを埋め込む
-
DOCTYPE 宣言
-
div要素が重なってします
-
htmlの文字が縦書きになる
-
smallにtext-allignが効かない
-
【ヒトの神秘】美男美女から何...
-
NからZへの全単射を具体的に構...
-
<h1>、<h2>と<p><div>の行間を...
-
css li の改行について
-
2個のFormを横並びにしたい
-
含む含まないという概念自体の...
-
CSS、width100%でもできる余白
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
要素間、要素内に隙間が空く
-
画面を縮小するとカラムが落ち...
-
h1のテキストサイズよりh2の方...
-
divの中に外部のHTMLを埋め込む
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
hタグの右横に画像を表示
-
グリッドレイアウトで"auto-fit...
-
セクションをdivで囲むと見出し...
-
開閉式の隠し要素が一瞬表示さ...
-
html5でheaderの中にnav
おすすめ情報