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

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

ただいまの
回答率

90.40%

  • CSS

    8035questions

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

  • HTML5

    5420questions

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

  • float(CSS)

    26questions

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

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

解決済

回答 1

投稿 編集

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

liisa

score 10

 html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>自己紹介サイト</title>
    <link rel="stylesheet" href="about.css">
</head>

<body id="about">
    <header>
        <div class="logo">
        <a herf="index.html"><img src="./images/welcome.png" alt=""></a>
        </div>


        <nav>
            <ul class="global-nav">
                 <li><a href="about.html">who I am</a></li>
                 <li><a href="Like.html">Like</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 me</h1>

                <section class="profile clearfix">
                    <div class="profile-txt">
                        <h2  class="icon">Profile</h2>
                         <p>名前:<br>
                            出身:<br>
                            趣味:サーフィン
                        </p>


                        </div>


     <img src="./images/me.jpeg" alt="わたし!" class="profile-image">
                </section>


                <section class="ikigoi">
                    <h2 class="icon">意気込み</h2>
                    <p>これからよろしくお願いします。<br>
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

                </section>
            </div>
         </div>
    </div>

    <footer>
        <small>(c)2019 sea-introduce</small>
    </footer>

</body>
</html>
body{
    margin:0;
    padding:0;
    background-color: silver;
    color:black;
    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:black;
    text-decoration: none;
}

a:visited{
    color: white;/*機能しているかチェック*/
}

a:hover{
    text-decoration:underline;
}

header{
    width:960px;
    height:100px;
    margin:0 auto;
}

.logo{
    float:left;
    margin-top: 30px;
}

.global-nav{
    float:right;
    margin-top: 60px;
}

.global-nav li{
    float:left;
    margin:0 20px;
    font-size: 20px;
    list-style: none;
}

.global-nav li a{
    color: black;
}

.global-nav li a:hover{
    border-bottom: 2px solid white;
    padding-bottom: 3px;
    text-decoration: none;
}

#wrap{
    clear: both;
    background-color: silver;
    margin-top: 220px;
    padding:35px 0;
}

.main-center{
    width:940px;
    margin: 0 auto;

}
.content{
    width: 960px;
    margin: 0 auto;
}

footer{
    text-align: center;
    color: black;
    padding: 20px 0;
}

footer small{
    font-size: 12px
}

h1{
    font-size: 36px;
    border-bottom: 1px solid white;
}

h2{
    font-size: 24px;
}

#about{
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: 100% auto;
}
.icon:before{
    content: "";
    padding-right: 10px;
    border-left: 12px solid black;
}

#about .profile-txt{
    width: 540px;
    float: left;
    }

#about .profile-image{
    float: right;
}


.clearfix: after{
    content:"";
    display: block;
    height: 0;
    clear: both;
}
.section{
    margin-bottom:35px;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • liisa

    2019/02/09 12:15

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

    キャンセル

  • Lhankor_Mhy

    2019/02/09 13:02 編集

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

    ご面倒かと思いますが、これにより解決にかなり近づきますので、ご応答をお願いいたします。

    キャンセル

  • liisa

    2019/02/09 14:06

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

    キャンセル

回答 1

checkベストアンサー

+1

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

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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

  • CSS

    8035questions

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

  • HTML5

    5420questions

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

  • float(CSS)

    26questions

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

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