☆☆ 新着記事 ☆☆

2020年3月9日月曜日

個人的によく使う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>1回につき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">最新の模擬試験アプリを自分で作ってみました。1回に付き、25問が出題されます。</p>
  <p class="text">各問題についているHintをクリックすると、RMVが発行する、ドライバー・マニュアルの該当箇所が読めます。</p>

  <a href="http://uslife.necomax.tk/app/dltest/ma/matest/main">試してみる</a>
 </div>
</div>

0 件のコメント:

コメントを投稿