制作者様よりご連絡いただき、個人的にも参考にさせてもらうことが今後ありそうなのでご紹介します。 「Eases」は、アニメーション実装のヒントをもらえたりイージングの感覚を養うのに便利なギャラリーサイトです。 一般的にwebギャラリーサイトとなるとデザイナ向けのものが多いですが、こちらはデベロッパ向けでもあるサイトとなっています。 一覧では様々なサイトのアニメーション部分に着目した形で掲載されており、ラップトップなどで確認した場合は各サイトイメージ右下に配置されている小さいサムネイルが動画になっているので、アニメーションの動きを一覧上でも確認可能です。 わざわざ各サイトに飛ばずとも動きの感じがわかるので、ある程度イメージしている動きの類似サイトを探すときには便利ですね。 また、イージング・アクション・パーツなどでのカテゴリー設定や検索機能についても設置されているので、それらも目的のサイトがハ

ホバー時に左から右へ下線が伸びるアニメーションを実装したい場合、以前このブログでも紹介したことがある擬似要素を用いた実装方法では、例えば文章内にあるリンクなどで複数行にまたがるときに意図した見栄えになりません。 1行・複数行関係なく使えるアニメーション付きアンダーライン（下線）を実装したい場合は、以下のようにlinear-gradient()とbackground-sizeを組み合わせることで実装できます。 擬似要素を用いた下線アニメーションの実装については下記エントリーの一部で紹介しており、どちらも見栄えはほとんど一緒ですが前者はtransform: scale()を、後者はwidthを変化させる違いがあります。 実装方法 実際の動きは以下デモのようになり、リンク箇所（文字色が濃い部分）にホバーすると1行・複数行関係なく左から右へ下線が伸びていくのを確認できると思います。 実装にはCSS

普段からEmmetを多用している方ならご存知の方が多いと思いますが、Sublime Text使用時にEmmetを使って簡単にダミーテキストを出力させる方法です。 また、Emmetのスニペット登録を使ってオリジナルの日本語版ダミーテキストを作成・出力できるようにする方法を紹介します。 紹介している内容はSublime Text 3とEmmetを使用した結果を元に書いています。 エントリー内で「展開」としているのは、TabもしくはCtrl + Eを使用時を指しています。 Lorem Ipsum（ダミーテキスト）を表示する ダミーテキストとして有名なLorem ipsumですが、Emmetにはこれを簡単に出力してくれる機能がついています。 出力方法はloremとlipsumで2パターンあり、どちらかを記述して展開すると「Lorem ipsum dolor sit amet, consectetu

チルトエフェクトと呼ばれる、イメージにホバーするとマウス（カーソル）の位置によってイメージが傾く動きをCSSのみで実装したものです。 普段こういった動きを実装する場合はJavaScriptを使っていますが、ふとCSSだけでできないかなと思い試してみたもので、全体的にもう少しシンプルにできそう感あったりHTMLがごちゃごちゃしてしまうのが気になるものの、CSSでもそれっぽい動きになっているかなとは思います。 チルトエフェクトやホバーで傾くと言われても動きにピンとこないという人は、以下のデモで実際にイメージをホバーをしてみてください。 HTMLは実際に表示させ傾けたい要素は.box-contentsになり、その上にある.hover-pointはそれぞれどこがホバーされているかの判別に使う要素になります。 <div class="box"> <div class="hover-point"></

EJSを使用している環境でtitleやmeta name="description"といったメタ情報をJSONファイルひとつで管理できるようにする方法です。 紹介する方法はgulpを使用した実装方法になるので、予めgulpが使用できる環境を用意してください。 EJSの基本的な使用方法などについては割愛しているので、「EJS -- Embedded JavaScript templates」や「GitHub - mde/ejs: Embedded JavaScript templates」などで確認してください。 使用するプラグインとファイル構成 プラグインのインストール 今回はgulpでEJSを使用するので、まず下記コマンドで「gulp-ejs」をインストールします。

gulpで処理したファイルの先頭に任意の文字列などを挿入することができるプラグイン「gulp-header」を利用して、CSSの先頭にcharsetを記述したり、JavaScriptの先頭にライセンス情報を記述したりする方法を紹介します。 CSSの先頭に@charset "UTF-8";を記述する gulpでSassを使用するために「gulp-sass」というプラグインを利用している人も多いと思うのですが、その際にSCSSファイルなどで先頭に@charset "UTF-8";と記述していても、コンパイルするとcharsetが消えてしまうという現象があります。 ただ、この現象は必ず起きるということでもないようで、調べてみるとファイル内にマルチバイト文字がある場合はそのままコンパイル後のファイルにもcharsetが記述されたままになっており、逆にファイル内にマルチバイト文字がない場合はたとえS

「gulp generator」はgulpで使用するgulpfile.jsとpackage.jsonに記述するソースを出力してくれるジェネレータで、用意されている各項目を選択したりファイルの読み込み・出力箇所を入力していくだけで簡単に必要なソースを出力してくれます。 サイトにアクセスすると上のイメージのような見栄えになっており、ページ左側で実行したいタスクを選択したりファイルの読み込み・出力箇所を入力して、その結果としてページ右側にgulpfile.jsとpackage.jsonに記述するためのソースが出力されるようになっています。 タスクの選択部分は大きく分けて「css」「js」「html」「その他」の4つに分類されており、上のイメージ（イメージは「css」を選択時）のようにそれぞれファイルのパス指定をする部分と各タスクを選択する項目が用意されています。 よく利用されると思うようなものは

Page Not Found Where are you going to fly? You seem to have followed a route that does not exist.

Sassといえばネスト・extend・mixinなど、効率的にCSSを記述することができる機能が多数あります。その中のひとつに親セレクタの参照や疑似クラスを指定するために使用する機会も多いと思う**&（アンパサンド）**というものがありますが、これをBracketsのエクステンションと組み合わせて疑似クラス指定をより楽に記述していく方法を紹介します。 例えば&:nth-of-type(), &:first-child, &:not(:first-child)などの擬似クラスを利用する機会が多い場合、使用する度に毎回入力していくのは割と面倒です。 そこで、今回は**Brackets Snippets (by edc)**というBracketsのエクステンションを用いて、この&（アンパサンド）を使った擬似クラス指定を少しでも楽になるようにしていきます。 Brackets Snippets (b

Page Not Found Where are you going to fly? You seem to have followed a route that does not exist.

サイト制作時にTwitterやFacebookなどのソーシャルメディアサービスのボタンを設置する機会が多いと思いますが、それらを特に独自デザインなどで実装する場合はロゴデータが必要だったり、どのようなカラーコードを使用しているかなどを調べることがあります。 自分もそのような場合は公式からデータをもらったりカラー確認したりするのですが、毎回ググるのが面倒なのとサービスによってはすぐに該当ページを見つけられないなんてことも稀にあるので、個人的にサイトやブログ制作時によく設置・利用されると思う各種サービスのガイドラインへのリンクを一覧化しました。 サービスによってはリンク先で全ての内容を確認できないものもありますが、ほとんどがロゴデータをダウンロードすることができ、ブランドカラーなども確認できるページとなっています。 また、利用条件や禁止事項についても同ページ内に記載されているところが多いので、

自分が普段からどちらかといえばデザインよりもコーディングなどの作業が多いので、中にはただのコーダー側の意見や愚痴っぽいのもあるかもしれませんが、Photoshopでデザインする際に見やすく綺麗なPSDにすることができると思うポイントや知っておくと便利だと思う機能をいくつかあげてみました。 最近だと特にレスポンシブが関連してIllustratorやSketchを使ってるという人も多いとは思いますが、デザイン制作時にPhotoshopを愛用しているという方は参考にしてみてください :) あくまで個人的に思ったことなので、バリバリのデザイナーさんとかで「もっとこうしたら良くなるよ！」とか「それはしない方が良いのに...」みたいな意見があればアドバイスやツッコミ大歓迎です。 ここで紹介している内容やキャプチャは「Adobe Photoshop CC 2017」を使用した想定のものになり、バージョン

「Brackets Lorem Pixel」はBrackets上で手軽にダミー画像を挿入することができるエクステンションです。 ダミー画像生成サイトの「lorempixel - placeholder images for every case」をBrackets上で手軽に利用できるようにしたもので、サイトと同様にサイズ・テーマ・カラーを任意で指定することができます。 Bracketsの「拡張機能マネージャー」でLorem Pixelと検索すれば該当のエクステンションが出てくると思うのでインストールします。 エクステンションが有効化されるとイメージのようにエディタ右上にlorempixelのロゴアイコンが表示されるので、ここからダミー画像を挿入することが可能になります。 使用方法 アイコンをクリックするとイメージのようなウィンドウが表示され、ここで画像のサイズやテーマなどを選択することがで

今から1年前ぐらいにメインエディタをSublime Textに切り替えた際にもとにかく高機能で使いやすかったので今後も使い続けると思っていたんですが、いろいろと比較した結果メインエディタをBracketsに切り替えることにしました。 まだ使い始めたばかりなので気になる拡張機能を片っ端から試してみたり自分が使いやすいようにいろいろといじろうとは思いますが、取り急ぎインストールしてみた拡張機能のメモや切り替える要因となったポイントなどを書き残しておこうと思います。 Bracketsとは ご存知の方も多いと思いますが、BracketsとはAdobeが提供しているエディタです。 Bracketsは、HTML／CSS／JavaScriptで開発されている、HTML／CSS／JavaScript用の新しいオープンソースコードエディターです。 新機能や機能拡張の開発を通じてプロジェクトに参加することをご

ヒーローイメージとはファーストビューでドーンと表示される大きなイメージのことで、海外だけでなく国内でも取り入れているサイトを見かけることが多くなってきました。 そんなヒーローイメージにCSSで実装したグラデーションを組み合わせたサンプルです。 グラデーションを重ねる 単純に画面いっぱいに表示した背景画像の上にグラデーションを重ねたものです。 HTMLは.heroを指定したdiv要素のみを使用し、CSSは下記のように記述します。 .hero { height: 100vh; background: linear-gradient(-45deg, rgba(229,93,135,.7), rgba(95,195,228,.7)), url(background.jpg) center center / cover no-repeat; }

「Post Type Requirements Checklist」は、投稿画面に必須項目を簡単に設定できるプラグインです。 指定した項目で何が抜けているのかもわかりやすく、項目が全て埋まっていないと公開ボタンも表示されない仕組みなので、いつもアイキャッチ指定やカテゴリー指定を忘れて公開してしまうなんて人にピッタリだと思います。 紹介している内容やキャプチャなどは、WordPress Ver 4.1で使用した際のものになります。 インストール・有効化 管理画面のプラグインから「Post Type Requirements Checklist」を検索してインストール、もしくは「Post Type Requirements Checklist」からファイルをダウンロードして環境にアップロード。 プラグインを有効化すると「設定」に「Post Type Requirements」という項目が追加さ

Page Not Found Where are you going to fly? You seem to have followed a route that does not exist.