CSSを使わずにJavaScriptでWebページの装飾を書く方法について②
解決済
回答 2
投稿
- 評価
- クリップ 0
- VIEW 626
前提・実現したいこと
innerHTML,CSSを使わずに、HTMLとJavaScriptだけでWebページを書こうとしています。
前回の質問でご回答をいただいた上で、発生している問題が変化したので
再度質問させていただきます。
前回の質問
発生している問題・エラーメッセージ
HTMLとJavaScriptを組み合わせたコード（samplejs.html)で
該当のソースコード（sample.htmlとsample.css）で表示するものと同じページを表示させたいです。
しかし、以下の２点で問題があり、同じページは表示できていない状態です。
どのように修正すれば良いかアドバイスをいただきたいです。
var header = document.getElementsByTagName('header');
for (var i = 0; i < header.length; i++) {
header[i].style['text-align'] = 'center'; //header .style['text-align']?
header[i].style.height = '100px';
}
var body = document.getElementsByTagName('body');
for (var i = 0; i < body.length; i++) {
body[i].style.line-height = '2.0';
}
具体的には、上記の部分でvar bodyを追加すると、var headerの設定が表示されなくなってしまうという問題に直面しています。
また、HTMLの以下の部分にあたり
<nav class ="dropdown">CSSで以下の様に
dropdown h2{
text-align: center;
background-color: #ffff58;
margin: 0;
padding: 12px 16px;
}
.dropdown ul{
display: none;
position: absolute;
background-color: rgb(100, 100, 255);
box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
list-style-type: none;
margin: 0;
padding: 0;
z-index: 1;
}
と設定した部分に関しては、以下の様にdocument.getElementsByTagNameで取得できるのか、
var .dropdown ul = document.getElementsByTagName('.dropdown ul');もしくは他のメソッドを使用する方法があるのか調べてもわからなかったため、
JavaScriptでWebページの装飾を各部分でもCSSのままで記述してあります。
該当のソースコード
samplejs.html
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset= "utf-8">
<title>サンプルページ</title>
</head>
<body>
<header>
<h1>サンプルページ</h1>
</header>
<nav class ="dropdown">
<h2>メニュー</h2>
<ul>
<li><a href ="no1.html">その１</a></li>
<li><a href ="no2.html">その２</a></li>
<li><a href ="no3.html">その３</a></li>
</ul>
</nav>
<article>
<h2>内容１</h2>
<p>文章１</p>
<br>
<h2>内容２</h2>
<p id = "paragraph1">行１
<br>行２
<br>行３</p>
<br>
<h3>内容3</h3>
<p id = "paragraph2">行１
<br>行２</p>
<ul>
<ol>
<li>項目１</li>
<li>項目２</li>
</ol>
</ul>
<form>
<h2>フォーム</h2>
<div>
<lavel>氏名：<input type="text" size="15" name="name"></lavel><br>
<label>問い合わせ内容：<input type="text" size="20" name="question"></label><br>
<input type="submit" value="submit">
</div>
</form>
</article>
<footer>
<ul>
<a href ="page1.html">他のページ１</a>
<a href ="page2.html">他のページ２</a>
</ul>
<small>Copyright © </small>
</footer>
<!-- JavaScriptで装飾指定 -->
<script>
var header = document.getElementsByTagName('header');
for (var i = 0; i < header.length; i++) {
header[i].style['text-align'] = 'center'; //header .style['text-align']?
header[i].style.height = '100px';
}
var body = document.getElementsByTagName('body');
for (var i = 0; i < body.length; i++) {
body[i].style.line-height = '2.0';
}
var nav = document.getElementsByTagName('nav');
for (var i = 0; i < nav.length; i++) {
nav[i].style.float = 'left';
nav[i].style.width ='200px';
}
var article = document.getElementsByTagName('article')[0];
atricle.style.left-margin = '210px';
atrticle.style.float = 'left';
var h1 = document.getElementsByTagName('h1')[0];
h1.style.margin = '15px';
h1.style.font-size = '3.0vw';
var h3 = document.getElementsByTagName('h3')[0];
h3.style.textDecoration = 'underline';
var footer = document.getElementsByTagName('footer')[0];
footer.style.clear = 'left';
footer.style.margin-left = '200px';
</script>
</body>
</html>sample.html
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset= "utf-8">
<title>サンプルページ</title>
<link rel="stylesheet" href="sample.css" type="text/css" />
</head>
<body>
<header>
<h1>サンプルページ</h1>
</header>
<!-- menu -->
<nav class ="dropdown">
<h2>メニュー</h2>
<ul>
<li><a href ="no1.html">その１</a></li>
<li><a href ="no2.html">その２</a></li>
<li><a href ="no3.html">その３</a></li>
</ul>
</nav>
<!-- main content -->
<article>
<h2>内容１</h2>
<p>文章１</p>
<br>
<h2>内容２</h2>
<p id = "paragraph1">行１
<br>行２
<br>行３</p>
<br>
<h3>内容3</h3>
<p id = "paragraph2">行１
<br>行２</p>
<ul>
<ol>
<li>項目１</li>
<li>項目２</li>
</ol>
</ul>
<form>
<h2>フォーム</h2>
<div>
<lavel>氏名：<input type="text" size="15" name="name"></lavel><br>
<label>問い合わせ内容：<input type="text" size="20" name="question"></label><br>
<input type="submit" value="submit">
</div>
</form>
</article>
<footer>
<ul>
<a href ="page1.html">他のページ１</a>
<a href ="page2.html">他のページ２</a>
</ul>
<small>Copyright © </small>
</footer>
</body>
</html>
sample.css
header{
height: 100px;
text-align: center;
}
body{
line-height: 2.0;
}
nav{
float: left;
width: 200px;
}
.dropdown{
position: relative;
width: 190px;
}
.dropdown h2{
text-align: center;
background-color: #ffff58;
margin: 0;
padding: 12px 16px;
}
.dropdown ul{
display: none;
position: absolute;
background-color: rgb(100, 100, 255);
box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
list-style-type: none;
margin: 0;
padding: 0;
z-index: 1;
}
.dropdown a{
display: block;
color: #000;
padding: 12px 16px;
text-decoration: none;
width: 158px;
}
.dropdown a:hover{
background-color: #555;
color: #fff;
}
.dropdown:hover h2{
background-color: rgb(100, 100, 255);
}
.dropdown:hover ul{
display: block;
}
article{
left-margin: 210px;
float: left;
}
h1{
margin: 15px;
font-size: 3.0vw;
}
h3{
text-decoration: underline;
}
/*訪問前後でリンクの文字色を指定*/
a:visited{
color: rgb(255, 0, 0);
}
p em{
font-style: italic;
font-weight: bold;
}
footer {
clear: left;
margin-left: 200px;
}補足情報（FW/ツールのバージョンなど）
ブラウザ：Google Chrome
Mac OS
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+3
// body[i].style.line-height = '2.0';
// ↓
body[i].style['line-height'] = '2.0';調べてもわからなかったため、
Webの情報は「体系立てた情報」で無いことが多いので、一度本屋で何冊か本を買って読むと言う方法が良いと思います。
【document.querySelectorAll - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll
【querySelector CSSセレクタで要素を取得 | JavaScript中級編】
https://wp-p.info/tpl_rep.php?cat=js-intermediate&fl=r4
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
checkベストアンサー
+2
今回の問題の直接的な回答ではないことを先に述べさせていただきます。
innerHTML,CSSを使わずに、HTMLとJavaScriptだけでWebページを書こうとしています。
ということであれば、一つ一つの要素のstyleにjsでセットすると管理も面倒なので、
動的にスタイルシートを生成(document.createElement("style"))し、insertRule(IEの場合addRule)していくというアプローチのほうが、既存のCSSからの移植性も高く、管理もCSSと同じ考え方でいけます。いかがでしょうか。
var style = document.createElement("style");
style.setAttribute("type", "text/css");
document.getElementsByTagName("head")[ 0 ].appendChild(style);
style.sheet.insertRule('header {height: 100px; text-align: center;}', 0);
style.sheet.insertRule('a:visited {color: rgb(255, 0, 0);}', 0);
上記が基本コードとなります。シンプルです。
スタイルの定義方法はCSSの文字列がそのまま使えます。
あとはこれをモジュール化し、IEに対応させたり、削除もできるようにしたりと、さらなる高機能化が目指せます。
参考URL：
https://developer.mozilla.org/ja/docs/Web/API/CSSStyleSheet/insertRule
https://www.npmjs.com/package/insert-rule
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 90.40%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
x_x
2018/06/08 09:36
前回も質問しましたがなぜこんなことをしているのでしょうか？ このまま続けても詳細度まで調べなければ同じ表示にはできません。
harunouta
2018/06/08 09:38
詳細度まで調べるとはどういう意味でしょうか。また、x_xさんのご提案いただいた方法でもdocument.styleSheetsを扱う場合でも、innerHTMLは使用しないということになりますでしょうか。
x_x
2018/06/08 09:40
innerHTMLがなぜ出てくるのか分かりません。わたしの提示コードにもなかったはずですが
x_x
2018/06/08 09:41
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity
sousuke
2018/06/08 09:50
なんらかの要因でCSSを配置できないかCSSを適応できずに…ってところでしょうか？これをしなければいけない理由は私も聞きたいです。詳細度がわかったとしてもコードが複雑過ぎて申し訳ないが質問者さんの技量では別の問題でまた質問にきそうです。
harunouta
2018/06/08 09:57
かしこまりました。どれくらい難しいのか理解できておらず、方針を変えます。