じゅんぺい

37歳からWeb制作とブログ開始|39歳でタイ・バンコクに移住|フリーランス12年目|ブログ490記事→月間最高15万PV|ブログ最高月収28万円|コンテンツ販売→累計売上1,200万円&1,500部超え|Twitterフォロワー7,200人以上

【保存版】CSSのテキストホバーアニメーションまとめ【コピペOK】

2024/3/5

【保存版】CSSのテキストホバーアニメーションまとめ【コピペOK】

CSSだけで実装できるテキストのホバーアニメーションを20種類ご紹介。コピペ可能なコードとサンプルのデモもあるので、実際にどんな動きになるか確認できます。アンダーライン(下線)アニメーションは別の記事で解説しています。

【HTML】ファイルをダウンロードさせるaタグのdownload属性の使い方

2024/3/4

【HTML】ファイルをダウンロードさせるaタグのdownload属性の使い方

会社のホームページなどで資料などのダウンロードをさせたい場合、aタグのdownload属性を使えばファイルをダウンロードさせることが可能です。HTMLだけで完結するので簡単ですが、注意点もあるのでしっかり押さえておきましょう。

【CSS】ストライプのマーカーをテキストのアンダーライン(下線)に引く方法

2024/3/4

【CSS】ストライプのマーカーをテキストのアンダーライン(下線)に引く方法

テキストにストライプ柄のマーカー風のアンダーライン(下線)を引く方法を解説。ただのマーカーではないので、ストライプの太さ、高さ、間隔、色、色の数など様々なカスタマイズが可能です。コピペで使えるコードとデモのサンプルもあります。

【CSS】YouTubeの埋め込み動画をレスポンシブ対応にする方法

2024/3/4

【CSS】YouTubeの埋め込み動画をレスポンシブ対応にする方法

YouTubeの埋め込み動画をレスポンシブ対応にする方法を2つご紹介します。1つはaspect-ratioを使う方法、もう1つはpaddin-topを使う方法です。どちらもアスペクト比を保ちながらレスポンシブ対応になります。

【CSS】Googleマップの埋め込み地図をレスポンシブ対応にする方法

2024/3/4

【CSS】Googleマップの埋め込み地図をレスポンシブ対応にする方法

Googleマップの埋め込み地図をレスポンシブ対応にする方法を2つご紹介します。1つはaspect-ratioを使う方法、もう1つはpaddin-topを使う方法です。どちらもアスペクト比を保ちながらレスポンシブ対応になります。

Googleマップの埋め込み地図を日本語から英語表記にする方法

2024/3/4

Googleマップの埋め込み地図を日本語から英語表記にする方法

Googleマップの埋め込み地図って、英語表記にできない? 通常、Googleマップを埋め込むと日本語表記になると思います。 しかし、海外向けのサイトなど、英語表記にしたい場合もあるかも知れません。 そこで今回は、Googleマップの埋め込み地図を日本語から英語表記にする方法を解説します。 Googleマップの埋め込み地図を日本語から英語表記にする方法 まずは、通常の埋め込み方法から見てみます。 Googleマップで検索したら、共有をクリックします。 そして『地図を埋め込む』のタブを選択してから、『HTM ...

Rellax.jsでパララックスを実装する方法【JavaScriptのライブラリ】

2024/3/4

Rellax.jsでパララックスを実装する方法【JavaScriptのライブラリ】

パララックスという視差効果を実装できる、Rellax.jsというJavaScriptのライブラリの使い方を解説。コードとデモを載せているので、コピペで実装できます。パララックスの記事は他にもあるので、参考にしてみて下さい。

CSSでテキスト(文字)の色を半々にする方法【4種類のサンプル付き】

2024/3/4

CSSでテキスト(文字)の色を半々にする方法【4種類のサンプル付き】

テキスト(文字)の色を半分ずつ違う色にする方法をコードとデモ付きで解説します。左右に半々、上下に半々、斜めに半々、2行で半々と4種類のデモを用意しています。同じ要領でテキストをグラデーションにすることも可能で、それは別の記事で解説しています。

CSSアニメーションで背景色をじんわり変化させる方法【無限ループに注意!】

2024/3/3

CSSアニメーションで背景色をじんわり変化させる方法【無限ループに注意!】

CSSアニメーションの@keyframesを使って背景色をゆっくりじんわりと変化させる方法を解説。自然にループさせるには注意点があるので、そこだけ注意しましょう。コピペ可能なコードとサンプルのデモを使って解説しています。

【CSS】グラデーションをアニメーションさせる方法【サンプルのデモあり】

2024/3/3

【CSS】グラデーションをアニメーションさせる方法【サンプルのデモあり】

CSSアニメーションを使い、グラデーションをアニメーションで動かす方法をコードとデモを使って解説。速くしすぎずに、隣同士の色も近いものを選ぶことで、自然なグラデーションにすることができます。

CSSだけ!メガニューの作り方【フェード・上からスライドあり】

2024/3/3

CSSだけ!メガニューの作り方【フェード・上からスライドあり】

メガメニューはクリックまたはマウスオーバーで開くドロップダウンメニューの一種で、今回はHTMLとCSSだけで作れるメガメニューをコードとデモを使って解説。フェードや上からスライドするタイプなど、シンプルですがよく使う物をご紹介しています。

マウスカーソルを追従するマウスストーカーの作り方【jQuery・JavaScript】

2024/3/2

マウスカーソルを追従するマウスストーカーの作り方【jQuery・JavaScript】

マウスカーソルの動きに合わせて追いかけてくる丸い影。これはマウスストーカーと言います。今回は、5種類のマウスストーカーの作り方をjQueryとJavaScriptの両方で解説していきます。デモもあるので、動きを試してみて下さい。

OFUSEでWordPressブログに投げ銭システムの導入とボタンを設置する方法

2024/3/2

OFUSEでWordPressブログに投げ銭システムの導入とボタンを設置する方法

WordPressブログに投げ銭システムを導入できる『OFUSE』というサービスの登録方法や、ボタンの設置方法を画像を使って丁寧に解説しています。ブログで稼ぐ方法の1つとして、試してみるのもいいかと思います。

スクロールを促すCSSアニメーションの作り方【スクロールダウン】

2024/3/1

スクロールを促すCSSアニメーションの作り方【スクロールダウン】

スクロールを促すCSSアニメーション『スクロールダウン』を7種類ご紹介。コピペ可能なコードとデモを載せています。HTMLは単純で、アニメーションはCSSだけで作れます。今回解説するのはシンプルで使用頻度が高いものとなります。

【CSS】input要素をクリック・タップした時の青い枠線を消す方法

2024/3/1

【CSS】input要素をクリック・タップした時の青い枠線を消す方法

アクセシビリティの観点から消さない方がいいかも知れませんが、input要素をクリック・タップした時の青い枠線を消す方法について解説。iPhoneのSafariやChrome、パソコンのSafari・Chrome・Firefoxでも枠線は表示されます。

【JavaScript】動画をスクロールして画面内に表示されたら自動再生を開始する方法

2024/3/1

【JavaScript】動画をスクロールして画面内に表示されたら自動再生を開始する方法

埋め込んだ動画を自動再生することはできますが、ページの途中にある場合、スクロールして表示された時点である程度動画が進んでいるか、終わっている可能性があります。今回は、動画をスクロールして画面内に表示されたら自動再生を開始する方法を解説します。

【CSS】aタグのhrefが空のときは要素を非表示にする方法

2024/3/1

【CSS】aタグのhrefが空のときは要素を非表示にする方法

aタグのhrefが空のとき、要素がそのまま残っていると困る場合があります。今回は、簡単なCSSでaタグのhrefが空のときは非表示にする方法を解説します。WordPressのカスタムフィールドなどで使う機会があるかと思います。

最初のセクションを過ぎたら上に消えて上にスクロールすると表示されるヘッダーの作り方

2024/3/1

最初のセクションを過ぎたら上に消えて上にスクロールすると表示されるヘッダーの作り方

最初のセクションを過ぎるまでは固定表示、過ぎたら上に消え、上にスクロールすると表示されるヘッダーの作り方をjQueryとJavaScriptの2パターンで解説します。コピペ可能なコードとデモで解説します。

【jQuery】下にスクロールで消えて上にスクロールで表示するヘッダーの作り方

2024/3/1

【jQuery】下にスクロールで消えて上にスクロールで表示するヘッダーの作り方

ヘッダーはスクロールしたらそのまま見えなくなるか固定でずっと表示されるかのどちらかが多いですが、今回は下にスクロールしているときは上に隠して、上にスクロールしたときだけ表示する方法を解説します。jQueryとJavaScript両方で解説。

【jQuery】スクロールして上からスルッとスライドで出てくるヘッダーの作り方

2024/3/1

【jQuery】スクロールして上からスルッとスライドで出てくるヘッダーの作り方

最初から表示しているヘッダーとは別に、スクロールしたら上からスルッとスライドして表示する固定ヘッダーの作り方を解説。jQueryの場合とJavaScriptの場合の両方で解説しています。コピペできるコードとデモを使っています。