ここは○○のクリスマス企画サイトです。
リンクはこうなって強調はこうなります。
サイト名：Happy Holidays 管理人：○○○ プレゼントはひと月前から悩む方。
001 002 003 004 005
使用したタイトルはこちらにて配布しております。
靴下に願いを込めて ○○ リングを渡すタイミング △△ スケジュールが合いません ×× 真夜中のサンタクロース ○○ スノーマンだけが知っている ××
水色小箱 テンプレート ○○ タイトル素材 ○○ タイトル素材
自動改行「しない」で作成。
画像はパブリックドメインのものを使用しています。 こちらからお持ち帰りください。
おまけ→小説ページ
HEAD <link href="https://use.fontawesome.com/releases/v5.11.1/css/all.css" rel="stylesheet"> <style type="text/css"> @import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Klee+One&family=Playball&display=swap'); @font-face { font-family: ロゴたいぷゴシック; src: url('https://cdn.leafscape.be/logotype/logotype_web.woff2') format("woff2"); } *,::after,::before{box-sizing:border-box} *{margin: 0; padding: 0;} ol,ul{list-style:none} img{max-width:100%} table{border-collapse:collapse} textarea{white-space:revert} body{ color: #333; font-size: 0.85em; font-family: 'Klee One', cursive; line-height: 1.5; } a{ text-decoration: none; color: #3cb37a; font-weight: bold; } a:hover{ color: #b33f3d; } em{ font-style: normal; font-weight: bold; background:linear-gradient(transparent 60%, #ece093 60%); } header{ height: 500px; color: #fcfcfc; font-family: 'Fredericka the Great', cursive; font-size:18px; text-align: center; padding:200px; background: #b33f3d url(★トップ画像URL★) no-repeat center top/contain;} .wrp{ width:90%; max-width: 600px; margin: 10px auto; padding-top: 20px; } .wrp2{ background: #b33f3d; color: #fcfcfc; text-align: center; padding: 10px 0; } .box2{ background: #fff; color: #333; width:100%; text-align: left; } h1{ font-family: 'Fredericka the Great', 'Klee One', cursive; font-size:40px; font-weight: normal; } h2 { font-family: ロゴたいぷゴシック; background-color: #3cb37a; background-image:repeating-linear-gradient(-45deg,#b33f3d, #b33f3d 10px,transparent 0, transparent 20px); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } h3 { font-family: ロゴたいぷゴシック; } h3:before{ color: #ece093; display: inline-block; content: "\f79c"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin:0 5px; font-size: 1.5em; } .box{ padding: 0.5em 1em; margin: 10px; } p{ padding: 0 1em; margin-bottom: 10px; } hr{ border: none; height: 50px; } nav{ font-family: 'Playball', cursive; font-size:1.5em; text-align: center; color: #ece093; } nav ul{ margin: 0.5em; padding: 0 ; } nav ul li{ list-style: none; display: inline-block; } nav ul:before, nav li:after{ display: inline-block; content: "\f7aa"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin:0 5px; padding-left: 5px; font-size: 1.5em; } nav a{ font-weight: normal; } .atgk{ text-align: right; font-size: 0.95em; border: 3px double #333; margin: 15px 0; } footer{ text-align: center ; margin: 50px auto 20px; } @media screen and (max-width: 750px) { header{ height: auto; font-size: 10px; text-align: center; padding:25% 0;} h1{ font-size: 23px;} } </style> BODY <header> <h1>Happy Holidays</h1> Merry Christmas and a Happy New Year! </header> <nav> <ul> <li><a href="#info">info</a></li> <li><a href="#main">main</a></li> <li><a href="#bkm">bkm</a></li> </ul> </nav> <div class="wrp"> <h2 id="info">Information</h2> <div class="box"> <p>ここは○○のクリスマス企画サイトです。</p> <p>リンクは<a href="">こう</a>なって強調は<em>こう</em>なります。</p> <p>サイト名：Happy Holidays<br> 管理人：○○○<br> プレゼントはひと月前から悩む方。<br> </p> </div> <hr> <h2 id="main">Main Contents</h2> <div class="box"> <h3>長編タイトル</h3> <p><a href="">001</a> <a href="">002</a> <a href="">003</a> <a href="">004</a> <a href="">005</a></p> <h3>短編</h3> <p>注意書きとか</p> <p><a href="">靴下に願いを込めて</a> ○○<br> <a href="">リングを渡すタイミング</a> △△<br> <a href="">スケジュールが合いません</a> ××<br> <a href="">真夜中のサンタクロース</a> ○○<br> <a href="">スノーマンだけが知っている</a> ××</p> </div> <hr> <h2 id="bkm">Bookmark</h2> <div class="box"> <p> <a href="https://aqua.lovesick.jp/box/">水色小箱</a> テンプレート<br> <a href="">○○</a> タイトル素材<br> <a href="">○○</a> タイトル素材<br> </p> </div> <footer> <a href="">Back</a> </footer> <hr> <br> </div> 小説ページ BODY <div class="wrp2"> <h1>Title - タイトル</h1> <div class="box2"><div class="wrp"> 本文 <div class="atgk"> あとがき </div> </div> <footer> <a href="">Back</a> </footer> <hr> <br> </div>
