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

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

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

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

HTML5

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

Q&A

解決済

2回答

1630閲覧

ホームページ作成時、画像の配置に不具合が発生

webillion

総合スコア33

CSS3

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

HTML5

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

0グッド

0クリップ

投稿2017/06/06 02:09

###前提・実現したいこと
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&copy; 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; }

###試したこと
ページの再読み込みやコードの誤りがないか確認をしました。

分かる方、ご教示お願いいたします。

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

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

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

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

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

kanimaru

2017/06/06 02:43

normalizeのCSSはどこのnormalizeを利用しているのでしょうか?
gin

2017/06/06 02:59

上記のソースコードで実際見てみましたが、特にくっついた様子はないですよ?ちゃんとmargin-top:40px;効いてます。
kanimaru

2017/06/06 03:20

css ありがとうございます。ginさんもおっしゃっていますが、Chrome,Edgeの場合は見れます。FFの場合は別の場所が崩れてます。safariはwin版ですが、崩れていません。
guest

回答2

0

ベストアンサー

とりあえず、スーパーリロードキャッシュの消去を試してみてください。

投稿2017/06/07 11:50

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

paddingしてみてはどうでしょうか。

投稿2017/06/06 02:17

koizumi

総合スコア230

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問