個人的によく使うCSS 基本　-良く使う　見出し・カード　など　

◆囲み枠

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;
}

https://affikatsu.com/headline-1370/

◆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;
}

<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>

プログラムを独学する時のメモページ

☆☆ 新着記事 ☆☆

2020年3月9日月曜日