- ベストアンサー
ページの高さを取得し、それに合わせて横幅を決めたい
ORUKA1951の回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞ブラウザのページの高さを取得し、それに合わせてWebページの横幅を自動算出し、style.widthで割り当てたいのですが、 それだけのためにjavascript？？？ HTML5だと思いますが、簡単に下記でよいのでは？？ HTML5では、御存知のようにdivは安易に使いません。 <body> <div id="hdr"> <header> </header> </div> <div id="content-box"> </div> <div> <footer> </footer> </div> </body> じゃ無くて、 <body> <article> <!-- articleは、内部にheader,section,footerを期待される場合 --> <header> </header> <section> </section> <footer> </footer> </body> になるはずです。DIVはHTML4.01(1999年勧告)の時代から『id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』となっていました。(hdrとかcontent-boxは？？) HTML5では、Note(注意書き)として『Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )』直訳-->「著者には、他に適切な要素がないときの最後の最後の手段としてdiv要素を使うことを強く勧めます。」と書かれている。 * {margin: 0;padding: 0;・・ はすべきじゃない。すべてのブラウザがデフォルトでもつスタイル( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/sample.html )を上書きするので、リストや見出しが登場するたびに、スタイルを指定しなければならなくなる。スタイルシートを煩雑にする一番の要因になります。必要なときに指定する。 div#hdr {position: absolute; body直下に指定しても意味ないです。 div#content-box {position: relative;position: absolute; relativeとabsoluteは排他的なので後出の物で上書きされてしまう。 absoluteとリキッドは注意しないと、幅が変化したときに要素ドオシが重なります。 [HTML5のサンプル]HTML5はまだ確定していないので、時期尚早だと思いますが・・ ★タブは＿に置換してあるので戻す。 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> <style media="screen"> <!-- html,body{margin:0;padding:0;} header,section,footer{ width:80%;min-width:470px;max-width:1020px; padding:5px;margin:0 auto; } section{position:relative;} body>section>section,body section h2,body>section>p{ margin-right:20%; width:auto;min-width:0; } body>section>section{min-height:200px;margin-left:2em;} section aside{position:absolute;width:19%;height:100%;top:0;right:0;} /* 分かりやすいように色分け */ body{background-color:gray;} header{background-color:lime;} section{background-color:silver;} footer{background-color:aqua;} aside{background-color:white;} body>section>section{border:dotted black 1px;} --> </style> </head> <body> ＿<header> ＿＿<h1 id="title">Your title</h1> ＿＿<nav> ＿＿＿<ul> ＿＿＿＿<li><a href="#">Some</a></li> ＿＿＿＿<li><a href="#">navigation</a></li> ＿＿＿＿<li><a href="#">links</a></li> ＿＿＿</ul> ＿＿</nav> ＿</header> ＿<section> ＿＿<h2>A smaller heading</h2> ＿＿<p>記事</p> ＿＿<section> ＿＿＿<h3>A smaller heading</h3> ＿＿＿<p>記事</p> ＿＿</section> ＿＿<section> ＿＿＿<h3>A smaller heading</h3> ＿＿＿<p>記事</p> ＿＿</section> ＿＿<aside> ＿＿＿<h3>Something aside</h3> ＿＿</aside> ＿</section> ＿<footer> ＿＿<h3>A nice footer</h3> ＿</footer> </body> </html>
関連するQ&A
- 読み込み直後からjavascriptを適用させたい
閲覧いただき、ありがとうございます。 先に質問をさせていただきましたが、根本的な部分について、解決に至っておりませんでしたため、 恐縮ですが、今一度お知恵をお借りさせていただきたいと思います。 タイトルに記述してありますが、ページを開いた直後はjavascriptが動作せず、 ブラウザサイズを変化させたときにのみ、javascriptが動作します。 これを、ブラウザを開いた直後から適用させたいのですが、 この記述ではリサイズ時に実行するようになっています。 かと言って、$(window).onloadを別途作成しても動作してくれません。 onload時にまず処理をし、リサイズ時に処理をさせるためには、 どのように書き換えれば良いのでしょうか。 if文で動作させるjavascriptを分ければ良いかとも思いますが、 ではonload時に書くべきjavascriptが考え付きません。 なにとぞご教示いただけますよう、お願い申し上げます。 以下情報 プログレッシブエンハンスメントのため、まずはモダンブラウザのみ対象。 文字数制限のため、最小状態に編集。 <script type="text/javascript"> $(window).resize(function(){ var h = $(window).height(); var w = h * 1.5; //alert('縦幅' + h + 'なら横幅は' + w + 'pxになります'); var bodyW = document.getElementsByTagName('body'); var bW = bodyW.item(0); bW.style.width = w + 'px'; var contentBox = document.getElementById('content-box');//別のjs適用の都合による分離 contentBox.style.width = w + 'px'; }); </script> </head> <body> <div id="hdr"> </div> <div id="content-box"> </div> <div id="ftr"> </div> </body> </html> CSS body { min-width: 1024px; margin: 0 auto; position: relative; } div#hdr {/*下段に表示*/ position: absolute; top: 580px; left: 0; background: #ffffff; width: 100%; height: 100px; z-index: 100; background: #dff; } div#content-box {/*中段に表示*/ position: relative;/*別のjs用。できれば削除したいが、削除すると動作しないので現状維持。*/ position: absolute; top: 20px; left: 0; min-width: 1024px; height: 560px; overflow: hidden; } div#ftr {/*上段に表示*/ position: absolute; top: 0; left: 0; background: #fdf; height: 20px; width: 100%; }
- ベストアンサー
- JavaScript
- CSSのdivで、ページ全体をセンタリング出来ない
質問させて頂きます。 <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> というように、全体をdivで囲んだにもかかわらず、何故かセンタリング出来ません。 最も簡単に、このページをセンタリングするには、どうすればよいでしょうか？ ホームページビルダーで「どこでも配置モード」で作ったものを、dreamweaverで作り直す場合に該当します。 下記にHTMLを記載しておきます。 <!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"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.8.0 for Windows"> <title>タイトル</title> <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> <body background="blue_p7b.gif"> <div id="contena"> <div style="top : 0px;left : 20px; position : absolute; z-index : 20; " id="Layer22"><img src="anim.gif" width="373" height="93" border="0" alt="ようこそ"></div> <div style="top : 18px;left : 575px; position : absolute; z-index : 2; " id="Layer4"><a href="http://www.dodgeball.or.jp/"><img src="jdba1.gif" border="0" width="106" height="30"></a></div> <div style="top : 60px;left : 143px; position : absolute; z-index : 1; " id="Layer1"><img src="logo111.gif" width="488" height="69" border="0" alt="リンク"></div> <div style="top : 219px;left : 317px; position : absolute; z-index : 27; width : 580px; height : 51px; " id="Layer28"> <p><font color="#0000ff" size="+2">コンテンツ</font></p> </div> <div style="top : 161px;left : 647px; position : absolute; z-index : 22; " id="Layer23"></div> <div style="top : 255px;left : 284px; position : absolute; z-index : 28; " id="Layer2"><img src="frendlyindx.gif" width="546" height="410" border="0"></div> <div style="top : 216px;left : 652px; position : absolute; z-index : 23; " id="Layer24"></div> <div style="top : 304px;left : 50px; position : absolute; z-index : 26; " id="Layer27"></div> <div style="top : 754px;left : 47px; position : absolute; z-index : 19; width : 707px; height : 154px; " id="Layer21"><iframe frameborder="1" src="saishijoho.html" width="709" height="150" scrolling="AUTO"></iframe></div> <div style="top : 953px;left : 40px; position : absolute; z-index : 7; " id="Layer9"><a href="taikaikekka.html"><img src="button41.gif" width="57" height="54" border="0" alt=" "></a></div> <div style="top : 659px;left : 48px; position : absolute; z-index : 6; " id="Layer8"><img src="logo1.gif" width="194" height="65" border="0" alt="最新情報 "></div> <div style="top : 1020px;left : 34px; position : absolute; z-index : 12; </div> </body> </html> 詳しい方がいましたら、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- footerを{position:absolute;bottom:0p
footerを{position:absolute;bottom:0px;}で固定しようとしたら、今度はブラウザのウィンドウの上下を縮めるとfooterが上部の要素を上に通り越してしまいます。 これを正しく、footerが上部要素に届いたらfooterの移動がと止めるにはどうしたらよいでしょうか？ 以下HTMLとCSSです。 <html> ・・・・中略 <body> <div id="wrapper"> <div id="head"> ・・・・中略(ナビゲーションなどあって） </div> <div id="mainContainer"> ・・・・中略(3カラム等あって） </div>mainContainerEND <div id="footer"> </div> </div>(wrapperの閉じ) </body> </html> ######css########## html { height:100%; } body { height:100%; } div#wrapper { width:800px; height:100%; margin:10px auto 0 auto; border:#000000 solid 1px; background:#FFFFFF; } div#header { width:780px; margin:10px auto 10px auto; } div#mainContainer { width:780px; height:auto; margin:0 auto; } div#footer { clear:both; height:20px; text-align:center; width:800px; background-image:url(footer_image.jpg) no-repeat left bottom; position:absolute; bottom:0; ######ココマデ よろしくお願いします。
- 締切済み
- HTML
- 中央寄せが出来ません。
下記の様な構成で中央寄せが出来ません。 何がいけないのでしょうか？ アドバイスお願い致します。 index.html <body> <div id="hedderdiv"> <div id="hedder"> </div> <div id="buttomgrp"> </div> </div> </body> CSSファイル #hedderdiv { width: 800px; height: 500px; margin: 0 auto; } #hedder { width: 800px; height: 280px; background-color:#3F3; position:absolute; top: 0px; left: 0px; margin: 0 auto; } #buttomgrp { width: 650px; height: 200px; background-color:#C63; position:absolute; top:200px; left:50px; margin: 0 auto; }
- ベストアンサー
- HTML
- positionプロパティの設定について
下記のようなposition: relative;の指定widthが100%に対して、position: absolute;を指定するdiv#innerのwidthが800pxでセンター表示されるように指定したいのですが、position: absolute;のtop: 0px; left: 0px;と記述すると当然のごとく左寄りに表示されます。 div#inner部分をpositionプロパティを使いセンター表示される記述方法があればご教授下さい。 なお、positionプロパティを使う方法のみのご回答でお願いします。 ----------------------------------------- div#footer { position: relative; width: 100%; height: 250px; margin: 0; padding: 0; background : url(images/footer_bg.gif) repeat-x 0 0; } div#inner { position: absolute; top: 0px; left: ?px; width: 800px; margin: 0px auto 0px auto; } -----------------------------------------
- ベストアンサー
- HTML
- CSSのpositionでフッターが最下に配置されてくれない
CSSの配置がどうにもうまくいきません。 フッターをWebページの最下に配置したいのですが、どうしてもWindowsIE7だと中央くらいの場所にきてしまいます。どうやったら治りますでしょうか？ WindowsのIE6やFirefoxではOKなんですが・・・・・ 以下、ソースです。 ●CSS ------------------------------------------------------ div#hdr-wrap { position:absolute; background:url(../img/cmn/hdr_bg.gif) repeat-x; top:0px; width:100%; height:120px; text-align:center; } div#hdr { width:900px; _width: 902px;/*IE対策*/ height:120px; margin-left: auto; margin-right: auto; text-align: left; } div#hdr-vi{ padding-top:71px; padding-left:0px; } div#gbnavi-wrap { position: absolute; background:url(../img/cmn/gbnv_bg.gif) repeat-x; top: 120px; width:100%; height: 51px; text-align:center; } div#gbnavi { width: 900px; _width: 902px;/*IE対策*/ top: 120px; height: 51px; margin-left: auto; margin-right: auto; text-align: left; } div#main-wrap{ position: absolute; top:171px; width:100%; height:100%; background: url(../img/cmn/bg_cts_sdw.gif) repeat-x; text-align:center; } div#main{ position: static; padding-top:0px; width: 900px; _width: 902px;/*IE対策*/ height:100%; margin-left: auto; margin-right: auto; text-align: left; } div#ftr-wrap { clear: both; background:url(../img/cmn/ftr_bg.gif) repeat-x; width:100%; height:151px; text-align:center; } div#footer{ clear: both; color: #415880; width: 900px; _width: 902px;/*IE対策*/ height:151px; margin-left: auto; margin-right: auto; text-align: left; } ------------------------------------------------------ ●以下、HTMLソースです ------------------------------------------------------ <div id="hdr-wrap"> <div id="hdr"> <div id="hdr-vi">コンテンツ入る</div> </div> </div> <div id="gbnavi-wrap"> <div id="gbnavi"> <ul> <li>コンテンツ入る</li> </ul> </div> </div> <div id="main-wrap"> <div id="main"> <!--RIGHT AREA--> <div id="right">コンテンツ入る</div> <!--/RIGHT AREA--> <!--LEFT AREA--> コンテンツ入る。サイドバーが。 <!--/LEFT AREA--> <!--/MAIN AREA--> <!--/MIDDLE AREA--> </div> <!--FOOTER AREA--> <div id="ftr-wrap">コンテンツ入る</div> <!--/FOOTER AREA--> </div> ------------------------------------------------------ なぜかIE7だけ、ftr-wrapというフッターエリアの一番外側のDIVから中身が全部画面の中央あたりにあたかもレイヤーで上にのっているがごとく、ミドルエリアのコンテンツの上に乗っかるかたちで配置されてしまいます。 宜しくお願いいたします。
- 締切済み
- HTML
- ホームページビルダー16 ページセンター表示
現在サイトを制作しています。 Yahooなどのようにページをセンター表示をしたいのですがやり方が分かりません。 調べて色々試してみましたがセンターに表示されません。 どのようにするのでしょうか？ 以下は試しにやってみた結果です。 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 16.0.1.0 for Windows"> <title></title> <style type="text/css"> <!-- body{ text-align : center; margin-left : auto; margin-right : auto; } --> </style> </head> <body> <div style="width : 180px;height : 100px;top : 33px;left : 252px; position : absolute; z-index : 2; visibility : visible; " id="Layer2"><img src="logo11.gif" width="86" height="37" border="0" alt="テスト"></div> <div style="width : 950px;height : 840px;top : 4px;left : 2px; position : absolute; z-index : 1; visibility : visible; " id="Layer1"></div> </body> </html>
- ベストアンサー
- ホームページ作成ソフト
- ライブドアブログにおいて記事の横幅を広げるやり方
ライブドアブログにおいて記事の横幅を広げるやり方を教えて下さい。 調べてみたんですが、CSSを書き換えればいいというところまでは、 わかったんですが、その先のカスタマイズのやり方がどうもわかりません。 使用しているテンプレートのCSSの全体の枠組みのところのコードは、 下記のようになっています。 /** 02. Layout - レイアウト（全体の枠組み） */ /* ----------------------------------------------- */ body { margin: 0 0 10px 0; padding: 0; min-width: 1030px; background: #FFFFCC; text-align: center; } div#container { margin: 0 auto; height: 1%; width: 100%; background: #fff; position: relative; } div#content { width: 1030px; margin: 0 auto; } div#main , div#sub , div#extra { overflow: hidden; } div#main { float: left; display: inline; width: 100%; } div#main div.column-inner { margin: 0 225px 20px 225px; } div#sub { float: left; display: inline; margin-left: -100%; } div#sub div.column-inner { width: 200px; padding-right: 15px; } div#extra { float: left; display: inline; margin-left: -215px; } div#extra div.column-inner { width: 200px; padding-right: 15px; } /* ----------------------------------------------- */ /** clearfix */ div#container:after , div#content:after , ul.article-navigator:after , ul.archives-navigator:after , div.article-body:after , div.article-body div.article-body-more:after , div#trackback-form ul:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } /** hasLayout */ div.blog-title-outer , h2.archives-title , div.article-body , div.article-footer , h2.article-title , div.pager , ul , div.index-navigator-outer { height: 1%; } /** peek-a-boo bug */ div#trackback-form , div#trackbacks-list , div#comments-list , div#comment-form { height: 1%; } ここをどう変えれば記事の幅を広げることが出来るのか教えてください。 お願いします。
- ベストアンサー
- ブログ
- divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
- 枠線でメイン部分を囲み、フッターを一番下にもってくるには？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> <!-- html,body { margin:0px; padding:0px; height:100%; } div#flame { width: 1000px; height:100%; margin-top: 10px; margin-left: 10px; padding: 20px; border-color: #999999; border-style: solid; border-width: 1px; } div#header { background-color:#999999; color:white; } div#container { background-color:#ffffee; } div#left { background-color: #cccccc; width: 200px; left: 0px; top: 0px; } div#content_right { background-color: #cccccc; margin-left: 210px; font-size: 10pt; line-height: 140%; left: 0px; } div#footer { width:100%; background-color:666666; color:white; } --> </style></head> <body> <div id="flame"> <div id="header">ヘッダー</div> <div id="content_right">メイン記事テキスト</div> <div id="left">左メニュー部分</div> </div> <div id="footer">フッター</div> </body> </html>
- ベストアンサー
- HTML
補足
>それだけのためにjavascript？？？ javascriptのソースはご覧いただいているでしょうか。 横比率:縦比率を1.5:1で維持しつつ、画面サイズにより可変するjavascriptなのですが。 HTML5とCSS3だけではこの比率を維持しつつ、 コンテナボックスを拡大縮小する手段はないかと思われます。 ><section> </section> 残念ながらその位置に見出しタグを入れる予定がありません。 sectionタグには見出しが必須ですので、sectionタグを省きました。 >body直下に指定しても意味ないです。 大変申し訳ありませんが、このソースではフッターが最上部に、 ヘッダーが最下部に来るデザインとなっています。 それをpositionで位置指定しているのです。 従って、ヘッダー部分にpositionを付与しているのは、 BODYの基準点から580pxほど下げるためのposition付与です。 それから、すべてではありませんが、新要素はコンテナ要素ではないため、 divと同様の扱い方はできません。 よって、配置を行う目的において新要素のheaderやfooterやsectionなどの各要素を、 コンテナ要素の代わりに配置させることはできないと見て良いでしょう。 実際は確かにコンテナ要素のように配置することはできますが、 それは本来の使い方ではないと言うことで。 >relativeとabsoluteは排他的なので後出の物で上書きされてしまう。 position:relative;とposition:absolute;を重ねているのは、 javascriptの関係上、どうしてもrelativeが必要だったからであり、 本当に必要なのはabsoluteだけであるからです。 ですので記述順番は打ち消しができるような順番になっています。 >HTML5はまだ確定していないので、時期尚早だと思いますが・・ 既に草案の段階ではなく、勧告候補まできていますので、 仕様策定は完了しておりますし、今年中の正式勧告となります。 これが現段階において時期尚早とは思えません。 加えて、HTML5.1も2016年を目標に勧告の動きですので、 それも含めて考えたとすれば、やはり時期尚早とは思えないのです。 何より、SEO対策の観点から見れば、HTML4.01やXHTMLと比べ、 HTML5はそれだけでSEO対策に秀でているととれるでしょう。 あとどうでも良いのですが、<article>の終了タグがないですね。 それと、根本的な部分を書きますが、HTMLタグについてのお話は聞いておりません。