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

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

ただいまの
回答率

91.26%

  • HTML

    6432questions

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

  • CSS

    4059questions

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

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 121

portfolio

score 5

前提・実現したいこと

CSSで画像のサイズなどを変更したいのですが、反映されません。

該当のソースコード

HTML

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

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

CSS

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

しゃーぷは#です。

間違いをしてください。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/12/10 12:42

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

    キャンセル

回答 1

checkベストアンサー

+3

#hana {
}


にするなら、

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


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/10 09:48

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

    キャンセル

  • 2017/12/10 10:34

    <head>〜</head>の中に
    <link rel="stylesheet" href="style.css">

    これを入れてありますか?

    入れてあっても、反映されないなら、パスに間違いがないか?確認してください。

    キャンセル

  • 2017/12/11 01: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/12 08:07

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

    キャンセル

  • 2017/12/13 18: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 22: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/15 04: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 09:15

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

    キャンセル

  • 2017/12/15 13:30

    「header {」があるところの前行に「{」が残っており、header{ }以降のcssが読み込まれなくなっていますので「{」を削除して下さい。

    あと、画像のサイズが大きい。
    Google chromeのデベロッパーツールで見てみると、ピンク色のボックスの幅は、424px相当の幅になっている。

    キャンセル

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

ただいまの回答率

91.26%

関連した質問

同じタグがついた質問を見る

  • HTML

    6432questions

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

  • CSS

    4059questions

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