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

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

ただいまの
回答率

88.05%

<div> の場所と同じように <h2>も動かしたい。

解決済

回答 3

投稿 編集

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

score 25

div の場所と<h1>のタイトルは同じようにウィンドウを大きくしたり小さくしたりすると、場所を毎回変えるのですが、どうしてか、h2 のChocolate Rough だけ動きません。どうしてなのでしょうか??あとこのページは添付してあるこのページのようにならないといけません。。
イメージ説明

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel = "stylesheet" type = "text/css" href = "receipe2_style.css">
        <title>recipe2</title>
    </head>
    <body>
        <h1>Recipe #1</h1>
        <div>
            <h2>Chocolate Rough</h2>




    <!-- Division The <div> tag defines a division or a section in an HTML document.
    The <div> tag is used to group block-elements to format them with CSS.-->
            <figure><!-- image part division -->
                <img src = "chocRough.jpg">
            </figure>

<!-- "Base" Ingredients part division -->
            <section>
                <h3>Base Ingredients:</h3>
                <ul>
                    <li>110g butter</li>
                    <li>1 cup sugar</li>
                    <li>2 tsp cocoa</li>
                    <li>2&frac12; tsp golden syrup</li>
                    <li>1 cup flour</li>
                    <li>1 tsp baking powder</li>
                    <li>&frac34; cup coconut</li>
                </ul>
            </section>

<!-- "Icing Ingredients part" -->
            <section id= "Icing">
                <h3>Icing Ingredients:</h3>
                <ul>
                    <li>1 cup icing sugar</li>
                    <li>25g melted butter</li>
                    <li>2 tsp cocoa</li>
                    <li>&frac34; tsp golden syrup</li>
                    <li>A little water to <br>combine</li>
                </ul>
            </section>

                <p>Cream butter and sugar together. Add golden syrup. Add sifted cocoa, flour and baking powder. Add coconut. Combine and press into a shallow tin. Bake at 180&deg;c for 20 - 30 minutes. Ice while still warm.
                </p>
                <p>To make icing: sift icing sugar and cocoa together, stir through coconut and then add butter and enough water to mix to a stiff paste.
                </p>

        </div>
    </body>
</html>
html{
background-color:rgb(235, 255, 249);
}

body{
    font-family: "Arial" , Verdana, sans-serif;

    color:#4ca68d;
}

/* Main heading */
h1{
    text-align:center;
    font-family: "Times New", Times, serif;

}
/* Chocolate Rough*/
h2{
    margin:0px auto;

    position:absolute;
    top:50px;
    left:200px;
    font-family: "Times New", Times, serif;
    }

h3{

    margin:0px;

    font-family: "Times New", Times, serif;
}
/* Inside part */
div{
    background-color:#fff9eb;
    margin:0px auto;
    padding:20px 15px 20px 15px;
    border:none;
    width:670px;
    height:320px;
}


/* chocolate image */
figure{
    float:left;
    margin:0px;
    width:223px;




}

figure+section{
    border-right:1px solid;




}

/* Base_Ingredients */
section{
    width:223px;

    float:left;
}
#Icing h3{
    margin-left:30px;
}
#Icing ul{

    margin-left:75px;
}
section ul{

    margin-bottom:0px;
    margin-top:0px;
    margin-left:43px;
    padding-left:0px;


}
section ul li{
    text-indent:-4px;
}



p{
    text-align: justify;
    text-justify:inter-word;
    clear:left;
    margin-top:20px;
    margin-bottom:0px;



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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • kei344

    2017/04/02 15:11

    まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。

    キャンセル

  • TomofumiKimura

    2017/04/02 17:39

    あ、はい。まずこの質問は解決済みにして、また別の質問を投稿したいと思います。

    キャンセル

回答 3

checkベストアンサー

+4

このように行ってはいかがでしょうか。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>recipe2</title>
    <style type="text/css">
        html {
            background-color: rgb(235, 255, 249);
        }

        body {
            font-family: "Arial", Verdana, sans-serif;
            color: #4ca68d;
        }

        /* Main heading */
        h1 {
            text-align: center;
            font-family: "Times New", Times, serif;
        }

        /* Chocolate Rough*/
        h2 {
            margin: 0 auto;
            position: relative; /* absoluteから変更。 */
            top: -50px; /* 50pxから変更。 */
            /* left: 200px; */
            font-family: "Times New", Times, serif;
        }

        h3 {
            margin: 0;
            font-family: "Times New", Times, serif;
        }

        /* Inside part */
        div {
            background-color: #fff9eb;
            margin: 0 auto;
            padding: 20px 15px 20px 15px;
            border: none;
            width: 670px;
            height: 320px;
        }

        /* chocolate image */
        figure {
            float: left;
            margin: 0;
            width: 223px;
        }

        figure + section {
            border-right: 1px solid;
        }

        /* Base_Ingredients */
        section {
            width: 223px;
            float: left;
        }

        #Icing h3 {
            margin-left: 30px;
        }

        #Icing ul {

            margin-left: 75px;
        }

        section ul {
            margin-bottom: 0;
            margin-top: 0;
            margin-left: 43px;
            padding-left: 0;

        }

        section ul li {
            text-indent: -4px;
        }

        p {
            text-align: justify;
            text-justify: inter-word;
            clear: left;
            margin-top: 20px;
            margin-bottom: 0;
        }
    </style>
</head>
<body>
<h1>Recipe #1</h1>
<div>
    <h2>Chocolate Rough</h2>
    <!-- Division The <div> tag defines a division or a section in an HTML document.
    The <div> tag is used to group block-elements to format them with CSS.-->
    <figure><!-- image part division -->
        <img src="chocRough.jpg">
    </figure>

    <!-- "Base" Ingredients part division -->
    <section>
        <h3>Base Ingredients:</h3>
        <ul>
            <li>110g butter</li>
            <li>1 cup sugar</li>
            <li>2 tsp cocoa</li>
            <li>2&frac12; tsp golden syrup</li>
            <li>1 cup flour</li>
            <li>1 tsp baking powder</li>
            <li>&frac34; cup coconut</li>
        </ul>
    </section>

    <!-- "Icing Ingredients part" -->
    <section id="Icing">
        <h3>Icing Ingredients:</h3>
        <ul>
            <li>1 cup icing sugar</li>
            <li>25g melted butter</li>
            <li>2 tsp cocoa</li>
            <li>&frac34; tsp golden syrup</li>
            <li>A little water to <br>combine</li>
        </ul>
    </section>

    <p>Cream butter and sugar together. Add golden syrup. Add sifted cocoa, flour and baking powder. Add coconut.
        Combine and press into a shallow tin. Bake at 180&deg;c for 20 - 30 minutes. Ice while still warm.
    </p>
    <p>To make icing: sift icing sugar and cocoa together, stir through coconut and then add butter and enough water to
        mix to a stiff paste.
    </p>

</div>
</body>
</html>

(追記)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>recipe2</title>
    <style type="text/css">
        html {
            background-color: rgb(235, 255, 249);
            color: #4ca68d;
        }

        body {
            font-family: "Arial", Verdana, sans-serif;
        }

        /* Main heading */
        h1 {
            text-align: center;
            font-family: "Times New", Times, serif;
        }

        /* Chocolate Rough*/
        h2 {
            margin: 0 auto -50px auto;
            position: relative; /* absoluteから変更。 */
            top: -50px; /* 50pxから変更。 */
            /* left: 200px; */
            left: -15px;
            font-family: "Times New", Times, serif;
        }

        h3 {
            margin: 0;
            font-family: "Times New", Times, serif;
        }

        /* Inside part */
        div {
            background-color: #fff9eb;
            color: inherit;
            margin: 0 auto;
            padding: 20px 15px 20px 15px;
            border: none;
            width: 670px;
            height: 320px;
        }

        /* chocolate image */
        figure {
            float: left;
            margin: 0;
            width: 223px;
        }

        figure + section {
            border-right: 1px solid;
        }

        /* Base_Ingredients */
        section {
            width: 223px;
            float: left;
        }

        #Icing h3 {
            margin-left: 30px;
        }

        #Icing ul {
            margin-left: 75px;
        }

        section ul {
            margin-bottom: 0;
            margin-top: 0;
            margin-left: 43px;
            padding-left: 0;
        }

        section ul li {
            text-indent: -4px;
        }

        p {
            text-align: justify;
            text-justify: inter-word;
            clear: left;
            margin-top: 20px;
            margin-bottom: 0;
        }
    </style>
</head>
<body>
<h1>Recipe #1</h1>
<div>
    <h2>Chocolate Rough</h2>
    <!-- Division The <div> tag defines a division or a section in an HTML document.
    The <div> tag is used to group block-elements to format them with CSS.-->
    <figure><!-- image part division -->
        <img src="chocRough.jpg">
    </figure>
    <!-- "Base" Ingredients part division -->
    <section>
        <h3>Base Ingredients:</h3>
        <ul>
            <li>110g butter</li>
            <li>1 cup sugar</li>
            <li>2 tsp cocoa</li>
            <li>2&frac12; tsp golden syrup</li>
            <li>1 cup flour</li>
            <li>1 tsp baking powder</li>
            <li>&frac34; cup coconut</li>
        </ul>
    </section>
    <!-- "Icing Ingredients part" -->
    <section id="Icing">
        <h3>Icing Ingredients:</h3>
        <ul>
            <li>1 cup icing sugar</li>
            <li>25g melted butter</li>
            <li>2 tsp cocoa</li>
            <li>&frac34; tsp golden syrup</li>
            <li>A little water to <br>combine</li>
        </ul>
    </section>
    <p>Cream butter and sugar together. Add golden syrup. Add sifted cocoa, flour and baking powder. Add coconut.
        Combine and press into a shallow tin. Bake at 180&deg;c for 20 - 30 minutes. Ice while still warm.
    </p>
    <p>To make icing: sift icing sugar and cocoa together, stir through coconut and then add butter and enough water to
        mix to a stiff paste.
    </p>
</div>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/04/02 18:01

    キャンセル

  • 2017/04/02 18:14

    ありがとうございます。追記のコードを修正させていただきました。

    キャンセル

  • 2017/04/02 18:43

    すみません。説明をお願いしてもらってもいいですか??
    どうして h2のmargin 0 auto -50px auto なのでしょうか?

    キャンセル

+4

h2要素に下記指定をしているからです。position: absolute は直近の position: relative の付けられた親要素を起点とするので、提示されているものであれば body要素を起点とすると思います。

position: absolute;
top: 50px;
left: 200px;

まずdiv要素から出してh1要素の次にh2要素を置き、下記のように書き換えたらよいと思います。

h2 {
    margin-top: -1em;
    text-align: center;
    font-family: "Times New", Times, serif;
}

動くサンプル:https://jsfiddle.net/aq7pfLnz/

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/04/01 12:47

    多分ですけど、前のクラスでposition のabsolute やrelative をやったので生徒にposition absolute かrelative などを使わせたいのかもしれません。

    キャンセル

  • 2017/04/01 14:29

    いろいろ後出しするのは人の時間を奪うだけなので、質問の際にはきちんと提示しましょう。

    書かれている構造なら divに relative を付けて h2の topを削除、bottomを100%にすれば上には行きます。

    キャンセル

  • 2017/04/01 15:10

    そうですね~、後出しイクナイ。
    ということで、kei344さんにベストアンサー付けて終了ですね。
    わたくしのは、結果は同じですが、1行多い(笑)。

    キャンセル

+1

なんか、色々制約があるんですね…

以下追記でなんとかなると思います。

h1 {
  padding-bottom:50px;/* これはdivまでのマージンなので、h2分足さないといけないかも */
}
h2 {
  left:0;
  top:0;
  transform:translateY(-100%);/* divを基点として左上に配置してから、h2の高さ分はみ出させる */
}
div {
  position:relative;
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/04/02 12:12

    すみません、transform は使えません。使うなと言われてます

    キャンセル

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

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

関連した質問

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