じゅんぺい

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

【CSS】ラジオボタンのデザインをカスタマイズする方法【簡単に色だけ変える方法あり】

2024/3/20

【CSS】ラジオボタンのデザインをカスタマイズする方法【簡単に色だけ変える方法あり】

ラジオボタンのデザインをデフォルトの状態から自由にカスタマイズする方法と、色だけ変える簡単な方法をご紹介します。Contact Form7の場合は別の記事で解説しています。アクセシビリティも意識してできるようになっておきましょう。

【CSS】テーブルで左の列だけ幅を固定して他の幅は均等にする方法

2024/3/11

【CSS】テーブルで左の列だけ幅を固定して他の幅は均等にする方法

tableタグを使ってテーブルを作るときに列の幅がバラバラで困ったことはありませんか?今回は左の列だけ幅を指定して、他の列の幅は均等にする方法を解説します。もちろん全ての列の幅を均等にすることも可能です。コピペ可能なコードとデモで解説します。

【CSS】Flexboxで要素の順番を変える方法【上下逆・左右逆・順番指定】

2024/3/11

【CSS】Flexboxで要素の順番を変える方法【上下逆・左右逆・順番指定】

パソコンとスマホで要素の順番を変えたいとき、HTMLでパソコン用とスマホ用を書く以外に、Flexboxを使って変えることができます。縦並び・横並びで順番を逆にしたり、指定した順番に並べ替えたりすることが可能です。コピペ可能なコードとデモで解説。

ニュースセクションレイアウトのコーディング方法【スマホ・レスポンシブ対応】

2024/3/11

ニュースセクションレイアウトのコーディング方法【スマホ・レスポンシブ対応】

コーディングでよくあるレイアウトが、お知らせ欄などのニュースセクション。日付・カテゴリーラベル・記事タイトルが横並びになっているデザインが多く、今回はこのコーディング方法を解説。少しパターンを変えたり、スマホのレスポンシブにも対応しています。

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

2024/3/5

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

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

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

2024/3/10

【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】動画をスクロールして画面内に表示されたら自動再生を開始する方法

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