HTML/CSSで実験プロトコルWebページを作る
実験プロトコルをWordやPDFで共有したことはありますか？バージョンが混乱し、フォーマットが崩れ、「最終_最終_本当に最終.docx」が積み上がりますよね。
Webページは違います。URL1つで誰でも最新バージョンが見られ、どのデバイスでもきれいに表示されます。実験ノートからWebブラウザへ — プロトコルの進化です。
HTML：文書の骨格
HTMLは「これは見出し」「これはリスト」とブラウザに伝えるタグ言語です。DNA配列でコドンがアミノ酸を指定するように、HTMLタグはコンテンツの役割を指定します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Western Blot プロトコル</title>
</head>
<body>
<h1>Western Blot プロトコル</h1>
<p>Target: EGFR (Epidermal Growth Factor Receptor)</p>
<p>最終更新: 2026-06-27</p>
</body>
</html>主要タグ：
<h1>~<h6>：見出し（h1が最大）— 論文のSection/Subsectionと同じ<p>：段落 — 本文テキスト<ul>、<ol>：順序なし/順序ありリスト — 材料リスト、実験ステップ<strong>：太字 — 重要な濃度、温度の強調<a href="...">：リンク — 参考論文、製品ページへの接続
リストで材料とステップを整理する
実験プロトコルの核心は材料リストとステップごとの手順です。
<h2>必要な材料</h2>
<ul>
<li>1次抗体: Anti-EGFR (1:1000希釈)</li>
<li>2次抗体: Anti-rabbit HRP (1:5000)</li>
<li>PVDF膜 (0.45 μm)</li>
<li>転写バッファー: 25 mM Tris, 192 mM Glycine, 20% Methanol</li>
</ul>
<h2>実験ステップ</h2>
<ol>
<li>SDS-PAGEゲル準備（10%分離ゲル + 5%濃縮ゲル）</li>
<li>タンパク質ローディング：各ウェルに<strong>30 μg</strong>ロード</li>
<li>電気泳動：<strong>120V、90分</strong></li>
<li>PVDF膜への転写：<strong>100V、60分</strong>（氷上）</li>
<li>ブロッキング：5%スキムミルク/TBST、<strong>室温1時間</strong></li>
<li>1次抗体反応：4°C、<strong>overnight</strong></li>
<li>洗浄：TBSTで5分 × 3回</li>
<li>2次抗体反応：室温、1時間</li>
<li>ECL検出</li>
</ol><ul>は材料のように順序が関係ないもの、<ol>は実験ステップのように順序が重要なものに使います。
CSS：文書にスタイルを着せる
CSSはHTMLの「服」です。同じDNA配列も可視化方法によって全く異なって見えるように、同じHTMLもCSSによって完全に変わります。
<style>
body {
font-family: 'Noto Sans JP', sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 40px 20px;
line-height: 1.7;
color: #1a1a1a;
}
h1 {
color: #2d5a3d;
border-bottom: 3px solid #2d5a3d;
padding-bottom: 8px;
}
h2 {
color: #3d7a5a;
margin-top: 32px;
}
strong {
color: #c0392b;
background: #fef3f2;
padding: 1px 4px;
border-radius: 3px;
}
li {
margin-bottom: 8px;
}
</style>主要CSSプロパティ：
font-family：フォント — 可読性の出発点max-width+margin: 0 auto：中央揃え — 読みやすい幅line-height：行間 — 1.7が学術文書に最適color：文字色 — 重要な数値の強調に活用border-bottom：下線 — セクションの区切り
表で条件を整理する
実験条件を表で整理すると一目で比較できます。
<h2>抗体条件まとめ</h2>
<table>
<thead>
<tr>
<th>抗体</th>
<th>希釈比率</th>
<th>反応条件</th>
<th>時間</th>
</tr>
</thead>
<tbody>
<tr>
<td>Anti-EGFR（1次）</td>
<td>1:1000</td>
<td>4°C</td>
<td>Overnight</td>
</tr>
<tr>
<td>Anti-rabbit HRP（2次）</td>
<td>1:5000</td>
<td>室温</td>
<td>1時間</td>
</tr>
</tbody>
</table>
<style>
table {
width: 100%;
border-collapse: collapse;
margin: 16px 0;
}
th, td {
border: 1px solid #ddd;
padding: 10px 14px;
text-align: left;
}
th {
background: #f0f7f4;
font-weight: 600;
color: #2d5a3d;
}
tr:hover {
background: #f9fafb;
}
</style>注意事項ボックスを作る
プロトコルで「これだけは必ず！」という注意事項を目立たせます。
<div class="warning">
<strong>注意：</strong> 転写は必ず氷上で行ってください。
メタノールを含む転写バッファーは発熱し、
過熱するとタンパク質変性が起こります。
</div>
<div class="tip">
<strong>ヒント：</strong> PVDF膜は使用前にメタノールで
30秒間活性化する必要があります。乾燥した膜にはタンパク質が結合しません。
</div>
<style>
.warning {
background: #fef3f2;
border-left: 4px solid #e74c3c;
padding: 16px 20px;
border-radius: 0 8px 8px 0;
margin: 16px 0;
line-height: 1.6;
}
.tip {
background: #f0f7f4;
border-left: 4px solid #2d5a3d;
padding: 16px 20px;
border-radius: 0 8px 8px 0;
margin: 16px 0;
line-height: 1.6;
}
</style>やってみよう（Faded Example）
空欄を埋めて実験材料リストをHTMLで完成させてください。
<h2>必要な材料</h2>< ><li>PBS buffer (pH 7.4)</li><li>Trypsin-EDTA (0.25%)</li><li>FBS (10%)</li></ >
よくあるエラーと解決法
Q: 文字が小さすぎて見えません
bodyにfont-size: 16px以上を設定してください。ブラウザのデフォルトは16pxですが、明示的に指定するのが良いです。
Q: タグを閉じないとどうなりますか？
HTMLは寛容なのでエラーなく通過しますが、レイアウトが予想と異なる表示になります。開始タグ（<ul>）を書いたら必ず閉じタグ（</ul>）を書いてください。
Q: CSSが適用されません
<style>タグが<head>の中にあるか、セレクターのスペルが合っているか確認してください。クラスセレクターは.warningのようにドット(.)で始まります。
Q: <script>は<head>の中にだけ入れるべきですか？<body>に入れてはダメですか？
両方可能ですが、実務では<body>の最下部に置くことが多いです。理由は2つ：
- ブラウザはHTMLを上から順番に読みます。
<head>に<script>があると画面を描く前にスクリプトを実行するので、ローディングが遅くなる可能性があります。 document.getElementById("result")のようなコードが<head>で実行されると、まだ<body>の要素が作られていないためnullになります。
<head>の中に置きたい場合はdefer属性を追加してください：<script defer src="app.js"></script>。これでHTML解析が完了した後に実行されます。
Q: 絶対パス（/page）と相対パス（page）の違いは何ですか？
- 絶対パス：
/で始まる。サーバールート基準。/samples/listは常にhttp://ドメイン/samples/listを指します。 - 相対パス：
/なしで始まる。現在のドキュメント位置基準。現在のページがhttp://ドメイン/admin/dashboardなら、listはhttp://ドメイン/admin/listを指します。
リンクやフォームのactionでパスが意図通りに動かない場合、絶対/相対パスの混同が原因である可能性が高いです。
Q: GitHub Pagesにデプロイしたのに404が出ます
GitHub Pagesはデフォルトでindex.htmlファイルを最初のページとして探します。ファイル名がmy_page.htmlのように別の名前だと、URLにファイル名を直接入力する必要があります。またファイル名にスペースがあるとURLで%20とエンコードする必要があります。可能であればファイル名にスペースを入れず、メインページはindex.htmlにしましょう。