アバウトページの説明を書く
このページでは、単純にHTML5文書で説明文を出力します。また、第1回のスタイルシートの「pc.css」ファイルと「mobile.css」を持ってきておいてください。
サンプルコード「pages」→「about.py」ファイル
def html(cur):
print('''
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アバウト - 一筆書きBBS</title>
<link href="css/pc.css" rel="stylesheet" type="text/css" />
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-width:1023px)" />
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id="left">
<header>
<h1>アバウト</h1>
<nav>
<a href="?page=home">HOME</a>
<a href="?page=draw">DRAW</a>
<a href="?page=about">ABOUT</a>
</nav>
</header>
<h2>このサイトについて</h2>
<ul>
<li>このサイトは一筆書きの掲示板です。</li>
<li>スマホでも見れますが、パソコンの方が上手く見れます。</li>
</ul>
<h2>お絵描きページ</h2>
<ul>
<li>クリック＆ドラッグで曲線を描けます。</li>
<li>マウスホイールでアンドゥやリドゥできます。<br />こうすることにより一筆書きのプロセスをまるでアニメーションしているように見せられます。</li>
<li>「送信」で絵を掲示板に載せられます。</li>
</ul>
<h2>作者について</h2>
<ul>
<li>このサイトの作者は大西 武です。<br /><a href="https://profile.vixar.jp" target="_blank">profile.vixar.jp</a></li>
</ul>
<h2>姉妹サイト</h2>
<ul>
<li><a href="https://vexil.jp" target="_blank">vexil.jp</a></li>
<li><a href="https://vixar.jp" target="_blank">vixar.jp</a></li>
<li><a href="https://3d-quiz.com" target="_blank">3d-quiz.com</a></li>
<li><a href="https://roxiga.com" target="_blank">roxiga.com</a></li>
<li><a href="https://cyberdelia.net" target="_blank">cyberdelia.net</a></li>
<li><a href="https://cco24.com" target="_blank">cco24.com</a></li>
</ul>
''')
サンプルコードの解説
Page 1で書いたコードに「アバウト」ページの説明文をHTML5文書で追記するだけです。今回はこのような内容を書きましたが、自由に書き替えてください。
コラム「ターミナルでPythonをテスト」
PythonのWebアプリはWebブラウザでエラーになっても、エラー箇所の行番号を教えてくれません。そこで普通に「ターミナル」で「python -m index.py」などとテストするといいです。その際Webの機能を使っている部分は「コメントアウト」して、ターミナルでテストします。プログラミング言語「PHP」ならWebブラウザにエラー行を教えてくれるんですけどね。
