CSS

Sassのrgbaの指定には実は16進数が使えるという話

こういう指定するの少し記述が面倒ですよね。

.hoge {
  background-color: rgba(255, 255, 255, 0.5);
}

しかしSassではこういう風に書くことができます。

.hoge {
  background-color: rgba(#FFF, 0.5);
}

これは超便利。

2017年CSSでのfont-family指定はこれがおすすめ

@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

body {
    font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}

写真をCSSのみで補正する方法

CSS3のfilterを活用すれば可能です。

.hoge {
	-webkit-filter: xxx();
	filter: xxx();
}

CSSで写真をモノクロ調にしたい場合

grayscale(グレースケール)を指定します。

//0(初期値) - 100[%] 
.hoge {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

CSSで写真をセピア調にしたい場合

sepia(セピア)を指定します。

//0(初期値) - 100[%] 
.hoge {
	-webkit-filter: sepia(100%);
	filter: sepia(100%);
}

CSSで写真の彩度を変更したい場合

saturate(彩度)を指定します。

//0 - 100(初期値)[%]
.hoge {
	-webkit-filter: saturate(0%);
	filter: saturate(0%);
}

CSSで写真の色相を変更したい場合

saturate(彩度)を指定します。

//0(初期値) - 360[deg] 
//360degは0degと同じになる
.hoge {
	-webkit-filter: hue-rotate(360deg);
	filter: hue-rotate(360deg);
}

CSSで写真の階調を反転したい場合

invert(階調反転)を指定します。

//0(初期値) - 100[%] 
.hoge {
	-webkit-filter: invert(100%);
	filter: invert(100%);
}

CSSで写真を透過させたい場合

opacity(透過度)を指定します。

//0 - 100(初期値)[%] 
//opacity: xx%;とほぼ一緒
.hoge {
	-webkit-filter: opacity(0%);
	filter: opacity(0%);
}

CSSで写真の明るさを変更したい場合

brightness(明るさ)を指定します。

//0 - 100(初期値)[%] 
//brightness(0%) で真っ黒になる
.hoge {
	-webkit-filter: brightness(0%);
	filter: brightness(0%);
}

CSSで写真のコントラストを変更したい場合

contrast(コントラスト)を指定します。

//0 - 100(初期値)[%] 
.hoge {
	-webkit-filter: contrast(0%);
	filter: contrast(0%);
}

CSSで写真をぼかしたい場合

blur(ぼかし)を指定します。

//0(初期値)- 任意の値[px] 
.hoge {
	-webkit-filter: blur(5px);
	filter: blur(5px);
}

複数の効果を組み合わせることも可能ですが、行列計算で処理が行われていますので、効果の順番によっては結果が異なってくることには注意が必要です。

cssで背景を透過させたい時の方法

アルファチャンネルを指定してすることで背景のみを透過させることが可能です。

.hoge {
    background-color: rgba(255,255,255,0.5);
}

ちなみに文字も透過させたい場合はopacityを使用します。

.hoge {
    opacity: 0.5;
}

/*********
↑20170129
**********/

CSSで写真やすでに背景がある要素等を黒っぽくする方法

表示させている写真を少し黒っぽくしたかったり、すでに背景を指定している要素を黒っぽくしたかったりする場合の方法になります。

※あらかじめ対象のタグに#photoを加えておいてください。

※透過度等は各々で調整が必要です。

#photo {
    position: relative;
    opacity: 0.7;
    &::before{
        background-color: rgba(0,0,0,0.2);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: ' ';
    }
}

CSSだけでタブの切り替えを実現させる方法

<!-- ↓タブ切り替えエリア↓ -->
<div class="tabArea">
    <div id="tab01">
        <div id="tab02">
            <!-- ↓タブ↓ -->
            <ul class="tab scroll_noNav">
                <li><a href="#tab01">1111</a></li>
                <li><a href="#tab02">2222</a></li>
            </ul>
            <!-- ↑タブ↑ -->
            <div class="tabContents">
                <!-- ↓タブ 1 の内容↓ -->
                <div class="tab01">
                    <section>
                        <h1>1111</h1>
                        <p>1111</p>
                    </section>
                </div>
                <!-- ↑タブ 1 の内容↑ -->
                <!-- ↓タブ 2 の内容↓ -->
                <div class="tab02">
                    <section>
                        <h1>2222</h1>
                        <p>2222</p>
                    </section>
                </div>
                <!-- ↑タブ 2 の内容↑ -->
            <!-- .tabContents --></div>
        </div>
    </div>
</div>
<!-- ↑タブ切り替えエリア↑ -->
.tabArea {
    #tab01:target .tab01, #tab02:target .tab02 {
        display: block;
    }
    #tab01:target .tabContents div:not([class="tab01"]), #tab02:target .tabContents div:not([class="tab02"]) {
        display: none;
    }
    #tab01:target a[href$="tab01"], #tab02:target a[href$="tab02"] {
        //アクティブなタブのスタイルを書く
    }
    #tab01:not(:target) #tab02:not(:target) a[href$="tab01"] {
        //どちらも選択されていないときの最初のタブ1のスタイルを書く
    }
}

Sassのmixinを活用してスマホページのテキストを可変にする方法

ミックスインを活用することで、一部分だけスマホのテキストを可変させたい場合等に利用できます。

まとめて特定の要素を可変にすることも可能です。

※Android系でzoom指定が不安定な端末もあるので注意。


@mixin spZoom {
    $max-width:1200;
    $min-width:320;
    $step:20;
    $zoom:1.0;
    zoom:$zoom;
    @for $i from 1 through $step {
         $n:$min-width + ( ( ( $max-width - $min-width ) / $step ) * $i );
         @media screen and (min-width:#{$n}px){
               zoom:$n/$min-width;
         }
    }
}


<p class="spZoom">可変させたいテキスト</p>


CSS3で要素の下部にラインアニメーションを表示させる方法

特定の要素に下線が引かれるようなアニメーションを追加したいとき。

<p class="hoge">この下に下線を表示</p>

左から右へ下線が表示されるアニメーション

.hoge{
  position: relative;
  display: inline-block;
  font-size: 2em;
}
.hoge:before{
  position: absolute;
  top: 1.3em;
  left: 0;
  content: "";
  display: inline-block;
  width: 0;
  height: 2px;//線の厚み
  background: #000;//線の色
  transition: 2s;
}
.hoge:hover:before{
  width: 100%;
}

右から右へ下線が表示されるアニメーション

.hoge{
  position: relative;
  display: inline-block;
  font-size: 2em;
}
.hoge:before{
  position: absolute;
  top: 1.3em;
  right: 0;
  content: "";
  display: inline-block;
  width: 0;
  height: 2px;//線の厚み
  background: #000;//線の色
  transition: 2s;
}
.hoge:hover:before{
  width: 100%;
}

中央から左右へ下線が表示されるアニメーション

.hoge:before,
.hoge:after{
  position: absolute;
  top: 1.3em;
  content: "";
  display: inline-block;
  width: 0;
  height: 2px;//線の厚み
  background: #000;//線の色
  transition: 2s;
}
.hoge:before{
  left: 50%;
}
.hoge:after{
  right: 50%;
}
.hoge:hover:before,
.hoge:hover:after{
  width: 50%;
}

Sassの変数を活用してフォントサイズをピクセルから自動的にパーセント表記に変換する方法

//例
.hogehoge {
    font-size: fs(14);
}
//下記で出力される↓↓↓
.hogehoge {
    font-size: 117%;
}
//Sass
//基本サイズを12pxとした場合のパーセントの値を配列で並べていく
$sizeList:84%, 92%, 100%, 109%, 117%, 125%, 134%, 142%, 150%, 159%, 167%, 175%, 184%, 192%, 200%, 209%, 217%, 225%, 233%, 241%, 250%, 284%, 292%, 300%, 309%, 317%, 325%, 334%, 342%, 350%, 359%, 367%, 375%, 384%, 392%, 400%, 409%, 417%, 425%, 434%, 442%;
//サイズが10pxよりちいさければ、10pxとし、50pxより大きければ50pxとし、配列とピクセルの値を連携させる。
//※今回は10pxから50pxの間で設定できるように指定。
@function fs($size) {
    @if $size < 10 {
        $size: 10;
    }
    @if $size > 50 {
        $size: 50;
    }
    @return nth($sizeList, $size - 9);
}