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

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

ただいまの
回答率

88.82%

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

解決済

回答 3

投稿 編集

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

nagareboshi

score 15

前提・実現したいこと

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

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の書き間違いだったようです。
ご回答いただいた皆様ありがとうございました!

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • s8_chu

    2019/04/22 17:03

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

    キャンセル

  • nagareboshi

    2019/04/22 17:10

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

    キャンセル

  • s8_chu

    2019/04/22 17:12

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

    キャンセル

回答 3

checkベストアンサー

+3

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

参考書の方では、プロフィールの画像はプロフィール用の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>


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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/04/22 17:14

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

    キャンセル

+2

    <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の中に移動させてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

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

section.career {
  clear: both;
}

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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