プロが教える店舗＆オフィスのセキュリティ対策術

サイトのメインボックスの基本的な作り方

解決済

  • 質問者：sypuimtiz
  • 質問日時：
  • 回答数：4件

html&css初心者です。
あるサイトを作ろうとしていますが、画像のようにヘッダー、メインボックスのあるシンプルなデザインで構成しています。

すごく基本的なことなのですが（^^;）、
メインボックスをひとつの「表」として作成し、その後、セルを追加したり結合して制作するのは間違っていますか？
それとも表は、単なる「表」として使うのが一般的なのでしょうか？（統計や結果を記載する時など）
一応ホームページビルダーを使用していますが、できるだけhtml&cssの入力で頑張っています。
メインボックスを作るためのタグ（というものがあるかわかりませんが）を使用して制作していますか？
よろしくお願いします。

「サイトのメインボックスの基本的な作り方」の質問画像
通報する

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

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

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

HTML文書ができたら、その文書構造に従ってマークアップしていきます。


詳しい説明はできませんが
先のHTMLにスタイルシートをこう書けばよい。
<style media="screen">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,p{margin:0;line-height:1.6em;}
p{text-indent:1em;}
header,footer{width:100%;}
header nav ul,section nav ol{list-style:none;margin:0;text-align:center;line-height:2em;}
header nav ul li{display:inline-block;width:10em;}
header nav ul li a{color:white;}
section{width:80%;max-width:800px;min-width:640px;margin:0 auto;}
section{position:relative;}
section h2,section p,section section{margin-left:200px;}
section section{width:auto;min-width:0;margin-bottom:20px;}
section * p{margin:0;}
section nav{position:absolute;top:20px;left:20px;width:160px;}
section nav ol{padding:0;}
section nav ol li{border:solid 1px red;position:relative;}
section nav ol li a{display:block;width:100%;height:100%;text-decoration:none;}
section nav ol li a:hover{background-color:rgb(255,220,220);}

/* 色指定 */
body{background-color:rgb(203, 255, 242);}
header,footer{background-color:white;}
section{background-color:rgb(255, 253, 202);}
section section{background-color:rgb(153, 205, 255);}
section nav{background-color:rgb(251, 200, 215);}
header nav{background-color:rgb(46, 50, 246);}
-->
</style>

スタイルシートはCSS2.1の範囲で記述しています。
CSS3だと、もっといろいろできるけど。

★リキッドですからウィンドウ幅を変えても支障はないはず。スマホでも使える。
　ビルダーでは、こんなページは作ることできない。それが互換性がないといわれる所以

★<style media="screen">としてあるので、印刷や携帯電話(ガラケー)では、スタイルなしで表示印刷されます。
　必要なら別途
　　携帯用<style media="handheld">
　　印刷用<style media="print">
を作ればよい。

ipadやスマホでsection部分をタップすれば、その部分だけウィンドウ幅に広がって表示される。
デザインはいつでも変えられる。
例えば、/* 色指定 */の前に、

section h2,section p,section section{margin:0 200px;}
section * p{margin:0;}
section aside{position:absolute;width:160px;top:20px;right:20px;}
section aside{background-color:aqua;}
/* 色指定 */

とすれば、asideは右上に移動させられる。

　これが、ウェブ標準のウェブページの作成方法です。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ORUKA1951様
t_fumiaki様
返事が遅くなってしまい、申し訳ございません。
お二人ともご丁寧な回答をありがとうございました！
ひとつずつ意味を調べながら進めています。
まだまだ時間はかかりそうですが、頑張ります。
ありがとうございました！

通報する
お礼日時：2016/11/17 15:16

No.3

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

No.2です。


具体的なサンプルをご覧ください。

★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　でチェック済みのHTML5です。右上のDATAをクリックして貼り付ける
スタイルシートを期待通りに適用させるためには、正当なHTMLが必要です。
　ちなみにビルダーで作成した何かを調べてごらんなさい。(^^)
★タブは＿に置換してあるので戻すこと。
★HTML4.01の場合は、それぞれ<div class="header"></div>とかになります。

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA">
<style media="screen">
<!--
-->
</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="/">Home</a></li>
＿＿＿＿<li><a href="/">Products</a></li>
＿＿＿＿<li><a href="/Profile">Profile</a></li>
＿＿＿＿<li><a href="Contact">Contact us</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>A smaller heading</h2>
＿＿<p>
＿＿＿sectionは本文を示す。基本的にそのsectionの見出し(h1～h6)を必ず一つ持ちます。階層はsectionの入れ子で示します。
＿＿</p>
＿＿<section id="A">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>
＿＿＿＿ここは記事
＿＿＿</p>
＿＿</section>
＿＿<section id="B">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>
＿＿＿＿このように、HTMLには文書構造だけを記述します。ビルダーは、ワードやIlustratorなどのあたかも<a href="https://ja.wikipedia.org/wiki/DTP">DTP</a>のような作成手法をとりますが、それはウェブの手法としては根本的に間違っているのです。
＿＿＿</p>
＿＿</section>
＿＿<section id="C">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>
＿＿＿＿これでしたら検索エンジンもどの部分が主体で、どこは要らないかもすべて理解してくれる。
＿＿＿</p>
＿＿</section>
＿＿<aside>
＿＿＿<h3>Something aside</h3>
＿＿＿<p>
＿＿＿＿ここには本文と直接関係ない記事
＿＿＿</p>
＿＿</aside>
＿＿<nav>
＿＿＿<ol>
＿＿＿＿<li><a href="#A">Aについて</a></li>
＿＿＿＿<li><a href="#B">Bについて</a></li>
＿＿＿＿<li><a href="#C">Cについて</a></li>
＿＿＿</ol>
＿＿</nav>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.2

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

＞メインボックスをひとつの「表」として作成し、その後、セルを追加したり結合して制作するのは間違っていますか？


　間違っています。
[根拠]
単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

＞メインボックスを作るためのタグ（というものがあるかわかりませんが）を使用して制作していますか？
　HTML4.01まではありませんでしたから、div要素を使ってきました。
[根拠]
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　すなわち、
<div class="header">このブロックは、文書の頭書(header)
<div class="section">このブロックは章--本文
<div class="footer">このブロックは文書のフッター
　と書いてきました。
★ビルダーは、このあたりが滅茶苦茶
　　・・・だからプロには嫌われる。
　作成したウェブサイトの影響( https://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC … )

HTML5では、文書の構造を明確化するために
新たな要素( http://www.html5.jp/trans/w3c_differences.html#n … )が追加されました。
　今までdivを使ってきたところが
<header>このブロックは、文書の頭書(header)
<section>このブロックは章--本文
<footer>このブロックは文書のフッター
　となります。

＞メインボックスを作るためのタグ
は<section>になります。この階層で節/章/項という階層も示せます。
<body>
　|-- header
　|-- section　section要素には必ず一つのみh1～h2の見出し要素を持つ
　|　　　|-- section
　|　　　　　　|-- section
　|-- footer
HTML4.01では、それぞれ<div class="section">とかになる。

注意)決してcontainer、leftcolumn、main、righttcolumnというような、デザインのためのclass系はつけてはなりません。
　将来、左右を入れ替えたいとか、スマホ用にはasideな記事は下に回すとかがおかしくなるでしょ

★画像のようにヘッダー、メインボックスのあるシンプルなデザインで構成しています。
　ビルダーを使ってきた人の最も重大でかつ、根本的な間違いがここなのです。
HTMLは、文書をそれを構成する要素(Element)に分けて、それらの要素をタグを用いてマークアップする言語で、デザインには関係ありません。これはHTMLがSGMLを見本としているからです。
Standard Generalized Markup Language - Wikipedia( https://ja.wikipedia.org/wiki/Standard_Generaliz … )
ですので、
構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　が最も重要なのです。

★そうしてマークアップされた文書
<body>
　|-- header
　|-- section
　|　　　|-- section
　|　　　　　　|-- section
　|-- nav　ナビゲーション
　|-- aside　本文と直接関係ないasideな記事
　|-- footer
を
┏━━━━━━━━┓
┃　　　header　 ┃
┣━┳━━━━┳━┫
┃na┃section ┃as┃
┃v ┃　　　　┃id┃
┃　┃　　　　┃　┃
┣━┻━━━━┻━┫
┃　　footer　　　┃
┗━━━━━━━━┛
とプレゼンテーションするのがCSSの役目です。

section{position:relative;}
section section{margin:0 200px;}
section nav,
section aside{width:200px;height:100%;top:0;}
section nav{left:0;}
section aside{right:0;}
で、上のデザインになる。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： t_fumiaki
  • 回答日時：

この左右の水色はサイドカラム？　メインボックスは黄色かな？


多分そうだと思って回答。極基本だけ。コンテンツは省略
あくまで例

●html部分(body部のみ）
<div id="header"> :ヘッダ部分
ヘッダ部分コンテンツ記述
</div>:ヘッダ部分終わり

<div id="container">:サイドカラム+メインボックス定義

<div id="leftcolumn">：左サイド
左サイド内のコンテンツ記述
</div>：左サイド部分終わり

<div id="main">：メインボックス
メインボックス内のコンテンツ記述
</div>：メインボックス部分終わり

<div id="righttcolumn">：右サイド
左サイド内のコンテンツ記述
</div>：右サイド部分終わり

</div>:サイドカラム+メインボックス定義終わり

--------------------------------------------------------
●cssl部分(body部のみ）
#header {横サイズとか、backgroud画像定義}
#container {横サイズとか定義}
#leftcolumn {float:left; 横幅など定義}
#main {float:left; 横幅など定義}
#righttcolumn {float:right; 横幅など定義}
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報