前提・実現したいこと
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 © </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 © </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
回答4件
あなたの回答
tips
プレビュー