BOOK Studio947
狩野祐東・狩野さやか著書

フロートについて

asked 4年 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の写真が左に寄って、その写真の右側の上から文字が表記されると思うのですが、思うように表示されません。
間違っているとしたらどこの部分なのでしょうか?

5 Answers
狩野 祐東 Staff answered 4年 ago

ゆうさんこんにちは。

ゆうさんが書かれたHTMLとCSSをコピー&ペーストしてページを作ってみたところ、すべてのダブルクオート(")を半角ダブルクオートに検索置換したら、きちんと画像にテキストが回り込むようになりました。

この掲示板はセキュリティ上直接HTMLを書き込むことができないようになっていて、ゆうさんが書かれたHTMLも、タグとして認識されないようにダブルクオートをはじめ一部の記号が投稿時に変換されます。そのためはっきりしたことはわからないのですが、imgタグの、「259」の右側と、「269」の右側のダブルクオートが正しくないように見えます。

<img src=”images/about-photo.jpg” width=”259 height=”269 alt=”店舗写真”>

ソースコードを見る限り、おそらくHTMLのタグやCSSを書き間違えているわけではなさそうなので、「一部の記号を全角で入力してしまった」か、「半角スペースを全角スペースにしてしまった」など、気づきにくい打ち間違いが原因の可能性が高いと思われます。

試してみてもし直らなければ、またご連絡いただけますか?

answered 4年 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の記述で間違いがあるから適用されないのでしょうか?

answered 4年 ago

ダブルクオートも全て検索置換して半角ダブルクオートにしましたが直りませんでした。

狩野 祐東 Staff answered 4年 ago

フロートが適用されないのはここにコピペしてある部分のhtmlとcssの記述の中で間違いがあるから適用されないのでしょうか?
それとも全体のhtmlとcssの記述で間違いがあるから適用されないのでしょうか?

必ずしも「フロートが適用されないからフロートに関係する部分が間違っている」とは限りません。

実際、ゆうさんがこのQ&Aコーナーにコピー&ペーストしたソースコードは、HTML、CSSともに間違っていません(前述のとおりダブルクォートが変換されるので、その部分だけ検索置換してファイルを作ったら、正しく表示されるのを確認しました)。

ということは、ほかの部分に間違いがあると思います。たぶん、CSSのどこかにちょっとした間違いがあるのではないでしょうか。

間違い探しには、バリデータというサービスを利用します。

HTMLバリデータ(英語ですが大体わかると思います)
https://validator.w3.org

CSSバリデータ(日本語)
https://jigsaw.w3.org/css-validator/

answered 4年 ago

直りました。ご指摘通りCSSの他の部分に間違いがありました。引き続き完成まで頑張りたいと思います。ありがとうございました。