備忘録

text-decoretion:underlineで指定すると下線がテキスト下にくっついていますが、下線を離したい場合の方法です。

CSS

//通常
text-underline-offset: auto;

//8px離す
text-underline-offset: 8px;

//0.5rem上（テキスト上）に移動
text-underline-offset: -0.5rem;

備忘録です。

リンクhover時に下線が右から左に動いたり中央から左右に伸びるアレの方法です。

参考サイト
リンク要素のhover時に下線をCSSでアニメーション表示させる方法

html

<ul>
  <li><a href="">MENU01</a></li>
  <li><a href="">MENU02</a></li>
  <li><a href="">MENU03</a></li>
  <li><a href="">MENU04</a></li>
  <li><a href="">MENU05</a></li>
</ul>

下線が左から右に引かれるアニメーション

ul {
  display: flex;
  list-style: none;
}
li {
  padding: 5px;
}
a {
  display: block;
  padding: 0 0 5px;
  text-decoration: none;
}
a::after {
  border-bottom: solid 2px #f00;
  bottom: 0;
  content: "";
  display: block;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  width: 0;
}
a:hover::after {
  width: 100%;
}

下線が右から左に引かれるアニメーション

ul {
  display: flex;
  list-style: none;
}
li {
  padding: 5px;
}
a {
  display: block;
  padding: 0 0 5px;
  position: relative;
  text-decoration: none;
}
a::after {
  border-bottom: solid 2px #f00;
  bottom: 0;
  content: "";
  display: block;
  position: absolute;
  right: 0;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  width: 0;
}
a:hover::after {
  width: 100%;
}

下線が中央から左右に引かれるアニメーション

ul {
  display: flex;
  list-style: none;
}
li {
  padding: 5px;
}
a {
  display: block;
  padding: 0 0 5px;
  position: relative;
  text-decoration: none;
}
a::before,
a::after {
  border-bottom: solid 2px #f00;
  bottom: 0;
  content: "";
  display: block;
  position: absolute;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  width: 0;
}
a::before {
  left: 50%;
}
a::after {
  right: 50%;
}
a:hover::before,
a:hover::after {
  width: 50%;
}

備忘録です。

ボタンをクリックした際に表示される枠を消す方法です。

参考サイト
buttonタグをクリックすると表示されるボヤっとした枠線を消す

CSSに追加

button:focus {
    outline:0;
}

備忘録です。

クリックで画像を切り替える方法というとjavascriptですが、CSSでも実装できる方法がありました。

参考サイト
:checked - CSS: カスケーディングスタイルシート

HTML

<div>
  <input type="radio" name="my-input" id="yes">
  <label for="yes">Yes</label>

  <input type="radio" name="my-input" id="no">
  <label for="no">No</label>
</div>

<div>
  <input type="checkbox" name="my-checkbox" id="opt-in">
  <label for="opt-in">Check me!</label>
</div>

<select name="my-select" id="fruit">
  <option value="opt1">Apples</option>
  <option value="opt2">Grapes</option>
  <option value="opt3">Pears</option>
</select>

CSS

div,
select {
  margin: 8px;
}

/* チェックが入った入力のラベル */
input:checked + label {
  color: red;
}

/* チェックが入ったラジオボタン */
input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

/* チェックが入ったチェックボックス */
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}

/* 選択されたオプション */
option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;
}

CSSで背景画像を切り替える際にも使いましたが大丈夫でした。
外注案件のためサンプルページをお見せできませんがCSSの一部を公開します。
ちなみにMW WP Formのチェックボックスに使いました。
サンプルCSS

label[for="select_car-1"] span{
    background:url(images/car/carclass_1_off.png) no-repeat;
}
label[for="select_car-1"] input[type="checkbox"]:checked + span{
    background:url(images/car/carclass_1_on.png) no-repeat;
}

備忘録です。

参考サイト
youtubeの動画をCSSでアスペクト比固定で表示する。

HTML

<div class="iframe-wrapper">
  <!-- youtubeの動画 -->
  <iframe width="560" height="315" src="https://www.youtube.com/embed/cl-KAl2Xlug" frameborder="0" allowfullscreen></iframe>
<div>

CSS

iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.iframe-wrapper {
  padding-bottom: 56.25%;
  /* 9/16*100=56.25 アスペクト比は16:9 */
  height: 0;
  position: relative;
}

youtube以外にもiframeを使っている場合には、親要素にid指定をすると特定のiframeだけに適用されます。

備忘録です。

iPhoneのSafariでフォントが自動調整されてしまう問題を解決する方法です。
参考サイト
iPhone版Safariでフォントサイズがおかしくなる問題

CSSに記述

body {
-webkit-text-size-adjust: 100%;
}

これで自動調整が行われなくなります。

備忘録です。

CSSで台形を作る方法です。

参考サイト
[CSS] 台形をつくる（角を丸くしてみたり、中に文字を入れてみたり。）
The Shapes of CSS

まず台形を作ります。

HTML

<div class="trapezoid"></div>

CSS

.trapezoid {
    width: 120px;
    border-bottom: 80px solid orange;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    height: 0;
}

台形の中に文字を入れます

HTML

<div class="trapezoid">文字を入れます</div>

CSS

.trapezoid {
    width: 160px;
    border-bottom: 80px solid orange;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    height: 0;
    text-align: center;
    line-height: 80px;
}

台形の中に文字を入れます

HTML

<div class="trapezoid">
    <div class="inner">文字です。<br>二行目ですよ。</div>
</div>

CSS

.trapezoid {
    width: 160px;
    border-bottom: 80px solid orange;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    height: 0;
    text-align: center;
}

.inner {
    padding-top: 14px;
}

逆台形の場合

HTML

<div class="trapezoid"></div>

CSS

.trapezoid {
    width: 120px;
    border-top: 80px solid orange;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    height: 0;
}

逆台形に文字を入れる

HTML

<div class="trapezoid"><span>文字</span></div>

CSS

.trapezoid {
    position:relative;
    width: 120px;
    border-top: 80px solid orange;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    height: 0;
    text-align: center;
}
.trapezoid span{
    position:relative;
    top:-60px;
}

備忘録です。

テキストを縦書きにする方法です。
参考サイト
CSS3で縦書きにする方法と挙動

CSS

div {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}

縦書きのサンプル

備忘録です。

個人的によく使うGoogleフォントです。

LATO
https://fonts.google.com/specimen/Lato

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

<style type="text/css">
.lato{font-family: 'Lato', sans-serif;}
</style>

Oswald
https://fonts.google.com/specimen/Oswald

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

<style type="text/css">
.oswald{font-family: 'Oswald', sans-serif;}
</style>

Cinzel Decorative
Trajan Proの代用として使用。
https://fonts.google.com/specimen/Cinzel+Decorative

<link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative" rel="stylesheet">

<style type="text/css">
.cinzel{font-family: 'Cinzel Decorative', cursive;}
</style>

備忘録です。

参考サイト
[jQuery] プラグインを使わずに横からスライドインするメニューを簡単に作る

基本

HTML

<!-- スライドメニュー部分-->
<nav id="slide_menu">
    <ul>
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
        <li><a href="#">menu4</a></li>
        <li><a href="#">menu5</a></li>
    </ul>
</nav>
 
<!--メニューを出すボタン-->
<button id="button"><i class="fa fa-bars"></i> Menu</button>

CSS body

body {
    position: relative;
    left: 0;
    overflow-x: hidden;
}

CSS スライド部分

#slide_menu{
    position: fixed;
    top: 0;
    left: -240px;
    width: 240px;
    height: 100%;
    background: #E87272;
}

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
var menu = $('#slide_menu'), // スライドインするメニューを指定
    menuBtn = $('#button'), // メニューボタンを指定
    body = $(document.body),     
    menuWidth = menu.outerWidth();                
     
    // メニューボタンをクリックした時の動き
    menuBtn.on('click', function(){
    // body に open クラスを付与する
    body.toggleClass('open');
        if(body.hasClass('open')){
            // open クラスが body についていたらメニューをスライドインする
            body.animate({'left' : menuWidth }, 300);            
            menu.animate({'left' : 0 }, 300);                    
        } else {
            // open クラスが body についていなかったらスライドアウトする
            menu.animate({'left' : -menuWidth }, 300);
            body.animate({'left' : 0 }, 300);            
        }             
    });
});    
</script>

応用

jQuery メニューの開閉でボタン画像を切り替える場合にはbodyにcssを追加します。

<script>
$(function(){
var menu = $('#slide_menu'), // スライドインするメニューを指定
    menuBtn = $('#button'), // メニューボタンを指定
    body = $(document.body),     
    menuWidth = menu.outerWidth();                
     
    // メニューボタンをクリックした時の動き
    menuBtn.on('click', function(){
    // body に open クラスを付与する
    body.toggleClass('open');
        if(body.hasClass('open')){
            $('body').removeClass('close');
            // open クラスが body についていたらメニューをスライドインする
            body.animate({'left' : menuWidth }, 300);            
            menu.animate({'left' : 0 }, 300);                    
        } else {
            $('body').addClass('close');
            // open クラスが body についていなかったらスライドアウトする
            menu.animate({'left' : -menuWidth }, 300);
            body.animate({'left' : 0 }, 300);            
        }             
    });
});    
</script>

メニューが開いている時にコンテンツ部分をクリックしても閉じることができるようにする

HTML
まず、HTML のどこかに div.layer を追加します。

<body>
<div class="layer"></div>
<div class="container">
：
略

CSS

.layer{
    position: fixed;
    top: 0;
    z-index: 1;
    display: none;
    width: 100%;
    height: 100%;
    background-color: transparent;
}
body.open{
    position: fixed;
}

jQuery

$(function(){
var menu = $('#slide_menu'),
    menuBtn = $('#button'),
    body = $(document.body),
    // .layer もオブジェクト化    
    layer = $('.layer'),
    menuWidth = menu.outerWidth();                
         
    menuBtn.on('click', function(){
    body.toggleClass('open');
        if(body.hasClass('open')){
            // css で非表示にしていた .layer を表示
            $(".layer").show();
            body.animate({'left' : menuWidth }, 300);
            menu.animate({'left' : 0 }, 300);                    
        } else {
            // .layer を非表示
            $(".layer").hide();
            menu.animate({'left' : -menuWidth }, 300);
            body.animate({'left' : 0 }, 300);            
        }             
    });
    // .layer をクリック時にもメニューを閉じる
    layer.on('click', function(){
            menu.animate({'left' : -menuWidth }, 300);
            body.animate({'left' : 0 }, 300).removeClass('open');
            layer.hide();
    });
});