質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

1875閲覧

CSSを使わずにJavaScriptでWebページの装飾を書く方法について

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/06/07 05:57

編集2018/06/08 00:00

前提・実現したいこと

innerHTML,CSSを使わずに、HTMLとJavaScriptだけでWebページを書こうとしています。
以下のサイトの様なことがしたいです。
JavaScriptでCSSを操作1
JavaScriptでCSSを操作2

発生している問題・エラーメッセージ

以下のコードで該当のソースコード(sample.htmlとsample.css)で表示できるのと同じページを表示させたいのですが、HTMLなのでエラーなども表示されず、どこを修正すればいいかわからない状態です。

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">その1</a></li> <li><a href ="no2.html">その2</a></li> <li><a href ="no3.html">その3</a></li> </ul> </nav> <article> <h2>内容1</h2> <p>文章1</p> <br> <h2>内容2</h2> <p id = "paragraph1">行1 <br>行2 <br>行3</p> <br> <h3>内容3</h3> <p id = "paragraph2">行1 <br>行2</p> <ul> <ol> <li>項目1</li> <li>項目2</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">他のページ1</a> <a href ="page2.html">他のページ2</a> </ul> <small>Copyright &copy; </small> </footer> <!-- JavaScriptで装飾指定 --> <script> var header = document.getElementsByTagName('header'); header.style.text-align = 'center'; var body = document.getElementsByTagName('body'); var nav = document.getElementsByTagName('nav'); nav.style.float = 'left'; nav.style.width ='200px';       //JavaScriptに変更したときに「.dropdown」はどうなるのかわからない部分 .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; } 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'; a:visited{ color: rgb(206, 96,9); } p em{ font-style: italic; font-weight: bold; } var footer = document.getElementsByTagName('footer')[0]; footer.style.clear = 'left'; footer.style.margin-left = '200px'; </script> </body> </html>

該当のソースコード

sample.html

HTML

1<!DOCTYPE html> 2<html lang = "ja"> 3<head> 4 <meta charset= "utf-8"> 5 <title>サンプルページ</title> 6 <link rel="stylesheet" href="sample.css" type="text/css" /> 7</head> 8 9<body> 10 <header> 11 <h1>サンプルページ</h1> 12 </header> 13 14 <!-- menu --> 15 <nav class ="dropdown"> 16 <h2>メニュー</h2> 17 <ul> 18 <li><a href ="no1.html">その1</a></li> 19 <li><a href ="no2.html">その2</a></li> 20 <li><a href ="no3.html">その3</a></li> 21 </ul> 22 </nav> 23 24 <!-- main content --> 25 <article> 26 <h2>内容1</h2> 27 <p>文章1</p> 28 <br> 29 <h2>内容2</h2> 30 <p id = "paragraph1">行1 31 <br>行2 32 <br>行3</p> 33 <br> 34 <h3>内容3</h3> 35 <p id = "paragraph2">行1 36 <br>行2</p> 37 <ul> 38 <ol> 39 <li>項目1</li> 40 <li>項目2</li> 41 </ol> 42 </ul> 43 44 <form> 45 <h2>フォーム</h2> 46 <div> 47 <lavel>氏名:<input type="text" size="15" name="name"></lavel><br> 48 <label>問い合わせ内容:<input type="text" size="20" name="question"></label><br> 49 <input type="submit" value="submit"> 50 </div> 51 </form> 52 53 </article> 54 55 56 <footer> 57 <ul> 58 <a href ="page1.html">他のページ1</a> 59 <a href ="page2.html">他のページ2</a> 60 </ul> 61 <small>Copyright &copy; </small> 62 </footer> 63 64</body> 65</html>

sample.css

css

1header{ 2 height: 100px; 3 text-align: center; 4} 5 6 7body{ 8 line-height: 2.0; 9} 10 11 12nav{ 13 float: left; 14 width: 200px; 15} 16 17.dropdown{ 18 position: relative; 19 width: 190px; 20} 21 22.dropdown h2{ 23 text-align: center; 24 background-color: #ffff58; 25 margin: 0; 26 padding: 12px 16px; 27} 28 29.dropdown ul{ 30 display: none; 31 position: absolute; 32 background-color: rgb(100, 100, 255); 33 box-shadow: 0px 8px 16px rgba(0,0,0,0.2); 34 list-style-type: none; 35 margin: 0; 36 padding: 0; 37 z-index: 1; 38} 39 40.dropdown a{ 41 display: block; 42 color: #000; 43 padding: 12px 16px; 44 text-decoration: none; 45 width: 158px; 46} 47 48.dropdown a:hover{ 49 background-color: #555; 50 color: #fff; 51} 52 53.dropdown:hover h2{ 54 background-color: rgb(100, 100, 255); 55} 56 57.dropdown:hover ul{ 58 display: block; 59} 60 61article{ 62 left-margin: 210px; 63 float: left; 64} 65 66 67 68h1{ 69 margin: 15px; 70 font-size: 3.0vw; 71} 72 73 74h3{ 75 text-decoration: underline; 76} 77 78/*訪問前後でリンクの文字色を指定*/ 79a:visited{ 80 color: rgb(255, 0, 0); 81} 82 83p em{ 84 font-style: italic; 85 font-weight: bold; 86} 87 88 89footer { 90 clear: left; 91 margin-left: 200px; 92}

補足情報(FW/ツールのバージョンなど)

ブラウザ:Google Chrome
Mac OS

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/06/07 06:39

なぜこんなことをしているのでしょうか? インラインスタイルのみでは詳細度の概念がなくなってしまうため、同じことをしたいならdocument.styleSheetsをいじるべきかと思います。
退会済みユーザー

退会済みユーザー

2018/06/07 22:32

document.styleSheetsを扱う場合でも、innerHTMLは使用しないということになりますでしょうか。
kei344

2018/06/07 23:33

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。
退会済みユーザー

退会済みユーザー

2018/06/08 00:01

問題が別途出てきたので一度こちらの質問はベストアンサーを選択させていただいた上で、質問として投稿させていただきます。
guest

回答4

0

ベストアンサー

getElementsByTagName が HTMLCollection を返すため、header[0].styleというように要素ごとに処理を繰り返す必要があります。

【document.getElementsByTagName - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName

与えられたタグ名を持つ要素の HTMLCollection を返します。

投稿2018/06/07 06:23

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/06/07 12:39

ご回答いただきましてありがとうございます。 要素ごとに処理を繰り返す必要があることは理解できました。しかし、ご紹介いただいたWebページではCSSに関する例がなく、具体的に今回のコードをどのように修正すれば良いのかわからない状態です。 お手数おかけしますが、よろしくお願いいたします。
guest

0

JavaScript

1function addStyleRule(selector, styleRule, style) { 2 if (!style) { 3 // HTML5 4 style = document.head.appendChild(document.createElement('style')); 5 } 6 7 var sheet = style.sheet; 8 sheet.insertRule(selector + '{' + styleRule + '}', sheet.cssRules.length); 9 return style; 10} 11 12 var style; 13 addStyleRule('header', 'text-align: center; height: 100px', style); 14 addStyleRule('body', 'line-height: 2.0', style); 15 // 以下略。

投稿2018/06/07 07:00

編集2018/06/07 12:40
x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/06/07 12:24

ご回答いただきましてありがとうございます。 function addStyleRuleはhtmlの<function></function>内に書くのでしょうか。 大変恐縮ですが、コードが何をしているのか理解できておりません。
x_x

2018/06/07 12:39

JavaScriptなので、<script></script>です。 スクリプトを扱ったことはないのでしょうか?
guest

0

なぜ、<script>タグの中にCSSを書いてるのでしょうか?

具体的な問題点が分からないので何とも言えませんが、
1つ言えることはdocument.getElementsByTagNameの戻り値は配列 HTMLCollection になりますので、

var nav = document.getElementsByTagName('nav');
nav.style.float = 'left';

こういうことはできません。
取得できた配列 HTMLCollection をループなどを使って、要素1つ1つに対してスタイルを当てていくか、
明らかに1つしか取得できないことが分かっているのであれば、
以下のようにしてもいいと思います。

JavaScript

1var nav = document.getElementsByTagName('nav')[0]; // HTMLCollectionの1つ目を取得 2nav.style.float = 'left';

投稿2018/06/07 06:23

編集2018/06/07 06:31
root_jp

総合スコア4666

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

root_jp

2018/06/07 06:32

すみません、getElementsByTagNameの戻り値は、 厳密に言うと配列(Array)ではなく kei344さんが言っている通りHTMLCollectionです。 回答の内容をお詫びして訂正します。
退会済みユーザー

退会済みユーザー

2018/06/07 12:18

ご回答いただきましてありがとうございます。 <script>タグの中にCSSを書いている部分は、JavaScriptで書くときにどの様に変換すれば良いかわからない部分です。ご回答をいただいて、コードを修正してみたのですが、変更後のコードでも適用されていない様です。
guest

0

もう直接的な答えが出ていそうですが今後の参考に・・・
ブラウザの開発者ツールを使えばエラーが見れますよ。

投稿2018/06/07 06:38

ladybird

総合スコア163

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問