はてなブックマーク

正確には「バブリング」とは呼ばないと思うし、ちょっと意味合いが違うかもしれないけど、CSSで子要素に与えたtransitionが親要素へ伝播し、アニメーションの挙動をおかしくさせる現象に何度か遭遇した。 もしかすると、CSS界隈では有名な事象なのかもしれない。ただ、ググっても出てこないし、そもそも何てググればいいのかもよく分からず、この現象にあうたびにデベロッパーツールを開いてなんだかんだやっていたので、その原因を忘れないように書き残しておく。 どういう現象か visibility: hidden;とopacity: 0;で非表示にした要素を、マウスホバーで表示、マウスアウトで非表示に切り替える（アニメーション付き）際に、マウスアウトして完全に非表示となっているのにも関わらず、その要素が表示されていた部分にマウスをもっていくと消えた要素が再表示されてしまうという現象です！ 基本的には問題の

WordPressのテーマカスタマイザー（テーマカスタマイズ画面）にオリジナルの項目を追加して、入力内容をテーマに反映させる方法です。 オリジナルの項目を追加すると、テンプレートファイル側に記載したくないもの（広告や解析タグ等）を管理画面上から簡単に設定でき、プラグインを使うまでもないようなちょっとした表示の設定に大変重宝します。 頑張ればすごいものができそうですけど、ここでは単純に「テーマカスタマイザーへオリジナルの項目を追加」し、「表示するかしないか選択できるチェックボックスを設置」して、実際に「テーマ（サイト）へ反映」させる方法を記載します。 以下、テーマカスタマイザーだったりテーマカスタマイズだったりカスタマイザーだったりと表記揺れがありますが、同じものと捉えていただければと思います。 テーマカスタマイザーとは テーマカスタマイザーは、WordPressの管理画面上からテーマの変更

VCCW3.0でWordPressのローカル環境を構築したので、何をどうやったのか（すぐ忘れるので）自分用の覚書として記録しておきます。併せて、WordMoveを使って、本番環境（エックスサーバー）とローカル環境を同期するようにしたので、それらも含めすべてまとめて記載しておきます（v2を全て削除して、新しくv3を入れ直しています）。 完全に自分用なので、確実に分かる部分はざっくりとしか記載していません。また、自分特有のやり方をしている部分がありますので、もし参考にされる際は注意してください。さらに、エックスサーバーと同期させることを前提としているため、エックスサーバー特有のことも多いです。 それと、v2との比較記事ではありませんので、v2とv3の違いについては、以下の記事をご参照ください。 VCCW v3での変更点と新機能まとめ VCCW 3.0.0 beta 1 がリリースされました。

前回のエントリーでSVGスプライトを非同期で読み込む方法を紹介しましたが、今回はSVGスプライトをGulpで自動生成する方法を紹介します。 ここで生成するSVGスプライトは、HTMLにuseタグを使ってインラインで表示させるもので、CSSのbackgroundでは表示させることができませんのでご了承ください。 なお、インライン用のSVGスプライトの場合、（色情報等を削除するため）目視で確認することが難しくなってしまうので、SVGスプライトの生成と同時に一覧表示させるためのHTMLも自動で生成できるようにしています。 Githubリポジトリにすべてのコードをあげていますので、以下のリンクからダウンロードすることができます（構成やディレクトリ等、ここで記載しているものとは若干異なります）。 https://github.com/42EG4M1/svg-sprite-generator gulp

SVGスプライトを外部ファイルとして読み込みたくて、色々と調べたり試してみたりしていたのですが、外部SVGをAjaxで非同期読み込みするという方法が一番しっくりきたので、その方法を紹介します。 SVGスプライトといっても、CSSで背景画像として表示させるものではなく、HTMLにインラインで表示させるためのSVGスプライトになります。 何もしなくてもuseタグのxlink属性で外部SVGファイルを参照できることは知っていたのですが、IE9+でサポートされてなく、またEdgeでも怪しいとのことだったので、その方法は利用してきませんでした。ポリフィルを使ったフォールバックもあるようですが、そのためだけのフォールバックも何だか気持ちが悪かったので。。 今までやっていた方法 これまではbodyの開始タグすぐ下にsvgタグを置き、その中へ画像ごとにsymbolタグで囲み直したsvgをずらーっと並べus

よくあるやつですが、カード型デザインみたいな一覧ページのレイアウトをクリック一発で別のレイアウトへ変更するやつです。 JavaScriptだったり、別ページを用意したり、パラメーターつけたりで変更することもできると思いますが、CSSだけで変更できる簡易的なのを作りました。 カード型レイアウトからシングルレイアウト シングルレイアウトという言葉があるのか分かりませんが、こういうのです。 追記：正確には、カード型レイアウトを「グリッドビュー」、シングルレイアウトを「リストビュー」と言うようです。 See the Pen Change the Layout by Tatsuya Azegami (@42EG4M1) on CodePen. 上部中央にある四角いボタンをクリックすると変わります。 HTML <div class="main"> <input type="radio" name="r

El CapitanにアップデートしたらMAMPがおかしくなってしまったので、これを機に新しいバージョンのMAMPをインストールして、せっかくなのでデータベースごと本番環境のWordPressサイトをローカルに構築した際の覚書です。 サーバーとかデータベースとかに苦手意識があって、何かちょっとでも環境を変えると不安になるので、何をどうしたのか簡単に書き残しておきたいと思います。 MAMPをインストール MAMPを以下のリンク先からダウンロードしてインストール。現時点での最新バージョンは3.4でした。 https://www.mamp.info/de/ インストールの詳細は、特に難しいこともないので割愛。 インストールされている以前のバージョンのMAMPは、上書きされることなく別名で残るようですが、変に設定等が引き継がれるのが嫌だったので、htdocsフォルダとdbフォルダを退避後、完全に削

アニメーションについて色々と勉強している。jQueryのアニメーションはこま落ちするし、CSSのアニメーションは計量だけど、少し複雑だったり、同時に走らせたりすると、(Macだと特に)カクついてしまうことが多くて困っていた。 Velocity.jsというアニメーションJSライブラリが計量で良いということで、最近結構いじっていて、すごく簡単に導入できるし、色々できそうで光を感じている。 Velocity.js スムーススクロールをVelocity.jsで とりあえず簡単なところからはじめてみた。よくあるページ内リンクの移動時とトップへ戻る際のスクロールをスムースにするやつ。 スムーススクロールをjQueryだけでやったやつ 今まではjQueryだけでやっていた。それが以下。 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/j

文字を書き順通りに塗りつぶしていくアニメーションが必要になったので、After Effectsを使ってアニメーション（動画）を作成しました。After Effectsは、あまり使う機会がなく、たぶんすぐ使い方を忘れてしまうと思うので、今後のために作り方をブログに残しておきたいと思います。 「文字を書き順通りに塗りつぶす」と言っても、単なる（After Effects上の）テキストではなく、Illustrator で作成したレイヤーに、件のアニメーションを施すという作業になります。 After Effectsの基本的な部分も含め、AIデータの配置から動画のレンダリングまで細かく紹介していきます。 追記：これと同じアニメーションをSVGとJavaScriptで実装した場合の記事も書きました。 完成動画 まずは、完成した動画から。以下のようなアニメーションを作成します。再生ボタンをクリックでアニ

CSSでマウスホバーエフェクトといえばtransitionプロパティを使ってアニメーションさせることが多いと思いますが、少し複雑なアニメーションをさせたい時はtransitionでは難しいことがあると思います。 そんな時は、hover疑似クラスと合わせてanimationプロパティを使い、@keyframesでうまいことやるといい感じにすることができるので、個人的にはよく使っているのですが、animationプロパティでは、マウスアウト時にアニメーションが行われず、瞬時に元の位置へ戻ってしまい、少し不格好になってしまうのが悩みの種でした。 これを何とかしたくて色々やってみた結果、すごくシンプルな方法ですが、animationプロパティでもマウスアウト時にアニメーションさせることができたので、簡単にご紹介します。 マウスアウト時の挙動 とりあえず、それぞれのマウスアウト時の挙動を確認します。

菱形を大量に使ったサイトを制作しているんですが、画像を使わずにCSSのみで菱形を作る方法はいくつかあって、それぞれに向き不向きみたいな特徴があるので、作り方も含めて自分用にまとめてみました。 ちなみに「菱形を大量に使ったサイト」は、このサイトのリニューアルでして、今年の9月から作り始めてまだ完成していないという…。 基本となるHTMLとCSSとデモ 以下のHTMLとCSSがベースとなります。たぶん、1つのdivで全てできると思いますが、普通はテキストをのせたり、リンクを貼ったりすると思うので、実用面を考えてこの形としました。 HTML <div class="contents"> <div class="diamond"> <a href="#"> <div class="diamond__inner"> <p>テキスト</p> </div> </a> </div> </div> .con

最近よくSVGを使っている。何かと便利なので、IE8を考慮しなくてもよい時は、写真以外の画像は全てSVGにしてしまっている。IE8さえなければもっと大胆に使えるのに…。滅びろIE8…。(IE6,7はもう既に完全に何も考えてない) で、SVGを使いだしてから気になっていたことがある。これってSEO的にはどうなんだろうと。 img要素の場合であれば、alt属性で代替テキストを指定することができるので、その画像に何が描かれているかを検索エンジンへ伝えることができる。SVGの場合には、そういった代替テキストの話を全く聞いたことがなかった。 ということで、勉強のため、SVGの場合にもimg要素のaltに代わるようなものがあるのか調べてみました。 ※インラインSVGの場合で、imgでSVGを表示させるのであれば、通常通りalt使う。 普通にあった 結論から言うと、当然のようにあった。しかも２種類。ti

よくメニューとかグローバルナビで使われているやつで、マウスホバーすると、それにあわせて付いてくる線(バー)をCSSだけで実装する方法。 JavaScriptでやることが多いと思いますけど、CSSだけでできるんじゃないかと思ってやってみた結果です。CSSの間接セレクタを利用することで、大変簡単にできました。 追従してくるバーのデモ マウスをのせると黒いバーがアニメーションしながらついてきます。古いIEには対応していませんので、Chrome等のモダンブラウザでご覧ください。 マウスが離れると定位置へ戻るという、まぁ、よく見るやつですね。以下でやり方を説明しています。HTMLとCSSだけです。 実装方法 HTML <nav class="global-nav"> <p><a href="#">Menu name</a></p> <p><a href="#">Menu name</a></p> <

最近良く見かけるメニューですね。メニューボタンをクリックするとモーダルウィンドウが画面いっぱいに広がって項目が表示されるやつ。今まで一度も使ったことがなかったので、流行ってる(?)し、試しにちょっと作ってみました。 target擬似クラスを使えばCSSだけでも実装できるようなんですけど、フラグメント識別子を付けたり変えたりすると、ブラウザの「戻る」が反応してしまい、それが好みじゃなかったので、一般的なjQuery＋CSSで実装しています。jQueryといっても、クリックイベントだけなので、実質CSSみたいなものですけど。 モーダルウィンドウメニュー 以下のリンクから試しに作ってみたもの(デモ)がご覧になれます。右上の「MENU」というところをクリックすると、モーダルウィンドウが表示されるようになっています。 DEMO PAGE 以下、簡単に仕組みとかを書いておきます。 モーダルウィンドウメ

全画面に設置した背景画像をマウスホバーで切り替える方法。全画面の背景画像を含め、全てCSSだけでやっています。 切り替えるだけであれば、間接セレクタを使ってマウスホバー時の背景画像を用意しておけばいいだけなので、結構簡単ですが、画像切り替えの際に読み込みのための遅延を無くしたかったので、頭を悩ませました。 いわゆる画像のプレロード(事前読み込み)ですが、JSを使わずにCSSだけでやる方法がないか模索した結果、以下の様な形となりました(プリロードとも言う)。 プレロードなしの場合 まずは、画像のプレロードがない場合のものです。つまり、オンマウスの時に初めて画像を読み込むということになり、背景画像が切り替わる際に若干の遅延(タイムラグ)が生まれるんですね。これは初めての時だけで、2回目のオンマウス時には既に画像が読み込まれているので、遅延は生じません。 【DEMO】全画面の背景画像をCSSのマ

jQueryを利用したものしか作ったことがなくて、今後、使いそうな機運があったので、今さら感は半端ないですけどCSSだけで実装するドロップダウンメニューを作ってみました。 こういうのは使い回しすることが多いので、自分用にHTMLとCSSのコードを載せておきます。使いたい方がいらっしゃいましたら、ご自由にお使いください。 作ったのは、普通のドロップダウンメニュー(シングル)、多階層、メガドロップダウンメニューの3種類で、1つのグローバルナビに全てを詰め込んでいます。1種類だけ使いたいという場合もあると思うので、コード自体は種類によって個別に記載しています。そのために、非常に冗長となっていますがご了承ください。 デモと共通の部分 このドロップダウンメニューのデモは以下のリンクから見れます。 DEMO ドロップダウンメニュー自体は、ul要素でマークアップしています。 各種(シングル・多階層・メガ

なぞるようにといっても、書き順通りに文字を書いていくようなものではなくて、左から右へ徐々にスライドさせて色を変えるエフェクト。 なんと言ったらいいのかよく分からないのですが、所謂、プログレスバーのように進行しながら、徐々に色を変えていくアニメーションのやり方です。 Javascriptは利用せず、CSSだけで実装してます。JSと組み合わせればもっと色々なことできそうですが、ここでは単純にマウスホバーでアニメーションさせたものを紹介します。 デモ 以下の四角い枠内をマウスホバーしてみてください。 THE PROGRESSIVE ERA テキストの色が左から右へ徐々にスライドしながら変化しているのが分かると思います。古いブラウザには対応していませんが、最新のブラウザであれば問題なく表示できていました。 HTMLとCSS やり方は至って簡単。 HTML <p class="text-progre

CSSだけで全画面の画像を真っ二つにぶった切る方法です。真っ二つにした上で、観音開きにしたり、スライドさせたりといったアニメーションを加えています。 アニメーションや画像の開閉についても、全てCSSだけでやっています。 全画面の画像を真っ二つに開くデモ まずは以下のデモをご覧ください。 CSSで全画面の画像を真っ二つに開くデモ slide、fade、push、pullというテキストの部分をクリックすると、それぞれアニメーションしながら開閉します。 ちなみに、クリックでの開閉にはJSを使わず、前回のエントリーで紹介した、チェックボックスを使ったテクニックを応用しています。 やり方 だいたい想像がつくと思いますけど、難しいことはやっていなくて、画像を2枚用意して、それぞれclip要素で左右を半分ずつ切り抜いてつなぎ合わせているだけです。画像は、CSSで疑似要素(beforeとafter)に対し

Javascriptを使わずに、HTMLとCSSだけでアニメーションしながら展開するドロワーメニュー(スライドメニュー)を実装する方法です。 クリックでドロワーメニューを展開させる場合、jQuery等でちょっとしたプログラムを組むのが一般的だと思いますが、以下の方法では、スクリプトを一切使わずにドロワーメニューを出したり隠したりしています。 タイトルで「アニメーションしながら」とありますけど、これについてはおまけみたいなもので、あくまでも「ドロワーが出現するきっかけをCSSでやる」がメインになります。なので、アニメーションについてはあまり触れていませんがご了承ください。一応、アニメーションも全てCSSだけでやっていまして、こちらのエントリーで紹介しているものを使用しています。 JSを利用しないドロワーメニュー まずは以下のデモをご覧ください。 JSを使用しないドロワーメニューのデモ デモ右

画像を使わずに、CSSだけでボーダー(線)の両端を徐々に透明にする方法は、CSSのグラデーションを使うことで簡単に表現することができます。 ありがちな表現ですけど、グラデーションの書き方でちょっと覚えておきたいこともあったので、備忘録をかねてやり方を記載しておきます。 CSSのグラデーションを利用する まずはボーダーを作らなくてはいけませんが、ボーダーを作るのにCSSのborderプロパティは利用しません。borderプロパティでは、カラーにグラデーションの効果を与えることができないので、高さ1pxの要素を別で作り、それをボーダーに見立て、backgroundのlinear-gradient()関数を利用して要素の両端を透過させます。 ちなみに、両端を透明にしたボーダーとは、以下のようなやつです。 上下の青いボーダーがそれです 見出しとかでよく見るやつですね。 ブラウザはChrome、Sa

滑らかに結合したような表現をCSSで実装する方法です。なんて言ったらいいか分からなくて、タイトルでは「流体」と表現していますが、要は「ぷよぷよ」みたいなやつですね。英語ではこういうのを「gooey」とか言ったりするみたいです。直訳するとネバネバとかベタベタとかになるんですけどね。 この「gooey」を使ったサイトを最近良く見かけるんですけど、Javascriptでやっているんだろうなぁと漠然と思っていたんですが、色々と調べてみると、CSSのfilter要素を使って、かなり簡単に実装できることが分かりました。個人的にはあまり使う機会がないかもしれないですけど、備忘録をかねてブログにのせておきたいと思います。 CSSだけでも実装できますが、やや実用面で不安がありまして、SVGを使うことで非常に実用的になりますので、合わせて記載しておきます。 CSSのみのgooeyエフェクト まずはCSSだけで

最近よく見かけるやつなんですけど、ちょうど今作っているサイトで使ってみたくて、色々やってみた結果なかなか良かったのでブログに残しておきます。 斜めのストライプとかじゃなくて、ブロックごと全体的に斜めにして背景を傾かせる方法です。プラグインは使わずに、CSSのみで実装してます。 デモ つまりはこんな感じのやつです↓ DEMO PAGE 大胆に背景全体を傾斜させているので、単調なフラットデザインに、ちょっとしたスパイスを加えることができますね。 実装方法 色々とやり方はあるかと思いますが、ここではCSSのbefore擬似要素とtransform:rotateを使って表現しています。 HTML <section class="contents"> <div class="contents_inner"> <!-- ここはコンテンツ --> </div> </section> ※HTMLは該当部分

最近、SVG画像をHTML内に直接記述するインラインSVGに凝っていまして、色々と試しているんですけど、そこで気になることがありました。 インラインSVGの場合、リンクを貼ると全てクリッカブル(描画領域のみリンク領域になる)になってしまうんですよね。クリッカブルにできるところがSVGの特徴のひとつっていうのは分かるんですけど、クリッカブルになってほしくない時もあって、地味に困ってしまいました。 どうやったらクリッカブルにならないか色々とやってみたので、記録として残しておきたいと思います(そういう画像はPNGにしたり、imgやobject要素でやればいいわけですけど、インラインでやりたいときもあるのです)。 なお、勉強中ということもあり、あくまでも検証した結果で、正式には間違っている可能性もあって、その際はやさしく教えてください。 インラインSVGでクリッカブルにしたくない時 例えば、細い線

昨日に引き続き、CSSの小ネタを紹介します。「CSSでボーダーをボックスに沿って走らせる」とか、よく分からないタイトルですが、簡単にいうとボーダーをボックスに沿って移動させる方法で、四角いボックスの外周を回り続けるエフェクトの実装方法になります。 正確には、CSSでいうところのborderプロパティではなくて、1pxの高さ(または幅)を持った要素をCSSのアニメーションで動かしています。 四角いボックスの外周を回り続けるエフェクトとは 言葉では説明しづらいので、以下の奴がそうです。DEMOというテキスト部分をマウスホバーすると、2本の線が現れて外周を回りだします。 DEMO ヒーローイメージとゴーストボタンを使いたかったという理由だけで、デモも作ってみました。ただの自己満足。 これのやり方 個人的になかなか面白い効果だなと思っているのですが、全てCSSで比較的簡単に実装できます(正方形の場