Html cssで右下にボックスを作りたい。※骨組みなので機能などは全く考えないです。

![]

画面レイアウトの表示されない領域を作りたい

html
1<!DOCTYPE html>
2
3<html>
4<head>
5    <meta name="viewport" content="width=device-width" />
6    <link rel="stylesheet" href="style.css">
7    <link rel="stylesheet" href="bootstrap.min.css">
8    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
9    <script type="text/javascript" src="bootstrap.min.js"></script>
10</head>
11<body>
12    <main class="clearfix">
13        <div id="main-left" class="boxes border float">
14            <div id="room-name" class="center">
15                <span>ルーム名</span>
16            </div>
17            <div id="room-desc" class="center">
18                <span>ここにはルームの説明が表示される。自分で書いた説明を見ながら論点を外さないように会話をする。</span>
19            </div>
20            <div id="room-buttom" class="left-margin">
21                <input type="submit" id="submit_button" class="button" name="finishRoom" value="ルーム終了">
22            </div>
23            <div id="room-detail">
24                <table class="left-margin">
25                    <col span="1" width="200px">
26                    <tr>
27                        <td>通話待ち人数</td>
28                        <td>５人</td>
29                    </tr>
30                    <tr>
31                        <td>通話合計時間</td>
32                        <td>３０分</td>
33                    </tr>
34                </table>
35            </div>
36            <div id="room--list">
37                <table border="1" class="list-margin">
38                    <col span="5" width="200px">
39                    <tr>
40                        <td>順番</td>
41                        <td>名前</td>
42                        <td>要望</td>
43                        <td>対応不可</td>
44                    </tr>
45                    <tr>
46                        <td>1</td>
47                        <td>John</td>
48                        <td>00000にしてほしいです</td>
49                        <td><input type="submit" class="button-cancel" name="cancel" value="キャンセル"></td>
50                    </tr>
51                    <tr>
52                        <td>2</td>
53                        <td>Kazuya</td>
54                        <td>手短にお願いします</td>
55                        <td><input type="submit" class="button-cancel" name="cancel" value="キャンセル"></td>
56                    </tr>
57                    <tr>
58                        <td>3</td>
59                        <td>Kurokun</td>
60                        <td>長く話したい</td>
61                        <td><input type="submit" class="button-cancel" name="cancel" value="キャンセル"></td>
62                    </tr>
63                </table>
64            </div>
65        </div>
66            <div id="main-right" class="boxes float">
67                <div id="call" class="border">
68                    <table>
69                        <col span="1" width="150px">
70                        <tbody>
71                            <tr>
72                                <td>生徒名</td>
73                                <td>山田</td>
74                            </tr>
75                            <tr>
76                                <td>残り時間</td>
77                                <td>２３分２２秒</td>
78                            </tr>
79                            <tr>
80                                <td>最大残り時間</td>
81                                <td>４０分１１秒</td>
82                            </tr>
83                            <tr>
84                                <td id="margin-bottom">要望</td>
85                                <td id="margin-bottom">XXXX</td>
86                            </tr>
87                            <tr>
88                                <td id="margin-bottomm"><input type="submit"class="button-cancel"name="submit"value="通話終了" /></td>
89                            </tr>
90                            <tr>
91                                <td id="margin-bottommm"><input type="submit"id="button-blacklist"name="submit"value="ブラックリスト"></td>
92                            </tr>
93                            <tr>
94                                <td><p>表示されない領域(hidden)</p>
95                                <td><input type="hidden"name="hidden"value=""></td>
96                            </tr>
97                        </tbody>
98                    </table>
99                </div>
100            </div>
101    </body>
102</html>
103

css
1#body {
2    border: 1px solid black;
3}
4#room {
5    text-align: center;
6    padding-left: 10px;
7    width: 40%;
8    height: 40%;
9    padding: 10px;    
10}
11#room-detail {
12    margin-right: 15%;
13    margin-bottom: 10%;
14}
15body {
16    margin: 0;
17}
18
19#main-left {
20    width: 70%;
21    height: 1000px;
22}
23.clearfix::after {
24    content: "";
25    display: block;
26    clear: both;
27}
28
29body {
30    margin: 0;
31}
32
33#main-left {
34    width: 70%;
35    height: 1000px;
36}
37
38#main-right {
39    width: 30%;
40    /*height: 300px;*/
41}
42
43
44#room-name {
45    margin: 50px 0;
46}
47
48#room-desc {
49    margin-bottom: 50px;
50}
51
52#room-buttom {
53    margin-bottom: 60px;
54}
55
56#room-detail {
57}
58
59    #room-detail table {
60        line-height: 250%;
61    }
62
63#call table {
64    line-height: 300%;
65}
66
67#call {
68    position: fixed;
69    top: 0;
70    height: 100%;
71    width: 100%;
72}
73#room--list{
74    padding-left:30px;
75}
76#image {
77    height: 100px;
78    width: 100px;
79    background-color: red;
80    margin: 0 auto;
81}
82
83.center {
84    text-align: center;
85}
86
87.border {
88    border: solid;
89}
90
91.float {
92    float: left;
93}
94
95.left-margin {
96    padding-left: 45%;
97    box-sizing: border-box;
98}
99
100.boxes {
101    box-sizing: border-box;
102}
103
104.button {
105    display: inline-block;
106    border-radius: 50%;
107    font-size: 22pt;
108    text-align: center;
109    cursor: pointer;
110    padding: 12px 12px;
111    background: #999999;
112    color: #000000;
113    line-height: 1em; 
114    transition: .3s;
115    box-shadow: 6px 6px 3px #666666;
116    border: 2px solid #999999;
117}
118
119    .button:hover {
120        box-shadow: none; 
121        color: #999999;
122        background: #000000;
123    }
124.button-cancel {
125    display: inline-block;
126    font-size: 18pt;
127    text-align: center;
128    cursor: pointer;
129    padding: 12px 12px;
130    background: #990000;
131    color: #000000;
132    line-height: 1em; 
133    transition: .3s; 
134    box-shadow: 6px 6px 3px #666666; 
135    border: 2px solid #990000; 
136}
137
138    .button:hover {
139        box-shadow: none; 
140        color: #990000;
141        background: #000000; 
142}
143.list-margin {
144    margin-left: 20%;
145    margin-bottom:100px;
146}
147#button-blacklist {
148    display: inline-block;
149    font-size: 18pt; /* 文字サイズ */
150    text-align: center; /* 文字位置   */
151    cursor: pointer; /* カーソル   */
152    padding: 12px 12px; /* 余白       */
153    background: #000000; /* 背景色     */
154    color: #ffffff; /* 文字色     */
155    line-height: 1em; /* 1行の高さ  */
156    transition: .3s; /* なめらか変化 */
157    box-shadow: 6px 6px 3px #666666; /* 影の設定 */
158    border: 2px solid #000000; /* 枠の指定 */
159}
160
161#button:hover {
162    box-shadow: none; /* カーソル時の影消去 */
163    color: #000000; /* 背景色     */
164    background: #990000; /* 文字色     */
165}
166#margin-bottom {
167    padding-bottom: 200px;
168}
169#margin-bottomm {
170    padding-bottom: 40px;
171    padding-left:40%;
172}
173#margin-bottommm {
174    padding-bottom: 40px;
175    padding-left: 30%;
176}
177
178

kei344

2019/11/23 05:15

「表示されない領域」とは何のことでしょう。「何をどうしたくて現在どのようになっているか」、「何をしたときに」「どうなると思って」「どうなったのか」を、具体的に記述されたほうが回答を得られやすいと思います。

NIKONIKONIKONIK

2019/11/23 05:22

処理や機能はまだ書きません。骨組みを作ってるだけなので、htmlとｃｓｓだけで画面レイアウトと全く同じように表示したいです。今分からないことは、表示されない領域のボックスを作ることです。

kei344

2019/11/23 05:43

機能の問題を指摘したのではなく、起こっている問題について説明が足りていないので、「何をどうしたくて現在どのようになっているか」を丁寧に説明したほうがよいということを指摘しています。

行動規範の内容に同意します

回答1件

ベストアンサー

表示されない領域

というのが不明確です。

実際に表示させないのか、擬似的に見えなくするのか、、、

で、その「表示されない領域」というのも常にウィンドウの右下を表示させないのか、ページの右下を表示させないのか、

今回は、エスパーを発動し
「擬似的にページの右下を表示させなくする」
という条件のコードを書きます。

まず、表示させないタグに

CSS
1position: absolute;
2bottom: 0;
3left: 0;
4width: 100%;
5height: /*高さ*/

を指定して
そのタグの親要素（colかtbody）に

CSS
1position: relative

を指定する。

投稿2019/11/23 05:55

kyoya0819

総合スコア10429

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

Html cssで右下にボックスを作りたい。※骨組みなので機能などは全く考えないです。

関連した質問