asked 8年 ago
スラスラと進められていたんですがp178のフロートで反映されなくなってしまいました。
HTMLで、以下を記述しました。ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ
<p class=”float”><img src=”images/about-photo.jpg” width=”259″ height=”269″ alt=”店舗写真”>KUJIRA cafeは、4月18日に九寺楽町にオープンしたカフェです。立ち寄ってくださったお客様がゆったりとした時間を過ごせるような店作りを心がけています。おかげさまで開店以来多くのお客様をお迎えすることができました。地元の方が足繁く通ってくださることは、私たちにとって大きな励みになっています。また、中には遠方からはるばるいらっしゃるお客様も多く、皆様にはたいへん感謝しております。<br>
お食事は、気軽に楽しめる小ぶりの<strong>キッシュとタルト</strong>が自慢です。地元で採れた材料を中心に、できるだけ素材の味をそのまま引き出す方法で調理しています。地元産のイワシを使った自家製サーディンのキッシュ。アプリコットやリンゴをはじめ、旬の果物を使ったタルト。季節の味を楽しめるように、いつもメニューを見直し、入れ替えています。メニューの入れ替えは<a href=”index.html#news”>News</a>でお知らせします。<br>
店主は10年間イタリアのカフェ・バールで給仕したバリスタ。エスプレッソコーヒーを中心に、地元産の果物を使ったジュースからハーブティーまで、さまざまなバリエーションの飲み物をご用意しております。<br>
皆様のお越しを心よりお待ちしております。
ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ
次に、CSSで以下を記述しています。
ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ
.float img {
float: left;
padding-right: 1em;
}
ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ
jpgの写真が左に寄って、その写真の右側の上から文字が表記されると思うのですが、思うように表示されません。
間違っているとしたらどこの部分なのでしょうか？
狩野 祐東 Staff answered 8年 ago
ゆうさんこんにちは。
ゆうさんが書かれたHTMLとCSSをコピー＆ペーストしてページを作ってみたところ、すべてのダブルクオート（"）を半角ダブルクオートに検索置換したら、きちんと画像にテキストが回り込むようになりました。
この掲示板はセキュリティ上直接HTMLを書き込むことができないようになっていて、ゆうさんが書かれたHTMLも、タグとして認識されないようにダブルクオートをはじめ一部の記号が投稿時に変換されます。そのためはっきりしたことはわからないのですが、imgタグの、「259」の右側と、「269」の右側のダブルクオートが正しくないように見えます。
<img src=”images/about-photo.jpg” width=”259″ height=”269″ alt=”店舗写真”>
ソースコードを見る限り、おそらくHTMLのタグやCSSを書き間違えているわけではなさそうなので、「一部の記号を全角で入力してしまった」か、「半角スペースを全角スペースにしてしまった」など、気づきにくい打ち間違いが原因の可能性が高いと思われます。
試してみてもし直らなければ、またご連絡いただけますか？
answered 8年 ago
丁寧で分かりやすいご返信ありがとうございます。
以下の記述に直してみましたが直りません…。
HTMLで、以下を記述しました。ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ
<p class="float"><img src="images/about-photo.jpg" width="259" height="269" alt="店舗写真">KUJIRA cafeは、4月18日に九寺楽町にオープンしたカフェです。立ち寄ってくださったお客様がゆったりとした時間を過ごせるような店作りを心がけています。おかげさまで開店以来多くのお客様をお迎えすることができました。地元の方が足繁く通ってくださることは、私たちにとって大きな励みになっています。また、中には遠方からはるばるいらっしゃるお客様も多く、皆様にはたいへん感謝しております。<br>
お食事は、気軽に楽しめる小ぶりの<strong>キッシュとタルト</strong>が自慢です。地元で採れた材料を中心に、できるだけ素材の味をそのまま引き出す方法で調理しています。地元産のイワシを使った自家製サーディンのキッシュ。アプリコットやリンゴをはじめ、旬の果物を使ったタルト。季節の味を楽しめるように、いつもメニューを見直し、入れ替えています。メニューの入れ替えは<a href="index.html#news">News</a>でお知らせします。<br>
店主は10年間イタリアのカフェ・バールで給仕したバリスタ。エスプレッソコーヒーを中心に、地元産の果物を使ったジュースからハーブティーまで、さまざまなバリエーションの飲み物をご用意しております。<br>
皆様のお越しを心よりお待ちしております。</p>
ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ
次に、CSSで以下を記述しています。
ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ
.float img {
float: left;
padding-right: 1em;
}
フロートが適用されないのはここにコピペしてある部分のhtmlとcssの記述の中で間違いがあるから適用されないのでしょうか？
それとも全体のhtmlとcssの記述で間違いがあるから適用されないのでしょうか？
狩野 祐東 Staff answered 8年 ago
フロートが適用されないのはここにコピペしてある部分のhtmlとcssの記述の中で間違いがあるから適用されないのでしょうか？
それとも全体のhtmlとcssの記述で間違いがあるから適用されないのでしょうか？
必ずしも「フロートが適用されないからフロートに関係する部分が間違っている」とは限りません。
実際、ゆうさんがこのQ&Aコーナーにコピー＆ペーストしたソースコードは、HTML、CSSともに間違っていません（前述のとおりダブルクォートが変換されるので、その部分だけ検索置換してファイルを作ったら、正しく表示されるのを確認しました）。
ということは、ほかの部分に間違いがあると思います。たぶん、CSSのどこかにちょっとした間違いがあるのではないでしょうか。
間違い探しには、バリデータというサービスを利用します。
HTMLバリデータ（英語ですが大体わかると思います）
https://validator.w3.org
CSSバリデータ（日本語）
https://jigsaw.w3.org/css-validator/