ホームぺージ関連 – コピペしちゃいなよ

タグ：ホームぺージ関連

Webページで「1日のスケジュール」を分かりやすく・視覚的に表示したい時に便利なのが、矢印や丸付きのタイムライン風デザインです。今回は、HTMLとCSSを使って実装できる矢印付きスケジュール表示の実例を紹介します。 […]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「HTML Editor Syntax Highlighter」で良いことに気づいたので公開停止します制作理由ワードプレスのクラシックエディタを直接使っているといつも思うことがありました [Tab]キー押して空白入れ […]

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