Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

@FarragoYan

Marp for VSCode で SIer な仕様書・設計書を作成してみた

0
Posted at

はじめに

Excel 方眼紙を止めたい...。やっぱりメンテナンスが大変すぎる...。

調べたところ Marp for VSCode で代替できそうに見えたので、実際に作ってみました。WEB 屋さんではないのでHTML/CSS は素人レベルです。

完成品

レイアウトは以下の通りです。

ソース

ソースは長くなるので、折り畳みます。 
---
marp: true
theme: default
paginate: false
header: ''
footer: ''
backgroundColor: White
color: Black
size: 4:3
_class: lead
---

<!--
===========================================================
★ 共通
===========================================================
-->

<style>

/* セクション */
section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
  background-color: White;
  font-family: monospace;
}

</style>

<!--
===========================================================
★ タイトル ページ
===========================================================
-->

<!--
-----------------------------------------------------------
☆ CSS 設定
-----------------------------------------------------------
-->

<style>

/* 図書番号・ボックス */
.doc-number-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 40px;
  border: 0px solid lightgray;
}

/* 図書番号 */
.doc-number {
  text-align: left;
  width: 100%;
  font-size: 16px;
}

/* メインタイトル・ボックス */
.main-title-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 40px;
  border: 0px solid lightgray;
}

/* メインタイトル */
.main-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 200px;
  margin-bottom: 0;
  padding: 20px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

/* メインタイトル内の横線 */
.main-title-separator {
  width: 80%;
  margin: 10px 0;
  border-top: 1px solid black;
}

/* バージョン情報・ボックス */
.version-info-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 40px;
  border: 0px solid lightgray;
}

/* バージョン情報 */
.version-info {
  font-size: 16px;
  text-align: center;
}

/* 押印欄・ボックス */
.signature-table-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 40px;
  border: 0px solid lightgray;
}

/* 押印欄 */
.signature-table {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  text-align: center;
}
.signature-table th {
  border: 1px solid black;
  height: 20px;
  line-height: 20px;
  background-color: paleturquoise;
  font-weight: bold;
}
.signature-table td {
  border: 1px solid black;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background-color: white;
}

/* 開発会社・ボックス */
.company-name-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 40px;
  border: 0px solid lightgray;
}

/* 開発会社 */
.company-name {
  font-size: 16px;
  text-align: center;
}

</style>

<!--
-----------------------------------------------------------
☆ 本文
-----------------------------------------------------------
-->

<!-- 図書番号 -->
<div class="doc-number-box">
  <div class="doc-number">
    図書番号: DOC-2026-001
  </div>
</div>

<!-- タイトル -->
<div class="main-title-box">
  <div class="main-title">
    XXXX ソフトウェア
    <div class="main-title-separator"></div>
    機能仕様書
  </div>
</div>

<!-- バージョン情報 -->
<div class="version-info-box">
  <div class="version-info">
    2021 年 01 月 01 日<br>
    第 1.1 版
  </div>
</div>

<!-- 押印欄 -->
<div class="signature-table-box">
  <table class="signature-table">
    <tr>
      <th>承認</th>
      <th>照査</th>
      <th>作成</th>
    </tr>
    <tr>
      <td>XXXX</td>
      <td>XXXX</td>
      <td>XXXX</td>
    </tr>
  </table>
</div>

<!-- 開発会社 -->
<div class="company-name-box">
  <div class="company-name">
    株式会社 XXXX ソリューションズ
  </div>
</div>

---

<!--
===========================================================
★ 改訂履歴 ページ
===========================================================
-->

<!--
-----------------------------------------------------------
☆ CSS 設定
-----------------------------------------------------------
-->

<style>

/* タイトル・ボックス */
.history-title-box {
  width: 100%;
  margin-bottom: 20px;
  border: 0px solid lightgray;
}

/* タイトル */
.history-title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}

/* 改訂履歴・ボックス */
.history-table-box {
  width: 100%;
  margin-bottom: 20px;
  border: 0px solid lightgray;
}

/* 改訂履歴 */
.history-table {
  display: table;
  width: 100%;
  margin: 0 auto;
  table-layout: fixed;
  border-collapse: collapse;
  border: 2px solid black;
  font-size: 14px;
}

/* 改訂履歴 セルの設定 */
.history-table th,
.history-table td {
  padding: 6px;
  text-align: center;
  min-height: 20px;
  height: auto;
  overflow-wrap: break-word;
  border: 1px solid black;
  background-color: white;
}

/* 改訂履歴 ヘッダの設定 */
.history-table th {
  font-weight: bold;
  border-bottom: 2px solid black;
  background-color: paleturquoise;
}

/* 改訂履歴 カラムの設定 */
.history-table th:nth-child(1),
.history-table td:nth-child(1) { width: 8%; }
.history-table th:nth-child(2),
.history-table td:nth-child(2) { width: 12%; }
.history-table th:nth-child(3),
.history-table td:nth-child(3) {
  width: 70%;
  text-align: left;
  padding-left: 8px;
  padding-right: 8px;
}
.history-table th:nth-child(4),
.history-table td:nth-child(4) { width: 10%; }

</style>

<!--
-----------------------------------------------------------
☆ 本文
-----------------------------------------------------------
-->

<!-- タイトル -->
<div class="history-title-box">
  <div class="history-title">
    改訂履歴
  </div>
</div>

<!-- 改訂履歴テーブル -->
<div class="history-table-box">
<table class="history-table">
  <!-- ヘッダ -->
  <tr>
    <th>版</th>
    <th>改訂日</th>
    <th>改訂内容</th>
    <th>改定者</th>
  </tr>
  <!-- 明細 -->
  <tr>
    <td>1.0</td>
    <td>2020/12/31</td>
    <td>初版作成。</td>
    <td>XXXX</td>
  </tr>
  <tr>
    <td>1.1</td>
    <td>2021/01/01</td>
    <td>誤字や表記揺れの修正。</td>
    <td>XXXX</td>
  </tr>
  <!-- 明細（空行） -->
  <tr><td>&nbsp;</td><td></td><td></td><td></td></tr>
  <tr><td>&nbsp;</td><td></td><td></td><td></td></tr>
  <tr><td>&nbsp;</td><td></td><td></td><td></td></tr>
  <tr><td>&nbsp;</td><td></td><td></td><td></td></tr>
  <tr><td>&nbsp;</td><td></td><td></td><td></td></tr>
  <tr><td>&nbsp;</td><td></td><td></td><td></td></tr>
  <tr><td>&nbsp;</td><td></td><td></td><td></td></tr>
  <tr><td>&nbsp;</td><td></td><td></td><td></td></tr>
  <tr><td>&nbsp;</td><td></td><td></td><td></td></tr>
  <tr><td>&nbsp;</td><td></td><td></td><td></td></tr>
  <tr><td>&nbsp;</td><td></td><td></td><td></td></tr>
  <tr><td>&nbsp;</td><td></td><td></td><td></td></tr>
  <tr><td>&nbsp;</td><td></td><td></td><td></td></tr>
</table>
</div>

---

<!--
===========================================================
★ 1. ソフトウェア概要 ページ
===========================================================
-->

<!--
-----------------------------------------------------------
☆ CSS 設定
-----------------------------------------------------------
-->

<style>

/* ページヘッダ・ボックス */
.page-header-box {
  width: 100%;
  margin-bottom: 30px;
  border: 0px solid lightgray;
}

/* ページヘッダ */
.page-header-table {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 2px solid black;
  font-size: 14px;
}

/* ページヘッダ セルの設定 */
.page-header-table th,
.page-header-table td {
  border: 1px solid black;
  padding: 6px 8px;
  background-color: White;
  vertical-align: middle;
}

/* ページヘッダ ヘッダの設定 */
.page-header-table th {
  text-align: center;
  font-weight: bold;
  background-color: paleturquoise;
}

/* システム名 */
.system-name {
  width: 30%;
  font-size: 18px;
  text-align: center;
}

/* ページ名 */
.page-name {
  width: 45%;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

/* 最終編集日／最終編集者 */
.last-updated-label {
  width: 10%;
  text-align: center;
}
.last-updated-value {
  width: 15%;
  text-align: center;
}

/* ページコンテンツ・ボックス */
.page-contents-box {
  width: 100%;
  margin-bottom: 30px;
  border: 0px solid lightgray;
}

/* ページコンテンツ */
.page-contents {
  width: auto;
  max-width: 100%;
  margin: 0 10px 10px 10px;
  font-size: 14px;
  border: 0px solid lightgray;
  text-align: left;
}

</style>

<!--
-----------------------------------------------------------
☆ 本文
-----------------------------------------------------------
-->

<!-- ページヘッダ -->
<div class="page-header-box">
<table class="page-header-table">
  <tr>
    <!-- システム名 -->
    <th rowspan="2" class="system-name">
      XXXX ソフトウェア<br>機能仕様書
    </th>
    <!-- ページ名 -->
    <td rowspan="2" class="page-name">
      1. ソフトウェア概要
    </td>
    <!-- 最終編集日 -->
    <th class="last-updated-label">最終編集日</th>
    <td class="last-updated-value">2021/01/01</td>
  </tr>
  <tr>
    <!-- 最終編集者 -->
    <th class="last-updated-label">最終編集者</th>
    <td class="last-updated-value">XXXX</td>
  </tr>
</table>
</div>

<!-- ページコンテンツ -->
<div class="page-contents-box">
<div class="page-contents">
<p>
  本ソフトウェアは、社員の労働力を最大限に活用することを目的とした革新的なシステムを提供します。
</p>
<p>
  各従業員の作業スケジュールをリアルタイムで調整し、効率の悪い作業時間を排除。<br>
  休息は最小限に抑え、成果を最大化します。
</p>
<p>
  主な対象ユーザーは全社従業員で、常時モニタリング対象です。
</p>
<p>
  主な機能は以下の通りです：
</p>
<ul>
  <li>作業スケジュールの自動最適化</li>
  <li>休憩時間の最小化アルゴリズム</li>
  <li>業務進捗に応じたリアルタイムタスク割り振り</li>
  <li>達成度に応じた評価ポイント管理</li>
</ul>
<p>
  セキュリティ要件として、ログイン認証は厳格に管理され、作業ログは永久保存。<br>
  社員がサボらないよう常に監査可能です。
</p>
<p>
  運用・保守は専属チームが常時対応。<br>
  バックアップは毎日自動取得されるため、データの消失を防ぎ、迅速な復旧が可能です。
</p>
</div>
</div>

おわりに

納品の形式が Excel や Word でないなら使えるかも。

0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?