◆囲み枠
1)
<div style="border: 3px dashed #7affbc; padding: 10px; border-radius: 0px; background: ##ffffff;">★ここに文字を入力。</div>
https://miiko315.net/6182.html.box_dot_green : <div class="box_dot_green">
こんな感じ。
.box_dot_orange : <div class="box_dot_orange">
色のみ変更
◇見出し
H5 こういう見出し
h5{
margin: 0 0 1.5em;
padding: 0.8em;
border-left: 7px solid #B92A2C;
border-bottom: 1px dashed #B92A2C;
font-size: 1.143em;
font-weight: bold;
}
H6 こういう見出し
h6{
margin: 0 0 1.5em;
padding: 0.8em;
border-top: 3px double #B92A2C;
border-bottom: 3px double #B92A2C;
font-size: 1.143em;
font-weight: bold;
}
◆Simpleな囲み
<CSS側>
.BlogCard {border: solid 3px #aaaaaa; padding: 0.5em 0.5em 0.5em 0.5em;} /*「上」・「右」・「下」・「左」の余白を指定*/
.BlogImg{border: solid 1px blue;
float: left;
margin-bottom: 1px;
margin-right: 20px;
}
.BlogCard_content {border: solid 1px;font-size: 12px; padding: 0.5em 1em;}
.BlogCard_url {font-size: 12px; border: solid 3px #aaaaaa;}
.box7{
padding: 0em 1em 0em 1em; /*「上」・「右」・「下」・「左」の余白を指定*/
color: #474747;
background: whitesmoke;/*背景色*/
border-left: double 7px #4ec4d3;/*左線*/
border-right: double 7px #4ec4d3;/*右線*/
}
<html側>
<div class="BlogCard">
<div class="box7"><a href="/"><br />
<img class="BlogImg alignleft" src="./static/screen.png"" alt="" width="180" height="140" /></a>
<strong>Online オンライン筆記試験模擬アプリ</strong><br />
<span class="fz-14px">マサチューセッツ州の運転免許筆記試験問題アプリを作ってみました。<br/>
<u>１回につき25問</u>が出題されます。 問題のページのHintボタンをクリックすると、MA州の公式 Driver Manualの該当箇所の英語の記述も見れます。試してみてくださいね。</span>
<span class="fz-14px" style="border: solid 1px red; width: 100%; height: 120; padding: 0.5em 1em;"><a href="http://uslife.mossymob.net/app/dltest/ca/catest/main">試してみる</a></span></div>
</div>
◆動きのあるFancyな囲み
<CSS側>
.cp_card01 {
font-size: 14px;
line-height: 1.45em;
position: relative;
overflow: hidden;
margin: 0 auto 1.6%;
-webkit-transition: height 0.3s ease;
transition: height 0.3s ease;
border-radius: 3px;
background: #ffffff;
-webkit-box-shadow: 0 3px 7px -3px #696969 ;
box-shadow: 0 3px 7px -3px #696969 ;
}
.cp_card01::after {
font-family: FontAwesome;
content: '\f1b0';
position: absolute;
bottom: 60px;
right: -20px;
color: rgba(236, 239, 241, 0.7);
font-size: 180px;
transform: rotate(-26deg);
z-index: 0;
}
.cp_card01:hover .details {
left: 0;
}
.cp_card01 .photo {
position: relative;
height: 200px;
overflow: hidden;
}
.cp_card01:hover .photo1 {
-webkit-transform: rotate(5deg) scale(1.3);
transform: rotate(5deg) scale(1.3);
}
.cp_card01 .photo .photo1 {
height: 100%;
background: url('BostonTraffic.png') center no-repeat;
background-size: cover;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.cp_card01 .details {
font-family: 'Open Sans';
position: absolute;
top: 0;
left: -100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 200px;
margin: 0;
padding: 10px 15px;
list-style: none;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
color: #ffffff;
background: rgba(40,53,147, 0.6);
}
.cp_card01 .details > li {
padding: 3px 0;
}
.cp_card01 .details li::before,
.cp_card01 .details .tags ul::before {
font-family: FontAwesome;
margin-right: 10px;
vertical-align: middle;
}
.cp_card01 .details .author::before {
content: '\f007';
}
.cp_card01 .details .date::before {
content: '\f133';
}
.cp_card01 .details .tags ul {
margin: 0;
padding: 0;
list-style: none;
}
.cp_card01 .details .tags ul::before {
content: '\f02b';
}
.cp_card01 .details .tags li {
display: inline-block;
margin-right: 3px;
}
.cp_card01 .details a {
color: inherit;
}
.cp_card01 .details a:hover {
color: #283593;
}
.cp_card01 .description {
position: relative;
padding: 10px;
z-index: 1;
}
.cp_card01 .description h1 {
font-size: 1.4em;
line-height: 1em;
margin: 0 0 10px 0;
}
.cp_card01 .description h2 {
font-size: 1em;
line-height: 1.2em;
margin: 1.2% 0;
color: #9b9b9b;
}
.cp_card01 .description p {
position: relative;
margin: 0;
padding-top: 20px;
}
.cp_card01 .description p::after {
position: absolute;
top: 6px;
left: 0;
width: 20%;
height: 6px;
content: '';
background: #283593;
}
.cp_card01 .description a {
float: right;
margin-bottom: 10px;
color: #283593;
text-decoration: none;
}
.cp_card01 .description a::after {
font-family: FontAwesome;
margin-left: -10px;
content: '\f061';
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
vertical-align: middle;
opacity: 0;
}
.cp_card01 .description a:hover::after {
margin-left: 5px;
opacity: 1;
}
.font-small {
font-size: 0.9rem;
}
.font-small2 {
font-size: 0.8rem;
}
.linehead1 {
position: relative;
font-size: 1.143em;
font-weight: bold;
margin: 0 0 1em;
padding: 0.5em 0.5em 0.5em 2.0em;
border-bottom: 2px solid #008000 ;
}
.linehead1:before{
content: "□";
font-weight: bold;
font-size: 200%;
position: absolute;
color: #ff6b6e;
top: -0.6em;
left: 0;
height: 12px;
width: 12px;
}
.linehead1:after{
content: "□";
font-weight: bold;
font-size: 200%;
position: absolute;
color: #008000 ;
top: -0.3em;
left: 0.3em;
height: 12px;
width: 12px;
}
font-size: 0.9rem;
}
.font-small2 {
font-size: 0.8rem;
}
.linehead1 {
position: relative;
font-size: 1.143em;
font-weight: bold;
margin: 0 0 1em;
padding: 0.5em 0.5em 0.5em 2.0em;
border-bottom: 2px solid #008000 ;
}
.linehead1:before{
content: "□";
font-weight: bold;
font-size: 200%;
position: absolute;
color: #ff6b6e;
top: -0.6em;
left: 0;
height: 12px;
width: 12px;
}
.linehead1:after{
content: "□";
font-weight: bold;
font-size: 200%;
position: absolute;
color: #008000 ;
top: -0.3em;
left: 0.3em;
height: 12px;
width: 12px;
}
<html側>
<div class="cp_card01">
<div class="photo"><div class="photo1"></div></div>
<ul class="details">
<li class="author"><a href="#">MossyMob</a></li>
<li class="date">2020.02.26</li>
<li class="tags">
<ul>
<li><a href="http://uslife.necomax.tk/app/dltest/ma/matest/main">試してみる</a></li>
</ul>
</li>
</ul>
<div class="description">
<h1>マサチューセッツ州自動車免許 試験アプリ</h1>
<h2>オンライン問題集 -2020年版</h2>
<p class="text">最新の模擬試験アプリを自分で作ってみました。１回に付き、25問が出題されます。</p>
<p class="text">各問題についているHintをクリックすると、RMVが発行する、ドライバー・マニュアルの該当箇所が読めます。</p>
<a href="http://uslife.necomax.tk/app/dltest/ma/matest/main">試してみる</a>
</div>
</div>