###前提・実現したいこと
HTML5&CSS3でホームページを作っています。
画像にマージンを設定するところでを不具合が発生しました。
下記、、マージントップを40pxに設定して40pxだけ離そうとましたが、一番大きな画像と真ん中の3つの小さい画像がくっついたままになっていまいます。
/* 「つくったもの」INDEX */ #pageBody .portfolioIndex { margin-top: 40px; }
###該当のソースコード(index.html)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ページのタイトル</title> <link rel="stylesheet" href="common/css/normalize.css"> <link rel="stylesheet" href="common/css/style.css"> </head> <body> <div id="page"> <header id="pageHead"> <h1 id="siteTitle">komorikomasha</h1> <p id="catchcopy">1人じゃできないことも、力を合わせればできる。やってみたいをカタチにする、3人の楽しいものづくり。</p> <nav class="globalNavi"> <ul> <li class="current"><a href="index.html">ホーム</a></li> <li><a href="about/index.html">わたしたちについて</a></li> <li><a href="portfolio/index.html">つくったもの</a></li> <li><a href="about/index.html">おといあわせ</a></li> </ul> </nav> </header> <div id="pageBody"> <section class="mainVisual"> <div class="mainVisualText"> <h1>Cafe Debut</h1> <p>baserCMS、カフェサイト用テーマ<br> baserCMS2012 テーマコンテスト 飲食店系テーマ賞受賞</p> </div> <img src="images/mainVisual_img_01.jpg" width="980" height="500" alt=""> </section> <section class="portfolioIndex"> <article> <a href="portfolio/03.html"><img src="portfolio/images/index_03.jpg" width="300" height="163" alt=""></a> <h2><a href="portfolio/03.html">バッタになりたい魔法使い</a></h2> <p>コモモ・ひろましゃ制作のWeb仕掛け絵本<br>合い言葉は、バッタになっちゃえ!</p> </article> <article> <a href="portfolio/02.html"><img src="portfolio/images/index_02.jpg" width="300" height="163" alt=""></a> <h2><a href="portfolio/02.html">WordPressデザインワークブック</a></h2> <p>コモモとひろましゃ二人の共著によるWordPressで本格的なウェブサイトを制作したい方向けの書籍</p> </article> <article> <a href="portfolio/01.html"><img src="portfolio/images/index_01.jpg" width="300" height="163" alt=""></a> <h2><a href="portfolio/01.html">Cafe Debut</a></h2> <p>baserCMSのカフェサイト用汎用テーマ<br>テーマコンテスト2012飲食店系テーマ賞受賞</p> </article> </section> </div> <p class="pagetop"><a href="#page">ページの先頭へ戻る</a></p> <footer id="pageFoot"> <p id="copyright"><small>Copyright© 2013 @komorikomasha All Rights Reserved.</small></p> </footer> </div> </body> </html>
###該当のソースコード(style.css)
@import url(http://fonts.googleapis.com/css?family=Antic+Didone); body { color: #333333; } /* リンク */ a { color: #999966; } a:hover { color: #996600; } /* パンくずリスト */ .topicPath { font-size: 12px; } /* ページの先頭へ戻る */ .pagetop { font-size: 12px; text-align: right; margin-top: 30px; } .pagetop a { background-image: url("../images/ico_pagetop.png"); background-repeat: no-repeat; background-position: 0 50%; padding-left: 10px; } /*ページ*/ #page { width: 980px; margin: 0 auto; } /* ページヘッダー */ #pageHead #siteTitle { font-size: 30px; line-height: 1.2; margin-bottom: 0; font-family: 'Antic Didone', serif; } #pageHead #catchcopy { font-size: 12px; line-height: 1.5; margin-top: 5px; } /* グローバルナビ */ #pageHead .globalNavi { border: solid #CCCCCC; border-width: 1px 0; padding: 10px 0; } #pageHead .globalNavi ul { margin: 0; padding: 0; } #pageHead .globalNavi ul:after { content: ""; clear: both; display: block; } #pageHead .globalNavi ul li { list-style: none; width: 245px; float: left; border-left: solid 1px #CCCCCC; padding: 0 10px; box-sizing: border-box; text-align: center; font-size: 14px; line-height: 1.429; } #pageHead .globalNavi ul li:first-child { border-left: none; } #pageHead .globalNavi ul li a { color: inherit; text-decoration: none; display: block; padding: 5px 0; } #pageHead .globalNavi ul li a:hover, #pageHead .globalNavi ul li.current a { background-color: #F2F2E5; } /*ページフッター*/ #pageFoot { border-top: solid 1px #CCCCCC; margin-top: 15px; } #pageFoot #copyright small { font-size: 12px; line-height: 1.5; } /* ページボディ */ #pageBody { margin-top: 30px; } #pageBody:after { content: ""; clear: both; display: block; } #pageBodyMain { width: 720px; float: left; } #pageBodySub { width: 220px; float: right; } /* ----- サブカラム内の装飾 ----- */ /* 見出し */ #pageBodySub h2 { font-size: 16px; line-height: 1.375; padding: 5px; margin-top: 0; border-bottom: 1px solid #CCCCCC; } /* おしらせ */ #pageBodySub .newsList ul { list-style: none; padding: 0; } #pageBodySub .newsList ul li { font-size: 12px; line-height: 1.5; margin: 10px 5px; } #pageBodySub .newsList ul li time { font-weight: bold; display: block; } /* ローカルナビ */ #pageBodySub .localNavi ul { margin: 0 0 30px; padding-left: 0; } #pageBodySub .localNavi ul li { font-size: 14px; line-height: 1.429; margin-bottom: 12px; list-style-type: none; background-image: url("../images/ico_arrow.png"); background-repeat: no-repeat; background-position: 0 8px; padding-left: 10px; } /* ----- メインカラム内の装飾 ----- */ #pageBodyMain p { font-size: 14px; line-height: 1.429; } /* リスト */ #pageBodyMain ul li { font-size: 14px; list-style-type: square; line-height: 1.429; } /* 表 */ #pageBodyMain table { font-size: 14px; line-height: 1.429; border: 1px solid #CCCCCC; border-collapse: collapse; width: 100%; } #pageBodyMain table th, #pageBodyMain table td { border: 1px solid #CCCCCC; padding: 5px 10px; } #pageBodyMain table th { background-color: #EEEEEE; text-align: left; } #pageBodyMain table caption { text-align: left; font-weight: bold; } /* 図版 */ #pageBodyMain figure { margin: 0; } /* 画像キャプション */ #pageBodyMain figcaption { font-size: 12px; } /* 見出し */ #pageBodyMain .pageTitle { font-size: 26px; background-color: #F2F2E5; padding: 5px 15px; line-height: 1.231; margin-top: 0; } #pageBodyMain .heading-typeA { font-size: 18px; color: #349FA6; border-bottom: solid 1px #349FA6; padding: 5px; line-height: 1.333; } #pageBodyMain .heading-typeB { font-size: 16px; border-left: 5px solid #E3E4D9; padding-left: 10px; line-height: 1.375; } #pageBodyMain .heading-typeC { font-size: 14px; line-height: 1.429; } /* 区切り線・余白 */ #pageBodyMain .articleDetailHead { border-bottom: solid 1px #CCCCCC; margin-bottom: 30px; padding-bottom: 15px; } #pageBodyMain .articleDetailFoot { border-top: solid 1px #CCCCCC; margin-top: 30px; padding-top: 15px; } #pageBodyMain .articleDetailBody section { margin: 30px 0; } /* 撮影情報 */ #pageBodyMain .creditUnit { padding: 10px; border: solid 1px #CCCCCC; } #pageBodyMain .creditUnit p { font-size: 12px; line-height: 1.5; } /* センター寄せ画像 */ #pageBodyMain .imageCenter { text-align: center; border-bottom: 1px dotted #CCCCCC; padding-bottom: 30px; margin: 30px 0; } /* 「おといあわせフォーム」ボタン */ #pageBodyMain .btn { text-align: center; padding-bottom: 20px; margin: 30px 0; border-bottom: 1px dotted #CCCCCC; } #pageBodyMain .btn a { font-size: 18px; font-weight: bold; text-decoration: none; color: #FFFFFF; background-color: #058BA9; padding: 10px 20px; border-radius: 5px; background-image: linear-gradient(to bottom, #92CDDB, #058BA9); border: 1px solid #058BA9; box-shadow: 1px 1px 0 #9DDDED inset; text-shadow: 0px -1px 0 #333333; display: inline-block; } #pageBodyMain .btn a:hover { opacity: 0.7; } /* --「つくったもの」一覧ページ-- */ #pageBodyMain .articleList { border: solid 1px #CCCCCC; margin-bottom: 30px; } #pageBodyMain .articleList a { display: block; padding: 10px; color: inherit; text-decoration: none; } #pageBodyMain .articleList a:after { content: ""; clear: both; display: block; } #pageBodyMain .articleList a:hover { opacity: 0.7; } #pageBodyMain .articleList a .articleListText { width: 370px; float: right; } #pageBodyMain .articleList a .articleListText h1 { font-size: 26px; line-height: 1.308; } #pageBodyMain .articleList a .articleListText p { font-size: 14px; line-height: 1.429; } #pageBodyMain .articleList a .articleListImage { width: 300px; float: left; } #pageBodyMain .articleList a .articleListImage img { vertical-align: bottom; } /* ----- トップページの内容 ----- */ /* メインビジュアル */ #pageBody .mainVisual { position: relative; } #pageBody .mainVisual img { vertical-align: bottom; } #pageBody .mainVisual .mainVisualText { position: absolute; left: 50px; bottom: 50px; color: #FFF; background-color: rgba(0,0,0,0.4); width: 400px; padding: 15px 25px; box-sizing: border-box; } #pageBody .mainVisual .mainVisualText h1 { font-size: 26px; line-height: 1.231; margin: 0; } #pageBody .mainVisual .mainVisualText p { font-size: 12px; line-height: 1.5; margin-bottom: 0; } /* 「つくったもの」INDEX */ #pageBody .portfolioIndex { margin-top: 40px; } #pageBody .portfolioIndex:after { content: ""; clear: both; display: block; } #pageBody .portfolioIndex article { width: 300px; float: left; margin-left: 40px; } #pageBody .portfolioIndex article:first-child { margin-left: 0; } #pageBody .portfolioIndex article h2 { font-size: 18px; margin: 5px 0; } #pageBody .portfolioIndex article p { margin-top: 0; font-size: 12px; line-height: 1.5; }
###試したこと
ページの再読み込みやコードの誤りがないか確認をしました。
分かる方、ご教示お願いいたします。
normalizeのCSSはどこのnormalizeを利用しているのでしょうか?
上記のソースコードで実際見てみましたが、特にくっついた様子はないですよ?ちゃんとmargin-top:40px;効いてます。
http://necolas.github.io/normalize.css/ ここのnormalizeのCSSを使用しています。
css ありがとうございます。ginさんもおっしゃっていますが、Chrome,Edgeの場合は見れます。FFの場合は別の場所が崩れてます。safariはwin版ですが、崩れていません。
回答2件
あなたの回答
tips
プレビュー