HTML・CSS

コーディングパーツ（見出し・リスト・お知らせ一覧・矢印・テーブル）

コーディング中にパーツのコード（HTML・CSS）をいちいち調べるのめんどくさいから、ここにストックしていく。

見出し

センターで下線

<h2 class="heading">見出しのタイトル</h2>
.heading {
    text-align: center;
    margin: 50px 0 30px;
    padding-bottom: 5px;
    position: relative;
}

.heading::after {
    position: absolute;
    content: "";
    height: 3px;
    line-height: 3px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 250px;
    margin: auto;
    background-color: #81d8d1;
    border-radius: 1px;
}

左にタテ線

<h2 class="heading">見出しのタイトル</h2>
.heading {
    padding: 0 0 0 10px;
    margin: 40px 0 20px;
    border-left: 8px solid #81d8d1;
}

ストライプ背景

<h2 class="heading">見出しのタイトル</h2>
.heading{
    text-align: center;
    font-size: 2rem;
    color: #192f60;
    padding: .4em;
    background: linear-gradient(-45deg, #fff 25%, #81d8d1 0, #81d8d1 50%, #fff 0, #fff 75%, #81d8d1 0);
    background-size: auto auto;
    background-color: ##81d8d1;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, #fff 5px, #fff 8px);
}

ストライプ生成便利サイト：CSS STRIPE GENERATOR

リスト

●のリスト

<ul class="list_ul">
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>
.list_ul li {
    line-height: 2;
    text-indent: -1.5em;
    margin-left: 1.5em;
}

.list_ul li::before {
    display: inline-block;
    text-indent: 0;
    content: '●';
    color: #81d8d1;
    -webkit-transform: scale(.8,.8);
    transform: scale(.8,.8);
    line-height: 1;
    vertical-align: .08em;
    width: 1.5em;
}

数字のリスト

<ul class="list_ol">
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>
.list_ol {
  margin: 10px 0;
  counter-reset: num;
  text-indent: -1.7em;
}

.list_ol li {
  line-height: 2;
  margin-left: 1.7em;
}

.list_ol li::before {
  display: inline-block;
  text-indent: .43em;
  font-size: .8em;
  width: 1.4em;
  height: 1.3em;
  line-height: 1.6;
  counter-increment: num;
  content: counter(num) ".";
  color: #fff;
  margin-right: .5em;
  background-color: #db004c;
  border-radius: .7em;
}

.list_ol li a {
  color: #db004c;
  text-decoration: underline;
}

お知らせ一覧

<ul class="list_info">
  <li class="list_info__item">
    <div class="list_info__time">
      <time datetime="0000-00-00">0000年00月00日</time>
    </div>
    <div class="list_info__txt"><a href="#">お知らせのタイトルお知らせのタイトル</a></div>
  </li>
  <li class="list_info__item">
    <div class="list_info__time">
      <time datetime="0000-00-00">0000年00月00日</time>
    </div>
    <div class="list_info__txt"><a href="#">長いときのお知らせのタイトルお知らせのタイトルお知らせのタイトルお知らせのタイトルお知らせのタイトルお知らせのタイトル</a></div>
  </li>
  <li class="list_info__item">
    <div class="list_info__time">
      <time datetime="0000-00-00">0000年00月00日</time>
    </div>
    <div class="list_info__txt"><a href="#">お知らせのタイトルお知らせのタイトルお知らせのタイトルお知らせのタイトル</a></div>
  </li>
</ul>
.list_info{
  &__item{
    padding: 1em 0;
    &:not(:first-child){
      border-top: 2px solid #707070;
    }
    @media only screen and (min-width: $tbwidth) {
      display: flex;
      justify-content: flex-start;
      padding: 30px 20px;
    }//tb
  }//&__item
  &__time{
    font-weight: bold;
    @media only screen and (max-width: $spwidth) {
      display: block;
    }//sp
    @media only screen and (min-width: $tbwidth) {
      width: 200px;
    }//tb
  }//time
  &__txt{   
    @media only screen and (min-width: $tbwidth) {
      flex: 1;
      a{
        transition: .3s;
        &:hover{
          color: #81d8d1;
          text-decoration: underline;
        }
      }//a
    }//tb
  }//&__txt
}//.list_info

$tbwidthや$spwidthは自分のお好みサイズを入れる。

「＜」や「＞」の矢印　上下右左

<div class="arrow arrow_right">右の矢印</div>
<div class="arrow arrow_left">左の矢印</div>
<div class="arrow arrow_up">上の矢印</div>
<div class="arrow arrow_under">下の矢印</div>
.arrow{
  color: #fff;
  background: #333;
  position: relative;
  display: block;
  padding: 15px 20px 15px 40px;
  margin-bottom: 10px;
}
.arrow::before{
  content: '';
  width: 8px;
  height: 8px;
  border: 0px;
  position: absolute;
}

.arrow_right::before{
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: calc(50% - 5px);
  left: 15px;
}
.arrow_left::before{
  border-bottom: solid 2px #fff;
  border-left: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: calc(50% - 5px);
  left: 19px;
}
.arrow_up::before{
  border-top: solid 2px #fff;
  border-left: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: calc(50% - 2px);
  left: 17px;
}
.arrow_under::before{
  border-bottom: solid 2px #fff;
  border-right: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: calc(50% - 8px);
  left: 17px;
}

table

<table class="table1">
<tr>
<th>th 見出し</th>
<td>td 内容</td>
<td>td 内容</td>
</tr>
<tr>
<th>th 見出し</th>
<td>td 内容</td>
<td>td 内容</td>
</tr>
</table>
.table1 {
  width: 100%;
}
.table1 tr th {
  color: #fff;
  background: #707070;
}
.table1 tr td {
  border-bottom: 1px solid #ccc;
}
.table1 tr th, .table1 tr td {
  padding: .5em .8em;
}

@media only screen and (max-width: 768px) {
  .table1 tr th, .table1 tr td {
    display: block;
  }
  .table1 tr td{
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
  }
}

@media only screen and (min-width: 769px) {
  .table1 tr th {
    width: 200px;
    vertical-align: middle;
  }
  .table1 tr td {
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
  }
  .table1 tr:not(:first-child) th {
    border-top: 1px solid #ccc;
  }
  .table1 tr:first-child th {
    border-top: 1px solid #707070;
  }
  .table1 tr:last-child th {
    border-bottom: 1px solid #707070;
  }
}
ABOUT US
yukipan
Web制作会社で働いてます。パンダとかリラックマとか、まあるいものが好き。好奇心旺盛で、何にでも興味をもってしまう。とりあえずやってみてから取捨選択するのがモットー。今はグリーンカレーとチャイと株式投資がブーム。