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

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

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

これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

HTML

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

Q&A

解決済

3回答

350閲覧

floatプロパティの解除がうまくできない

nagareboshi

総合スコア15

float(CSS)

これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

HTML

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

0グッド

0クリップ

投稿2019/04/22 07:31

編集2019/04/22 08:19

前提・実現したいこと

前回もこちらにて質問させていただきました!

HTMLの基礎を学んでいる初心者です。
参考書に沿って入力して制作している途中です。
前回はエラーが発生しなかったのですが、
制作を進めている途中で正常に表示されなかったものが出てきたので、
こちらに質問いたしました。

発生している問題・エラーメッセージ

プロフィールページの制作をしている部分でエラーが出ました。

ぺージ内にsection要素2つを作成し、
1つはプロフィール
2つは経歴のセクション
1と2の間にプロフィール画像を挟んでいます。

1のsection要素(プロフィール)の横に画像を配置するために、
floatで右側に配置するのですが、floatですと画像の下に続くすべてのテキストが、
くっついてきてしまうので、これを解除する作業を行いました。

ここがうまくできません(泣)。
参考書の方法でやるとうまく配置できるはずなのですが、
画像がHPの右下に配置?落ちている状態で表示されます。
section要素(プロフィール)の横に画像を配置するようにしたいです。

どうしてもわからないので、
お手数ですがご教示いただけますと幸いです。
何卒よろしくお願いいたします。

該当のソースコード

コードを入力し直しいたしました。
下記が参考書通りに入力したコードになります。

↓HTMLです。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>About 風景写真家「SNAPPERS」</title> <link href="css/style.css" rel="stylesheet"> </head> <body id="about"> <header> <div class="logo"> <a href="index.html"></a><img src="images/logo.png" alt="SNAPPERS"> </div> <nav> <ul class="global-nav"> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrap"> <div class="content"> <div class="main-center"> <h1>About</h1> <p>SNAPPERS代表、山田太郎のプロフィールや経歴の紹介ページです。</p> <section class="profile clearfix"> <div class="profile-txt"> <h2 class="icon">Profile</h2> <p><span>SNAPPERS 代表:山田太郎</span><br>アナログ、デジタルを問わず、トイカメラやポラロイド、ビデオカメラに至るまで、あらゆるカメラに夢中になって遊んでいるうちに自然とカメラマンとしての道を志すようになる。<br>大学卒業後、有名カメラマンのアシスタントを得て渡米。世界各国を放浪しながら撮影をする中で、現在のアウトドアカメラとしてのスタイルを確立する。2016年に帰国し、「SNAPPERS」を設立。<br>現在は、雑誌の表紙やカタログの撮影を中心に、映像作品などにもカメラマンとして参加するなど幅広く活躍している。</p> </div> </section> <img src="images/about-profile.png" alt="山田太郎のプロフィール" class="profile-image"> <section class="career"> <h2 class="icon">Career and job history</h2> <table> <tr> <th>1994年3月</th> <td>丸三角芸術大学写真家 卒業 服部写真家研究所に入社、服部英明氏に師事</td> </tr> <tr> <th>2002年3月</th> <td>服部写真研究所を退社し渡米、世界各国を放浪しながら撮影を続ける</td> </tr> <tr> <th>2012年8月</th> <td>イタリア・ミラノで開催されたコンクールにて、審査委員特別賞受賞</td> </tr> <tr> <th>2016年1月</th> <td>帰国し「SNAPPERS」を設立</td> </tr> <tr> <th>2016年4月</th> <td>Aichi Musiumにて初の写真展「Snap!Snap!」を開催</td> </tr> </table> </section> </div> </div> </div> <footer> <small>(c)2017 hattori-studio.</small> </footer> </body> </html>

↓CSSです。

@charset "utf-8"; body { margin: 0; padding: 0; background-color: #cccccc; color: #333333; font-size: 15px; line-height: 2; } p,h1,h2,h3,h4,h5,h6{ margin-top: 0; } img { vertical-align: bottom; } ul { margin: 0; padding: 0; } a { color: #3583aa; text-decoration: none; } a:visited { color: #788d98; } a:hover { text-decoration: underline; } header { width: 960px; height: 100px; margin: 0 auto; } .logo { float: left; margin-top: 50px; } .global-nav { float: right; margin-top: 60px; } .global-nav li { float: left; margin: 0 20px; font-size: 20px; list-style: none; font-family: 'Bitter', serif; } .global-nav li a { color: #ffffff; } .global-nav li a:hover { border-bottom: 2px solid #ffffff; padding-bottom: 3px; text-decoration: none; } #wrap { clear: both; background-color: #ffffff; margin-top: 220px; padding: 35px 0; } .content { width: 960px; margin: 0 auto; } footer { text-align: center; color: #ffffff; padding: 20px 0; } footer small { font-size: 12px; } #index h1 { font-size: 100px; line-height: 1; color: #ffffff; font-family: 'Bitter', serif; margin-bottom: 50px } #index .content { margin-top: 150px } #index p { font-size: 16px; color: #ffffff } .btn a { background-color: #009cd3; color: #ffffff; font-size: 20px; font-family: 'Bitter', serif; width: 185px; display: block; text-align: center; line-height: 50px; margin-top: 20px; border-radius: 5px; border: 3px solid #009cd3; } .btn a:hover { text-decoration: none; background-color: #ffffff; color: #009cd3; } #index footer { width: 960px; margin: 150px auto 0px auto; text-align: left; } #index { background-image: url(../images/bg-index.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; } #about { background-image: url(../images/bg-about.jpg); background-repeat: no-repeat; background-position: center top; background-attachment: fixed; background-size: 100% auto; } .main-center { width: 940px; margin: 0 auto; } h1 { font-family: 'Bitter',sreif; font-size: 36px; border-bottom: 1px solid #cccccc; } h2 { font-family: 'Bitter',sreif; font-size: 24px; } .icon:before { content: ""; padding-right: 10px; border-left: 7px solid #9cb4a4; } #about .profile-txt { width: 540px; float: left; } #about .profile-txt span { font-weight: bold; } /* ここで画像を右側に配置指定 */ #about .profile-image { float: right; } /* ここでfloatで起きたレイアウト崩れを解除 */ .clearfix:after { content: ""; display: block; clear: both; } section { margin-bottom: 35px;

HTMLの名称も追加しておきます。

TOPぺージ : index.html
プロフィールページが : about.html

補足情報

何か他に必要な情報がございましたら、
お伝えいただけますと幸いです。
よろしくお願いいたします。

お礼

こんな初歩的なご質問で申し訳ございませんでした。
無事解決いたしました。

ずっとCSSに誤りがあるのかと思っていましたが、
HTMLの書き間違いだったようです。
ご回答いただいた皆様ありがとうございました!

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

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

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

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

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

xjjojo

2019/04/22 07:35 編集

問題をはっきりさせたいのでソースコードをすべて書いていただけたらと思います!
nagareboshi

2019/04/22 07:36

早速ご回答いただき誠にありがとうございます。 HTMLとCSSの両方を記載すればよろしいでしょうか?
xjjojo

2019/04/22 07:41 編集

nagareboshiさん:はい!よろしくお願いいたします! 補足ですが、teratailではマークダウンが使えますので、ソースコードは ``` ここにソースコード ``` のように書くとシャープを置き換えたりしなくてすみますよ! ※```の上下には改行が必要なのでご注意ください!
Lhankor_Mhy

2019/04/22 07:47

あと、#about に関するスタイルがあるようですが、HTMLにはその要素がありませんでした。 これは、全体をラップしていると考えていいですか?
nagareboshi

2019/04/22 07:57

皆様ご教示いただき誠にありがとうございます。 ソースコードを入力いたしました! 何卒よろしくお願いいたします。
s8_chu

2019/04/22 08:03

質問者さんの実現したいことは、このような状態 ( https://codepen.io/anon/pen/LvBNoo ) では実現できていないということでしょうか? もしこの状態では実現できていないのであれば、もう少し詳しく質問者さんの実現したいことを教えていただけませんか?
nagareboshi

2019/04/22 08:10

s8_chu様 ご回答いただき誠にありがとうございます。 はい、お送りいただいたURLのようにプロフィールの横に配置したいです。 私の画面ですと、下に落ちている状態?になってます。
s8_chu

2019/04/22 08:12

であれば、私の提示した URL の内容は aKusano さんの回答と同じ内容ですので、 aKusano さんの回答を確認してみてください。
guest

回答3

0

ベストアンサー

確認ですが、そのHTMLコード、本当に参考書と同じですか?
プロフィール画像がプロフィール用のsectionの外に出ているのが、
マークアップ的にもCSS的にも解せないのですが。。。

参考書の方では、プロフィールの画像はプロフィール用のsectionの内側に
入っているのではないですか?
それならフロート解除も正しく適用されるはずです。

HTML

1<section class="profile clearfix"> 2 <div class="profile-txt"> 3 <h2 class="icon">Profile</h2> 4 <p><span>SNAPPERS 代表:山田太郎</span><br>アナログ、デジタルを問わず、トイカメラやポラロイド、ビデオカメラに至るまで、あらゆるカメラに夢中になって遊んでいるうちに自然とカメラマンとしての道を志すようになる。<br>大学卒業後、有名カメラマンのアシスタントを得て渡米。世界各国を放浪しながら撮影をする中で、現在のアウトドアカメラとしてのスタイルを確立する。2016年に帰国し、「SNAPPERS」を設立。<br>現在は、雑誌の表紙やカタログの撮影を中心に、映像作品などにもカメラマンとして参加するなど幅広く活躍している。</p> 5 </div> 6 <img src="images/about-profile.png" alt="山田太郎のプロフィール" class="profile-image"> 7</section>

多分参考書の方はこう↑なってると思うのですが違いますかねー?

投稿2019/04/22 08:06

aKusano

総合スコア3763

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

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

nagareboshi

2019/04/22 08:14

ありがとうございます! 今確認いたしましたら、</section>の中に入っておりました。 順番に入力していたので、誤って外に出して書いてしまったみたいです。
guest

0

<section class="profile clearfix"> <div class="profile-txt"> <h2 class="icon">Profile</h2> <p><span>SNAPPERS 代表:山田太郎</span><br>アナログ、デジタルを問わず、トイカメラやポラロイド、ビデオカメラに至るまで、あらゆるカメラに夢中になって遊んでいるうちに自然とカメラマンとしての道を志すようになる。<br>大学卒業後、有名カメラマンのアシスタントを得て渡米。世界各国を放浪しながら撮影をする中で、現在のアウトドアカメラとしてのスタイルを確立する。2016年に帰国し、「SNAPPERS」を設立。<br>現在は、雑誌の表紙やカタログの撮影を中心に、映像作品などにもカメラマンとして参加するなど幅広く活躍している。</p> </div> </section>

を下記のように

<section class="profile clearfix"> <div class="profile-txt"> <h2 class="icon">Profile</h2> <p><span>SNAPPERS 代表:山田太郎</span><br>アナログ、デジタルを問わず、トイカメラやポラロイド、ビデオカメラに至るまで、あらゆるカメラに夢中になって遊んでいるうちに自然とカメラマンとしての道を志すようになる。<br>大学卒業後、有名カメラマンのアシスタントを得て渡米。世界各国を放浪しながら撮影をする中で、現在のアウトドアカメラとしてのスタイルを確立する。2016年に帰国し、「SNAPPERS」を設立。<br>現在は、雑誌の表紙やカタログの撮影を中心に、映像作品などにもカメラマンとして参加するなど幅広く活躍している。</p> </div> <img src="images/about-profile.png" alt="山田太郎のプロフィール" class="profile-image"> </section>

.profile-imageを.profileの中に移動させてください。

投稿2019/04/22 08:12

kenk1024

総合スコア29

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

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

0

nagareboshi様が記述したHTMLをいかすのであれば
以下のコードを追加ではいかがでしょうか?

CSS

1section.career { 2 clear: both; 3}

投稿2019/04/22 08:06

編集2019/04/22 08:15
otamunote

総合スコア281

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問