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

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

ただいまの
回答率

89.06%

レスポンシブの適用が上手くいきません

解決済

回答 1

投稿 編集

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

atlana

score 0

前提・実現したいこと

スマホでページビューの際、
ヘッダーとフッター、h3タグ、inputボタンを
横画面いっぱいに表示したいです。

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

tableタグの問題だと思われますが、
Widthの幅が画面いっぱいに表示されません。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>

<meta charset="UTF-8">
<title>レスポンシブtest</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="style_form.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>

<div class="boxA">
<div class="boxA-inner">
<div class="box1">
<div class="site">
<h1><a href="form_noble.html">
TEST TABLE レスポンシブサイト</a></h1>
</div>
</div>

<div class="box2">

<button type="button" id="menubtn">
<i class="fa fa-bars"></i><span>MENU</span>
</button>

<nav class="menu" id="menu">
<ul><li><a href="#">topに戻る</a></li>
<li><a href="#">使用方法</a></li></ul></nav>
</div>
</div>
</div>
<div class="box7"><article class="database">

<h2>給与 計算フォーム</h2>

<form name="kyuyo">    
<table class="form-table">
<tbody><tr><th>時給</th>
<td><input type="number" name="COST" value="0" size="2"></td></tr>
<tr><th>勤務時間[%] </th>
<td><select name="TIME" style="font-size:200%;border:1px">
<option value="4" selected>4時間</option>
<option value="800">5時間</option></select></td></tr></tbody></table>        
<br>
<p><input type="button" value="計算する" onClick="kyuuyo_keisan()" style="width:100%;padding:10px;font-size:20px;text-align:center"></p>
<p><input type="reset" value="リセット" onClick="kyuuyo_reset()" style="width:100%;padding:10px;font-size:20px;;text-align: center"></p>

<br><table class="result_NP"> 
<tbody><tr><th>合計 給与</th>
<td>1ヶ月あたり:<output type="number" name="" style="font-size:200%;border:1px"></output></td>     
<td>1日あたり 合計:<output type="number" name="" style="font-size:200%;border:1px"></output></td></tr></tbody></table>    

<br>

<table class="form-table">
<tbody><tr class="hide_area_DMG"><th style="background-color:#8DE969;color:#000">計算結果 [A]</th>
<td>最低値:<output type="number" name="" style="font-size:200%;border:1px"></output>
<br>平均値:<output type="number" name="" style="font-size:200%;border:1px"></output>
<br>最高値:<output type="number" name="" style="font-size:200%;border:1px"></output>
</td></tr></tbody></table>

</form>

</article>
</div><div class="box5"><div class="box5-inner">
<div class="copyright"><p>&copy; >TEST TABLE レスポンシブサイト</p></div>
</div></div></body></html>
@charset "UTF-8";

body
{margin:0;
font-family:'メイリオ','Hiragino Kaku Gothic Pro', sans-serif}


/* サイト名 */

.site h1 a{color:#666;
text-decoration: none}

.site h1{margin:0;
font-size:20px}


/* BOX A の下に罫線を挿入 (コンテンツページのみ) */


.contents .boxA
{border-bottom: solid 1px #dddddd}

/* BOX5をバーの形にする */

.box5
{padding-top:15px;
padding-bottom:15px;
background-color: #dddddd}

/* ボックスの左右 */
.boxA, .box5,.box7{padding-left:15px;
padding-right:15px}

/* ボックスの上下 */

.boxA{padding-top:20px;
padding-bottom:10px}

.box7{padding-top: 25px;
padding-bottom:25px}


/* ### 359px 以下 ### */

@media (max-width:359px){

/* サイト名 */

.site img{width:225px;
height:auto}

}
/* BOX Aの背景 */

.boxA{background-color: #fcf9ed}


/* ### 599px 以下 ### */


@media (max-width:599px){


/* ナビゲーション */


.menu li a
{padding: 10px 7px;
font-size: 11px}


/* キャッチコピー */


.catch{padding:5px 10px;
font-size:12px}

/* 記事 */
.content h1{font-size: 26px}


.content .lead{font-size: 16px}

}

/* ### 767px 以下 ### */


@media (max-width:767px){


/* トグルボタン */


#menubtn{padding:6px 12px;
border:solid 1px #aaaaaa;
border-radius:5px;
background-color: #ffffff;
position: absolute;
top:20px;
right:15px;
cursor: pointer}


#menubtn:hover{background-color: #dddddd}

#menubtn:focus{outline:none}

#menubtn i{color:#888888;
font-size:18px}

#menubtn span{display:inline-block;
text-indent: -9999px}


/* ナビゲーションメニュー (縦並び) */


#menu{display: none}

.menu ul{margin: 0;
padding: 0;
list-style: none}


.menu li a{display: block;
padding: 5px;
color: #000000;
font-size: 14px;
text-decoration: none}


.menu li a:hover{
background-color: #eeeeee}


}

/* ### 768px 以上 ### */

@media(min-width: 768px){


/* トグルボタン */

#menubtn{display: none}


/* ナビゲーション */


#menu{display: block !important}


.menu ul{margin: 0;
padding: 0;
list-style: none}


.menu li a{display: block;
padding: 10px 15px;
color: #000000;
font-size: 14px;
text-decoration: none}


.menu li a:hover{
background-color: #eeeeee}


.menu ul:after{content: "";
display: block;
clear: both}


.menu li{float: left;
width: auto}


/* BOX1とBOX2を横に並べる設定 */


.boxA:after{content:"";
display:block;
clear:both}

.box1{float:left;
width:auto}

.box2{float:right;
width:auto}


}

/* ### 1190px 以上 ### */


@media(min-width:1190px){


/* 全体の横幅を固定 */

.box3, .boxA-inner, .box5-inner, .box6, .box7{
width:1140px;
margin-left:auto;
margin-right:auto}


/* BOX Aの下に罫線を挿入 */
.boxA{margin-bottom: 20px;
border-bottom: solid 1px #dddddd}

}

/* コンテンツ内の共通 */
.content h1{
margin-top: 0px;
margin-bottom: 20px;
padding-left: 20px;
border-left: solid 10px #c50018;
font-size: 22px;
font-weight: normal
}

.content h2{
margin-top: 50px;
margin-bottom: 20px;
font-size: 20px;
font-weight: normal;
background-color: #f3f3f3;
color: #366;
padding: 10px;
}

.content h2 i{margin-right: 7px;
color: #888888}


.content h3{
margin-top: 50px;
margin-bottom: 20px;
font-size: 23px;
font-weight: normal
}

.content h3 i {margin-right: 7px;
color: #888888}


.content p{max-width: 640px;
margin-top: 0;
margin-bottom: 20px}

.content .lead{max-width: 100%;
font-size: 20px;
color: #666666}

.contentimg{max-width: 100%;
height: auto;
margin-bottom: 20px}

/*各コンテンツ内ページ共通の見出し*/


.content p{
max-width: 640px;
margin-top: 0;
margin-bottom: 20px;
line-height: 1.5em
}


.content section
{color:#eb5c01}


ul {
display: block;
unicode-bidi: isolate;
margin-top: 1em;
margin-bottom: 1em;
padding-left: 40px;
list-style-type: square
}



/* データベース内のコンテンツ用 (下層)*/
.database h1{
margin-top: 0px;
margin-bottom: 5px;
border-bottom: solid 1px #dddddd;
font-size: 24px;
font-weight: normal
}

.database h2{
margin-top: 30px;
margin-bottom: 20px;
padding-left: 20;
font-size: 17px;
font-weight: normal;
border-bottom: 1px solid #dddddd;
border-left-width: 10px;
border-left-style: solid;
border-left-color: #c50018;
padding-left: 10px;
}

.database h2 i{margin-right: 7px;
color: #888888}

.database h3{
margin-top: 0px;
margin-bottom: 15px;
color: #366;
font-size: 16px;
border-bottom: solid 1px #dddddd;
background-color: #f3f3f3;
padding: 10px;
}


.database img{
max-width: 100%;
height: auto;
margin-bottom: 10px;
padding-top: 10px
}


.database-link {border-bottom:dotted 1px #333}


/*データベースページ内部のコンテンツ共通 (下層)*/


.database p{
max-width: 640px;
margin-top: 0;
margin-bottom: 20px;
line-height: 1.5em
}


.database section{color:#eb5c01}



ul li{line-height:1.5em;
padding: 0.5em 0 /*前後の文との余白*/
}


.database section{color:#eb5c01}


/* 計算フォーム用 レスポンシブ調整 */

select,
textarea,
button{
-moz-appearance: none;
-webkit-appearance: none;
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
border: none;
}

input[type="number"],
textarea {
background: #fff;
display: block;
font-size: 30px;
padding: 12px 15px;
width: 100%;
transition: 0.8s;
border-radius: 0;
}

input[type="text"]:focus,
textarea:focus {
background: #e9f5fb;
width:100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

table {
border-collapse: collapse;
}

/* 給与 計算フォーム */


.form-table {
width: 100%;
}

.form-table th,
.form-table td {
border-top: 1px solid #d7d7d7;
border-bottom: 1px solid #d7d7d7;
padding: 20px;
}


/* th テーブル共通の背景 */
.form-table th {

background:#3D5A6C;
color:#fff;
padding-left: 50px;
position: relative;
font-size:22px;
text-align: left;
}

.form-table th,
.form-table td {
display: block;
width: 100%;
border-bottom: none;
}


.form-table th,
.form-table td {
display: block;
width: 100%;
border-bottom: none;
}

.form-table {
margin-left: -20px;
width:600px;
width: -webkit-calc(100% + 40px);
width: calc(100% + 40px);
}


.form-table select{
background: #f0f0f0;
display: block;
font-size: 16px;
padding: 12px 15px;
width: 100%;
transition: 0.8s;
border-radius: 0;
}


/* OUTPUT タグ */

output[type="number"]
textarea {
background:#455A64;
display: block;
padding: 12px 15px;
width: 400px;
transition: 0.8s;
border-radius: 0;
}


/* 計算 結果 */

.result_NP {
width: 100%;
}
.result_NP th,
.result_NP td {

border-top: 1px solid #d7d7d7;
border-bottom: 1px solid #d7d7d7;
padding: 20px;
}

.result_NP th {
background-color:#f5f5d1;
color:#000;
padding-left: 50px;
position: relative;
font-size:22px;
text-align: left;
}

.result_NP th,
.result_NP td {
display: block;
width: 100%;
border-bottom: none;
}


.result_NP th,
.result_NP td {
display: block;
width: 100%;
border-bottom: none;
}

.result_NP {
margin-left: -20px;
width:600px;
width: -webkit-calc(100% + 40px);
width: calc(100% + 40px);
}


.result_NP select{

background: #f0f0f0;
display: block;
font-size: 16px;
padding: 12px 15px;
width: 100%;
transition: 0.8s;
border-radius: 0;
}

試したこと

tableタグ以外は正常に動作しましたが
tableを入れるとページ全体が横幅が短くなります。

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

ここにより詳細な情報を記載してください。![イメージ説明

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • thyda.eiqau

    2020/06/20 01:52

    CSSを提示してください

    キャンセル

  • m.ts10806

    2020/06/20 08:13

    >分かる範囲でCSSを見直ししました

    これだけで我々他人は質問者がやったことをどのように見れば良いでしょう。
    少なくとも私にはなにをやったのかサッパリです。

    キャンセル

  • atlana

    2020/06/20 10:09

    CSS掲示忘れ失礼しました。
    文字数Errorで引っかかってしまい
    正常に表示されておりませんでした。

    キャンセル

回答 1

check解決した方法

0

/* ボックスの左右 */
.boxA, .box5,.box7{
padding-left:15px;
padding-right:15px}

の部分のpaddig-rightを25pxに調整すると
ヘッダーとフッター、h3inputタグの空白を
埋めることが出来ました。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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