Web制作、Webサービスに関する技術やノウハウを発信するコラムサイト

CSS3のanimationプロパティと@keyframesを使用すると、CSSのみでアニメーションをすることができます。 複雑なものでなければ簡単にできるので、まずは触ってみましょう。 今回は正方形を長方形にするアニメーションを作成します。 記述例 CSS（記述例） HTML（記述例） 基本の形はこうなります。 まず、@keyframesの記述の後に、アニメーションに対して任意の名前を付けます。 0%は最初に表示される形、100%には最後に表示される形を記述します。 次にア […]

Flexboxを使いこなそう！の第5弾です。 [過去の記事] [第1回] Flexboxを使いこなそう！-基本の書き方- [第2回] Flexboxを使いこなそう！-子要素の並び順を指定する- [第3回] Flexboxを使いこなそう！-子要素の折り返しを指定する- [第4回] Flexboxを使いこなそう！-水平方向の配置指定の仕方- 今回は垂直方向の配置指定についてです。 垂直方向の配置指定 [HTML] [CSS] こちらが基準になるHTMLになります。ここから垂直方向 […]

今回は素敵なCSS3アニメーションを用意してくださっているサイトをご紹介します。 以前紹介した記事はこちら hover時に素敵な動きを加えてくれるcss3アニメーション10選 今回は一部jsやSVGと組合せているものもあります。 また、一部IEや古いブラウザなどに対応していないものが多いので、そちらは各ページをご確認ください。 Creative Button Styles ボタンなどのhoverアニメーションに使えそうなアニメーションです。 押して楽しいボタンがいっぱいありま […]

Flexboxを使いこなそう！の第4弾です。 [過去の記事] [第1回] Flexboxを使いこなそう！-基本の書き方- [第2回] Flexboxを使いこなそう！-子要素の並び順を指定する- [第3回] Flexboxを使いこなそう！-子要素の折り返しを指定する- 今回は水平方向の配置指定についてです。 通常でしたらfloatやtext-align等の指定を行いますが、Flexboxは独自の指定があります。 水平方向の配置指定 [HTML] [CSS] こちらが基準になるH […]

Webサイトで画面をスクロールすると、要素がフェード等のエフェクトがかかって出てくることがありますよね。 jQueryを使うことが主だと思うのですが、『AOS』を使うとjQuery不要で実装ができます。 AOSの使い方 とりあえずサイトからcssとjsをダウンロード、またはCDNでも配布されているのでそちらを読み込みます。 CSSの読み込み jsの読み込み CSSはhead内に、jsはbody内で読み込ませてください。 あとは読み込ませた後ろにAOS.init()の記述をして […]

Flexboxを使いこなそう！の第3弾です。 [第1回] Flexboxを使いこなそう！-基本の書き方- [第2回] Flexboxを使いこなそう！-子要素の並び順を指定する- 今回は子要素の折り返しについて書いていきます。 子要素の折り返し まずは折り返しについてです。 Flexboxは『並べる』ことを前提にした機能なので、デフォルトのままだと外側のサイズ指定したボックスから要素がはみ出してもそのまま横に並び続けてしまいます。 とりあえずどんな感じになるのか見てみましょう。 […]

Flexboxを使いこなそう！の第2弾です。 [前回] Flexboxを使いこなそう！-基本の書き方- 今回は子要素の並び順の指定の仕方についてです。 並びの指定については『flex-direction』プロパティを使っていきます。 これを使えば『1,2,3,4…』と並んだ子要素を『4,3,2,1…』といったように反対側から並べる事もできちゃいます。 子要素の並び順を指定しよう-横並び- 左から右に並べる とりあえず通常通りの左から右に並べる方法です。 […]

仕様も安定していそうだしそろそろ現状のブラウザのシェアのことを考えるとガンガン使ってもいいかなと思うFlexbox。 各プロパティが豊富すぎてよく調べてしまうことになるので、使い方をまとめてみようと思います。 今回はとりあず入門ということで要素を横に並べる方法をご紹介します。 Flexboxって？ Flexboxとは、おおざっぱに言うと要素を簡単にレイアウトできるCSS3の新しい要素です。 今までは可変要素を同じ割合で並べたいときはcalcで計算。 横並びになっている複数個の […]

こんにちは、工藤です。 今回はYouTubeの埋め込み動画をjsでコントロールする方法をご紹介します。 例えば埋め込みの際に『自動再生にした時にミュートにしたい』なんて場合はただ埋め込みではできないのでこちらの方法で実現させます。 IFrame Player APIを読み込ませよう まずjsを読み込みます。 以下は直接htmlの方に記述できる方法 またはjsの方で読み込ませる方法もあります。 お好みの方でどうぞ。 youtubeにアップした動画を表示させる 次にyoutube […]

割と使うタブの切り替え。 単純なものであれば自分でもコードを覚えれば書けないこともないのですがもうちょっと様々な効果を使ってみたい…なんて時もあります。 そんな時に役立つのが『Tabslet』です。 使い方 とりあえずダウンロードしましょう。下記サイトから『DOWNLOAD』ボタンでダウンロードしてください。 Tabslet ダウンロード後はcssとjsを読み込ませます。 ダウンロードしたフォルダにある『jquery.tabslet.js』とdemo＞stylesheetsフ […]

リンクやボタンにマウスオーバーの動きを設定する際、CSSアニメーションを利用するのもすっかりと一般的になりました。 ここで問題になってくるのが、透過画像にアニメーションを設定すると、一件図形の範囲外である透過部分でもhoverの判定がされてしまいます。 透明チェック部分にマウスカーソルを当てると、アニメーションが出てしまう。 PCから動作を確認してください。 別タブで表示 これをimgではなく、SVGのpathやpolygonに設定すると、無事解決することが出来ます。 SVG […]

今日は、HTML5より正式に採用された「role属性」について書きたいと思います。 role属性とは role属性は、このように使用します。 見ればどういったものかなんとなく分かると思いますが、この場合はdiv要素に対して「ナビゲーション」の意味を付与しています。 では、実装する必要はあるのか 2016年04月に「障害を理由とする差別の解消の推進に関する法律」が施行されました。「障害を理由とする差別」の解消に努めるという主旨の施策なのですが、その中に「情報アクセシビリティ」も […]

こんにちは、工藤です。 今回はコンテンツを魅力的に演出できるjQueryプラグインのまとめの2です。 [前回] コンテンツを魅力的に演出できるjQueryプラグインのまとめ Enllax.js 　 パララックス効果を得られるプラグインです。 このプラグインの特徴は画像などの前景と背景を簡単な指定で再現できるところです。 軽量ですし、使い勝手のいいプラグインかと思います。 ScrollMagic 　　 こちらもスクロール位置をトリガーにアニメーションをしてくれるパララックス効果 […]

こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part9です。 バックナンバー 知っておくと便利なcssの小技 part8 知っておくと便利なcssの小技 part7 知っておくと便利なcssの小技 part6 ナビをhoverしたときに、中央から線を出す ナビなどをhoverしたときに、テキスト下部の中央から線が表示されるあれです。 なんとなくおしゃれになります。 ソースは一見複雑そうですが、登録しておけばちょっとだけ値などを変えるだけで簡単に […]

こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part8です。 バックナンバー 知っておくと便利なcssの小技 part5 知っておくと便利なcssの小技 part6 知っておくと便利なcssの小技 part7 テーブルを均等配置にしたい テーブルを特にサイズ指定することなく、幅を全部均等にしたい！という時に便利なcssです。 thやtdなどに指定するわけではなく、そのままtableに対して『table-layout: fixed;』を設定してし […]

その他の記事はこちら↓ トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション　その1 トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション　その2 === 基本的な、オブジェクトの生成からトゥイーンモーションをまで設定する方法を作成しました。今回は、オブジェクトを生成する関数をinit関数の外に出して、何度でもパーツ化する手法を記事にしたいと思います。 今まではinitの中にあったものをinit関数の外に […]

前回の記事はこちら↓ トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション　その1 === 前回はオブジェクトを生成してアニメーションさせるところまでを記事にしましたが、実際に使用するにはもっとたくさんのオブジェクトが必要で、複雑なアニメーションが求められると思います。では、複数のオブジェクトを作るにはどうするか。今回はそちらを書いていきたいと思います。 単純にオブジェクトを複数作ると… まずオブジェクトを1つ作る場合はこうでしたね。 単純 […]

後学のためにトレンドのJSを調べていたのですが、 jQueryから入って、フロントエンドのアニメーション・マウスイベント程度しか利用しないデザイナーの私でも導入できそうなJSを見つけました。 CrateJSとは？ CreatJS こちらのJS、特徴はjQueryのようにメソッドチェーンで複数の処理を繋げることができます。 イージングもききます。アニメーションをループさせることもできます。 もうひとつ大きいのが、トゥイーンモーションが使えます。 過去にFlashでアニメーション […]

こんにちは、工藤です。 今回はグラフを描画できるライブラリをご紹介します。 vis.js ネットワーク図を引っ張った時の動きが面白くて個人的に好きです。 あまりに複雑なものでなければアニメーションもサクサク動きます。 D3.js 　 かなり自由度が高いライブラリらしく、とにかくサンプルの数が豊富にあります。 慣れている人は自分で細かい作りこみもできそうですね。 cola.js サンプルはネットワーク図のようなものが豊富な印象です。 ブラウザ上で数値など変更して確認できるのが便 […]

こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part7です。 今回はリセット系の2つです。 バックナンバー 知っておくと便利なcssの小技 part4 知っておくと便利なcssの小技 part5 知っておくと便利なcssの小技 part6 safariのようなwebkit系のモバイル用ブラウザのフォーム要素をリセット safariのようなwebkit系のモバイル用ブラウザだと、input等のフォーム要素のデフォルトのデザインが強く残ってしまい、 […]

React.jsの理屈は後回し。とりあえずコードを書いてみたい。jQueryが古いと言われているのらしいので「こう書けばこうなる」くらいをやってみたい。 React.jsが来るらしい jQueryで表面のベーシックなことだけしていたタイプの私には、React.jsは大変ハードルが高いです。検索して出てくる記事をいくつか読んでみたものの、そもそもの考え方から変えていかなければならないんだなと感じました。 しかし、時間は待ってくれないので、もうHTMLにソースを書いてみようと思い […]

例えばキャンペーン応募受付が夜中の0時までなので、その時間ピッタリにリンクを削除して、終了のメッセージを出したい。しかしその時間には寝ていたい、そんなとき。 「〇月×日△時になったら表示を切り替える」jsを組み込んでみましょう ※ただjsなので、厳密にソースを見られるとリンク先などがバレてしまいます。朝起きたらちょいと書き換えるくらいの温度感で済む場合なんかにご利用ください。 ※もうひとつ。画面を読み込んだタイミングでのみ動作します。表示中に時間が経過しても、リロードしないと […]

こんにちは、工藤です。 今回は背景を魅力的に見せてくれるjsについてまとめてみました。 covervid 　 背景いっぱいに動画を表示してくれるプラグインです。 動画を使用するのにすごく軽量なところが魅力的です。 particles.js 　 幾何学模様を背景に表示してくれるプラグインです。 マウスの動きに合わせて幾何学模様が動いてくれてちょっと楽しいです。 模様の点の数や動きの等もカスタマイズが可能です。 StickyStack 　 複数のグラデーションが重なり合う背景を作 […]