HTML①
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title> 6 Pro-Ware-house-programming 7 </title> 8 <link rel="shortcut icon" href="favicon.ico"> 9 <link rel="stylesheet" href="mystyles.css"> 10 <script type="text/javascript" src="Pro-Ware-House-Programming.js"> 11 </script> 12 </head> 13 <body> 14 <div id="header"> 15 <h1> 16 Pro-Ware-house-programming 17 </h1> 18 </div> 19 <div id="main"> 20 <h2> 21 <div class="Heading-Title"> 22 Programmingを始めよう! 23 </div> 24 </h2> 25 <p> 26 さあ!まだ見ぬ世界へ出発しましょう!<br> 27 プログラミングは、挫折率が90%です。<br> 28 しかし、このサイトは、完全無料で基本中の基本から挫折せずにTwitterに似たものを作るまでをサポートします。<br> 29 さあ、始めましょう!プログラミングを! 30 </p> 31 <h2> 32 <div class="study-and-html"> 33 勉強001 HTMLとは? 34 </div> 35 </h2> 36 <div class="pattern1"> 37 <img src="image001.png" align="left"> 38 </div> 39 <p> 40 HTMLは、 41 <div id="Abbreviation01"> 42 {Hyper Text Markup Language} 43 </div> 44 の略です。<br> 45 動きのないサイトを作ることができます。<br> 46 また、色などの装飾も単体ではできません。<br> 47 WebSiteを作るときは、HTML + CSS + JavaScript + 言語を使います。<br> 48 それだけ重要な言語ということですね。<br> 49 </p> 50 <h2> 51 <div class="study-and-css"> 52 勉強002 CSSとは? 53 </div> 54 </h2> 55 <p> 56 <div class="pattern2"> 57 <img src="image002.png"> 58 </div> 59 CSSは、 60 <div id="Abbreviation02"> 61 {Cascading Style Sheets} 62 </div> 63 の略です。<br> 64 65 </p> 66 </div> 67 <div id="footer"> 68 <nav> 69 <div class="link-Toppage"> 70 <a href="Pro-Ware-House.html"> 71 トップページです。 72 </a> 73 </div> 74 <div class="link-HTML&CSS"> 75 <a href="Pro-Ware-House-Programming-HTML&CSS.html"> 76 HTML&CSSの入門編です。 77 </a> 78 </div> 79 </nav> 80 </div> 81 </body> 82</html> 83 84``````CSS① 85 86.link-Toppage { 87 background-color:orange; 88 width:850px; 89 height:30px; 90 padding:5px 0px 5px 50px; 91 margin:10px 0px 0px 0px; 92 text-align:center; 93 margin-left:auto; 94 margin-right:auto; 95 text-align:left; 96} 97.pattern1 { 98 width: 500px; 99 height: 467px; 100 overflow: hidden; 101 position: relative; 102} 103 104.pattern1 img { 105 position: absolute; 106 left: 50%; 107 margin-left: -400px; 108} 109.pattern2 { 110 width: 500px; 111 height: 467px; 112 overflow: hidden; 113 position: relative; 114} 115 116.pattern2 img { 117 position: absolute; 118 left: 50%; 119 margin-left: -400px; 120}
HTML②
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf8"> 5 <title>Pro-Ware-House</title> 6 <link rel="shortcut icon" href="favicon.ico"> 7 <link rel="stylesheet" href="Pro-Ware-House.css"> 8 <script type="text/javascript" src="Pro-Ware-House.js"></script> 9 </head> 10 <body> 11 <div id="header"> 12 <h1>Pro-Ware-House</h1> 13 </div> 14 <div id="main"> 15 <h2> 16 <div class="Heading-title2"> 17 Pro-Ware-Houseへようこそ! 18 </div> 19 </h2> 20 <p> 21 このサイトでは、IT/ビジネス の情報を発信しています。<br> 22 特に、プログラミングが盛んです。<br> 23 各言語の入門のページもあり、とても分かりやすくなっています。<br> 24 また、掲示板で情報交換ができるようになっています。 25 </p> 26 <h2>一緒に、プログラミングを頑張りましょう!<h2> 27 </div> 28 <div id="footer"> 29 30 </div> 31 <a href="Pro-Ware-House-Programming.html">プログラミング全般について書いてある倉庫です。</a> 32 </body> 33</html> 34 35``````CSS 36#header { 37 color:orangered; 38 background-color:lawngreen; 39 height:45px; 40 width:250px; 41 padding:0px 20px 5px 20px; 42 margin:0px 0px 10px 0px 43 }
このようなWebSiteを作っています。CSSで背景の色を指定したと思うのですが…
書き直してみたりしましたが、治りませんでした。
どこか間違ったところがあれば教えてくださると助かります。
回答2件
あなたの回答
tips
プレビュー