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

JavaScriptで連想配列の要素数を取得する方法

Object.keys()を使用して取得することができます。


var fruit = {
  name:'りんご',
  name:'バナナ',
 name:'すいか',
 name:'メロン',
 name:'みかん',
};

var length = Object.keys(fruit).length;
console.log(length); // 5

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

AngularJSでラジオボタンに応じて要素の表示切替をする方法

AngularJSを活用して、ラジオボタンのクリックに応じて要素の表示切替をする方法をご紹介します。

[HTML]

パターンAの内容が入ります。
パターンAの内容が入ります。

[/HTML]

CSSを活用してinputのチェックボックスやラジオボタンを画像にする方法

<div class="sample">
    <input name="s1" id="radio1" value="1" type="radio">
    <label for="select1">りんご</label>
</div>
.sample input{ display: none;}
.sample label{
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin-left: 20px;
    padding: 10px 20px;
    border-radius: 2px;
    font-size: 14px;
    text-align: center;
    line-height: 1;
}
.sample label:before{
    position: absolute;
    content: "";
    top: 50%;
    left: -10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: url('チェック前の画像');
}
.sample input[type="radio"]:checked + label:after {
    position: absolute;
    content: "";
    top: 50%;
    left: -10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: url('チェック後の画像');
}

あとはサイズや画像を指定すれば自由に作ることが出来ます。

関数や変数の命名規則一覧

キャメルケース

書き方→camelCase

※主にJavaやJavaScriptで使用

スネークケース

書き方→snake_case

※主にPHPやPython、Ruby等で使用

ケバブケース

書き方→kebab-case

※主にHTMLやCSSで使用