NINA

人生のテーマ

　たくさんの文学作品がよまれている。作品はテーマをもっている。わたしたちの人生のテーマはどこに見出されているだろうか。文学の作品はよみかえすことができる。けれどもわたしたちの人生はたった一度しかない。美しい六月の若葉の下を、その青い美しさに照りはえる自分をわれからめでて歩く人々は、それぞれにいちどしかない自分の一生を、どういう主題で貫こうとしているだろうか。詩や小説が人々によまれ、感動されるのは、詩よりも小説よりも先に、その人たちの一度しかない人生が生きられているからである。〔一九四八年八月〕 - 青空文庫宮本百合子「人生のテーマ」より

Title by FELICITE

テンプレート公開 2019/7/5
<style> @charset "UTF-8"; /* Template & Designed by Towako. */ /* https://ninawas.me */ /* ウェブフォントの読み込み */ @import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap'); @font-face { font-family: 'はんなり明朝'; font-display: swap; src: url('https://cdn.leafscape.be/hannari/hannari_web.woff2') format("woff2"); } /*------------------------------------------------- このフォントはIPAフォントライセンスv1.0の下で提供されています。 http://ipafont.ipa.go.jp/ipa_font_license_v1.html -------------------------------------------------*/ /* 全体に適用する */ * { padding: 0; margin: 0; box-sizing: border-box; font-weight: normal; font-family: 'Noto Serif JP', serif; } /* リンク */ a { text-decoration: none; border-bottom: 1px solid #000; color: #000; } /* 基本設定 */ body { text-align: justify; word-break: break-all; background-color: #fff; line-height: 1.7; letter-spacing: 0.1em; font-size: 13px; color: #000; } /* コンテナサイズ */ header, section, article, footer { margin: 3em auto; width: 80%; max-width: 500px; } /* 見出し */ header h1 { margin: 3em auto 0; } /* フォントの指定 */ header h1 span, article h2 { font-family: 'はんなり明朝', 'Noto Serif JP', serif; } /* フェードイン */ header h1 span:nth-of-type(1) { animation: FadeIn 1s; } header h1 span:nth-of-type(2) { animation: FadeIn 2s; } header h1 span:nth-of-type(3) { animation: FadeIn 3s; } header h1 span:nth-of-type(4) { animation: FadeIn 4s; } /* アイコン */ .icon { display: inline-block; margin: 1.5em 1em 1em; width: 15px; height: 15px; background: url('画像URL') center/cover; transform: rotate(45deg); } /* アイコンフェードイン */ header .one { animation: FadeIn 1s; } header .two { animation: FadeIn 2s; } header .three { animation: FadeIn 3s; } /* ヘッダー段落フェードイン */ header p { animation: FadeIn .5s; color: #a0a0a0; } /* リスト系 */ section ol { margin: 2em auto 1.5em 0.5em; list-style-type: decimal-leading-zero; } section ol li { margin: 1em auto; list-style-position: inside; } section ol li:nth-of-type(odd) a { border-bottom: 3px solid #bcb8fc; } section ol li:nth-of-type(even) a { border-bottom: 3px solid #cebbfc; } /* フッター */ footer p { color: #a0a0a0; } /* 段落 */ p { margin: 1em auto 1.5em; } /* メニュー */ .menu { text-align: center; } .menu li { display: inline-block; } .menu li a { margin: 0 1em; } /* 中央寄せ */ .center { text-align: center; } /* フォーム系 */ textarea, input[type] { -webkit-appearance: none; padding: 0.2em 0.5em; background-color: #fff; border: thin solid #bcb8fc; border-radius: 0; } textarea { width: 280px; height: 150px; } input[type=text] { width: 80px; } input[type=submit] { width: auto; } /* アニメーション */ @keyframes FadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } </style>

 <header> <h1><span>タ</span><br><span>い</span><span>ト</span><span>ル</span></h1> <div class="icon one"></div> <div class="icon two"></div> <div class="icon three"></div> <p>ここに説明とか書けます</p> <form action="#" method="post"><input type="text" name="#" value="ダミー"> <input type="text" name="#" value="です"> <input type="submit" value="設定"><input type="hidden" name="mode" value="set"><input type="hidden" name="page_pass" value=""></form> </header> <section> <div class="icon one"></div> <div class="icon two"></div> <div class="icon three"></div> <ol> <li><a href="#">タイトル</a></li> <li><a href="#">タイトル</a></li> </ol> </section> <footer> <div class="icon one"></div> <div class="icon two"></div> <div class="icon three"></div> <p>あとがきも書けます</p> <p class="center">Template by <a href="https://ninawas.me" target="_blank">Nina</a>.</p> </footer>  <article> <h2>タイトル</h2> <p> 本文 </p> <div class="menu"> <ul> <li><a href="#">PREV</a></li> <li><a href="#">INDEX</a></li> <li><a href="#">NEXT</a></li> </ul> </div> </article>