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

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

ただいまの
回答率

87.35%

HTML5とCSS3で料金表画面を作成したい。

受付中

回答 1

投稿

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

score -2

前提・実現したいこと

HTML5とCSS3を使ってサブスクリプションプランの画面作成の仕方。

発生している問題・エラーメッセージ

ブラウザでの表示の違い
※Google chromeを使用しています。
パソコン上の画面では、オレンジ色の「Enter」ボタンが3つ現れるのですが、
Google Chrome>その他ツール>デベロッパーツールを開きスマホ画面に切り替えた際、
オレンジのボタンが一つしか表示されず場所も固定されてしまってます。
jqueryやscriptは、使用していません。

該当のソースコード

<!DOCTYPE html>
<html lang="En"/>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width" initialscale="1.0">
    <link rel="stylesheet" href="css/style1.css"/>
    <link rel="stylesheet" href="css/stylephone.css" media="screen and (max-width:767px)">
</head>
<body>
    <h1>Pricing Table</h1>
    <div class="container">
        <div class="tab1">
            <h2>Free</h2>
            <hr>
                <ul>
                    <li>Level1</li>
                    <li>Level2</li>
                    <li>Level3</li>
                </ul>
                <button class="entry-btn1">Enter</button>
        </div>
        <div class="tab1">
            <h2>$10/month</h2>
            <hr>
                <button class="entry-btn1">Enter</button>
        </div>
        <div class="tab1">
            <h2>$100/year</h2>
            <hr>
                <button class="entry-btn1">Enter</button>
        </div>
    </div>
</body>
</html>
body{
    margin:0px;
}
h1{
    margin-top:1px;
    margin-bottom: 5px;
    text-align: center;
}
h2{
    text-align: center;
    font-size: 40px;
}
hr {
    height: 5px;
    background-color: red;
    width: 60%;
    border: none;
   }
.tab1{
    background-color: white;
    width:300px;
    height:500px;
    border:white solid 3px;
    border-radius: 5px;
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom: 20px;
}

.container{
    margin:auto;
    background-color: #EEEEEE;
    width:auto;
    height:auto;
    display:flex; 
    flex-direction: row;
    border: #EEEEEE solid 5px;
    justify-content: space-around;
}

.entry-btn1{
    position: fixed;
    margin-left:50px;
    margin-right:50px;
    border-radius: 50px;
    width:200px;
    height:50px;
    background-color:orangered;
    text-align: center;
    font-size: 24px;
         color:white;
}


上記は、パソコン画面用のCSS

.tab1{
    background-color: white;
    width:300px;
    height:640px;
    border:white solid 3px;
    border-radius: 5px;
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom: 20px;
}

.container{
    background-color: #EEEEEE;
    width:auto;
    height:auto;
    display:flex; 
    flex-direction: column;
    border: #EEEEEE solid 5px;
    justify-content: space-around;
}

.entry-btn1{
    position: fixed;
    margin-left:50px;
    margin-right:50px;
    border-radius: 50px;
    width:200px;
    height:50px;
    background-color:orangered;
    text-align: center;
    font-size: 24px;
         color:white;
}


※スマホ用CSS (下記も含む)

試したこと

 <div id="btn1">
   <button class="entry-btn1">Enter</button>
 </div>


class属性でボタンを作るだけにしてid属性で配置させようとしましたが変化がありませんでした。

CSSを試してみましたが変化がありませんでした。

.entry-btn1{
    background-color:orangered;
    width:200px;
    height:50px;
    text-align: center;
    font-size: 24px;
         color:white;
}
#btn1{
    position: fixed;
    margin-left:50px;
    margin-right:50px;
    border-radius: 50px;
}
#btn2{
        position: fixed;
        margin-left:50px;
        margin-right:50px;
        border-radius: 50px;
}

補足情報(FW/ツールのバージョンなど)

使用ブラウザ:Google Chrome
英語表記に特に意味はありません。

ここにより詳細な情報を記載してください。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • kei344

    2020/05/09 23:04

    まだ質問が「受付中」になっていますが、いったんご自身の回答をもって「解決済」にされてはいかがでしょうか。

    キャンセル

回答 1

-1

<input type="button" class="entry-btn1" value="Enter">


<button>タグを使わなければ通常通りできました。
それとCSSの変更

.entry-btn1{
    width:200px;
    height:50px;
    background-color: orangered;
    border:white solid 3px;
    border-radius: 50px;
    margin-left: 50px;
    margin-right: 50px;
    font-size:24px;
         color:white;
}


text-align:centerを削除すればできました。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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