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

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

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

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

Q&A

1回答

244閲覧

CSSの反映がされるものとされないものがあります…

rI1F6dG44Eqfinb

総合スコア10

CSS

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

0グッド

0クリップ

投稿2019/03/16 12:38

編集2022/01/12 10:55

google chrome、atomを使って独学で参考本を使って勉強していますが、わからないところが発生しました

HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta chareset="utf-8"> <title>ページのタイトル</title> <link rel="stylesheet" href="../common/css/style.css"> </head> <body> <div id="page"> <header id="pageHead"> <h1 id="siteTitle">komorikomashu</h1> <p id="catchcopy">1人じゃできないことも、力を合わせればできる。やってみたいことをカタチにする、3人の楽しいものづくり。</p> </header> <div id="pagebody"> <div id="pagebodymain"> <artuicle class="artuicleDetail"> <header class="artuicleDetailhead">  <h1 class="pageTitle">Cafe Debut</h1> <img src="images/img_01_01.jpg" alt="" whdth="720" heigth="390"> <p>baser CMS カフェサイト用テーマ<br> baser CMS テーマコンサート2012 飲食店系テーマ賞受賞(受賞結果はこちら)</p> </header>

CSS

問題のところは一番下の/*見出し*/の

.pageTitle{
font-size: 26px;
background-color: #F2F2E5;
padding: 5px 15px;
margin-top: 0;
}

のmargin-top: 0;です

body { color: #333333; }
p {
font-size: 14px;
line-height: 1.429;
}
/ページ/
#page{
width: 980px;
margin: 0 auto;
}
/ページボディ/
#pagebody::after{
content: "";
clear: both;
display: block;
}
#pagebodymain{
width: 720px;
float: left;
}
#pagebodysub{
width: 220px;
float: right;
}
/ページヘッダー/
#siteTitle{
font-size: 30px;
line-height: 1.2;
}
#catchcopy{
font-size: 12px;
line-height: 1.5;
}
#copyright small{
font-size: 12px;
line-height: 1.5;
}
#pageFoot{
font-size: solid 1px #cccccc;
margin-top: 15px;
}
/区切り線・余白/
.artuicleDetailhead{
border-bottom: solid 1px #CCCCCC;
margin-bottom: 30px;
padding-bottom: 15px;
}
.artuicleDetailfoot{
border-top: solid 1px #CCCCCC;
margin-top: 30px;
padding-top: 15px;
}
.artuicleDetailbody section{
margin: 30px 0;
}
/撮影情報/
.creditUnit{
padding: 10px;
border: solid 1px #CCCCCC;
}
.creditUnit p{
font-size: 12px;
}
/リスト/
ul li{
font-size: 14px;
list-style-type: square;
}
//
table{
font-size: 14px;
border: solid 1px #CCCCCC;
border-collapse: collapse;
width: 100%;
}
table th,
table td{
border: solid 1px #cccccc;
padding: 5px 10px;
}
table th{
background-color: #EEEEEE;
text-align: left;
}
table caption{
text-align: left;
font-size: bold;
}
/画像キャプション/
figcaption{
font-size: 12px;
}
/見出し/
.pageTitle{
font-size: 26px;
background-color: #F2F2E5;
padding: 5px 15px;
margin-top: 0;
} 
.heading-type1{
font-size: 18px;
color: #349FA6;
border-bottom: solid 1px #349FA6;
padding: 5px;
}
.heading-type2{
font-size: 16px;
border-left: solid 5px #E3E4D9;
padding-left: 10px;
}
.heading-type3{
font-size: 14px;
}

と打ったのですが進めていくうちに、ブラウザ表示のマージンが設定されたため、空白ができたので後からmargin-top:0;を打って上書きしようとしたのですが、反映されません
ほかのものでも後から付け足したものは反映されず、要素を全て消してまた1から打てば反映されます

参考本ではしっかり反映されているのですが…

私のパソコンが変なのでしょうか?

これだけじゃ判断しかねなかったら追記しますので指示をください

よろしくお願いします

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2019/03/16 13:01 編集

cssがhtmlの構造に合わせて書かなければいけないということは知識として知っていらっしゃるのですか? 質問の際は、現象を再現できるコードを提示してください。
mono615

2019/03/16 13:06

上下の要素、.pageTitleを覆う要素も関係あるかもしれません。 上記CSSとHTMLも合わせて記載いただけるとアドバイスしやすいかと思います。
kei344

2019/03/16 14:16

質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答1

0

まずは、きちんとしたコードを提示しましょう。
関係の無い部分の、コードは省いて下さい。しかし、最小パーツを抜き取るのは良いですが、最小パーツを構成するタグ等を省略するのはダメです。

HTMLもCSSも、症状が再現できる状態になっていません。
タグ名、セレクタ名の誤表記もあり、症状が再現されない原因のひとつです。

症状が再現出来ないので、あくまでも「推測」で回答すると、各ブラウザは、デフォルトスタイルと言って、もともと各HTMLタグに対して、独自のCSSのプロパティ値が設定されています。

各要素の、マージン・パディング・その他等が原因です。最初は各要素に背景色を付けて、ひとつひとつ確認する事をオススメします。

解決方法はCSSをリセットすることです。「CSS リセット」で検索して、理解を深めてみてください。

投稿2019/03/17 01:44

yoshinavi

総合スコア3521

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問