献立表

配布ページ☆

↓HEAD編集にコピペしてね↓
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <style type="text/css"> @import url('https://fonts.googleapis.com/css2?family=Amiko&family=Sacramento&family=Zen+Maru+Gothic&display=swap'); @font-face { font-family:"ロゴたいぷゴシック-コンデンスド" ; src: url('https://cdn.leafscape.be/LogoTypeGothicCondense/07LogoTypeGothic-Condense_web.woff2') format("woff2"); } * { margin: 0; padding: 0; font-size: 100%; font-weight: normal; } .clearfix:after { visibility: hidden; display: block; content: " "; clear: both; height: 0; } a { color: #75D2DF; } body::after, body::before { display: block; width: 100%; height: 10px; content: ''; background: repeating-linear-gradient(90deg, #FFF, #FFF 10px, #C0E9EE 0, #C0E9EE 20px); } body { text-align: justify; line-height: 180%; font-family: 'Amiko', 'Zen Maru Gothic', sans-serif; font-size: 0.8em; } header { max-width: 600px; width: 80%; margin: 40px auto 0; position: relative; } h1 { font-family:"ロゴたいぷゴシック-コンデンスド" ; font-size: 24px; } h1 span { position: relative; top: 8px; padding-left: 15px; } h1 span i.fa { font-size: 10px; color: #ffedab; position: relative; top: -12px; -moz-transform: rotate(10deg); -webkit-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); } h1::before, h1::after { content: '/'; font-family: 'Sacramento'; display: inline-block; position: absolute; left: 0; font-size: 22px; } h1::after { margin: 20px 0 0 -3px; -moz-transform: rotate(120deg); -webkit-transform: rotate(120deg); -o-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } article { max-width: 600px; width: 80%; margin: 50px auto; } section::before { display: inline-block; content: ''; width: 100%; height: 40px; float: right; background: url(https://alicex.jp/data/event/img/event_upld_6.png) no-repeat right top; background-size: 32px; position: relative; top: -10px; right: -15px; } section { margin-bottom: 50px; position: relative; background: #F5F5F5; } dl { position: relative; top: -20px; padding: 0 20px; } dl dt { float: left; padding-right: 20px; color: #333; line-height: 20px; width: 90px; } dl dt p::before { display: inline-block; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.8em; color: #75D2DF; margin-right: 5px; } dl dt .date::before { content: '\f017'; } dl dt .category::before { content: '\f2e7'; } dl dd { border-left: 1px dotted #DDD; overflow: hidden; padding: 0 0 5px 20px; } dl dd h2 { font-weight: bold; font-size: 1em; margin-bottom: 5px; } dl dd h2:nth-child(n+2) { margin-top: 20px; } @media screen and (max-width:480px){ dl dd p { line-height: 175%; } } @media screen and (max-width:480px){ dl dt { float: none; border-bottom: 1px dotted #DDD; padding-bottom: 10px; width: 90%; } dl dd { border-left: none; padding: 15px 0 8px;; } } </style>

↓ページ編集にコピペしてね↓
<header> <h1> <span> 献立表 <i class="fa fa-star" aria-hidden="true"></i> </span> </h1> </header> <article> <section> <dl class="clearfix"> <dt> <p class="date">3月20日</p> <p class="category">吾妻＆天宮</p> </dt> <dd> <h2>からあげ定食＼おかわり／</h2> <p> ほかほかごはん<br> じゅーしーからあげ<br> あつあつみそしる </p> </dd> </dl> </section> <section> <dl class="clearfix"> <dt> <p class="date">3月21日</p> <p class="category">吾妻＆天宮</p> </dt> <dd> <h2>からあげ定食＼おかわり／</h2> <p> ほかほかごはん<br> じゅーしーからあげ<br> あつあつみそしる </p> </dd> </dl> </section> </article>

クリップ画像以下からDL可能です

3月20日

吾妻＆天宮

からあげ定食＼おかわり／

ほかほかごはん
じゅーしーからあげ
あつあつみそしる

3月21日

吾妻＆天宮

からあげ定食＼おかわり／

ほかほかごはん
じゅーしーからあげ
あつあつみそしる