Qiita Teams that are logged in
You are not logged in to any team
Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)Service
Qiita JobsQiita ZineQiita Blog
解決したいこと
下図のように罫線（四角ピンクの部分）を描画したい
やさい.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">ビタミン <A> （1個）</td>
<td colspan="3">□</td>
<td colspan="3">□</td>
</tr>
<tr>
<td rowspan="2">②</td>
<td colspan="2">にんじん</td>
<td colspan="14">ビタミン<B> （1個）</td>
<td colspan="3">□</td>
<td colspan="3">□</td>
</tr>
<tr>
<td colspan="2">キャベツ</td>
<td colspan="14">ビタミン<C> （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> （2個）</td>
<td colspan="3">□</td>
<td colspan="3">□</td>
</tr>
<tr>
<td>⑥</td>
<td colspan="2"></td>
<td colspan="14">ビタミン<G> （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
2
Answer
Report this answer
回答 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