連載 5 : pythonとhtmlの連動

『出力フォーム作成』

出力フォーム作成（htmlとcss使用）

コードは以下の通り

<!DOCTYPE html>
<html>
	<head>
		<title>いちろ献立</title>
		<style>
			@page {
				size: A4;
				magin:10mm;
			}

			@media print {
				body {
					width: 190mm;
				}
			}

			body {
				border: 2px solid black;
				width: 210mm;
				height: 148mm;
				padding-right: 50px;
				padding-left:50px;
			}

			h1 {
				font-family: Georgia, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiriyo, serif;
				font-size: 60px;
				text-align: center;
				margin-top: 10px;
				margin-bottom: 0;
				padding-bottom: 0;
			}

			h2 {
				font-size: 35px;
				text-align: center;
				padding: 0;
				margin: 0;
			}

			h3 {
				font-size: 35px;
				margin: 0;
			}

			p {
				font-size: 25px;
				margin: 2px;
			}

			img {
				position: absolute;
				top: 200px;
				left: 600px;
				width: 250px;
				height: 250px;
			}

			#aozorasakura {
				font-size: 30px;
				margin-top: 30px;
			}

			#tyuuigaki {
				font-size: 20px;
			}
		</style>
	</head>
		<body>
			<h1>%s　様</h1>
			<h2>%s<span style="color:yellow">%s</span>
			<h3>本日の献立</h3>
			<p>&#9312;%s</p>
			<p>&#9313;%s</p>
			<p>&#9314;%s</p>
			<p>&#9315;%s</p>
			<p>&#9316;%s</p>
			<p>&#9317;%s</p>
			<img src="/images/image%s.jpg" alt="image">
			<p id="aozorasakura">
			<span style="color: red">す</span>
			<span style="color: orange">ず</span>
			<span style="color: yellow">き</span>
			<span style="color: magenta">いちろ</span>
			<span style="color: blue">弁当</span>
			TEL 000-000-0000
			</p>
			<p id="tyuuigaki">※仕入れ状況により、献立・食材が変更する場合がございます。</p>
		</body>
</html>

htmlとcssを使って作成
以上

zono note

日々の学び、気付きを大切に綴りたい

連載 5 : pythonとhtmlの連動