本サイトについて
鍵ページ

お仕事で使うHTMLテクニック備忘録

本サイトについて
鍵ページ

HOME >
ホームぺージ関連

ホームぺージ関連

: アイリスアウト(もう、こりごりなのだ)を実装しよう

2025/4/19 ホームぺージ関連

とほほ・・・もうこりごりなのだ画像にマスク効果を施し、マスクの形や位置をアニメーションで動かすことで作成します。基本のHTMLとCSS まず、画像にアイリスアウトのアニメーションを適用するための基 ...

CSS HTML JavaScript

: Autopost for XでWordPressからX（旧Twitter）へ自動投稿する方法

2025/2/24 ホームぺージ関連

本記事はchatCPTに書いてもらってます下記記載の参考サイト様の方が画像もありますので分かりやすいです。こちらで躓いたら参考サイトをご覧ください導入 WordPressのブログを運営していると ...

WordPress プラグイン

: めちゃくちゃ便利「CSS Stock」で様々なデザインをコピペしちゃおう

2025/2/25 ホームぺージ関連

ええ、めちゃくちゃ便利なサイトみつけました「CSS Stock」というサイトです色々なデザインがあり導入もすごく簡単で分かりやすいです(*'ω'*) 見つけた時はすごく感動しました( *´艸｀) ...

CSS HTML 作業効率

: ほぼコピペでOK！ボタンの作成: 簡単にウェブデザインにボタンを追加する方法 [CSS Ribbon Shapes]

2025/2/25 ホームぺージ関連

[cssbuttons.io]はボタンデザインを簡単に作成できるオンラインツールを提供しています。このツールを使うと、様々なボタンデザインを簡単にカスタマイズできます。選んだデザインを選択し、HT ...

CSS HTML

: 結局わからないSEOについて

2025/2/26 ホームぺージ関連

正直私もよくわかってないのでChatGPTに記事を書いてもらうことにしました。一緒に理解を深めていきましょう。はじめに - SEOとは？ SEO（Search Engine Optimization ...

HTML

: ほぼコピペでOK！CSSリボン形状の作成: 簡単にウェブデザインにリボンを追加する方法 [CSS Ribbon Shapes]

2025/2/26 ホームぺージ関連

「CSS Generators」の「Ribbon Shapes」ページは、CSSリボンを簡単に作成できるオンラインツールを提供しています。このツールを使うと、リボンの形、色、サイズを簡単にカスタマイ ...

CSS HTML

: 画面に波紋が広がる様なアニメーション処理の実装

2025/2/26 ホームぺージ関連

画面に波紋が広がるようなアニメーション処理を実装します。説明、コードの下にデモで波紋が広がるのを確認できます。

CSS HTML JavaScript

: クラシックエディタでコード入力をするボタンを追加するプラグインを作ってみた

2025/2/27 ホームぺージ関連

制作理由ワードプレスのクラシックエディタを直接使っているといつも思うことがありましたコード追加ボタンを自由に追加出来たら便利じゃない？この記事を書くまでは、クリップボード貼り付けアプリ[Clib ...

HTML WordPress プラグイン

: 自動に削れるスクラッチ風文字が浮かび上がってくるデザイン

2025/2/27 ホームぺージ関連

スクラッチ風に擦ると文字が浮かび上がってくるデザインの改良版です。本コードでは要素が見えたら自動的にスクラッチが削れて見えるようにしております。文字が見える！

CSS HTML JavaScript

: スクラッチ風に擦ると文字が浮かび上がってくるデザイン

2025/2/27 ホームぺージ関連

スクラッチ風にマウスをホバーすると背景が削れ文字が浮かび上がってくる処理です。マウスを動かすと、背景が削れます。スマホやタブレットでは、画面をタッチして指でなぞると、背景が削れます。文字が見える ...

CSS HTML JavaScript

: タグが閉じれてないが箇所がわからない! Atomを使って簡単に探そう

2025/2/27 その他, ホームぺージ関連

HTMLのコードを打ち込んでいて、表示がバグることがあると思います。大抵閉じタグを入れ忘れているのですが、クラシックエディタでは目視ですぐにはわからないですよね。探し当てるのに何十分、最悪頭がパン ...

HTML 作業効率

: アフィンガー6でファビコンを入れる方法

2025/2/28 ホームぺージ関連

アフィンガー6でファビコンを入れる方法です。なにかアフィンガー側で設定する箇所があるのかと思いましたがなさそうなので普通に入れます。「外観」→「カスタマイズ」→「サイト基本情報」→「サイトアイコン ...

AFFINGER HTML

: CSSで作るコンテンツを縦に展開・収納できるアコーディオンメニュー

2025/2/28 ホームぺージ関連

コンテンツを縦に展開・収納できるアコーディオンメニューは、動きのあるUIの定番です。 Section 1 DX（デジタルトランスフォーメーション）の実現「デジタルトランスフォーメーション（DX）は、 ...

CSS HTML

: CSSで作るタブ切り替えメニュー

2025/2/28 ホームぺージ関連

CSSで実現させるタブ切り替えメニューになります。デザイン性も高くおしゃれなサイト作りにはもってこいなメニューと思います。 Tab 1 Tab 2 タブ1: クラウドサービスの活用「クラウドサービ ...

CSS HTML

: サーチライトエフェクトで文字を強調するインタラクティブなデザイン

2025/2/28 ホームぺージ関連

マウスやタッチ操作に応じてサーチライトが動き、指定された文字が強調されるインタラクティブなエフェクトを実装しています。マウスを動かすことでサーチライトが追従し、その部分だけが明るく照らされ、他の部分 ...

CSS HTML JavaScript

: ドラクエ風に歪んだ画像をスクロールで画像を元に戻す処理

2025/2/28 ホームぺージ関連

複数のキャンバス（canvas要素）に対してアニメーション効果を適用し、画面内に表示されているときは画像が歪んだ状態を維持し、表示されていないときは元に戻す処理を行います。一応ドラクエを意識しました ...

CSS HTML JavaScript

: スクロールでぼけた画像が元に戻る！スムーズなぼかしアニメーションの実装方法

2025/2/28 ホームぺージ関連

画像がページ読み込み時にぼかされ、スクロールしてその要素が画面に入ると自然にぼかしが解除されるアニメーションを実装してみましょう。本記事では、CSSのfilterとtransition、そしてJav ...

CSS HTML JavaScript

: クラシックエディタ用のプラグインを作ってみた

2025/2/24 ホームぺージ関連

制作理由ワードプレスのクラシックエディタを直接使っているといつも思うことがありました [Tab]キー押して空白入れて見やすくインデントしたい！この記事を書くまでは入れないか、スペースキーを押して誤 ...

HTML WordPress プラグイン

: 2025年現在において、Sassって必要か否か？

2025/2/24 ホームぺージ関連

Sassって必要ですか？ Web開発をする上で「Sass」というCSSプリプロセッサを相当の確率で目にするはずです。しかし、このツールが本当に必要なのかという質問は、意外と議論されていないように感じま ...

HTML

: 細かいけど効果抜群！ラインやスペーシングで魅せるデザインテク

2025/1/10 ホームぺージ関連

ウェブデザインを魅力的にするために、「ライン（線）」と「スペーシング（間隔）」は非常に重要な役割を果たします。この記事では、CSSだけで簡単に実現できる細かいけど効果抜群のデザインテクニックを紹介し ...

CSS HTML

1 2 3 Next »

管理人の声

PHPの記事を増やします(*'ω'*)
初級試験受けるつもりです。C言語基礎できるので余裕と思ってますがどうなんですかね(*'ω'*)
本も買いましたがまだ届いてない(4/20)

クラシックエディタ用のプラグインを作ってみた(ver1.4.1) 公開中

クラシックエディタでコード入力をするボタンを追加するプラグインを作ってみた(ver1.0) 公開中

Amazon納品代行 FBA商品ラベルにJANコード下4桁を入れるアプリ(簡易版)を作ってみた

サイト内検索

最近の投稿

【第8回】PHPで「関数」を作ってコードをスッキリさせよう！
【第7回】入力はちゃんとチェックしよう！フォームのバリデーションと複数項目の処理
【第6回】ユーザーの入力を受け取ろう！はじめての「フォーム連携」
【第5回】たくさんのデータをまとめて扱う！PHPの「配列」入門
【第4回】何度もくり返したい！PHPの「繰り返し（ループ）」入門

ランキング

本日
週間
月間

ワードプレスのクラシックエディタにて[Tab]キーを押したら空白が入る様にする方法

ワードプレスのクラシックエディタにて[Tab]キーを押したら空白が入る様にする方法
画像を横に無限ループさせる方法(JavaScript)
スクロールでぼけた画像が元に戻る！スムーズなぼかしアニメーションの実装方法

ワードプレスのクラシックエディタにて[Tab]キーを押したら空白が入る様にする方法
画像を横に無限ループさせる方法(JavaScript)
スクロールでぼけた画像が元に戻る！スムーズなぼかしアニメーションの実装方法

最近のコメント

アーカイブ

2025年4月
2025年3月
2025年2月
2025年1月
2024年12月

カテゴリー

AFFINGER
CSS
HTML
JavaScript
PHP
Windows
WordPress
アプリ
カメラ
プラグイン
ライブラリ
作業効率
写真
雑談

タグ

HTML中級者講座 HTML初心者講座 JavaScript入門 PHP初心者講座その他カメラ・写真関連ホームぺージ関連失敗と経験

おすすめ記事

1: クラシックエディタ用のプラグインを作ってみた

制作理由ワードプレスのクラシックエディタを直接使っているといつも思うことがありました [Tab]キー押して空白入れて見やすくインデントしたい！この記事を書くまでは入れないか、スペースキーを押して誤 ...

2: クラシックエディタでコード入力をするボタンを追加するプラグインを作ってみた

制作理由ワードプレスのクラシックエディタを直接使っているといつも思うことがありましたコード追加ボタンを自由に追加出来たら便利じゃない？この記事を書くまでは、クリップボード貼り付けアプリ[Clib ...

3: Amazon納品代行 FBA商品ラベルにJANコード下4桁を入れるアプリ(簡易版)を作ってみた

アプリ制作するに至った理由納品代行の仕事をしていて思ったことがあります納品代行をしていると本当に様々なお客様から様々な商品が届きますその中でも特に注意しているのが、「見た目ほぼ同じだけど違う商品 ...

アフィリエイト

お仕事で使うHTMLテクニック備忘録

© 2025 コピペしちゃいなよ