Embedded Files
デザインテキストボックスを使いメリハリのあるサイト構築を！
解説付きコードを参照し、文字色・背景色などはお好みで変えてお使いください
テキストボックスの大きさによりフォントサイズも伸縮しますので、font-sizeは柔軟に変更してください
NO.1
NO.2
NO.1・NO.2 コード（解説付き）
<div class="box">
<span class="box_ttl">おしゃれボックスで華のあるデザインに！</span> <!-- NO.2では削除 -->
<p>
このテキストボックスは、フォントサイズの指定単位その他設定でスマホ対応のレスポンシブデザインになっています。
</p>
<p>
これによりPCにおいてもボックス下の余白が大きく必要とされず、設置の自由度が高くなっています。
</p>
<!-- <p>〜</p>はいくらでも増やせます。また<p>〜</p>を1つにして<br>（改行）を入れてもOKです -->
</div>
<style>
.box {
margin: 20px auto 20px 20px; /* ボックスの外余白、上・右・下・左 */
padding: 0.5em; /* ボックス内余白 */
font-size: 3.3vw; /* 文字サイズ */
color: #1e2428; /* 文字色 */
font-family: sans-serif; /* serifにすれば明朝体 */
font-weight: 400; /* 文字の太さ、boldで太字 */
line-height: 1.5em; /* 行間 */
letter-spacing: 0.03em; /* 字間（-の値も可） */
background-color: #F7F8FF; /* 背景色 */
border: 2px solid blue; /* 枠線の太さ・線種・色 */
border-radius: 0px; /* 枠線の丸み */
box-shadow: 8px -8px #6c80c5; /* 影の大きさと色 */
}
.box p {
margin: 1em; /* 段落の余白、0にすれば<p>〜</p>間の余白がなくなります */
padding: 0em 0.5em;
}
/* タイトル部分、ここからタイトル部分終わりまでを削除すればNO.2になります */
.box_ttl {
display: block;
position: relative;
width: 90%; /* 枠横幅 */
margin-top: 0.5em; /* 枠外上の余白 */
margin-bottom: 0.5em; /* 枠外下の余白 */
padding: 0.5em 2.5em; /* 枠内余白、上下・左右 */
left: -60px; /* 枠左右位置 */
font-size: 3.7vw; /* 文字サイズ */
color: white; /* 文字色 */
line-height: 1.5em; /* 行間 */
font-weight: bold; /* 文字の太さ、400で標準 */
font-style: italic; /* italicは斜体・normalは標準体 */
background-color: steelblue; /* 背景色 */
border: 0px solid navy; /* 枠線の太さ・線種・色 */
border-radius: 0px 30px 30px 0px; /* 枠線の丸み、左上・右上・右下・左下 */
}
/* タイトル部分終わり */
</style>
NO.3
NO.4
NO.3・NO.4 コード
<div class="box">
<p class="box_ttl">華のあるデザインに！</p> <!-- NO.4では削除 -->
<div class="box_txt">
<p>
このテキストボックスは、フォントサイズの指定単位その他設定でスマホ対応のレスポンシブデザインになっています。
</p>
<p>
これによりPCにおいてもボックス下の余白が大きく必要とされず、設置の自由度が高くなっています。
</p>
<!-- <p>〜</p>はいくらでも増やせます -->
</div>
</div>
<style>
.box {
font-family: sans-serif;
position: relative;
margin: 20px auto;
padding: 20px;
background-color: #FFF2FF; /* 背景色 */
}
.box::after {
content: '';
position: absolute;
right: 0;
top: 0;
border-width: 0 20px 20px 0;
border-style: solid;
border-color: #fe3bff #fff #fe3bff; /* 折返し三角の色 */
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15)
}
.box_txt {
font-size: 3.3vw;
color: #525252;
padding: 10px 20px;
border: 3px dashed #FF97FF; /* 破線囲み枠の色 */
}
/* タイトル部分、ここからタイトル部分終わりまで＋<p class="box_ttl"></p>を削除すればNO.4になります */
.box_ttl {
margin: 0;
width: fit-content;
padding: 0.5em 1em;
font-size: 3.7vw;
color: white;
font-weight: bold;
background-color: #FF3AFF;
border-radius: 10px 10px 0 0;
}
/* タイトル部分終わり */
</style>
NO.5（セクションの色を白以外で使う場合は、コードの解説参照のこと）
NO.5 コード
<div class="box">
<p>
このテキストボックスは、どんなセクションの色で設置してもボックス内の色は透過になり、とてもおしゃれだと思います。
</p>
<p>
ぜひ活用なさってください！
</p>
<!-- <p>〜</p>はいくらでも増やせます -->
</div>
<style>
.box {
position: relative;
margin:2em 0.3em;
padding: 1.5em 1em;
font-family: sans-serif;
font-size: 3.3vw;
color: crimson;
border: solid 2px #ffcb8a; /* 枠線の色 */
border-radius: 3px 0 3px 0;
}
.box p {
margin: 0px;
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 50%, white 0%, white 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 95%, orange 100%); /* セクションの背景色に合わせてください・仕切り線（破線）の色、色は分かりやすくカラーネームで指定していますが、もちろんカラーコード（#〜）でもOKです */
background-size: 8px 100%, 100% 2.5em;
line-height: 2.5em;
}
.box:before,.box:after {
content: '';
position: absolute;
width:18px; /* 丸い玉のサイズ */
height: 18px; /* 丸い玉のサイズ */
background-color: red; /* 丸い玉の色 */
border: 0px solid 2px #ffcb8a;
border-radius: 50%;
}
.box:after {
top:-10px;
left:-10px;
}
.box:before {
bottom:-10px;
right:-10px;
}
</style>
NO.6 （背景色白で使うのが理想的です）
NO.6 コード
NO.7
NO.7 コード
NO.8
NO.8 コード
NO.9
NO.9 コード
NO.10（シンプルなテキストボックスです）
NO.10 コード
Google Sites
Report abuse