LoginSignup
frswataru
@frswataru (本石 渉)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

HTML CSS 罫線を引きたい

Q&AClosed
HTMLCSS

解決したいこと

下図のように罫線（四角ピンクの部分）を描画したい
image.png

やさい.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>チェックシート</title>
</head>

<body>
    <div class="boxA">
        <div class="box1">
            やさい　出荷検査成績表
        </div>
        <div class="box2">
            <sup>ベジタリアン協会</sup>
        </div>
    </div>
    <div class="boxA">
        <div class="box3">
            にんじん　キャベツ　
        </div>
    </div>
    <div class="boxA">
        <div class="boxA">
            <div class="box4">
                トラック
            </div>
            <div class="box5">
                ウイング
            </div>
        <div class="box9">
            <p>やさい№</p>
            <p>仕向№</p>
            <p>トラック№</p>
        </div>
        <div class="box13">
        <div class="box10"></div>
        <div class="box11"></div>  
        <div class="box12"></div> 
        </div>
        </div>



        <br>
        <div class="boxA">
            <div class="box7">
                仕向先
            </div>
            <div class="box8">
                愛知
            </div>
        </div>
        <div class="box6 mt-50">
        <table>
            <tr>
                <td colspan="4" rowspan="2">作業日</td>
                <td colspan="6" rowspan="2"></td>
            </tr>
            <tr>
            </tr>
            <tr>
                <td colspan="4" rowspan="3">検査</td>
                <td colspan="6" rowspan="3">作業者</td>
            </tr>
            <tr>
            </tr>
            <tr>
            </tr>
                <td class="height90" colspan="4" rowspan="3"></td>
                <td class="height90" colspan="6" rowspan="3"></td>
        </table> 
        </div>

    </div>





    <div class="boxA">
        <div class="box5">
            <table>
                <tr>
                    <td>№</td>
                    <td colspan="8">作業内容</td>
                    <td colspan="14">ﾁｪｯｸ項目</td>
                    <td colspan="3">作業ﾁｪｯｸ</td>
                    <td colspan="3">検査ﾁｪｯｸ</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td colspan="8">入庫時一回り点検（外装・内装）</td>
                    <td colspan="14">　ｷｽﾞ・凹みなきこと</td>
                    <td colspan="3">□</td>
                    <td colspan="3">□</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td colspan="8">作業ｽﾍﾟｯｸ識別</td>
                    <td colspan="14">□にんじん 　　 □キャベツ</td>
                    <td colspan="3">□</td>
                    <td colspan="3">□</td>
                </tr>
                <tr>
                    <td rowspan="10">3</td>
                    <td colspan="3" rowspan="10">搭載品</td>
                    <td colspan="5" rowspan="3">工場搭載品確認</td>
                    <td colspan="14">クリップ　 　 （4個）</td>
                    <td colspan="3">□</td>
                    <td colspan="3">□</td>
                </tr>
                <tr>
                    <td colspan="14">ラベル 　（1個）</td>
                    <td colspan="3">□</td>
                    <td colspan="3">□</td>
                </tr>
                <tr>
                    <td colspan="14">防腐剤　　　（2個）</td>
                    <td colspan="3">□</td>
                    <td colspan="3">□</td>
                </tr>
                <tr>
                    <td colspan="2" rowspan="7">搭載</td>
                    <td>①</td>
                    <td colspan="2"></td>
                    <td colspan="14">ビタミン &lt;A&gt; （1個）</td>
                    <td colspan="3">□</td>
                    <td colspan="3">□</td>
                </tr>
                <tr>
                    <td rowspan="2">②</td>
                    <td colspan="2">にんじん</td>
                    <td colspan="14">ビタミン&lt;B&gt; （1個）</td>
                    <td colspan="3">□</td>
                    <td colspan="3">□</td>
                </tr>
                <tr>
                    <td colspan="2">キャベツ</td>
                    <td colspan="14">ビタミン&lt;C&gt; （1個）</td>
                    <td colspan="3">□</td>
                    <td colspan="3">□</td>
                </tr>
                <tr>
                    <td>③</td>
                    <td colspan="2"></td>
                    <td colspan="14">ビタミン＜D＞ （1個)</td>
                    <td colspan="3">□</td>
                    <td colspan="3">□</td>
                </tr>
                <tr>
                    <td>④</td>
                    <td colspan="2"></td>
                    <td colspan="14">ビタミン＜E＞ （1個）</td>
                    <td colspan="3">□</td>
                    <td colspan="3">□</td>
                </tr>
                <tr>
                    <td>⑤</td>
                    <td colspan="2"></td>
                    <td colspan="14">ビタミン＜F&gt; 　　　　　　 （2個）</td>
                    <td colspan="3">□</td>
                    <td colspan="3">□</td>
                </tr>
                <tr>
                    <td>⑥</td>
                    <td colspan="2"></td>
                    <td colspan="14">ビタミン&lt;G&gt; 　 （2個）</td>
                    <td colspan="3">□</td>
                    <td colspan="3">□</td>
                </tr>
                <tr>
                    <td rowspan="4">4</td>
                    <td colspan="8" rowspan="4">測定結果</td>
                    <td colspan="4" rowspan="2">
                        <table>
                            <tr>
                                <td colspan="4" rowspan="2">測定数値記入</td>
                            </tr>
                        </table>
                    </td>
                    <td colspan="3" rowspan="2">ビニール袋</td>
                    <td colspan="5" rowspan="2"></td>
                    <td colspan="2" rowspan="2">ｇ</td>
                    <td colspan="3" rowspan="4">□</td>
                    <td colspan="3" rowspan="4">□</td>
                </tr>
                <tr>
                </tr>
                <tr>
                    <td colspan="14" rowspan="2">　　　　 合否
                    </td>
                </tr>
                <tr>
                </tr>

            </table>
        </div>
    </div>
</body>

</html>

stylesheet.css

body {
    border    : solid 8px yellow;
    box-sizing: border-box;
    margin    : auto;
    width: 700px;
    height: calc(700px * 1.414);
}


div {
    border    : solid 8px white;
    box-sizing: border-box;



}

.box1 {
    float      : left;
    font-size  : 28px;
    font-weight: bold;
}

.box4,
.box5 {
    float      : left;
}


.box7,
.box8,
.box9,
.box13 {
    float      : left;
}


.box2,
.box6 {
    float: right;
}

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

.mt-50 {
    margin-top: -150px;
}
    table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 2px solid black;
    }

    th {
        background: greenyellow;
        color: white;
    }

    th,
    td {
        width: 80px;
        border-top: 1px solid black;
        border-left: 1px solid black;
        padding: 5px;
        text-align: center;
    }

    td.double {
        border-top: 3px double black;
    }

    td.dotted {
        border-top: 1px dotted black;
    }

    box7,
.box10,
.box11,
.box12 {
    width: 150px;
    height: 24px;
    margin: 16px 0px;
    border-bottom:  solid 1px black;
}

.height90{
    height: 90px;
}
0

2Answer

amiya-se
@amiya-se

回答　floatを使うと要素の高さが0になってしまうので枠線が上手く引けなくなりますので、heightで高さを直接指定してあげて幅も指定してあげる必要があります。

以下コードと説明です。

まず枠で囲いたい要素にclass名を付けます。※今回はborder-pink

<div class="boxA">
        <div class="boxA border-pink">
            <div class="box4">
                トラック

次にCSSで幅と高さを指定し、枠線を付けて内側に引いてねと記述します。

.border-pink {
  width: fit-content;//中身に合わせて幅を決めてねという意味
  height: 150px;
  border: solid 8px pink;
  box-sizing: border-box;
  float: left; //これを付けないと右にある作業日の枠が下にずれます
}

枠線に白い隙間で出たのでそれを修正します。
間隔を開けたい場合はmarginというものがありますのでそれを使いましょう。

div {
    /* border    : solid 8px white; /←これ消す*/
    box-sizing: border-box;
    margin: 8px;
}

高さや幅がお好みで無い場合はご自身で調整してみてくださいね。

1

Your answer might help someone💌

LoginSign Up

Popular Questions