サイトの右クリックとコピーを無効化するJavaScript
- 公開日：
「自分が書いた記事をパクられてしまった！」といった経験をお持ちの方もいるかもしれません。 Google検索は、コピーコンテンツだとしても、検索エンジンに先にインデックスされた方が、オリジナルのコンテンツだと見なされる傾向 […]
「CSS・Javascript」の記事一覧
画像の印象が変わる！画像の角丸・斜め・影の斜線のCSSデザイン３選
- 更新日：
- 公開日：
埋め込む画像をちょっとアレンジしたい、アクセントを加えたいといったことがあるかと思います。 その為、ブログなどに埋め込んだりする画像をちょっとお洒落な感じに見せるCSSを３つ作ってみました。 この記事の目次 角丸・画像を […]
CTAなどに最適！ボタンの周りを光の輪が回るボタンデザイン
- 更新日：
- 公開日：
gigazineさんの記事に影響を受け、「ボタンの周りを光が回転するCSS」を作成してみました。 参考：CSSの「@property」を活用しておしゃれなボタンを作る方法をエキスパートが解説 そして、作成したボタンが下記 […]
スマホでも見やすい！商品を比較するテーブルデザインのCSS
- 更新日：
- 公開日：
２つの商品を要素ごとに比較したい時があると思います。 その際に使用するテーブルを作成してみました。 ストリーミングサービスの比較 コンテンツの種類 オリジナル作品が充実 映画、ドラマ、アニメ、ドキュメンタリーなど多岐にわ […]
難易度をあわらすレベルインジケーターのCSSを作ってみた
- 更新日：
- 公開日：
ゲームや教育コンテンツなど、特定の能力やスキルレベルを示す際に使われることがあるのが、レベルインジケーター (level indicator)です。 これらは、評価バー (rating bar)や、難易度バー (diff […]
視線を集める！光が舞うアニメーションボタンのCSS
- 更新日：
- 公開日：
サイト内に色々な画像や文字があると、ボタンが埋もれてしまうことがあるかと思います。 また、サイト内に複数のボタンがあったりすると、大事なボタンが埋もれてしまうかもしれません。 その為、どうしても目立たせたいボタンがある場 […]
データを視覚化！JavaScriptでレーダーチャートを作る方法
- 公開日：
商品やサービスなどを評価する時に、便利なのがレーダーチャート（スパイダーチャート）です。 このレーダーチャートを、HTML、CSS、Javascriptを使用して作成しました。 ５段階評価のレーダーチャートを作成する方法 […]
JavaScriptを使ってデジタル風のカウントダウンタイマーを作成
- 更新日：
- 公開日：
あまり見なくなりましたが、ランディングページ（LP）や、セールスページ（SP）に、よく設置されていたのが「カウントダウンタイマー（Count Down Timer）」です。 最近は、LPやSPではなく、サンクスページに設 […]
Three.jsを使って３Ｄアニメーションの矢印を作成してみた
- 更新日：
- 公開日：
安易に手を出してしまったThree.js。 Three.jsとは？ Three.jsは、WebGLを用いて3Dグラフィックスをブラウザ上で簡単に表示・操作できるJavaScriptのライブラリです。複雑な3Dシーンやアニ […]
テンプレートファイルを挿入する（外部ファイルを読み込む）Javascript
- 更新日：
- 公開日：
HTMLとCSSをメインとしてサイトを作っている場合、グローバルメニュー（orサイドメニュー）やプロフィールなど、全ページに同じような記述をしなければなりません。 例えば、下記はグローバルメニュー（サイドメニュー）が、そ […]