未経験からフリーランスＷＥＢデザイナーになるまで

ホームページ制作NOTE

アニメーション

: 【CSSのみ】フェードインアニメーションのバリエーションまとめ

2026/3/5

Webサイトでよく見る「ふわっと表示される演出」。これはフェードインアニメーションと呼ばれ、Webデザインの印象を大きく向上させる効果があります。この記事では、よく使われるフェードインアニメーション ...

: 【コピペOK】スクロール時にフェードインするアニメーションの実装方法（CSS＋JS）

2026/3/5

Webサイトでよく見る「スクロールするとふわっと表示されるアニメーション」。ポートフォリオやコーポレートサイトでよく使われる定番表現です。今回はコピペOK で使えるスクロールフェードインの実装方 ...

: Javascript,CSSでカーテンが開くようなアニメーション【WordPress】

2026/3/5

背景に画像を設定してカーテンのようなアニメーションを作成する場合（左右）スクロールで要素が半分見えると発動する仕組みです。背景に画像を設定するタイプ。 See the Pen Untitled by ...

: slick sliderをWORDPRESSで使う【コピペOK】

2026/3/5

slickのスライダーをWORDPRESSで使う最も簡単なCDNを使って作成するスライダー slickのcssのCDN header.phpにコピーします。slick-theme.min.cssの方 ...

: スクロールしたら横に動く画面

2026/3/5

スクロールで横に画面が推移するアニメーションはGSAPのプラグインが一番簡単です！横スクロールスクロールすると画面が横に推移していくアニメーションです。縦スクロールから横スクロール、横スクロールが ...

: 【コピペＯＫ】Ｑ＆Ａアコーディオンの作成方法

2026/3/5

よくある質問を作成する際、コピーで使えるものが欲しかったので作ってみました！アコーディオンメニューの作り方（ｃｓｓのみ）サンプル Q タイトル１ A 内容１ Q タイトル２ A 内容２ Q タイト ...

: 【一文字ずつ】テキストアニメーション（javascript/css）コピペＯＫ

2026/3/5

使用頻度が多いテキストアニメーションをコピペで使えるようにまとめました！段落事に順番に文字が左から右へ流れる See the Pen Untitled by Satomi (@satomi79000 ...

よく読まれている記事

Profile

初めまして。Okamoto Designの岡本です。
WordPressでホームページを作る際によく使うものをコピペやリンクなどで使用出来るようにまとめました。本当によいものだけをおすすめしています。
ココナラやLancers、ホームページからお仕事の依頼も受け付けています。未経験からフリーランスになり、1年半でランサーズ認定ランサー、ココナラプラチナランクになりました。現在はココナラでのリピーター様やご紹介経由でサイト制作をしております。

カテゴリー