htmlとcssを生成するプログラム

プログラムコード

  1. html = """
  3. #作りたいHTMLを書いていく。これはいつも使ってるテンプレ。
  4. <!DOCTYPE html>
  5. <html lang="jp">
  6.     <head>
  7.         <meta charset="UTF-8">
  8.         <title>my-page</title>
  9.         <link rel="stylesheet" href="./css/my-page.css">
  10.         <link rel="shortcut icon" href="./images/xbp.ico">
  11.     </head>
  12.     <body>
  13.         <main>
  14.             <header>
  15.                 <nav>
  16.                     <ul>
  17.                         <li><a href="../index.html">XBP</a></li>
  18.                         <li><a href="../de12/index.html">デザイン演習?・?</a></li>
  19.                         <li><a href="../digi_fab/index.html">デジタルファブリケーション</a></li>
  20.                         <li><a href="../digi_fab/Other object.html">その他</a></li>
  21.                     </ul>
  22.                 </nav>
  23.             </header>
  25.             <h1>見出しを入力</h1>
  26.             <p> 文章を入力</p>
  27.             <footer>
  28.                 <p>Copy right 2023 名前</p>
  29.             </footer>
  30.         </main>
  31.     </body>
  32. </html>
  33. """
  35. CSS= """
  37. #さっきのCSSver。これもいつも使ってるテンプレ。
  38. @charset "UTF-8";
  40. header {
  41.     background-color: #333; /* ヘッダーの背景色を設定 */
  42.     color: white; /* ヘッダーテキストの色を設定 */
  43.     padding: 20px; /* ヘッダー内の余白を設定 */
  44. }
  46. nav ul {
  47.     list-style: none;
  48.     margin: 0;
  49.     padding: 0;
  50. }
  52. nav li {
  53.     display: inline;
  54.     margin-right: 20px;
  55. }
  57. nav a {
  58.     text-decoration: none;
  59.     color: white; /* ナビゲーションリンクのテキスト色を設定 */
  60. }
  62. main{
  63.     background-color: #b4c1d1;
  64. }
  66. .quote-001 {
  67.     max-width: 500px;
  68.     background-color: #ffffff;
  69.     padding: 1em 1.5em;
  70.     border-left: 4px solid #d6dde3;
  71.     color: #333333;
  72. }
  74. .quote-001:has(cite) {
  75.     padding-bottom: .5em;
  76. }
  78. .quote-001 p {
  79.     margin-top: 0;
  80. }
  82. .quote-001 p:last-of-type {
  83.    margin-bottom: 0;
  84. }
  86. /* フッタースタイル */
  87. footer {
  88.     text-align: center; /* テキストを中央に配置 */
  89.     background-color: #333; /* フッターの背景色を設定 */
  90.     color: white; /* フッターテキストの色を設定 */
  91.     padding: 10px; /* フッター内の余白を設定 */
  92. }
  94. .footer a{
  95.     
  96.     display: inline-block;
  97.     justify-content: center;
  98.     color: #ffffff;
  99.     list-style: none;
  101. }
  103. .box{
  104.     position: relative;
  105.     background-color: #ffffff;
  106.     margin: 1em auto;
  107.     padding: 1em 1.5em;
  108.     border: 2px solid #2589d0;
  109.     border-radius: 3px;
  110.     color: #333;
  111. }
  113. .box::before {
  114.     display: flex;
  115.     justify-content: center;
  116.     align-items: center;
  117.     position: absolute;
  118.     border-radius: 3px;
  119.     background-color: #2589d0;
  120.     color: #fff;
  121.     font-weight: 600;
  122.     content: attr(data-number);
  123. }
  125. .sns-button {
  126.     display: flex;
  127.     justify-content: center;
  128.     margin-top: 20px;
  129.     }
  131. .sns-button li {
  132.     width: 30px;
  133.     margin-left: 10px;
  134.     margin-right: 10px;
  135.     list-style: none;
  136.     margin: 0 20px;
  137.     }
  140. """
  142. #my-page.(拡張子)を作るよって指示。これでHTMLとCSSが自動で生成される。encodingを忘れないでね。
  143. with open("my-page.html", "w", encoding="utf-8") as f:
  144.     f.write(html)
  146. with open("my-page.css", "w", encoding="utf=8") as f:
  147.     f.write(CSS)

プログラムの意図について

私が所属しているプログラム、X-Business Programでは自身でhtmlとcssを作成する必要がありました。そこで私はPythonでいつも使っているhtmlとcssを生成するプログラムを作成しました。