Grinee.blog Webデザイナーの備忘録

《CSS》テキストに縁取りをつける

CSSで文字のまわりに縁取りをつける方法を紹介します。「text-shadow」と「text-stroke」の2つの方法をまとめました。

2025/06/10 17:34

《JavaScript》Canvasで滑らかな波アニメーションをつくる

JavaScriptのCanvas機能を使って、前後に重なる2つの波がランダムに流れるアニメーションを実装します。

2025/05/22 10:33

《JavaScript》Youtubeの複数の動画をループ再生させる

YouTube IFrame Player APIを使って、複数の動画をループ再生する方法を紹介します。音声はミュート設定で再生されます。

2025/04/24 13:51

《CSS》SVGの手書き風アニメーション

SVGに手書き風のアニメーションを加える方法を紹介します。線が描かれていくような表現をCSSのstroke-dasharrayとstroke-dashoffsetを使って実装しています。

2025/04/17 13:47

《CSS》グラデーションがスライドするhoverエフェクトをつくる

CSSだけでボタンの背景にグラデーションがスライドするようなhoverエフェクトを実装する方法を紹介します。

2025/04/14 13:28

《jQuery》複数のエリアでランダムに画像を切り替える

jQueryを使って、複数の画像エリアでそれぞれランダムに画像が切り替わるアニメーションを実装する方法を紹介します。

2025/04/08 15:35

《MAMP》Apacheの設定ファイル（ httpd.conf）の場所

MAMPとMAMP Proで異なるApacheの設定ファイル（httpd.conf）の保存場所についてまとめています。

2025/03/31 14:21

《CSS》テキストにグラデーションをかける

CSSのbackground-clipプロパティを使って、テキストにグラデーションを適用する方法を紹介しています。

2025/03/27 11:16

《Photoshop》アップデートで変わったバウンディングボックス表示場所

Photoshopアップデートで、バウンディングボックスの表示場所が歯車アイコン内からオプションバー上に移動しました。

2025/03/12 18:11

《JavaScript》モーダルで縦長のYouTube Short動画を表示する方法

ボタンをクリックするとモーダルウィンドウ内に縦長のYouTube Short動画が表示されます。（音声はミュート）モーダルの背景をクリックすると動画を非表示になります。

2025/03/04 11:01

《CSS》CSSで作る見出しタイトルのデザイン ポップ編

CSSのみで作るポップでかわいらしい見出しタイトルのデザインサンプルをご紹介します。見出しっぽく英字「TITLE」も入れましたが、日本語の「見出しテキスト」単体でも使えます。

2025/02/28 13:46

《JavaScript》ランダムで2色の紙吹雪を降らせる

Javascriptで2色の四角形を回転させながらランダムに降らせています。四角形の色やサイズも調整可能です。

2025/02/19 15:38