常連

![![イメージ説明](dcbae57cb190ba405430ffaa96192bcd.jpeg)]

**画面レイアウトの表示されない領域を作りたい**

```html
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="bootstrap.min.css">
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="bootstrap.min.js"></script>
</head>
<body>
    <main class="clearfix">
        <div id="main-left" class="boxes border float">
            <div id="room-name" class="center">
                <span>ルーム名</span>
            </div>
            <div id="room-desc" class="center">
                <span>ここにはルームの説明が表示される。自分で書いた説明を見ながら論点を外さないように会話をする。</span>
            </div>
            <div id="room-buttom" class="left-margin">
                <input type="submit" id="submit_button" class="button" name="finishRoom" value="ルーム終了">
            </div>
            <div id="room-detail">
                <table class="left-margin">
                    <col span="1" width="200px">
                    <tr>
                        <td>通話待ち人数</td>
                        <td>５人</td>
                    </tr>
                    <tr>
                        <td>通話合計時間</td>
                        <td>３０分</td>
                    </tr>
                </table>
            </div>
            <div id="room--list">
                <table border="1" class="list-margin">
                    <col span="5" width="200px">
                    <tr>
                        <td>順番</td>
                        <td>名前</td>
                        <td>要望</td>
                        <td>対応不可</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>John</td>
                        <td>00000にしてほしいです</td>
                        <td><input type="submit" class="button-cancel" name="cancel" value="キャンセル"></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Kazuya</td>
                        <td>手短にお願いします</td>
                        <td><input type="submit" class="button-cancel" name="cancel" value="キャンセル"></td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Kurokun</td>
                        <td>長く話したい</td>
                        <td><input type="submit" class="button-cancel" name="cancel" value="キャンセル"></td>
                    </tr>
                </table>
            </div>
        </div>
            <div id="main-right" class="boxes float">
                <div id="call" class="border">
                    <table>
                        <col span="1" width="150px">
                        <tbody>
                            <tr>
                                <td>生徒名</td>
                                <td>山田</td>
                            </tr>
                            <tr>
                                <td>残り時間</td>
                                <td>２３分２２秒</td>
                            </tr>
                            <tr>
                                <td>最大残り時間</td>
                                <td>４０分１１秒</td>
                            </tr>
                            <tr>
                                <td id="margin-bottom">要望</td>
                                <td id="margin-bottom">XXXX</td>
                            </tr>
                            <tr>
                                <td id="margin-bottomm"><input type="submit"class="button-cancel"name="submit"value="通話終了" /></td>
                            </tr>
                            <tr>
                                <td id="margin-bottommm"><input type="submit"id="button-blacklist"name="submit"value="ブラックリスト"></td>
                            </tr>
                            <tr>
                                <td><p>表示されない領域(hidden)</p>
                                <td><input type="hidden"name="hidden"value=""></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
    </body>
</html>

```
```css
#body {
    border: 1px solid black;
}
#room {
    text-align: center;
    padding-left: 10px;
    width: 40%;
    height: 40%;
    padding: 10px;    
}
#room-detail {
    margin-right: 15%;
    margin-bottom: 10%;
}
body {
    margin: 0;
}

#main-left {
    width: 70%;
    height: 1000px;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

body {
    margin: 0;
}

#main-left {
    width: 70%;
    height: 1000px;
}

#main-right {
    width: 30%;
    /*height: 300px;*/
}


#room-name {
    margin: 50px 0;
}

#room-desc {
    margin-bottom: 50px;
}

#room-buttom {
    margin-bottom: 60px;
}

#room-detail {
}

    #room-detail table {
        line-height: 250%;
    }

#call table {
    line-height: 300%;
}

#call {
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
}
#room--list{
    padding-left:30px;
}
#image {
    height: 100px;
    width: 100px;
    background-color: red;
    margin: 0 auto;
}

.center {
    text-align: center;
}

.border {
    border: solid;
}

.float {
    float: left;
}

.left-margin {
    padding-left: 45%;
    box-sizing: border-box;
}

.boxes {
    box-sizing: border-box;
}

.button {
    display: inline-block;
    border-radius: 50%;
    font-size: 22pt;
    text-align: center;
    cursor: pointer;
    padding: 12px 12px;
    background: #999999;
    color: #000000;
    line-height: 1em; 
    transition: .3s;
    box-shadow: 6px 6px 3px #666666;
    border: 2px solid #999999;
}

    .button:hover {
        box-shadow: none; 
        color: #999999;
        background: #000000;
    }
.button-cancel {
    display: inline-block;
    font-size: 18pt;
    text-align: center;
    cursor: pointer;
    padding: 12px 12px;
    background: #990000;
    color: #000000;
    line-height: 1em; 
    transition: .3s; 
    box-shadow: 6px 6px 3px #666666; 
    border: 2px solid #990000; 
}

    .button:hover {
        box-shadow: none; 
        color: #990000;
        background: #000000; 
}
.list-margin {
    margin-left: 20%;
    margin-bottom:100px;
}
#button-blacklist {
    display: inline-block;
    font-size: 18pt; /* 文字サイズ */
    text-align: center; /* 文字位置   */
    cursor: pointer; /* カーソル   */
    padding: 12px 12px; /* 余白       */
    background: #000000; /* 背景色     */
    color: #ffffff; /* 文字色     */
    line-height: 1em; /* 1行の高さ  */
    transition: .3s; /* なめらか変化 */
    box-shadow: 6px 6px 3px #666666; /* 影の設定 */
    border: 2px solid #000000; /* 枠の指定 */
}

#button:hover {
    box-shadow: none; /* カーソル時の影消去 */
    color: #000000; /* 背景色     */
    background: #990000; /* 文字色     */
}
#margin-bottom {
    padding-bottom: 200px;
}
#margin-bottomm {
    padding-bottom: 40px;
    padding-left:40%;
}
#margin-bottommm {
    padding-bottom: 40px;
    padding-left: 30%;
}


```

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

	@@ -1 +1 @@
1	- Html cssでボックスを作り~~背景色を黒にし~~たい
1	+ Html cssで右下にボックスを作りたい。

質問編集履歴