JavaScriptライブラリの「GSAPジーサップ」はウェブサイトのモーション制作に役立ちます。GSAPは高機能であり、実行性能が良好で、互換性も高い利点があります。 始点と終点の間を補間することでモーションを実現することは「トゥイーン」と呼ばれます（Betweenが語源のFlash用語）。トゥイーンの機能を提供するJSライブラリは多くの種類が存在しますが、その中でもGSAPは評判が高く、機能の多さでは群を抜いています。当サイトの記事『トゥイーンライブラリの比較検証』でも、類似のライブラリに比べて性能が高いことを確認しています。 旧TweenMax時代から数えてGSAP利用歴15年の筆者が、GSAPのおさえておくべき最低限の使い方から、現場で役立つテクニックを紹介します。 ▼GSAP公式サイト GSAP入門は前後編の2回にわたり解説します。前編では基本的なGSAPの使い方を中心に説明しま

※記事を書いたのは2021年6月ぐらいで、shopify歴5ヶ月の時です。現在この記事書いて２年以上 […]

@-webkit-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-o-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

WordPressのテーマやプラグイン作成において、よく利用する関数やグローバル変数などを個人的に整理したコンテンツです。 各関数やグローバル変数は、情報別（データの種類）と目的別（機能の種類）に分類しています。 なお、ほとんどの情報はソースコードを見ながら書き留めた内容であり、確認不足による誤りや更新の遅れによる不正確な内容を含んでいる可能性があります。あらかじめご了承ください。

無料で商用利用OK！クレジット表記不要のフリーイラスト素材を配布中。どんなシーンにも大体はまる、シンプルでかわいいイラストを配布しています。

2020年の終わりに私たちLoose Drawingは始まりました。最初のころは、訪問者数が1日3人、5人という日もありましたが、今では月間10万人以上の方々にご利用いただいており、この場を借りて心から感謝申し上げます。 しかし、サービスの成長とともに運用コストも増加しています。私たちは、ユーザー体験を最優先に考え、広告は最低限に留めており、広告を増やして収益を上げることもできますが、それは私たちの理念に反します。 ここで皆様にお願いがあります。もしLoose Drawingが皆様の創作活動に少しでも役立っているなら、私たちにコーヒー１杯分のサポートをしていただけないでしょうか。皆様からの温かいサポートが、私たちのサービスを継続し、さらには発展させていく力となります。

今回はGSAPのScrollTrigger.jsを使ったスクロールアニメーションについて説明します。 前提条件は以下 複雑なアニメーションをしたいアニメーションをサクサク動かしたいCSSは操作せず、JavaScriptだけでアニメーションさせたい 説明環境は以下 macOS Catalina v10.15.5Visual Studio Code v1.57.0

Figma Community file - デジタル庁サービスデザインユニットでは、一貫したデザインや操作性でウェブサイトやアプリを提供するための仕組み「デザインシステム」の構築に取り組んでいます。どなたでも構築中のデザインシステムのデザインデータを閲覧することができます。 デザインシステム構築の目的の詳細はデジタル庁ウェブサイトをご覧ください。 更新履歴 2022.12.28 リンクテキスト、テキストエリアのガイドを更新しました 2022.11.14 軽微な修正を行いましたアイコンを一部修正しましたテキスト入力、テキストエリアの表記揺れとカラー違いを修正しました 2022.11.12 軽微な修正を行いました最新状態ではな...

はじめに 本記事ではCSSのプロパティ、「mix-blend-mode」と「background-blend-mode」についてご紹介します。 「mix-blend-mode」と「background-blend-mode」はそれぞれ画像、背景画像や色を合成するときに使うプロパティですが、どういうときにどちらのプロパティを使えばいいのか、混乱することがあるので、今回の記事でその違いや使い方についてもご紹介します。 CSS blend modes CSSブレンドモードとはブラウザ上で画像にオーバーレイ効果をかける方法です。 もともとデザイナーはPhotoshopなど画像ソフトを使い画像にオーバーレイなどのエフェクトをかけていたのですが、CSS blend modeの導入によりブラウザ上でもこれが実現可能になりした。 CSS blend modesには background-blend-mod

【MOS】【Microsoft Office Excel】【マクロ/VBA】ExcelのリストをJSONに変換するマクロ 2021/10/21 19:24 JSONCloseメソッドKillメソッドSaveToFileメソッドWriteTextメソッド 4 JSONとはJavaScript Object Notationの略で、配列で書かれたテキスト形式のファイルです。 JSONファイルをサーバーに上げるとHTMLに出力することもできるので、HTMLタグを知らない人でもJSONファイルを変更できれば簡単にサイトを更新することができます。 JSONファイルには決まった書式ルールがあるので、不慣れな人が作成するのは少し難しいかもしれません。 今回はExcelのリストからJSONファイルを生成するマクロを作成してみました。 Excelリスト例 たとえばこんなリストがあるとします。 このリストをJ

カスタムフィールドのテキストエリアで入力した改行を実際の表示でも反映させる方法です。 自分がすぐ忘れがちなので備忘録も兼ねてご紹介します。 通常はカスタムフィールドのテキストエリアで改行を入力して、その値を取得してWebページに表示すると改行が反映されません。 カスタムフィールドではHTMLタグは使えるので<br />タグを入力すればいいのですが、カスタムフィールドをクライアントご自身で編集して頂く際には、できるだけタグなど使わずに済むようにしたいです。 ということで、カスタムフィールドの値を呼び出すテンプレートタグを変更して、カスタムフィールドのテキストエリアに入力した改行をWebページでの表示にも反映させるようにします。 カスタムフィールドの値を呼び出すには、以下のようなテンプレートタグを使っています。 <?php echo get_post_meta($post->ID, 'フィール

こんにちは、さち です。 ブログやサイトの運営に使われる「WordPress」。 WordPress のファイルが他のファイルと混ざらないように、WordPress を専用ディレクトリ（仮に「wp」とする）にインスト―ルしていることも多いと思います。 その場合、WordPress にアップロードした画像の URL は「https://example.com/wp/../uploads/sample.jpg」になります。何だか、画像ファイルのある場所が無駄に深い気がするんですよね。 WordPress の画像のアップロード場所を違う場所（ディレクトリ）に変更してみましょう。

言われたまま作るのではなく、お客様目線で相談から制作後まで一貫した「パートナー」としてお手伝いします。

チェックボックスの選択肢が変動しない場合は基本の機能で簡単に設置できますが、場合によっては動的なチェックボックスを作成したい場合もあるかと思います。 例えばこんなとき。 自社製品はそれぞれカスタム投稿タイプで詳細ページを作成している前提。 商品名はページタイトルを取得・表示しています。 この場合、商品数が増えたり減ったりなど変動があった場合、逐一管理画面からチェックボックスの選択肢を編集する必要が出てきてしまいますよね。 記事タイトルに商品名を入力し、そこから商品名をチェックボックスの選択肢に反映できれば運営的にも楽になりますよね。 そこで今回はWordPressのsingle.phpで作成した記事のタイトルを、メールフォームプラグイン「Contact form 7」のチェックボックスタイトルに反映する方法をご紹介します。 【基本編】Contact form 7で静的なチェックボックスを作

イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。

なぜCSSでボタンを作るのか？その前に、なぜCSSでボタンを作るのか？について少しだけ考えたいと思います。 簡単に言ってしまえば、 軽い！拡張性がある！解像度の心配がない！簡単！と言った理由ではないでしょうか？ 画像でボタンを作ることも多いと思いますが、「画像じゃないほうがいいなあ」と思うことも多いと思います。 もちろん、デザイナーから上がってきたデザインデータからボタンを切り取って、HTMLに設置して、CSSでホバーはopacity:0.8、とかやれば簡単ではありますが、デザインツールの進化やレスポンシブの一般化に伴い、そういったイケてなくて古臭いやり方はあまり望ましくないです。 特にWebの場合、テストの繰り返しが必要ですが、画像でボタンを作るとなるとテスト用にいくつもの画像を作らなくてはいけません。色やテキストを変えるとなると画像すべてを修正する必要があります。しかし、CSSボタンで