Embedded Files
テキストボックスの大きさによりフォントサイズも伸縮しますので、font-sizeは柔軟に変更してください
NO.11
NO.11 コード
<dl class="box">
<!-- カテゴリーを増やす場合は、<div>〜</div>を追加 -->
<div class="article" style="display: flex; align-items: center;">
<dt>
<span class="category category1">とてもとても重要な<br>お知らせ</span>
<span class="date">2025/09/05</span>
</dt>
<dd class="text1">
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</dd>
</div>
<div class="article" style="display: flex; align-items: center;">
<dt>
<span class="category category2">EVENTS</span>
<span class="date">2025/09/05</span>
</dt>
<dd class="text2">
レスポンシブデザインにするのになかなか苦労しました
</dd>
</div>
<div class="article" style="display: flex; align-items: center;">
<dt>
<span class="category category3">注意事項</span>
<span class="date">2025/09/05</span>
</dt>
<dd class="text3">
テキストテキストテキスト<br>テキストテキストテキストテキストテキス<br>テキストテキストテキストテキストテキストテキスト
</dd>
</div>
</dl>
<style>
dl.box {
font-size: 2vw; /* カテゴリー見出しフォントサイズ */
width: 100%;
margin: 1.56vw auto;
}
.box dt {
display: block;
flex-wrap: nowrap;
}
.box dd {
display: block;
font-size: 2.2vw; /* テキストフォントサイズ */
margin-left: 3vw;
text-align: left;
}
div.article {
display: block;
align-items: left;
padding: 1.56vw 1.56vw;
background-color: white; /* カテゴリー枠の背景色 */
border: 1px solid silver; /* 枠線の太さ・線種・色 */
}
.article::after {
content: ""; display: block;
margin-left: 1em;
}
.article ~ .article {
margin-top: 1.5em; /* カテゴリー別枠の間隔 */
}
.box span.category {
display: block;
width: 10em;
padding: 1.56vw;
color: white;
text-align: center;
border-radius: 5px;
}
.box span.date {
display: block;
text-align: center;
}
dd {
padding: 1.2vw;
}
/* テキスト */
dd.text1 {
font-family: sans-serif;
font-weight: 400;
color:;
}
dd.text2 {
font-family: sans-serif;
font-weight: bold;
color:;
}
dd.text3 {
font-family: sans-serif;
font-weight: 400;
color: red;
}
/* カテゴリー枠の背景色 */
.category1 {
background-color: darkslategray;
}
.category2 {
background-color: darkgoldenrod;
}
.category3 {
background-color: crimson;
}
</style>
NO.12
NO.12 コード
<dl class="box">
<!-- カテゴリーを増やす場合は、<div>〜</div>を追加 -->
<div class="article">
<dt>
<span class="category category1">とてもとても重要なお知らせ</span>
<span class="date">2025/09/05</span>
</dt>
<dd class="text1">
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</dd>
</div>
<div class="article">
<dt>
<span class="category category2">今月のイベント開催のお知らせ（天候により順延となることがあります）</span>
<span class="date">2025/09/05</span>
</dt>
<dd class="text2">
レスポンシブデザインにするのになかなか苦労しました
</dd>
</div>
<div class="article">
<dt>
<span class="category category3">守っていただきたい注意事項</span>
<span class="date">2025/09/05</span>
</dt>
<dd class="text3">
テキストテキストテキスト<br>テキストテキストテキストテキストテキス<br>テキストテキストテキストテキストテキストテキスト
</dd>
</div>
</dl>
<style>
dl.box {
font-size: 2vw; /* カテゴリー見出しフォントサイズ */
width: 100%;
margin: 1.56vw auto;
}
.box dt {
display: block;
flex-wrap: nowrap;
}
.box dd {
display: block;
font-size: 2.2vw; /* テキストフォントサイズ */
margin-left: 1.5vw; /* テキスト左余白 */
text-align: left;
}
div.article {
display: block;
align-items: left;
padding: 1.3vw 1.5vw;
border: 1px solid silver; /* 枠線の太さ・線種・色 */
background-color: white; /* カテゴリー枠の背景色 */
}
.article::after {
content: ""; display: block;
margin-left: 1em;
}
.article ~ .article {
margin-top: 1.5em; /* カテゴリー別枠の間隔 */
}
.box span.category {
display: inline-block;
width: 35em; /* カテゴリー別枠の長さ */
padding: 1.56vw;
margin-bottom: 1.5vw;
color: white;
text-align: center;
border-radius: 5px;
}
.date {
display: inline-block;
padding-left: 6vw; /* 年月日横位置 */
}
dd {
padding: 1.5vw;
}
/* テキスト */
dd.text1 {
font-family: sans-serif;
font-weight: 400;
color:;
}
dd.text2 {
font-family: sans-serif;
font-weight: bold;
color:;
}
dd.text3 {
font-family: sans-serif;
font-weight: 400;
color: red;
}
/* カテゴリー枠の背景色 */
.category1 {
background-color: darkslategray;
}
.category2 {
background-color: darkgoldenrod;
}
.category3 {
background-color: crimson;
}
</style>
NO.13
NO.13 コード
NO.14
NO.14 コード
Google Sites
Report abuse