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

【HTML】フレームの中央寄せについて

解決済

  • 質問者：aiueo1996
  • 質問日時：
  • 回答数：2件

閲覧ありがとうございます。
今、個人的なwebサイトを作っていますが、フレームの中央寄せがうまくいきません。
上下左右に空白のフレームを置いているのですが、下の部分の空白が読み込めないのか、真っ白になってしまいます。画像のような感じです。

色々と試してみましたが、よくわかりませんでしたのでお知恵を貸してください。よろしくお願いいたします。

ソース
【index】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html><head>
<title>aaa</title>
<link rel="stylesheet" type="text/css" href="css/style.css" 　media="all">

<frameset rows="*,800,*" border="0" frameborder="0">
<frame src="bbb.html" scrolling="no"> /* 左 */

<frameset cols="*,850,*" border="0" frameborder="0">
<frame src="bbb.html" scrolling="no"> /* 上 */


<frameset border="0" rows="150,*">
<frame src="header.html" name="header" title="header" noresize >

<frameset border="0" cols="220,700">
<frame src="menu.html" name="left" title="left">
<frame src="about.html" name="right" title="right">
</frameset>

<frame src="bbb.html" scrolling="no"> /* 下 */
</frameset>

<frame src="bbb.html" scrolling="no"> /* 右 */
</frameset>


</head></html>


【空白のフレーム(bbb.html)】
<html>
<head>

<title>aaa</title>
<link rel="stylesheet" type="text/css" href="css/style.css"　media="all">
<link rel="stylesheet" type="text/css" href="css/style2.css" 　media="all">
</head>

<body bgcolor="#6f6da6">

</body></html>

以上です。よろしくお願いいたします。

「【HTML】フレームの中央寄せについて」の質問画像
通報する

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

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： torayoshi
  • 回答日時：

こんなフレーム見たことありませんが、


こんなふうにしてみたら？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html><head>
<title>aaa</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="all">

<frameset rows="*,800,*" border="0" frameborder="0">
<frame src="bbb.html" scrolling="no"> /* 左 */

<frameset cols="*,850,*" border="0" frameborder="0">
<frame src="bbb.html" scrolling="no"> /* 上 */


<frameset border="0" rows="150,*">
<frame src="header.html" name="header" title="header" noresize >

<frameset border="0" cols="220,700">
<frame src="menu.html" name="left" title="left">
<frame src="about.html" name="right" title="right">
</frameset>

<frame src="bbb.html" scrolling="no"> /* 左 */
</frameset>
<frame src="bbb.html" scrolling="no"> /* 右 */
</frameset>
<frame src="bbb.html" scrolling="no"> /* 下 */
</frameset>
</head></html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

こちらのソースを参考にさせて頂いて、望み通りのレイアウトになりました。
ありがとうございます。

通報する
お礼日時：2015/11/28 09:26

No.2

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

今時frameは使いません。


frameは様々な理由で、２０年前1995年のHTML4.01以降非推奨になり、HTML4.01(推奨型)以降使いません。HTML5では存在すらしません。
HTML フレーム 問題 - Google 検索( https://www.google.co.jp/search?q=HTML%20%E3%83% … )
　どうしても必要ならiframeを使用します。HTML4.01,XHTML1.0,XHTML1.1などでは非推奨ですが、HTML5では復活しましたが、メインコンテンツには使用しないなど気を付けて使用しないと、frameと同じ問題を抱えることになります。
　ましてや、このようにデザインのためにframeを使うのは間違いです。

　おかしな方向に進んでいるようです。ちゃんとした道を歩まないと苦労しますよ。

　この場合は、率直に
<body>
　<div class="header">
　　ヘッダ記事
　　サイト全体のメニューならここが順当
　</div>
　<div class="section">
　　本文
　　<div class="nav">
　　　本文の目次
　　</div>
　</div>
　<div class="footer">
　　この記事のフッタ
　</div>
</body>

HTML5でしたら
<body>
　<header>
　　ヘッダ記事
　</header>
　<section>
　　本文
　　<nav>
　　　本文の目次
　　</nav>
　</section>
　<footer>
　　この記事のフッタ
　</footer>
</body>
class名は「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」にしたがい、HTML5の文書構造を示す要素に合わせている。

としてスタイルシートでデザインすればよいです。
なお、media="all"はダメです。それだとスクリーンリーダーにも印刷にも展示端末にも適用されてしまう。
ここはmedia="screen"ですよ。携帯電話やプリンターなどには素--デフォルトで利用されます。

サンプル
★タブは＿に置換してある
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　のDATA(右上)で検証済みのHTML401strict+CSS2.1--ウェブ標準

　
<!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">
＿<style type="text/css" media="screen">
<!--
html,body{margin:0;padding:0;background-color:navy;position:relative;height:100%;padding:50px 100px;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;background-color:white;}
div.section{position:relative;}
div.section h2,div.section p{margin-left:200px;}
div.section div.nav{position:absolute;top:0;left:0;width:180px;background-color:yellow;height:100%}
/* aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow */
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文は、仕様書に従いsectionのclass名を付けてある。</p>
＿＿<div class="nav">
＿＿＿<h3>menue</h3>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
自分用のまとめにと思い、色々とコンテンツがあるので、ダメと聞いていてもついフレームを使っていました。
もう少し詳しいところも勉強していこうと思います。

通報する
お礼日時：2015/11/28 09:24

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報