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

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

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

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

CSS

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

Q&A

解決済

1回答

1059閲覧

意図しない文章まで右側に来てしまう

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/01/28 04:26

編集2018/01/28 04:41
コード ```書籍のサンプルホームページを作っているのですが、意図しない文章まで右側にきてしまいます ・すばる ・ぐれ子 ・ねず子 の3匹のネコの文章を作っているのですが、1匹目の「すばる」の文章を画像の右側に持ってくると、2匹目の文章の一部まで右側にきてしまいます。 何故でしょうか? よろしくお願いします <h2>我が家のにゃんこ紹介</h2> <div id="subaru" class="frame"> <h3>・すばる <span class="cat-type male">(白キジトラ・オス)</span></h3> <p>目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼少期を1Kアパートで過ごしたせいか、他のネコにあまり関心がないらしく、性格はいたってマイペース。<br /> 段ボール箱のかどや柱で爪どきをするのが大好き。</p> <img src="img/cat126.jpg" width="320" height="320" alt="すばる" class="ph" /> <dl class="data"> <dt>特徴:</dt> <dd>大きな目と耳。まがったしっぽ。</dd> <dt>性格:</dt> <dd>マイペース。</dd> </dl> <p class="more"><a href="cats/subaru.html">もっとみる→</a></p> </div> <div id="gureko" class="frame"> <h3>・ぐれ子<span class="cat-type female">(灰色毛皮・メス)</span></h3> <p>生まれたての時はアメショーのような模様があったはずなのに、成長するに従ってただの灰色のネコに。長毛種の血が少し混じっているのか毛皮がフワフワしていて家族から「綿ぼこり」呼ばわりされている。<br/> しゃがれ声と貫禄のある顔つきからは想像できないほど甘え上手で、初対面でも誰彼かまわずゴロゴロ擦り寄ってくるのでお客さんにはめっぽう評判が良い。</p> <img src="img/tomDSC08406.jpg" width="320" height="320" alt="ぐれ子" /> <dl > <dt>特徴:</dt> <dd>しゃがれ声、ゴロゴロすりすり攻撃</dd> <dt>性格:</dt> <dd>甘え上手、腹黒</dd> </dl> <p class="more"><a href="cata/gureko.html">もっと見る→</a></p> </div> <div id="nezuko" class="frame"> <h3>・ねず子<span class="cat-type female">(白茶トラ・メス)</span></h3> <p>ぐれ子と共に我が家にやってきた白茶トラの女の子。ぐれ子と違って典型的な「ネコっぽい」性格。ツンデレというよりむしろツンツン(涙)。ぐれ子との勢力争いに敗北して家を追い出され、現在ほぼノラ状態。 見た目はもともと純日本猫風のキレイ系だったけど、ノラ生活中にカラスに攻撃され、片目を失う。孤高の猫</p> <img src="img/nekotodokimashita171027.jpg" width="320" height="200" alt="ねず子" /> <dl > <dt>特徴:</dt> <dd>片目、小顔</dd> <dt>性格:</dt> <dd>プライド高い、人間に対しては女王様。</dd> </dl> <p class="more"><a href="cata/nezuko.html">もっと見る→</a></p> </div> </div> ※CSS @charset "utf-8"; /*ウインドウ背景色の設定*/ body{ background-color:#fbf9cc; background-image:url(img/ameman170920008_TP_V1.jpg); background-repeat:repeat-x; } /*リンク色の設定*/ a{ color:#df4839; } a:hover{ color:#ff705b; } /*コンテンツ全体枠の設定*/ #wrap{ width:960px; margin:40px auto; padding:40px 80px; border:#f6bb9e 1px solid; background-color:#fff; } /*ページタイトルの設定*/ h1{ color:#6fbb9a; text-align:center; font-size:250%; } h1 span{ color:#d0e35b; } /*大見出しの設定*/ h2{ color:#6fbb9a; border:#94c8b1 1px dotted; border-left:#d0e35b 10px solid; padding:5px 20px; margin-bottom:0; } /*情報データ見出しの設定*/ dt{ font-weight:bold; } /*リード文領域の設定*/ #lead{ border-top:#6fbb9a 1px dotted; border-bottom:#6fbb9a 1px dotted; padding:15px; } /*「もっと見る」 リンクの設定*/ .more{ text-align:right; padding-right:20px; background-image:url(img/icon-arw01.png); background-repeat:no-repeat; background-position:right center; } /*毛皮・性別情報 (共通)*/ .cat-type{ font-size:80%; font-weight:normal; } /*性別による色分け*/ .cat-type.male{ color:#2793a7; } .cat-type.female{ color:#df972F; } /*フレームの設定*/ .frame{ margin:20px 0; padding:35px 30px 30px 30px; background-image:url(img/ameman170920008_TP_V2.jpg); background-repeat:repeat-x; background-color:#fbf9cc; } /*写真と特徴データの設定*/ .ph{ float:left; margin-right:30px; } .data{ float:left; }

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

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

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

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

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

kei344

2018/01/28 04:27

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

回答1

0

ベストアンサー

すいません。画像のサイズを修正したら正常になりました
お手数かけました

投稿2018/01/28 05:16

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問