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

ページの高さを取得し、それに合わせて横幅を決めたい

解決済

  • 質問者：too_bad
  • 質問日時：
  • 回答数：3件

閲覧ありがとうございます。
現在javascriptの練習をしているのですが、
ブラウザのページの高さを取得し、それに合わせて
Webページの横幅を自動算出し、style.widthで割り当てたいのですが、
Firefoxでは構文エラーがでます。
何がいけないのでしょうか。
以下にソースを記述いたしますので、ご教示いただければと思います。
併せて、margin: 0 auto;で中央揃えにしたいのですが、
CSSでは一応記述しておりますが、可能でしょうか。

$(window).resize(function(){
var h = $(window).height();
var w = h * 1.5;
var bodyWidth = document.getElementsByTagName('body').tyle.width = w + 'px';
var headerWidth = document.getElementById('hdr').tyle.width = w + 'px';
var contentWidth = document.getElementById('content-box').tyle.width = w + 'px';
var footerWidth = document.getElementsByTagName('footer').tyle.width = w + 'px';
});

以下HTMLソースコード(必要部分のみ)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="hdr">
<header>
</header>
</div>
<div id="content-box">
</div>
<div>
<footer>
</footer>
</div>
</body>
</html>

以下CSS(必要部分のみ※現在は固定幅にしています。)
* {
margin: 0;
padding: 0;
font-style: normal;
}

body
{
width: 1024px;
margin: 0 auto;
position: relative;
}

div#hdr {
position: absolute;
top: 580px;
left: 0;
background: #ffffff;
width: 1024px;
height: 100px;
z-index: 100;
}

div#content-box {
position: relative;
position: absolute;
top: 20px;
left: 0;
width: 1024px;
height: 560px;
overflow: hidden;
}

div#ftr {
position: absolute;
width: 1024px;
height: 20px;
top: 0;
left: 0;
}

通報する

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

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： taloo
  • 回答日時：

>var bodyW = document.getElementsByTagName('body');


>var bW = bodyW.item(1);
>bW.style.width = w + 'px';
>
>上記のように書き換えましたが、変数bWがnullと言われました。

NodeList、配列などのインデックス（添字）は0から始まります。
    • good
    • 0
    • 件
通報する
この回答へのお礼

0からでしたか。
javascriptを勉強したのがかなり昔のお話でしたので、
そういうの含めてすっかり忘れてしまっているようです。
これからは本でも買ってもう少し勉強したいと思います。
動作につきましては、正常動作を確認いたしました。
ありがとうございました。

通報する
お礼日時：2014/01/13 18:23

No.2

  • 回答者： taloo
  • 回答日時：

getElementsByTagName()の戻り値はNodeListです。



毎月同じ質問が出ているくらいの内容です。
getElementsByTagName()の使い方を再確認してみてください。
学習に使用されている書籍、解説サイトに必ず載っています。

-------------
.tyle.widthとなっていますが、.style.widthの間違いではないでしょうか。
ケアレスミスがないか、再確認してみてください。


-------------
>div#content-box {
>position: relative;
>position: absolute;

１つのセレクタに同じプロパティを何度も記述すると、どちらが適用されるかはブラウザ依存となります。
１つのプロパティは１回だけ書く事をお勧めします。

--------------
>併せて、margin: 0 auto;で中央揃えにしたいのですが、
>CSSでは一応記述しておりますが、可能でしょうか。

可能ですし、すでにそうなっているようですが、見えないだけではないでしょうか。
borderやbackgroundで色を付けて確認してみてください。

===============

body {
width: 1024px;
}

div#content-box {
width: 100%;
}

としておくと、bodyの幅を変更すれば、#content-boxの幅も自動的に変更されます。
100%という指定と、1024pxという指定の違いを確認してみてください。

この回答への補足

>getElementsByTagName()の戻り値はNodeListです。
どうやら私の検索能力が至らなかったみたいで、お手間をおかけして申し訳ありません。
NodeListについては調べて把握いたしました。

>.tyle.widthとなっていますが、.style.widthの間違いではないでしょうか。
大人しく書いたソースからコピペすればよかったのですが、
手打ちしてからコピペしたのが仇となったようです。
ケアレスミスです申し訳ありません。

>１つのプロパティは１回だけ書く事をお勧めします。
私もできることならそうしたいと思っております・・・

>可能ですし、すでにそうなっているようですが、見えないだけではないでしょうか。
このjsが効くのであれば、CSSに与えている固定幅のwidthを削除する予定です。
その際にもmarginは効くのかと言う内容でした。

>100%という指定と、1024pxという指定の違いを確認してみてください。
こちらは何も考えずに値を振った結果ですね・・・
100%と言う方法があることを失念しておりました。


var bodyW = document.getElementsByTagName('body');
var bW = bodyW.item(1);
bW.style.width = w + 'px';

上記のように書き換えましたが、変数bWがnullと言われました。
そこで、以下のif文で試したところ、
ページ読み込み直後はnullとでましたが、サイズ変更をすると問題なさそうでした。
if (wrap === null) {
alert("null");
} else {
alert("OK");
}
いかなるときもnullと出さないためには、どうすれば良いのでしょうか。

補足日時：2014/01/13 00:33
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご丁寧にありがとうございます。

補足につきまして
ソースの書き換え忘れなどで大変ご迷惑をおかけしております。
if (bW === null) {
alert("null");
} else {
alert("OK");
}
正しくはこちらです。
お察しのとおり、現在ソースそのものはbodyではなくwrapperに適用しなおしている状況です。
色々と書き換えて試してはいるのですが、どうにも動いてくれないのです。

通報する
お礼日時：2014/01/13 00:45

No.1

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

＞ブラウザのページの高さを取得し、それに合わせて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-html4 … )』となっていました。(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 … )』直訳-->「著者には、他に適切な要素がないときの最後の最後の手段としてdiv要素を使うことを強く勧めます。」と書かれている。
* {margin: 0;padding: 0;・・
　はすべきじゃない。すべてのブラウザがデフォルトでもつスタイル( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )を上書きするので、リストや見出しが登場するたびに、スタイルを指定しなければならなくなる。スタイルシートを煩雑にする一番の要因になります。必要なときに指定する。

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>

この回答への補足

>それだけのために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タグについてのお話は聞いておりません。

補足日時：2014/01/10 21:42
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報