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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

Q&A

解決済

1回答

1354閲覧

左上にprofile、その横に画像を持ってきて、その下から「意気込み」を書きたいのですが、今の状態だとがprofileと画像の真ん中から「意気込み」が入り込みます。どうしてでしょうか。

liisa

総合スコア20

float(CSS)

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

0グッド

0クリップ

投稿2019/02/09 02:38

編集2019/02/09 03:14

html

1 html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>自己紹介サイト</title> 7 <link rel="stylesheet" href="about.css"> 8</head> 9 10<body id="about"> 11 <header> 12 <div class="logo"> 13 <a herf="index.html"><img src="./images/welcome.png" alt=""></a> 14 </div> 15 16 17 <nav> 18 <ul class="global-nav"> 19 <li><a href="about.html">who I am</a></li> 20 <li><a href="Like.html">Like</a></li> 21 <li><a href="contact.html">Contact</a></li> 22 </ul> 23 </nav> 24 25 </header> 26 27 28 29 <div id="wrap"> 30 <div class="content"> 31 <div class="main-center"> 32 <h1>About me</h1> 33 34 <section class="profile clearfix"> 35 <div class="profile-txt"> 36 <h2 class="icon">Profile</h2> 37 <p>名前:<br> 38 出身:<br> 39 趣味:サーフィン 40 </p> 41 42 43 </div> 44 45 46 <img src="./images/me.jpeg" alt="わたし!" class="profile-image"> 47 </section> 48 49 50 <section class="ikigoi"> 51 <h2 class="icon">意気込み</h2> 52 <p>これからよろしくお願いします。<br> 53 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> 54 55 </section> 56 </div> 57 </div> 58 </div> 59 60 <footer> 61 <small>(c)2019 sea-introduce</small> 62 </footer> 63 64</body> 65</html>

css

1body{ 2 margin:0; 3 padding:0; 4 background-color: silver; 5 color:black; 6 font-size:15px; 7 line-height: 2; 8} 9 10p,h1,h2,h3,h4,h5,h6{ 11 margin-top: 0; 12} 13 14img{ 15 vertical-align: bottom; 16} 17 18ul{ 19 margin:0; 20 padding:0; 21} 22 23a{ 24 color:black; 25 text-decoration: none; 26} 27 28a:visited{ 29 color: white;/*機能しているかチェック*/ 30} 31 32a:hover{ 33 text-decoration:underline; 34} 35 36header{ 37 width:960px; 38 height:100px; 39 margin:0 auto; 40} 41 42.logo{ 43 float:left; 44 margin-top: 30px; 45} 46 47.global-nav{ 48 float:right; 49 margin-top: 60px; 50} 51 52.global-nav li{ 53 float:left; 54 margin:0 20px; 55 font-size: 20px; 56 list-style: none; 57} 58 59.global-nav li a{ 60 color: black; 61} 62 63.global-nav li a:hover{ 64 border-bottom: 2px solid white; 65 padding-bottom: 3px; 66 text-decoration: none; 67} 68 69#wrap{ 70 clear: both; 71 background-color: silver; 72 margin-top: 220px; 73 padding:35px 0; 74} 75 76.main-center{ 77 width:940px; 78 margin: 0 auto; 79 80} 81.content{ 82 width: 960px; 83 margin: 0 auto; 84} 85 86footer{ 87 text-align: center; 88 color: black; 89 padding: 20px 0; 90} 91 92footer small{ 93 font-size: 12px 94} 95 96h1{ 97 font-size: 36px; 98 border-bottom: 1px solid white; 99} 100 101h2{ 102 font-size: 24px; 103} 104 105#about{ 106 background-repeat: no-repeat; 107 background-position: center center; 108 background-attachment: fixed; 109 background-size: 100% auto; 110} 111.icon:before{ 112 content: ""; 113 padding-right: 10px; 114 border-left: 12px solid black; 115} 116 117#about .profile-txt{ 118 width: 540px; 119 float: left; 120 } 121 122#about .profile-image{ 123 float: right; 124} 125 126 127.clearfix: after{ 128 content:""; 129 display: block; 130 height: 0; 131 clear: both; 132} 133.section{ 134 margin-bottom:35px; 135}

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

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

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

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

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

kei344

2019/02/09 02:43

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

2019/02/09 02:45

typoあります。 .clearfix: after{ content""; ↓ .clearfix:after{ content:""; たぶん、擬似要素の途中にスペースを入れるのは許容されないと思います。
Lhankor_Mhy

2019/02/09 02:50

typo修正したもので試してみましたが、『profileと画像の真ん中から「意気込み」が入り込みます』が再現しませんでした。 質問者の環境では、ご提示のコードで問題が再現しますか? 再現するなら、環境の問題かもしれません。 再現しないなら、ご提示されていない部分のコードに問題があるかもしれません。
Lhankor_Mhy

2019/02/09 02:53

というか、これ、typoによってclearfixが効いていないことが原因のような気がしてきた……
liisa

2019/02/09 03:02

.clearfix:after{ content:""; に直しましたが、問題が解決しませんでした。。 ご丁寧に教えていただきありがとうございます。
liisa

2019/02/09 03:15

ご丁寧にありがとうございます。私の環境の問題なのでしょうか。。。
Lhankor_Mhy

2019/02/09 04:15 編集

kei344さんがご提示されているURLのサンプルコードでも問題は発生しますか?       なぜ、これをしつこくお聞きするかというと、 質問者のコードで問題が起きて、kei344さんのコードで問題が起きない場合、両者のコードの相違点が原因である、と絞り込めるからです。 また、質問者のコードで問題が起きて、kei344さんのコードでも問題が起きる場合、両者の環境の相違点が原因である、と絞り込めるからです。 ご面倒かと思いますが、これにより解決にかなり近づきますので、ご応答をお願いいたします。
liisa

2019/02/09 05:06

お二方とも ご丁寧にありがとうございます。助かります。
guest

回答1

0

ベストアンサー

動くサンプル:https://jsfiddle.net/2dwv9ty6/show/

問題が再現しません。「質問への追記・修正の依頼」で指摘されている箇所の修正が正しく出来ていない場合は再現しました。

CSS

1/* ↓ここの空白があれば再現する */ 2.clearfix: after{ 3 content:""; 4 display: block; 5 height: 0; 6 clear: both; 7}

投稿2019/02/09 03:19

kei344

総合スコア69366

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問