テンプレート

オーサム　翻訳　html変換

<!-- フレックスボックス -->
<style>
.lst1 {display: flex;flex-flow: row wrap;width: 96%;max-width: 800px;margin: 0 auto 30px;background-color: #aaa;}
.lst1 li {width: calc(25% - 10px);margin: 0 auto 10px;}
.lst1 li > img {width: 100%;}
@media print, screen and (max-width: 750px){
.lst1 li {width: 100%;}
}
</style>
<ul class="lst1">
<li><img src="img/x.jpg" alt=""></li>
<li><a href="#" target="_blank">リスト</a></li>
</ul>

<!-- テキスト -->
<style>
.txt {width: 100%;max-width: 900px;margin: 20px auto;font-size: 1rem;line-height: 1.8;letter-spacing: 0.02rem;color: #333;
text-align: justify;text-justify: inter-ideograph;text-justify: inter-character;
word-break: break-all;word-wrap: break-word;overflow-wrap: break-word;}
@media print, screen and (max-width: 750px){
.txt {width: 90%;}
}
</style>
<p class="txt">テキスト</p>

<!-- テーブル -->
<style>
.tbl1 {width: 90%;max-width: 800px;margin: 20px auto;}
.tbl1 th, .tbl1 td {margin: 0;padding: 10px;vertical-align: top;word-wrap: break-word;border: 1px solid #777;
font-size: .9rem;letter-spacing: 0.1rem;line-height: 1.3;font-weight: normal;text-align: left;}
.tbl1 th {background-color: #eee;}
@media print, screen and (max-width: 750px) {
.tbl1 {width: 96%;border-bottom: 1px solid #777;}
.tbl1 th, .tbl1 td {width: 100%;display: block;border-bottom: none;}
}
</style>
<table class="tbl1">
<tr><th>項目</th><td>内容が入ります。</td></tr>
<tr><th>項目</th><td>内容が入ります。</td></tr>
</table>