phpに夢中で‥

タイトルの通りですが、phpにハマり更新してなかったです。。。

色々作ってる最中ですが、まだまだです。

現在は書類系をやっているので、html部分を公開しておきます。phpで連動して呼び出せる想定のものです。

印刷はA4指定にしてます。

デモ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>注文書</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

<style>

@charset "UTF-8";

body { /*センター寄せのマージンあり*/
  width:99%;
  margin-right: auto;
  margin-left : auto;
  font-family: 'Hiragino Maru Gothic ProN';
}
a {
  text-decoration:none;
  color:#686868;
}
.inner-center1 {
text-align: center;
}
.contner1 {
width: 100%;
position: absolute;
}
.inner-left1 {
text-align: left;
position: absolute;
top: 0;
margin-left: 5%;
}
.inner-right1 {
text-align:left; /*テキスト左寄せ*/
position: absolute;
top: 40px;
right: 0; /*0指定で右寄せ*/
margin-right: 5%;
}
.inner-center2 {
margin-top: 50px;
}
.contner2 {
position: absolute;
width: 100%;
top: 300px;
text-align: center;
}
.inner-box table {
width: 90%;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
.inner-box th {
width: 30%;
border-bottom: solid 1px #000;
padding-top:30px;
}
.inner-box td {
text-align: left;
width: 70%;
border-bottom: solid 1px #000;
padding-top:30px;
}
.inner-right2 {
text-align: right;
margin-right: 5%;
margin-top: 50px;
}
.inner-left1 select {
  outline: 0;
  border: 0px;
  background: transparent;
  /*selectの文字サイズ変更には以下の設定が必要*/
font-size:16px;
border:1px;
}

/*印刷指定*/
@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
    height: auto; /*2ページ目の白紙解除*/
  }
}

</style>
</head>
<body id="top">
<div class="inner-center1">
<h2>注文書</h2>
</div><!--center1_end-->

<div class="contner1">

<div class="inner-left1">
<p>郵便番号<br>
住所</p>
<p>会社名 御中</p>
</div><!--left1_end-->

<div class="inner-right1">
<p>発注日</p>
<p>郵便番号<br>
住所</p>
<p>会社名<br>
代表者名</p>
</div><!--right1_end-->

</div><!--contner1_end-->

<div class="contner2">

<div class="inner-center2">
<p>契約文言<br>2行目<br>3行目</p>
<br>
<p>記</p>
</div><!--center2_end-->

<div class="inner-box">
<table>
<tr>
<th>
タイトル
</th>
<td>
本文
</td>
</tr>
<tr>
<th>
タイトル
</th>
<td>
本文
</td>
</tr>
<tr>
<th>
タイトル
</th>
<td>
本文
</td>
</tr>
<tr>
<th>
タイトル
</th>
<td>
本文
</td>
</tr>
<tr>
<th>
タイトル
</th>
<td>
本文
</td>
</tr>
<tr>
<th>
タイトル
</th>
<td>
本文
</td>
</tr>
<tr>
<th>
タイトル
</th>
<td>
本文
</td>
</tr>
</table>
</div><!--inner-box_end-->

<div class="inner-right2">
<p>以上</p>
</div><!--right2_end-->
</div> <!--contner2_end-->

</body>
</html>

デモ

YAM.lab
  • YAM.lab

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です