ここから本文です

HTML5とCSSについての質問です。 画像を参照して下さい。 初心者で、本を見...

kaerun2434さん

2015/3/1118:11:47

HTML5とCSSについての質問です。
画像を参照して下さい。
初心者で、本を見ながらしてるのですが、画像2つとお知らせのスクロールバーを横一列に並べたいのですが、スクロールバーだけ動きません。

どうすれば横一列になりますでしょうか?

下記にHTMLと該当部分のCSSを記述します。

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">小柳農園 boucle d'oreille</h1>
<p id="catchcopy"></p>
<nav class="globalnavi">
<ul>
<li><a href="index.html.html">ホーム</a></li>
<li><a href="about/index.html.html">私達について</a></li>
<li><a href="portfolio/index.html.html">オンラインショップ</a></li>
<li><a href="contact/index.html.html">アクセス</a></li>
<li><a href="../contact/index.html.html">おといあわせ</a></li>
</ul>
</nav>
</header>

<div id="pagebody">
<section class="mainvisual">
<div class="mainvisualtext">
<h1>今月の小柳農園の風景</h1>
</div>
<img src="images/mainvisual_img_01.jpg" width="980" height="500" alt="">
</section>

<section class="mainpageindex">
<article>
<img src="images/mainpage_img_01.jpg" alt="" width="350" height="220">
<h3>新潟の特産品 西洋梨のル・レクチエ</h3>
</article>
<article>
<img src="images/mainpage_img_02.jpg" alt="" width="350" height="220">
<h3>ブルーベリー</h3>
</article>
<article>
<style type="text/css">
.box_srcollbar {
overflow:auto;
width:200px;
height:200px;
padding:5px;
border:1px solid #000;
background-color:#F9F9F9;
color:#000;
font-size:12px;
}
.box_title{
border:1px solid #000;
padding:5px;
width:200px;
font-weight:bold;
font-size:14px;
background-color:#000;
color:#fff;
}
</article>
</style>

<div class="box_title">農園からのお知らせ</div>
<div class="box_srcollbar">
10/06 ■■■■■■が再入荷しました。<br>
10/05 ○○○を追加しました。<br>
10/04 ■■■ を追加しました。<br>
10/03 ○○■■■○が再入荷しました。<br>
10/02 ○■■■■■■○○が再入荷しました。<br>
10/01 ○○○が再入荷しました。<br>
09/28 ○○■■○■■■が再入荷しました。<br>
09/25 ○○○■■■を追加しました。<br>
09/23 ○○○■■■■■を追加しました。<br>
09/22 ○○○■■■を追加しました。<br>
09/20 ○○■■■■○■■■を追加しました。<br>
09/18 ○○■■○■■■を追加しました。<br>
09/17 ○■■○○■■■を追加しました。<br>
</div>
</article>
</section>

</div>



<footer id="pagefoot">
<p id-"copyright"><small>copyright&copy; 2014 @koyanaginouen all rights reserved.</small></p>
</footer>
</div>

</body>
</html>



CSS

/* メインインデックス */

#pagebody .mainpageindex {
margin-top: 40px;
}

#pagebody .mainpageindex:after {
content:"";
clear: both;
display: block;
}

#pagebody .mainpageindex article {
float: left;
margin-left: 40px;
}

#pagebody .mainpageindex article:first-child {
margin-left: 0;
}

補足試しにスクロールボックスを一番左にしてみたら、スクロールボックスと洋梨は横に並びましたが、ブルーベリーの画像だけ動きませんでした。

article&amp;gt,br&amp;gt,li&amp;gt,pagebody,div&amp;gt,style&amp;gt,style.css

閲覧数:
130
回答数:
2
お礼:
500枚

違反報告

ベストアンサーに選ばれた回答

2015/3/1200:51:31

×
color:#fff;
}
</article>
</style>


color:#fff;
}
</style>
</article>

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

質問した人からのコメント

2015/3/13 15:18:08

sitakirisuzume567さんの言われたとおりに
提示した(修正した)ソースのみでtest.htmlも作ってみて確認しました。
提示されていない部分のcssが原因となっていたみたいです。

みなさん、ご丁寧に回答していただきありがとうございました。

ベストアンサーは解決のきっかけを下さったsitakirisuzume567さんでお願いいたします。

ベストアンサー以外の回答

1〜1件/1件中

htmlcfさん

2015/3/1122:08:48

おそらくですがもうひとつCSSファイルがあると思います。

そちらの設定がどうなっているかわからないのでなんとも言えません。

style.cssかな?

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

5文字以上入力してください

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。