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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

HTML

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

CSS

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

Q&A

解決済

2回答

1493閲覧

[HTML・CSS]リンク部分の背景の色が付きません。

asadako

総合スコア147

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2016/10/29 12:39

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で背景の色を指定したと思うのですが…
書き直してみたりしましたが、治りませんでした。
どこか間違ったところがあれば教えてくださると助かります。

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

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

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

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

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

kei344

2016/10/29 12:58

バッククオート3つの前後には改行を入れてください。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。
退会済みユーザー

退会済みユーザー

2016/10/29 14:02 編集

①や ②をいれてるから対象外な気がするあと全角でCSSとかかいてあるようにもみえるねぇ
gin

2016/10/29 14:22

リンクの箇所はフッター部分だけですかね。.link-Toppageしか設定されていないようですが…。一応それも見てみましたがオレンジの背景色は出ますね。
guest

回答2

0

自己解決

CSS①の、link-toppageという名前が間違っていました。正しくは、#footerでした。
解決にご協力くださり、ありがとうございました!

投稿2016/10/30 01:17

asadako

総合スコア147

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

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

0

<p>タグの中に<div>が入ってるのでそれが影響とかしてませんか? 同じブロックレベルだから入れれないと思うんですが。 [HTMLの文法を改めて見直し、まとめてみました。 | NIWAKASOFT](http://niwakasoft.jp/column/html_grammar/) [【HTML】 もう悩まない!タグの入れ子ルールまとめ - NAVER まとめ](http://matome.naver.jp/odai/2137515842633207101) [[HTML/CSS] このタグの中に入れていいタグは? 入れ子タグまとめ - Webworker's Clip](http://webworkersclip.com/1298/)

headerの#がぬけてるとかそんなオチ?

投稿2016/10/29 13:50

編集2016/10/29 14:03
toutou

総合スコア2050

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問