CSS

webフォント Font Awesomeを使う メモ

公式サイト

ヘッダーにCDNコードを呼び出し。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

コード例:

<p><i class="fa fa-tasks" aria-hidden="true"></i>ここにアイコンを表示</p>

  • このエントリーをはてなブックマークに追加
0

CSSのみでアコーディオン実装 checkbox

CSSのみでアコーディオンを実装するサンプルです。
チェックボックスを利用するもので、最小コードをメモ。

◆html

<label for="list1">ボタン1</label>
<input type="checkbox" id="list1" class="check" />
<ul class="contents">
    <li>リンク1</li>
    <li>リンク2</li>
</ul>

<label for="list2">ボタン2</label>
<input type="checkbox" id="list2" class="check" />
<ul class="contents">
    <li>リンク3</li>
    <li>リンク4</li>
</ul>

◆CSS

input[type="checkbox"].check {
    display: none;
}
input[type="checkbox"].check + .contents {
    height: 0;
    overflow: hidden;
}

input[type="checkbox"].check:checked + .contents {
  height: auto;
}
  • このエントリーをはてなブックマークに追加
0

文字数オーバーした際に「…」三点リーダーにする方法。

height準拠でoverflow:hiddenさせる方法を今まで使ってたけど、こっちのほうが使い勝手がよかった。

-webkit-line-clamp: 2;

このプロパティの値が2なので、2行。
数値を3にしたら3行で末尾を「…」とできる。

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
  • このエントリーをはてなブックマークに追加
0

チェックボックス CSSでのみ装飾 サンプル2

HTML

<div class="wrapper">
  <label class="checker">
    <input type="checkbox" name="something" value="true">
    <span class="check"></span>
    <span class="text">未チェック</span>
  </label>
</div>

CSS

/*-------------------------------------------------
チェックボックス
----------------------------------------------- */
/* チェックボックス周辺の見た目調整 */
.checker .check { display: inline-block; vertical-align: middle; }
.checker .text { display: inline-block; vertical-align: middle; max-width 80px; }
.checker input {
  display: none;
}
.checker .check {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
.checker .check::before {
  display: block;
  position: absolute;
  top: 2px;
  left: 0;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  content: "";
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
}
.checker input:checked + .check::after {
  display: block;
  position: absolute;
  top: 5px;
  left: 3px;
  width: 16px;
  height: 8px;
  border-left: 3px solid #090;
  border-bottom: 3px solid #090;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  content: "";
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.checker input:disabled + .check:before {
  background-color: #eee;
}
.checker input:checked:disabled + .check::after {
  border-left: 3px solid #aaa;
  border-bottom: 3px solid #aaa;
}
  • このエントリーをはてなブックマークに追加
0

チェックボックス CSSでのみ装飾 サンプル

HTML

<form>
<label>
    <input type="checkbox" name="" value="0" class="checkbox">
    <span class="checkbox-icon"></span>
    チェックボックス
</label>
</form>

CSS

/*-------------------------------------------------
チェックボックス
----------------------------------------------- */
label input[type="checkbox"]{
  display: none;
}
label{
  cursor: pointer;
  color: #333333;
  font-weight: normal;
  letter-spacing: 0;
  display: inline-block;
  position: relative;
  margin-right: 20px;
}
label .checkbox-icon:before{
  content:'';
  border: 1px solid #ddd;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 3px;
  -webkit-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
  background: #ffffff;
}
label input[type="checkbox"]:checked + .checkbox-icon:before{
  opacity: 0;
  background: #eee;
  border-color: #eee;
  transform:scale(2);
}
label .checkbox-icon:after{
  content:'';
  opacity: 0;
  position: absolute;
  left: 8px;
  top: 0px;
  width:8px;
  height: 16px;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  transform:rotate(-200deg);
  -webkit-transition: all 400ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 400ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 400ms cubic-bezier(1, 0, 0, 1);
  transition: all 400ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
label input[type="checkbox"]:checked + .checkbox-icon:after{
  opacity: 1;
  position: absolute;
  left: 8px;
  top: 0px;
  width:8px;
  height: 16px;
  border-right: 2px solid #e93653;
  border-bottom: 2px solid #e93653;
  transform:rotate(40deg);
}
  • このエントリーをはてなブックマークに追加
0

矢印つきボタン例

HTML

<a href="" class="maru arrow">ボタン</a>

CSS

.arrow { position: relative; display: inline-block; padding: 0 16px 0 0; color: #000; vertical-align: middle; text-decoration: none; }
.arrow::before, .arrow::after { position: absolute; top: 0; bottom: 0; right: 0; margin: auto; content: ""; vertical-align: middle; }
.maru::before { width: 12px; height: 12px; -webkit-border-radius: 50%; border-radius: 50%; background: #fff; }
.maru::after { right: 5px; width: 3px; height: 3.2px;/* .2がないとホバー時にずれる */ border-top: 1px solid #4cbbd0; border-right: 1px solid #4cbbd0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.maru:hover::after { border-color: #4cbbd0; }
  • このエントリーをはてなブックマークに追加
0

グラデーションのボーダーをCSSでつくる

備忘録Tips

3区切りのボーダー

【表示例】

【CSS】

  /* 3区切りのボーダー */
.greenLine {
    background: #008000; /* Old browsers */
    background: -moz-linear-gradient(-90deg,  #FF0000 0%, #FF0000 33.3%,  #0000FF 33.3%, #0000FF 66.6%, #008000 66.6%,  #008000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#FF0000), color-stop(33.3%,#FF0000), color-stop(33.3%,#0000FF), color-stop(66.6%,#0000FF), color-stop(66.1%,#008000), color-stop(100%,#008000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(0deg,  #FF0000 0%,#FF0000 33.3%,#0000FF 33.3%,#0000FF 66.6%,#008000 66.6%,#008000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-90deg,  #FF0000 0%,#FF0000 33.3%,#0000FF 33.3%,#0000FF 66.6%,#008000 66.6%,#008000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-90deg,  #FF0000 0%,#FF0000 33.3%,#0000FF 33.3%,#0000FF 66.6%,#008000 66.6%,#008000 100%); /* IE10+ */
    background: linear-gradient(90deg,  #FF0000 0%,#FF0000 33.3%,#0000FF 33.3%,#0000FF 66.6%,#008000 66.6%,#008000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0000', endColorstr='#008000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    padding-bottom:3px;
    margin-bottom: 2%; 
}

グラデーションのボーダー

【表示例】

【CSS】

  /* グラデーションのボーダー */
 .blueLine {
    background: #dedede; /* Old browsers */
    background: -moz-linear-gradient(-90deg,  #3296c8 0%, #0075be 10%, #1e9cd7 50%, #cce0f4 70%, #ffffff 90%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3296c8), color-stop(10%,#0075be), color-stop(50%,#1e9cd7), color-stop(70%,#cce0f4), color-stop(90%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(0deg,  #3296c8 0%, #0075be 10%, #1e9cd7 50%, #cce0f4 70%, #ffffff 90%, #ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-90deg,  #3296c8 0%, #0075be 10%, #1e9cd7 50%, #cce0f4 70%, #ffffff 90%, #ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-90deg,  #3296c8 0%, #0075be 10%, #1e9cd7 50%, #cce0f4 70%, #ffffff 90%, #ffffff 100%); /* IE10+ */
    background: linear-gradient(90deg,  #3296c8 0%, #0075be 10%, #1e9cd7 50%, #cce0f4 70%, #ffffff 90%, #ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6dad45', endColorstr='#dedede',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    padding-bottom:5px;
    margin-bottom: 2%; 
}
  • このエントリーをはてなブックマークに追加
0