###前提・実現したいこと
CSSで画像のサイズなどを変更したいのですが、反映されません。
###該当のソースコード
HTML
骨まで柔らかく溶けている気さえする。</p>
<p="hana"><img src="img/hana.jpg"></p>
<p>冬の間は、細胞ひとつひとつまで寒さに対してずっと緊張していたに違いない。<br> それが緩みことで、熱湯をかけたインスタントラーメンのような状態になっているのだ。<br> 頭にチューリップが咲いている。<br>CSS
しゃーぷhana {
width : 200px ;
height : auto ;
float : left ;
}
しゃーぷは#です。
間違いをしてください。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。コードブロック内では「#」も使えます。
回答1件
0
ベストアンサー
css
1#hana { 2}
にするなら、
html
1<p="hana"><!--間違い--> 2<p id="hana"><!--正しい-->
因みに、id=""は、「#」、class=""は、「.」を付けること。
投稿2017/12/09 23:54
総合スコア179
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/10 00:48
やってみたんですが、やっぱり反応されませんでした。。
2017/12/10 01:34
<head>〜</head>の中に
<link rel="stylesheet" href="style.css">
↑
これを入れてありますか?
入れてあっても、反映されないなら、パスに間違いがないか?確認してください。
2017/12/10 16:29
はいそれは入れてあります。
cssはこんな感じです。他の要素はちゃんと反映されてます。
何か間違っていますか?
body {
mardin : 0px ;
padding : 0px ;
}
#container {
width : 700px ;
height : 100% ;
margin : 0px auto ;
header {
height: 100px;
width:700px;
background-color: green ;
margin : 0px auto ;
font-family : MS UI Gothic ;
}
header, nav h3, footer {color : white ; }
a:link { color : #FFFFE0 ; }
a:visited {color : skyblue ; }
header h1 {
text-align : center ;
padding-top :20px ;
margin : 0px ;
text-shadow : 3px 3px 5px rgba(0,0,0,5);
}
header h3 {
text-align :center ;
margin : 0px ;
font-size : 8pt ;
}
#sidebar {
width: 200px ;
height: 100% ;
background-color: blue ;
float: left;
}
nav {
padding-left : 20px ;
}
ul {
color : white ;
list-style-image : url() ;
}
#main {
width: 500px ;
height: 100% ;
background-color: orange ;
float: right ;
overflow: scroll;
}
#hana {
width : 200px ;
height : auto ;
float : left ;
}
section header {
margin : 0px ;
padding-top : 30px ;
padding-left : 30px ;
padding-right : 30px ;
background-color : transparent ;
}
section h2 { font-size : xx-large ; }
article {
margin : 30px ;
padding : 10px ;
background-color : pink ;
}
article h3 {
color : #DC143C ;
text-align : right ;
}
article p { text-indent : 1em ; }
img {
.hana { width : 200px ;
height : auto ;
float : left ;
}
#profile {
width : 100px ;
height : auto ;
float : left ;
}
footer {
width : 700px ;
height : 50px ;
margin : 0px ;
background-color : green ;
float: left;
text-align : center ;
}
2017/12/11 23:07
解決されているようですが、掲示して頂いたcssを見ますと、「#container」の所の「}」閉じ括弧がありません。
忘れずに閉じましょう。
2017/12/13 09:36
body {
mardin : 0px ;
padding : 0px ;
}
#container {
width : 700px ;
height : 100% ;
margin : 0px auto ;
}
header {
height: 100px;
width:700px;
background-color: green ;
margin : 0px auto ;
font-family : MS UI Gothic ;
}
header, nav h3, footer {color : white ; }
a:link { color : #FFFFE0 ; }
a:visited {color : skyblue ; }
header h1 {
text-align : center ;
padding-top :20px ;
margin : 0px ;
text-shadow : 3px 3px 5px rgba(0,0,0,5);
}
header h3 {
text-align :center ;
margin : 0px ;
font-size : 8pt ;
}
#sidebar {
width: 200px ;
height: 100% ;
background-color: blue ;
float: left;
}
nav {
padding-left : 20px ;
}
ul {
color : white ;
list-style-image : url() ;
}
#main {
width: 500px ;
height: 100% ;
background-color: orange ;
float: right ;
overflow: scroll;
}
#hana {
width : 200px ;
height : auto ;
float : left ;
}
section header {
margin : 0px ;
padding-top : 30px ;
padding-left : 30px ;
padding-right : 30px ;
background-color : transparent ;
}
section h2 { font-size : xx-large ; }
article {
margin : 30px ;
padding : 10px ;
background-color : pink ;
}
article h3 {
color : #DC143C ;
text-align : right ;
}
article p { text-indent : 1em ; }
img {
#hana { width : 200px ;
height : auto ;
float : left ;
}
#profile {
width : 100px ;
height : auto ;
float : left ;
}
footer {
width : 700px ;
height : 50px ;
margin : 0px ;
background-color : green ;
float: left;
text-align : center ;
}
}を閉じました。
それから
htmlも掲示します。
<html>
<head>
<title>ノマドの森</title>
</head>
<link rel="stylesheet" href="css.css">
<body>
<div id="container">
<header>
<hgroup>
<h1>ノマドの森</h1>
<h3>平凡な男の日常</h3>
</hgroup>
</header>
<div id="sidebar">
<nav>
<h3>Menu</h3>
<ul>
<li><a href="index.html">Daily</a></li>
<li><a href="gallery01.html"><li>Gallery01</a></li>
<ul>
<li><a href="gallery01.html#秋桜">秋桜</a></li>
<li><a href="gallery01.html#花畑">花畑</a></li>
</ul>
<li><a href="gallery02.html">Gallery02</a></li>
<li><a href="gallery03.html">Gallery03</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="mailto:shigotoportfolio@gmail.com">お問い合わせ</a></li>
</ul>
</nav>
</div>
<div id="main">
<section>
<header>
<h2>daily</h2>
<p>日常のあれこれを取り留めもなく書き散らかしています。</p>
</header>
<article>
<h3>春眠</h3>
<p><a href="http://kotowaza-allguide.com/si/syunminakatsuki.html" target="_blank">春眠</a>とはよく言ったもので、何をどうやってても眠い。<br>
水道の水で顔をばしゃばしゃ洗ってみたし、二階に上がって、背伸びや体操もしてみた。
会社の周りを一週歩いてもみた。<br>
ダメだった。<br>
<i>どろどろなのだ。</i><br>
脳みそどろどろ。筋肉どろどろ。<br>
骨まで柔らかく溶けている気さえする。</p>
<p id="hana"><img src="img/hana.jpg"></p>
<p>冬の間は、細胞ひとつひとつまで寒さに対してずっと緊張していたに違いない。<br>
それが緩みことで、熱湯をかけたインスタントラーメンのような状態になっているのだ。<br>
頭にチューリップが咲いている。<br>
だから、「春眠」というシャキっとした響きよりも、はるねむというだらしない響きがフィットする。</p>
<p>張るねむさい好調は、通勤時の電車の中。<br>
このままずーーーーっとねてやろうかと思うのだが、悲しいことに鹿児島本線。<br>
寝てしまうと、起きたら熊本だ。<br>山手線や、大阪環状線ならこのまま寝ててやるところなのだが。<br>いや、いっそ熊本へ行ってやろうか…。</p>
<p>でお、でもよぉ…後、100ページは書かなきゃいけない。<br>
そうだったそうだった。<br>
どろどろじゃ困るんだよ。</p>
<article>
</article>
<article>
</article>
</section>
</div>
<footer>
<strong>2013 Studio Nomade All Rights Reserved.</strong>
</footer>
</div>
</body>
</html>
やはりダメでした。
もしおかしいところがありましたら指摘していただければありがたいです。
2017/12/13 13:26
htmlコードに間違えている箇所が、あります。
誤→<li><a href="gallery01.html"><li>Gallery01</a></li>
正→<li><a href="gallery01.html">Gallery01</a></li>
もう1つは、閉じタグがありません。
誤
↓
<p>でお、でもよぉ…後、100ページは書かなきゃいけない。<br>
そうだったそうだった。<br>
どろどろじゃ困るんだよ。</p>
<article>
</article>
・
・
・
正
↓
<p>でお、でもよぉ…後、100ページは書かなきゃいけない。<br>
そうだったそうだった。<br>
どろどろじゃ困るんだよ。</p>
</article><!-- ここに閉じタグを入れる --->
<article>
</article>
・
・
・
それと、CSSも間違えていますね。
body { }の中にある「mardin」が、間違い。
「margin」が正しい。
#main { }の中にある「overflow: scroll;」は、要らない。
ない方が、見た目が綺麗に揃えれます。
右側のカラムの背景色はピンク色で明るい色になっているため、「春眠とは・・・」の「春眠」が見にくいので、紺色系や灰色系や黒色などの暗めのリンク色にした方がいいです。
#container { }
#sidebar { }
#main { }
↑
これらの中に「height: 100% ;」がありますが、それを入れてもブラウザの下まで表示にはなりません。
#hana { }
#hana { }
#profile { }
↑
これらの中に「height: auto ;」がありますが、デフォルトのheightは「auto」になっているので、入れても意味がありません。
あと、CSSの中に中途半端なのがあります。
「img {」が原因であとに続く
#hana { }
#profile { }
footer { }
の3つが無効になってしまっています。
2017/12/14 19:18
いつもありがとうございます。
修正してみましたがダメでした。
<html>
<head>
<title>ノマドの森</title>
</head>
<link rel="stylesheet" href="css.css">
<body>
<div id="container">
<header>
<hgroup>
<h1>ノマドの森</h1>
<h3>平凡な男の日常</h3>
</hgroup>
</header>
<div id="sidebar">
<nav>
<h3>Menu</h3>
<ul>
<li><a href="index.html">Daily</a></li>
<li><a href="gallery01.html">Gallery01</a></li>
<ul>
<li><a href="gallery01.html#秋桜">秋桜</a></li>
<li><a href="gallery01.html#花畑">花畑</a></li>
</ul>
<li><a href="gallery02.html">Gallery02</a></li>
<li><a href="gallery03.html">Gallery03</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="mailto:shigotoportfolio@gmail.com">お問い合わせ</a></li>
</ul>
</nav>
</div>
<div id="main">
<section>
<header>
<h2>daily</h2>
<p>日常のあれこれを取り留めもなく書き散らかしています。</p>
</header>
<article>
<h3>春眠</h3>
<p><a href="http://kotowaza-allguide.com/si/syunminakatsuki.html" target="_blank">春眠</a>とはよく言ったもので、何をどうやってても眠い。<br>
水道の水で顔をばしゃばしゃ洗ってみたし、二階に上がって、背伸びや体操もしてみた。
会社の周りを一週歩いてもみた。<br>
ダメだった。<br>
<i>どろどろなのだ。</i><br>
脳みそどろどろ。筋肉どろどろ。<br>
骨まで柔らかく溶けている気さえする。</p>
<p id="hana"><img src="img/hana.jpg"></p>
<p>冬の間は、細胞ひとつひとつまで寒さに対してずっと緊張していたに違いない。<br>
それが緩みことで、熱湯をかけたインスタントラーメンのような状態になっているのだ。<br>
頭にチューリップが咲いている。<br>
だから、「春眠」というシャキっとした響きよりも、はるねむというだらしない響きがフィットする。</p>
<p>張るねむさい好調は、通勤時の電車の中。<br>
このままずーーーーっとねてやろうかと思うのだが、悲しいことに鹿児島本線。<br>
寝てしまうと、起きたら熊本だ。<br>山手線や、大阪環状線ならこのまま寝ててやるところなのだが。<br>いや、いっそ熊本へ行ってやろうか…。</p>
<p>でお、でもよぉ…後、100ページは書かなきゃいけない。<br>
そうだったそうだった。<br>
どろどろじゃ困るんだよ。</p>
</article>
<article>
</article>
<article>
</article>
</section>
</div>
<footer>
<strong>2013 Studio Nomade All Rights Reserved.</strong>
</footer>
</div>
</body>
</html>
cssは次の通りです。
body {
margin : 0px ;
padding : 0px ;
}
#container {
width : 700px ;
height : 100% ;
margin : 0px auto ;
}
{
header {
height: 100px;
width:700px;
background-color: green ;
margin : 0px auto ;
font-family : MS UI Gothic ;
}
header, nav h3, footer {color : white ; }
a:link { color : #FFFFE0 ; }
a:visited {color : skyblue ; }
header h1 {
text-align : center ;
padding-top :20px ;
margin : 0px ;
text-shadow : 3px 3px 5px rgba(0,0,0,5);
}
header h3 {
text-align :center ;
margin : 0px ;
font-size : 8pt ;
}
#sidebar {
width: 200px ;
height: 100% ;
background-color: blue ;
float: left;
}
nav {
padding-left : 20px ;
}
ul {
color : white ;
list-style-image : url() ;
}
#main {
width: 500px ;
height: 100% ;
background-color: orange ;
overflow: scroll;
float: right ;
}
section header {
margin : 0px ;
padding-top : 30px ;
padding-left : 30px ;
padding-right : 30px ;
background-color : transparent ;
}
section h2 { font-size : xx-large ; }
article {
margin : 30px ;
padding : 10px ;
background-color : pink ;
}
article h3 {
color : #DC143C ;
text-align : right ;
}
article p { text-indent : 1em ; }
#hana { width : 200px ;
height : auto ;
float : left ;
}
#profile {
width : 100px ;
height : auto ;
float : left ;
}
img {
width : 400px ;
height : auto ;
}
footer {
width : 700px ;
height : 50px ;
margin : 0px ;
background-color : green ;
float: left;
text-align : center ;
}
これはホームページ政策教則本の例題なんですが、全てのコードが書いてあるわけではないので、推測しながら打ち込んでいます。
#hana
の画像を指定のサイズに変更して文字を回り込ませるのが目的です。
よろしかったらご指摘お願いします。
2017/12/15 00:15
コメントで出ている部分に限って言えば、CSSの #container と header の間に余計な { があること、#hanaのwidthが200pxなのに対し、imgが400pxあることが気になります。
{ を削除し、imgのwidthを変更して調整してみてください。
2017/12/15 04:30
「header {」があるところの前行に「{」が残っており、header{ }以降のcssが読み込まれなくなっていますので「{」を削除して下さい。
あと、画像のサイズが大きい。
Google chromeのデベロッパーツールで見てみると、ピンク色のボックスの幅は、424px相当の幅になっている。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。