2017年 2月 の投稿一覧

Rubyで条件分岐をする方法

elseifではなくelsifと書くことに注意


x= 100

if x > 100
 puts "xは100より大きい"
elsif x >= 50
 puts "xは100以下50以上、宜しくお願いいたします。"
else
 puts "xは50より小さい"
end

Rubyで真偽値を返すメソッド

.empty?メソッドはオブジェクトが空の文字列であれば「true」、空でなければ「false」を返すのでif文などの条件式に使うことができます。
真偽値を返すメソッドにはRubyの慣習として「?」がついています。


x = “”

if x.empty?
puts “xは空です”
end

上のような場合は「xは空です」と出力されます。

jQueryで簡単にパララックスを作ってみよう

先にjQueryを読み込んだ後こういう記述を追加してみます。[/p]

 var top = $('#hoge').css('top');
$(window).scroll(function() {
    var value = $(this).scrollTop();
    $('hoge').css('top', value * -0.2);
});

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;
}

jQueryでCSSの値に応じて条件分岐をする方法

例えば特定のクラスのdisplayの値に応じた処理をする場合

if($(".hoge").css('display') == 'none') {
		//display:none;だった時の処理を書く
} else if($(".hoge").css('display') == 'block') {
	    //display:block;だった時の処理を書く
}

写真を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: ' ';
    }
}