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

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

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

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

CSS

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

Q&A

解決済

1回答

631閲覧

css内で、id指定した部分のみ画像の枠線を表示したい。

aazzkk

総合スコア15

HTML5

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

CSS

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

0グッド

0クリップ

投稿2018/01/03 06:19

編集2018/01/03 09:10

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; }

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

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

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

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

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

kei344

2018/01/03 06:20

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

2018/01/03 09:06

コードブロックにはコード/エラーのみを入れるようにしてください。文章はコードブロック外にあるほうが読みやすいです。また、コードブロックは複数使うことも出来るので、CSSとHTMLを分けてください。
guest

回答1

0

ベストアンサー

画像の枠に反映されません。

CSS

1/* ここに全角の空白がある*/border: 1px #000000 solid; 2```**動くサンプル:**[https://jsfiddle.net/gxksh2p8/](https://jsfiddle.net/gxksh2p8/) 3 4--- 5 6ちなみに `#material-menu,img` は `material-menu` というIDが付いている要素 **と** img要素の両方に適用するという意味になるので、`material-menu` というIDが付いている要素の中のimg要素であれば、`#material-menu img` と書きます。 7 8【CSSのセレクタとは?覚えておきたい25種類と書き方】 9[https://saruwakakun.com/html-css/reference/selector](https://saruwakakun.com/html-css/reference/selector)

投稿2018/01/03 06:46

kei344

総合スコア69364

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

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

aazzkk

2018/01/03 08:39

全角スペースを修正してみましたが、直りませんでした。 ちなみに、css内の基本の設定でimg {border:0;としているのですが、関係があるのでしょうか…。
kei344

2018/01/03 08:46

「動くサンプル」は確認されましたか?提示のHTMLとCSSで全角部分だけ修正しています。「基本の設定」は提示されていないため、問題かどうかすら確認できません。
aazzkk

2018/01/03 09:06

html、css全文載せさせていただきました。 よろしくお願いいたします。 動くサンプルは確認させていただいております。
aazzkk

2018/01/03 09:59

色々とありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問