- ベストアンサー
HTML+CSSでフレーム落ちしてしまいます
- ウインドウ縮小ボタンで画面サイズを変更すると、右下のオレンジ(ベージュ）のフレームが下にずり落ちてしまいます。
- HTMLファイルとCSSファイルの記述を修正することでフレームの落下を解消する方法を教えてください。
- Windows7（32bit）およびIE11、IE7で発生する問題です。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
HTMLの書き方自体がおかしい？・・・ 以下例文 ********************************************************************* <body> <div id="header"> <h1>総務部からのおしらせ</h1> </div> <div id="sidebar"> <h2>メニュー一覧</h2> <ol> <li><a href="irai/kirai_add.php">至急の依頼・連絡・問合せ 受付</a></li> <li><a href="irai/01_緊急依頼受付状況.xls">至急案件の進捗状況</a></li> <li><a href="irai/irai_add.html">計画工事の依頼書 受付</a></li> <li><a href="irai/02_計画依頼受付状況.xls">計画工事の進捗状況</a></li> <li><a href="irai/依頼書原紙.xls">依頼書原紙 ダウンロード</a></li> <li><a href="irai/02_計画依頼受付状況.xls">総務アクセス・連絡先</a></li> <li><a href="irai/02_計画依頼受付状況.xls">エネルギーデータ</a></li> <li><a href="irai/02_計画依頼受付状況.xls">総務からのお知らせ</a></li> </ol> </div> <div id="main"> <h2>ホームページ試験開設のお知らせ</h2> <p>業務効率化のため、総務への工事依頼や各種問合わせの受付、及びそのフィードバックなどを試験的にこのホームページを介して行わせて頂きます。</p> <p>関係者の方々のご理解とご協力をお願いいたします。 <span class="update">2014年2月○日 総務 </span></p> </div> </body> **************************************************************************** <br></br>タグは、改行ではなく、ブレーキです。 強制的に停止させる、そのため、ブラウザは、改行する。 HTMLを理解すれば、開業タグは、使うことがないはずです。 CSSでどのようにでも対応できます。 <p>はパラグラム（段落）という意味です。 ＨＴＭＬ５になると、記事（artcle）、セクション(section)、aside（補足）、ナビゲーション(nav)という要素が利用できます。 なお、リスト項目は、<ul><ol><dl>のいずれかを利用し、<p>タグでは、ない方がいいとおもいます。 同じ作るのであれば、レスポンシブレイアウトにされた方が、賢明だと思います。 CSSの記述については、参考サイトをご覧ください！
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.2へのお礼 ＞完全には理解出来ませんでした。 HTMLは文書構造しか書いてませんから、これは誰でも---検索エンジンも---理解できるはずですね。 『文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる』 ←(構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) スタイルシートですが、これはそんなに難しくはないです。あなたが書かれたスタイルシートを拝見すると、プロパティの書き方は理解されているようですが、セレクタについては身についていないようです。 スタイルシートの基本は 「文書構造に基づいて、セレクタを用いてスタイルを指定する要素を特定して、 ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ スタイルを記述していく」 のですから、このセレクタや継承、カスケーディングの仕組みが最初に身につけるべきで仕様書にもプロパティの゛説明より前に詳しく書かれています。 1 CSS 2.1仕様について 2 CSS 2.1の手引き 3 適合性: 必要条件と推奨事項 4 構文と基本データ型 ★ここから・・・ 5 セレクタ 6 プロパティ値とカスケーディング、継承の割り当て 7 メディアタイプ 8 ボックスモデル ★・・・ここまで 9 視覚整形モデル ☆ここからがプロパティなどの説明 特にカスケーディングは、CSS(カスケーディングスタイルシート)のと最大の特徴ですから、それを理解せずかにスタイルシートは作れません。 簡単に解説すると html,body{} 要素セレクタでhtmlと(,)bodyを指定 詳細度は0,0,0,1 p{} 要素セレクタにて p要素 詳細度は0,0,0,1 div.header,div.section,div.footer{} headerクラスのdiv,sectionクラスのdiv,footerクラスのdiv 詳細度0,0,1,1 div.header{} headerクラスのdiv 詳細度0,0,1,1 div.header h1{} headerクラスのdivの子孫のh1要素 詳細度は 0,0,1,2 div.header h1:after{} headerクラスのdivの子孫のh1要素のafter擬似要素 詳細度は 0,0,1,3 div.section h2,div.section p,div.section div.section{} sectionクラスのdivの子孫のh2,p,div.section 詳細度はそれぞれ、0,0,1,2、0,0,1,2、0,0,2,2 div.section p.date{} sectionクラスのdivの子孫のdate(日付)クラスのp(段落要素) 詳細度0,0,2,2 div.section div.section p{} sectionクラスのdivの子孫のdiv.section の子孫のp(段落要素) 詳細度0,0,2,3 ※詳細度が大きいため前期を上書きする。 以下省略 ・子孫セレクタ、子供セレクタ、隣接セレクタ、・・・擬似要素、擬似クラス など、上で言うと 5 セレクタ 6 プロパティ値とカスケーディング、継承の割り当て を読んでみましょう。
お礼
ご丁寧に、何度もご説明いただきありがとうございます。 本日、書店にいき、やさしいhtml&cssの本というものを購入し読み始めました。 これなら、なんとか理解できるかなというレベルのものです。 将来、私のレベルが向上したときに、再度頂いたコメントを読み返したいと思います。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.1のCSSです。 慣れれば、スタイルシート見るだけでなにをしたいかわかるはず。言い換えればHTMLに手を加えず(見もせずに)スタイルを書き換えられる。 ＿<style type="text/css" media="screen"> <!-- /* スクリーンメディア用 */ html,body{margin:0;padding:0;} p{text-indent:1em;margin:0;line-height:1.6em;} /* header,section,footerの大まかな指定 */ div.header,div.section,div.footer{ ＿width:90%;min-width:470px;max-width:900px;/* 幅 */ ＿margin:0 auto;/* 左右の位置 */ ＿padding:5px; ＿position:relative; } div.header{min-height:120px;} div.header h1{padding-right:120px;text-align:center;} div.header h1:after{ ＿content:url(); ＿display:block;width:100px;height:80px; ＿background-color:white; ＿border:solid 1px gray; ＿position:absolute;right:10px;top:10px; } /* 本文(section)の指定 */ div.section h2,div.section p,div.section div.section{ ＿margin-left:260px; ＿width:auto;min-width:0; } div.section p.date{text-align:right;} div.section div.section p{margin:0;} /* section内のナビゲーションの指定 */ div.section div.nav{ ＿width:260px;height:100%; ＿position:absolute;top:0;left:0; ＿font-size:0.9em; } div.section div.nav h3{text-align:center;} div.section div.nav ol{line-height:2em;} /* 色づけ */ div.section{background-color:rgb(255,200,160);} div.header{background-color:aqua;} div.section div.nav{color:white;background-color:green;} div.section div.nav a{color:yellow;} div.section div.section dl dt:before{content:"● ";} --> ＿</style> <style type="text/css" media="print"> /* 印刷機用 */ p{line-height:1.8em;margin:0 1em;text-indent:1em;} div.section div.nav a:after{ ＿content:" http://hoge.com/attr(href)"; ＿white-space:pre; ＿font-style: italic; } --> </style>
お礼
回答ありがとうございました。 何度か読み返して考えているのですが、完全には理解出来ませんでした。 もっと時間を掛けて、なんとか理解させていただくつもりです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTML+CSS(頭文字なので小文字じゃないです)と言う時点でそれは、「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 【必読】)」を目的にしているという事です。 また、『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator/#validate_by_input )』とあるように、まずHTMLをきちんと書かないとCSSは利用できません。 ⇒Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) などでHTMLをチェックしてからスタイルシートを書きます。 <heade></head>内に<nobr><div>などは入れることが出来ません。 1) HTMLは、ひたすら文書を構成要素(Element)に分解して、その要素をタグを用いてマークアップする物です。 用意されているタグでは文書構造を示しきらないときは「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」になります。 containerとかsidebarというclass名は、プレゼンテーション的で望ましくありません。 本当に多くのサイトでこの誤用が見かけられます。業を煮やしたW3Cでは、「文書構造を明確化するために新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )を追加しました。」・・・そこで示されている新しい要素名をclass名(IDじゃない)にし、用途もそれに従うのが良いです。 2)もうtransitinalの必要はないでしょう。 「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」 [サンプル] ★タブは＿に置換してあるので戻す。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) (のDATA入力)でチェック済みのHTML4.01strict+CSS2.1＝ウェブ標準です。 ★スマホ(横幅480px)～幅広ディスプレイまで対応。フォントサイズは視覚障害者が大きくしても崩れない。 白地があるので印刷時は別のスタイル ★文字コードは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"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen"> <!-- /* 別途 */ --> </style> </head> <body> ＿<div class="header"> ＿＿<h1>総務 のホームページ</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"><!-- 本文(section) --> ＿＿<h2>ホームページ試験開設のお知らせ</h2><!-- sectionの見出し(Heading) --> ＿＿<p><!-- 段落(Paragraph) --> ＿＿＿業務効率化のため、総務への工事依頼や各種問合わせの受付、及びそのフィードバックなどを試験的にこのホームページを介して行わせて頂きます。 ＿＿</p> ＿＿<p> ＿＿＿関係者の方々のご理解とご協力をお願いいたします。 ＿＿</p> ＿＿<p class="date"> ＿＿＿2014年2月○日 総務 ＿＿</p> ＿＿<div class="section"> ＿＿＿<h3>メニュー一覧使い方</h3> ＿＿＿<dl><!-- 定義リスト --> ＿＿＿＿<dt><a href="irai/kirai_add.php">至急の依頼・連絡・問合せ 受付</a></dt><!-- タイトル --> ＿＿＿＿<dd>電話中や不在時などにより総務への電話が不通時に御利用ください。</dd> ＿＿＿＿<dd class="memo">緊急時以外の工事や作業への依頼は<a href="irai/irai_add.html">計画工事の依頼書 受付</a>からお願いします。</dd> ＿＿＿＿<dt><a href="irai/01.xls">至急案件の進捗状況</a></dt> ＿＿＿＿<dd>至急の依頼や問合せ案件の対応状況を確認されたい場合に御利用ください。</dd> ＿＿＿＿<dt><a href="irai/irai_add.html">計画工事の依頼書 受付</a></dt> ＿＿＿＿<dd>作業・工事をご依頼の際に御利用ください。<a href="irai/order.xls">依頼書原紙 ダウンロード</a>で依頼書の原紙をダウンロードして添付してください。</dd> ＿＿＿＿<dd>以下省略</dd> ＿＿＿</dl> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h3>ポイント</h3> ＿＿＿<p> ＿＿＿＿HTMLにはこのように文書構造以外書かない!!。そうすればデザインは自由自在に、また大きな変更もできる。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿そしてなによりも、メンテナンスが容易になる。プリンターだろうが、携帯電話だろうがスクリーンリーダーだろうが、検索エンジンだろが・・・・。 ＿＿＿</p> ＿＿</div> ＿＿<div class="nav"><!-- ナビゲーション --> ＿＿＿<h3>メニュー一覧</h3> ＿＿＿<ol><!-- 序列リスト(orderd list) --> ＿＿＿＿<li><a href="irai/kirai_add.php">至急の依頼・連絡・問合せ 受付</a></li> ＿＿＿＿<li><a href="irai/01.xls">至急案件の進捗状況</a></li> ＿＿＿＿<li><a href="irai/irai_add.html">計画工事の依頼書 受付</a></li> ＿＿＿＿<li><a href="irai/02.xls">計画工事の進捗状況</a></li> ＿＿＿＿<li><a href="irai/order.xls">依頼書原紙 ダウンロード</a></li> ＿＿＿＿<li><a href="irai/02.xls">総務アクセス・連絡先</a></li> ＿＿＿＿<li><a href="irai/02.xls">エネルギーデータ</a></li> ＿＿＿＿<li><a href="irai/02.xls">総務からのお知らせ</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
お礼
回答ありがとうございました。 ご指摘の通り、それぞれの記号の意味を理解せずに使っておりました。 ひとつひとつの記号の意味を理解しながら、修正していきたいと思います。