frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

トグルのarea-*は何を指定するか。

area-*属性はJSで変更された要素の役割と状態をブラウザに伝える働きをします。

トグルでの使用例

トグルでは主に下記を使用します。

  • aria-controls・・・ボタンと開閉要素の関連付け
  • aria-expanded・・・開閉の状態

主に下記のようにします。

<div class="toggle-01 js-toggle is-open">
<button type="button" class="toggle-hook js-toggle-hook" aria-controls="toggle-content-01"><span>閉じる</span></button>
<div id="toggle-content-01" class="toggle-content js-toggle-content">
<p>トグルコンテンツ</p>
</div>
<!-- toggle-01 --></div>

また、JSオフ時も考慮し、JSでボタンと開閉要素にaria-expanded="true"(開いてる場合)を指定します。

<div class="toggle-01 js-toggle is-open">
<button type="button" class="toggle-hook js-toggle-hook" aria-controls="toggle-content-01" aria-expanded="true"><span>閉じる</span></button>
<div id="toggle-content-01" class="toggle-content js-toggle-content" aria-expanded="true">
<p>トグルコンテンツ</p>
</div>
<!-- toggle-01 --></div>

全てのフォーカス要素を無効にしたい

JSなどで対象エリア内のフォーカスを全て無効にしたい時があると思います。

全てのフォーカス要素は?

フォーカス要素一覧は下記です。

  • a[href]
  • area[href]
  • [onclick]
  • [tabindex]
  • input
  • button
  • select
  • option
  • textarea
  • output
  • summary
  • video
  • audio
  • object
  • embed

フォーカスさせない

要素にフォーカスさせたくない場合はtabIndex="-1"にします。

<a href="#" tabindex="-1">a要素</a>

全てのフォーカス要素を無効にしたい

JSなどで対象エリア内のフォーカスを全て無効にしたい時があると思います。

全てのフォーカス要素は?

フォーカス要素一覧は下記です。

  • a[href]
  • area[href]
  • [onclick]
  • [tabindex]
  • input
  • button
  • select
  • option
  • textarea
  • output
  • summary
  • video
  • audio
  • object
  • embed

フォーカスさせない

要素にフォーカスさせたくない場合はtabIndex="-1"にします。

<a href="#" tabindex="-1">a要素</a>

nodeをアップデートしたらgulpが動かない時の対処法

nodeをアップデートしたらgulpが強制終了するようになりました。
意外と忘れそうなので備忘録用にメモします。

node-sassを使用しているのですが、node-sassはバージョンごとにインストールが必要なのでコマンドプロンプトにて下記を実行しました。


npm install gulp-sass --save-dev

こちらのみで動きました。

これで動かないときはこちらを試してみると良いそうです。

npm cache clean && node ./node_modules/node-sass/scripts/install.js

参考:https://qiita.com/rinoside/items/d9c911cc8d0c5db114c9

css3でコイントスのように水平に回転するアニメーション

読み込み時にコイントスのように水平に回転するアニメーションのcss3です。

マウスオーバー時も回転します。

<div class="coin-wrap">
 <div class="coin">
  <div class="front"><h2>コイン:表</h2></div>
  <div class="back"><h2>コイン:裏</h2></div>
 </div>
</div>
.coin-wrap .coin {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transition: all 3s ease;
}
.coin-wrap .coin div
{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    backface-visibility: hidden;
}
.coin-wrap .coin .front {
    color:#000;
    background-image: linear-gradient(to top left, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03);
    border: 5px solid #EDAC06;
    border-radius: 50%;
}
.coin-wrap .coin .back
{
    color:#000;
    background-image: linear-gradient(to top left, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03);
    border: 5px solid #EDAC06;
    border-radius: 50%;

}
.coin-wrap .coin {
    transform: rotateY( 720deg );
    animation: coin 3.5s;
    transition-timing-function: cubic-bezier(.01, -.105, .43, 1.59);
}
.coin-wrap .coin .back {
    transform: rotateY( 180deg );
}
@keyframes coin {
    0% {
        transform: rotateY( 0deg ) ;
    }
    100% {
        transform: rotateY( 1440deg ) ;
    }
}
.coin-wrap .coin:hover {
    transform: rotateY( 1440deg );
}

See the Pen QqPpBW by funclur (@funclur) on CodePen.

flexで簡単!画像を中央揃えにして横並びにする方法(キャプションあり)

画像を中央揃えにして横並びにする方法

<ul class="img-col2">
<li class="image">
<figure><img src="https://dummyimage.com/300x300/000/fff" alt="">
<figcaption>キャプションが入ります</figcaption></figure>
</li>
<li class="image">
<figure><img src="https://dummyimage.com/300x300/000/fff" alt="">
<figcaption>キャプションが入ります</figcaption></figure>
</li>
<li class="image">
<figure><img src="https://dummyimage.com/300x300/000/fff" alt="">
<figcaption>キャプションが入ります</figcaption></figure>
</li>
<li class="image">
<figure><img src="https://dummyimage.com/300x300/000/fff" alt="">
<figcaption>キャプションが入ります</figcaption></figure>
</li>
</ul>
.img-col2 {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 35px 0 -20px -20px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.img-col2 figcaption {
  margin-top: 5px;
  text-align: center;
}
.img-col2 figure > img {
    width: 100%;
}

.img-col2 > li {
    width: calc(50% - 20px);
    margin: 0 0 20px 20px;
}

.img-col2 > li:nth-child(2n + 1) figure {
    display: table;
    margin: 0 0 0 auto;
}

.img-col2 > li:nth-child(2n) figure {
    display: table;
    margin: 0 auto 0 0;
}
.img-col2._left {
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.img-col2._right {
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.img-col2._left > li, .img-col1-01._col2._right > li {
    width: auto;
}


原理としては、display:flexで横並びにしそれぞれをwidth:50%にしたあと左の要素にmargin-left:auto、右の要素にmargin-right:autoにして中央揃えにしています。


See the Pen GMmZWL by funclur (@funclur) on CodePen.


画像を左揃えor右揃えにして横並びにする方法

先ほどのコードに._left._rightを付与することで実現できます。

左揃え

<ul class="img-col2 _left">

右揃え

<ul class="img-col2 _right">

プライベート関数をグローバル領域から呼び出し

プライベート関数をグローバル領域から呼び出すためには、関数内でメソッドを作りオブジェクトを返せば関数を呼び出すことができます。

See the Pen OjrjVE by funclur (@funclur) on CodePen.

var func = (function(){
  function private(){
    alert()
  }
  return {
    privateFunc: private
  }
})();
func.privateFunc();