前提・実現したいこと
前回もこちらにて質問させていただきました!
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の書き間違いだったようです。
ご回答いただいた皆様ありがとうございました!
回答3件
あなたの回答
tips
プレビュー