閲覧ありがとうございます。
現在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;
}
No.3ベストアンサー
- 回答日時:
>var bodyW = document.getElementsByTagName('body');
>var bW = bodyW.item(1);
>bW.style.width = w + 'px';
>
>上記のように書き換えましたが、変数bWがnullと言われました。
NodeList、配列などのインデックス(添字)は0から始まります。
0からでしたか。
javascriptを勉強したのがかなり昔のお話でしたので、
そういうの含めてすっかり忘れてしまっているようです。
これからは本でも買ってもう少し勉強したいと思います。
動作につきましては、正常動作を確認いたしました。
ありがとうございました。
No.2
- 回答日時:
getElementsByTagName()の戻り値はNodeListです。
毎月同じ質問が出ているくらいの内容です。
getElementsByTagName()の使い方を再確認してみてください。
学習に使用されている書籍、解説サイトに必ず載っています。
-------------
.tyle.widthとなっていますが、.style.widthの間違いではないでしょうか。
ケアレスミスがないか、再確認してみてください。
-------------
>div#content-box {
>position: relative;
>position: absolute;
1つのセレクタに同じプロパティを何度も記述すると、どちらが適用されるかはブラウザ依存となります。
1つのプロパティは1回だけ書く事をお勧めします。
--------------
>併せて、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の間違いではないでしょうか。
大人しく書いたソースからコピペすればよかったのですが、
手打ちしてからコピペしたのが仇となったようです。
ケアレスミスです申し訳ありません。
>1つのプロパティは1回だけ書く事をお勧めします。
私もできることならそうしたいと思っております・・・
>可能ですし、すでにそうなっているようですが、見えないだけではないでしょうか。
この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と出さないためには、どうすれば良いのでしょうか。
ご丁寧にありがとうございます。
補足につきまして
ソースの書き換え忘れなどで大変ご迷惑をおかけしております。
if (bW === null) {
alert("null");
} else {
alert("OK");
}
正しくはこちらです。
お察しのとおり、現在ソースそのものはbodyではなくwrapperに適用しなおしている状況です。
色々と書き換えて試してはいるのですが、どうにも動いてくれないのです。
No.1
- 回答日時:
>ブラウザのページの高さを取得し、それに合わせて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タグについてのお話は聞いておりません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
formのsubmitを押すとモーダル...
-
javascriptで複数の表示・非表...
-
javascriptでの(-)ハイフンの処...
-
CSSでreadonlyの機能はあり...
-
ポップアップのリンク先と閉じ...
-
「ご処理進めて頂きますようお...
-
エクセルで、日付を入力すると...
-
EXCEL VBA マクロ 実行する度に...
-
Excelシート上のマクロを登録し...
-
CloseとDisposeの違い
-
エクセルVBAで、MsgBox やInput...
-
switch の範囲指定
-
VBAでループ内で使う変数名を可...
-
【Excel】特定の文字を含むセル...
-
マクロで作ったボタンのサイズ...
-
DoEventsがやはり分からない
-
メルカリのメルカードで買い物...
-
findは動くがfindnextがマクロ...
-
VBの質問#if 0 then ってどう...
-
VBAにてメッセージボックスを最...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Q&A掲示板の入力フォームに文字...
-
JavascriptでDom XSSの脆弱性対...
-
【JavaScript】検索がヒットし...
-
CSSでreadonlyの機能はあり...
-
JavascriptでXSSの脆弱性への対...
-
formのsubmitを押すとモーダル...
-
確認ダイアログを次からは表示...
-
特定の条件のHTML要素を一括で...
-
JavascriptのHTMLクラス表示に...
-
jQueryでのドラッグアンドドロ...
-
javascriptで複数の表示・非表...
-
jqueryを使ったスムーススクロ...
-
javascriptのエラーで質問です。
-
jqueryアコーディオンの上部の...
-
JavaScriptのdiv.style属性の変...
-
2回目以降のページロード時には...
-
改行をしたいが、<br>と...
-
jQueryのCSSで値に変数を使う方法
-
クリックすると、色が変わるよ...
-
動画の上に広告をオーバーレイ...
おすすめ情報