前から興味のあった「WAI-ARIA」。 業務に余裕があったので調べてみました。 調べれは今は参考となる記事がたくさん。本当に助かります。 調べただけで終わらないように、タブに実装してみました。 タブの実装 いつもであればclassやdata属性を使い切り替え、表示・非表示にアニメーションを加えたいのであればfadeInやfadeOutのjQueryのメソッドを使っています。 今回は「WAI-ARIA」のrole属性とaria属性を使い切り替え、アニメーションをCSS3で行いたいと思います。 role属性とaria属性 まずはこの２つの違い。 簡単に言えば以下のような感じです。 role属性：コンテンツの役割を表す aria属性：コンテンツの状態や性質を表す この辺に関してはいずれ勉強した者をまとめたいと思いますが、今回は簡単に上記を覚えてコードを見て頂けたらと思います。 マークアップ r

SassをCSSにコンパイル、画像の圧縮、svgスプライトの作成等など便利すぎて今の制作には欠かせなくなった「gulp」。 そんなgulpを制作を行う中で便利だと思ったプラグインを3つ紹介します。 merge-stream このプラグインは1つのタスクで複数のソースを処理するときに使用します。 Sassを使用する環境であればSassのファイルを分割しそれぞれの役割で管理しコンパイルで一つのCSSにまとめるという方法を使われている方をも多いと思います。 しかしSassを使用していない時代であればそれぞれのCSSで管理し、共通部分と各ページのCSSのディレクトリが違うということもあると思います。 追記 - ディレクトリ例がなかったので追記しました 下記ディレクトリであれば一つの箇所にありまとめているから通常のコンパイルでも問題無い src ┗sass ┠_reset.css ┠_layout.