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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

332閲覧

CSSで指定しても画像のサイズや回り込みが反映されない

portfolio

総合スコア13

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2017/12/09 23:07

###前提・実現したいこと
CSSで画像のサイズなどを変更したいのですが、反映されません。

###該当のソースコード

HTML

骨まで柔らかく溶けている気さえする。</p>

<p="hana"><img src="img/hana.jpg"></p>

<p>冬の間は、細胞ひとつひとつまで寒さに対してずっと緊張していたに違いない。<br> それが緩みことで、熱湯をかけたインスタントラーメンのような状態になっているのだ。<br> 頭にチューリップが咲いている。<br>

CSS

しゃーぷhana {
width : 200px ;
height : auto ;
float : left ;
}

しゃーぷは#です。

間違いをしてください。

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

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

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

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

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

kei344

2017/12/10 03:42

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

回答1

0

ベストアンサー

css

1#hana { 2}

にするなら、

html

1<p="hana"><!--間違い--> 2<p id="hana"><!--正しい-->

因みに、id=""は、「#」、class=""は、「.」を付けること。

投稿2017/12/09 23:54

amaryllis

総合スコア179

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

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

portfolio

2017/12/10 00:48

やってみたんですが、やっぱり反応されませんでした。。
amaryllis

2017/12/10 01:34

<head>〜</head>の中に <link rel="stylesheet" href="style.css"> ↑ これを入れてありますか? 入れてあっても、反映されないなら、パスに間違いがないか?確認してください。
portfolio

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

2017/12/11 23:07

解決されているようですが、掲示して頂いたcssを見ますと、「#container」の所の「}」閉じ括弧がありません。 忘れずに閉じましょう。
portfolio

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> やはりダメでした。 もしおかしいところがありましたら指摘していただければありがたいです。
amaryllis

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つが無効になってしまっています。
portfolio

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 の画像を指定のサイズに変更して文字を回り込ませるのが目的です。 よろしかったらご指摘お願いします。
dit.

2017/12/15 00:15

コメントで出ている部分に限って言えば、CSSの #container と header の間に余計な { があること、#hanaのwidthが200pxなのに対し、imgが400pxあることが気になります。 { を削除し、imgのwidthを変更して調整してみてください。
amaryllis

2017/12/15 04:30

「header {」があるところの前行に「{」が残っており、header{ }以降のcssが読み込まれなくなっていますので「{」を削除して下さい。 あと、画像のサイズが大きい。 Google chromeのデベロッパーツールで見てみると、ピンク色のボックスの幅は、424px相当の幅になっている。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問