html・css勉強中の超初心者です。
以下のタグを使用しても画像の枠に反映されません。
id指定の仕方がそもそも間違っているのでしょうか?
どなたか教えて下さると嬉しいです。
よろしくお願いします。
●html●
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet"href="style.css"> <title>title</title> </head> <body> <div id="material-menu"> <p> <img src="../item/illust/flower1-1.jpg"> <img src="../item/illust/flower1-2.jpg"> <img src="../item/illust/flower1-3.jpg"> <img src="../item/illust/flower1-4.jpg"> <img src="../item/illust/flower1-5.jpg"> <img src="../item/illust/flower1-6.jpg"> <img src="../item/illust/flower1-7.jpg"> <img src="../item/illust/flower1-8.jpg"> <img src="../item/illust/flower1-9.jpg"> </p> </div> </body> </html>
●css●
@charset "utf-8"; * { margin: 0; padding: 0; font-weight : normal; font-style : normal; scrollbar-base-color: #fff; scrollbar-arrow-color: #ddd; scrollbar-track-color: #fff; scrollbar-highlight-color: #fff; scrollbar-shadow-color: #fff; } /* -------------------------------------------- */ /* 基本 /* -------------------------------------------- */ body { font-size : 70%; line-height : 150%; letter-spacing : 1px; background-color : #ffffff; color : #666666; text-align : center; font-family:Verdana,Chicago,osaka,sans-serif,"MS Pゴシック"; } img { border : 0; } br { letter-spacing : normal; } ul { list-style: none; } /* -------------------------------------------- */ /* アンカー /* -------------------------------------------- */ a { color : #666666; text-decoration : none; } a:hover { color : #BF817A; } /* -------------------------------------------- */ /* 見出し/段落/テキスト /* -------------------------------------------- */ h1 { font-size : 120%; font-family : "Century Gothic", "MS ゴシック", Osaka, sans-serif; letter-spacing : 3px; margin: 0; padding: 150px 0; text-align: center; } h2 { padding: 0.25em 0.5em; color: #666666; background: transparent; border-left: solid 5px #BF817A; } h3 { font-size : 120%; color: #000000; background-color:#eeeeee; display:inline; margin: 0 0 5px; } h4 { font-size : 100%; margin: 0 0 5px; } p { margin: 0 0 5px; } em{ font-weight:bold; } strong{ font-weight:bold; color : #0099cc; border-bottom : 2px solid #0099cc; } del{ text-decoration:line-through; } ins { text-decoration: underline; } .text { font-size : 100%; margin: 10px 0 15px; } .text01 { font-size : 120%; line-height : 180%; margin:10px 0 20px; } /* -------------------------------------------- */ /* 全体 /* -------------------------------------------- */ #page { margin:0 auto; width : 600px; height : auto; text-align : left; padding:10px; } /* -------------------------------------------- */ /* ヘッダー /* -------------------------------------------- */ #head { height : 300px; background :url(item/illust/top.png) no-repeat 0px 0px; background-position: center; margin:100px 0 0; } h1 a:{ color : #ffffff; } h1 a:visited { color : #ffffff; } h1 a:hover { color : #eeeeee; } /* -------------------------------------------- */ /* メニュー /* -------------------------------------------- */ #menu{ font-size : 100%; padding: 30px; } #menu ul{ list-style: none; text-align : center; } #menu li{ display: inline-block; } #menu li a { text-align: center; width: 70px; padding: 10px; } #menu a:hover { position : relative; background: #eee; color : #fff; top : 2px; } #material-menu { margin: 0px; padding: 10px; text-align: left; } #material-menu,img { border: 1px #000000 solid; } #material-menu h3 { line-height: 3em; } #material-menu p { line-height: 1em; } /* -------------------------------------------- */ /* コンテンツ /* -------------------------------------------- */ #contents { padding :200px 0 10px; } /* -------------------------------------------- */ /* フッター /* -------------------------------------------- */ #foot { padding : 20px 0; text-align : center; } #foot li{ display: inline; padding: 0 5px; } /* -------------------------------------------- */ /* リンク /* -------------------------------------------- */ ul.link01,ul.link02{ padding : 0 0 10px; } ul.link01 li{ display: inline; padding : 0 10px 5px 0; } ul.link02 li{ display: inline; } dl.link03 { clear:both; padding : 5px 0 0 0; } dl.link03 dt{ float:left; width:200px;/* 使用するバナーの横幅 */ margin:0 10px 0 0; } /* -------------------------------------------- */ /* 装飾ボックス /* -------------------------------------------- */ .box{ width :90%; padding:10px; border : 1px solid #dddddd; background-image : url(img/h2bag.gif); } /* -------------------------------------------- */ /* スクロールボックス /* -------------------------------------------- */ .about{ overflow: auto; height : 80px; width : 100%; margin: 10px 0; } /* -------------------------------------------- */ /* メールフォーム /* -------------------------------------------- */ .mail textarea,.mail input{ font-size : 100%; border : 1px solid #dddddd; margin: 2px 0; padding : 1px; } /* -------------------------------------------- */ /* 画像・テキストページメニュー /* -------------------------------------------- */ ul.sub01{ margin: 0 0 20px; } ul.sub02{ margin: 0 0 10px; } ul.sub02 li{ display: inline; padding : 0 3px 1px 0; } /* -------------------------------------------- */ /* ページトップ /* -------------------------------------------- */ .pagetop{ text-align : right; padding: 55px 0 0 ; background: url("item/illust/pageup.png") no-repeat right center; }
回答1件
あなたの回答
tips
プレビュー