transform プロパティの scale で要素をズームしたり、translate で移動させるアニメーションを、transition で行った際に、アニメーションしている要素以外の部分が微妙にガタガタ動くという現象に遭遇しました。 実際の動き 実際の症状は下の画像のような動きです。マウスオーバーでアニメーションを実行すると、アニメーション要素でないテキストの部分が微妙に動いてしまいます…。 この現象は Chrome や Safari など、webkit 系のブラウザで発生するようです。ただ、起こる場合と起こらない場合があり、どういう状況で起こるのかまでは検証できませんでした…。 この CSS アニメーションのコード 対処法 このガタツキは以下のようにアニメーション要素に対して、3Dの方向に関する transform:translatez(0) 又は、transform:transla

最近JavaScriptの読み込みや実行の記述を、ページ最後の body 終了タグ直前で行っている場合をよくみかける気がしたので、理由を調べてみました。個人的になるほどと思ったことや誤解していた事があり、常識的なところなのかもしれないですがまとめてみました。 1. Webページの表示速度を早くする この理由は一番分かりやすく重要なところだと思います。javascriptを読み込んでいる間は、HTMLファイルの読み込みが止まってしまう為、HTMLファイルをほぼ全部読み込んで表示された後javascriptを読み込む方が表示速度が早くなります。 以下の参考サイトがとてもわかりやすいです。 2. 並列ダウンロードの妨げになってしまう これは1.の「表示速度を早くする為」の1つを掘り下げた感じになるかもしれませんが、ブラウザ側では表示速度を上げるために、サーバーから画像等をダウンロードする際には1

Modified 2015-10-17 更新情報 メニュースライドイン時スクロールできるサンプルを追記しました。コメント欄での返答で誤りがあった箇所を削除しました。 コンテンツ 部分をクリックしても閉じることができるようにするコードを追記しました。 スマートフォンやレスポンシブサイトなどでよく見かける、メニューボタンをクリックするとコンテンツを押し出してメニューがスライドインしてくる動きを jQuery と CSS で作る方法です。やってみると意外と簡単なコードで作ることができます。 サンプルデモとダウンロード ◆ 横からスライドインするメニュー demo｜memocarilog このサンプルコードは以下よりダウンロードできます。 ◆ SaoriMiyazaki/SlideIn_Menu HTMLコード スライドインしてくるメニューとメニューボタンの記述をします。 <!-- スライドメニュ

WordPressのカスタムメニュー機能で作ったメニューを複数箇所で表示する設定方法です。例えば、ヘッダーとフッターでカスタムメニューを設置する事ができます。 function.phpに下記のように記入します。 register_nav_menus( array( 'head_navi' => 'ヘッダーナビ', 'foot_navi' => 'フッターナビ', )); ‘head_navi’ => ‘ヘッダーナビ’,　’foot_navi’ => ‘フッターナビ’, の部分でダッシュボードの”テーマの場所”の箇所の名前を設定します。 ここを設定するとダッシュボードへ下のように名前が表示されてそれぞれ場所を設定できるようになります。 次にそれぞれの表示したい場所へ下記のように、wp_nav_menu()へ’theme_location’の値（カスタムメニューの名前）を入れて記入します。 /

WordPressのカスタムフィールドに入力したデータを取得する方法と表示する方法です。データを取得するにはいくつか方法がありますので、分かる範囲で書き出してみました。（カスタムフィールドに値があるかないかで表示を分ける条件分岐も追加しました。） 1. get_post_meta() でデータを取得して表示する パラメータ <?php $meta_values = get_post_meta($post_id, $key, $single); ?> $post_id データを取得する投稿のIDを指定します。表示中の投稿を指定するなら $post->ID を指定する。 $key 表示したいカスタムフィールドに入れた名前（日本語で大丈夫） $single trueかfalseを指定。falseで配列でデータを出力する。trueで指定されたフィールドの”値”の1つを文字列で出力。 使用例 下のよ

SVG 画像を Web 制作で使用する場合に、IE8 などの SVG 非対応ブラウザへは代替画像を表示することで対応することが多いのではないかと思います。調べてみると代替画像を表示する方法も色々あるようなのでまとめてみました。 object タグを使用して表示する object タグを使って SVG ファイルを読み込み、SVG ファイルが読み込まれなかった場合は、代替の img タグで指定された画像を表示します。 <object data="svg_image.svg" type="image/svg+xml" width="500" height="300"> <img src="svg_image.png" alt="svg_image" width="500" height="300" /> </object> 代替画像の表示をする代表的な方法のようですが、何故か私の環境では IE8

コードの細かい解説が参考記事にあります。とても参考になりました！ サンプルを作りました。（サンプルデモ→”fadein｜memocarilog demo”） 使い方 ヘッド内で以下のようにjQuery本体とコードを読み込みます。 読み込む時間とフェードインの時間を指定できます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('#フェードインしてくる要素').hide(); }); var i = 0; var int=0; $(window).bind("load", function() { var int=setInt