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

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

ただいまの
回答率

88.80%

CSSでwidthが適用されません

解決済

回答 1

投稿 編集

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

lemosuke

score 13

表現したいこと

ドットインストールの実践!Webページを作ろうという講座に沿ってコードを書いていたのですが、widthで値を設定したものの適用されないので改善方法が知りたいです。

エラーメッセージ
\u8(chromeのディベロッパーツールで検証をかけた時に赤い丸とこのエラーコードが表示されました。)

該当のソースコード

   <section class="feature">
        <img src="img/feature1.png" width="420" height="270" alt="特徴1">
        <div class="desc">
          <h1>すごい特徴があるよ</h1>
          <p>色々あります。</p>
        </div>
   </section>
.feature .desc {
  width: 360px;
}
.feature:nth-of-type(odd) .desc {
  float: right;
  padding-left: 40px;
}

試したこと

googleでエラーコードを検索しても何も出てこないので、自分でコードの間違いがないかずっと確認していたのですがわからずに質問させていただきました。

補足情報(FW/ツールのバージョンなど)

atomを使っております。googleの検証ツールで確認したところwidthは780pxになっていました。(のwidthを820px,また、descの右側paddingを40pxにしたためだと思いますがなぜか360pxが適用されません。)エラーが出ている画面
![widthなどの画面](6a1293304f2952934bce59ccbcf42ad3.png)
イメージ説明

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • lemosuke

    2019/03/24 22:13 編集

    @kei334さん また、できているならばdescが図の右側に回り込むのと思うのですが、、回り込んでくれなくて

    キャンセル

  • yoshinavi

    2019/03/25 09:01

    提示のコードとキャプチャ部分とでは、場所が違うと思います。確認してみてください。

    キャンセル

  • lemosuke

    2019/03/25 13:18

    @yoshinaviさん 本当ですね、ご指摘ありがとうございます。paddingの位置だけ逆に見てもらえるとありがたいです。

    キャンセル

回答 1

checkベストアンサー

+4

提示されたHTMLに何らかの制御コードが紛れているので、そういったものが原因かと思います。
その前後を含め削除して、書き直してみてください。( 少なくとも例示した物のHTML部分に制御コードが入っていました )

【08 ‐ 通信用語の基礎知識】
https://www.wdic.org/w/ABBR/08

U+0008 ‐ Unicodeの符号位置で、制御コードの BACKSPACE

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/03/25 13:13

    backspaceが問題であることはわかりました!ありがとうございます!
    ですが、atomではspaceを開けていないのに検証ツールではspaceが空いていることになっているのですがなぜでしょうか。画像を付け加えておいたので見てもらえるとありがたいです。

    キャンセル

  • 2019/03/25 14:00

    制御コードは表示できない(が削除もされない)エディタがあり、「見た目」でわからないことが多いです。

    キャンセル

  • 2019/03/25 14:21

    新たなタブで開いたところ直りました。本当に詳しくありがとうございました。

    キャンセル

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

  • ただいまの回答率 88.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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