ぱたぱたアニメ館

すでに画像素材として「ネオン・ブロック・プレート」を配布していますが、 カスタマイズ可能な CSS 版のコード も掲載しました。

配布中の画像プレートは「濃い背景」での使用に適していますが、今回作成した CSS プレートは、「明るい背景」により馴染むデザインになっています。 CSS 版は色やサイズを自由に変更できますので、濃い背景で利用される場合は、お好みの色調に調整してご利用ください。

デモ：ナイト・グリッド（飾り用）

NIGHT-GRID NIGHT-GRID

デモ：ナイト・グリッド（リンク用）

NIGHT-GRID NIGHT-GRID

コード：ナイト・グリッド（飾り用）

HTML 

<div class="night-grid">
  文字を入力してください
</div>
CSS 

.night-grid {
  margin: 20px auto;
  width: fit-content;
  max-width: 90%;
  padding: 15px 40px;
  background: #1a1a1a;
  border: 2px solid #00f2ff;
  border-radius: 8px;
  box-shadow: 0 0 10px #00f2ff, inset 0 0 10px #00f2ff;
  color: #ffffff;
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  display: block;
  line-height: 1.2;
}
/* レスポンス調整（一番最後に置く） */
@media (max-width: 600px) {
  .night-grid {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #00f2ff, inset 0 0 8px #00f2ff;
  }
}

コード：ナイト・グリッド（リンク用）

HTML 

<a href="リンク先のURL" class="night-grid">
  文字を入力してください
</a>
CSS 

.night-grid {
  margin: 20px auto;
  width: fit-content;
  max-width: 90%;
  padding: 15px 40px;
  background: #1a1a1a;
  border: 2px solid #00f2ff;
  border-radius: 8px;
  box-shadow: 0 0 10px #00f2ff, inset 0 0 10px #00f2ff;
  color: #ffffff !important;
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  display: block;
  line-height: 1.2;
}
.night-grid {
  transition: transform 0.1s, box-shadow 0.2s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.night-grid:hover {
  box-shadow: 0 0 20px #00f2ff, inset 0 0 20px #00f2ff;
  text-shadow: 0 0 10px #00f2ff;
}
.night-grid:active {
  transform: scale(0.98);
}
/* レスポンス調整（一番最後に置く） */
@media (max-width: 600px) {
  .night-grid {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #00f2ff, inset 0 0 8px #00f2ff;
  }
}

色違いの各コード（飾り用）

デモ：フレア・ルビー

FLARE-RUBY FLARE-RUBY
HTML （クリックで表示）
HTML 

<div class="flare-ruby">
  文字を入力してください
</div>
CSS （クリックで表示）
CSS 

.flare-ruby {
  margin: 20px auto;
  width: fit-content;
  max-width: 90%;
  padding: 15px 40px;
  background: #1a1a1a;
  border: 2px solid #ff0000;
  border-radius: 8px;
  box-shadow: 0 0 10px #b30000, inset 0 0 10px #b30000;
  color: #ffffff;
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  display: block;
  line-height: 1.2;
}
/* レスポンス調整（コードの最後に配置） */
@media (max-width: 600px) {
  .flare-ruby {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #b30000, inset 0 0 8px #b30000;
  }
}

デモ：サイバー・マゼンタ

CYBER-MAGENTA CYBER-MAGENTA
HTML （クリックで表示）
HTML 

<div class="cyber-magenta">
  文字を入力してください
</div>
CSS （クリックで表示）
CSS 

.cyber-magenta {
  margin: 20px auto;
  width: fit-content;
  max-width: 90%;
  padding: 15px 40px;
  background: #ff00ff;
  border: 2px solid #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 10px #ff00ff, inset 0 0 10px #ff00ff;
  color: #ffffff;
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  display: block;
  line-height: 1.2;
}
/* レスポンス調整（コードの最後に配置） */
@media (max-width: 600px) {
  .cyber-magenta {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #ff00ff, inset 0 0 8px #ff00ff;
  }
}

デモ：ライム・パンク

LIME-PUNK LIME-PUNK
HTML （クリックで表示）
HTML 

<div class="lime-punk">
  文字を入力してください
</div>
CSS （クリックで表示）
CSS 

.lime-punk {
  margin: 20px auto;
  width: fit-content;
  max-width: 90%;
  padding: 15px 40px;
  background: #adff2f;
  border: 2px solid #76d200;
  border-radius: 8px;
  box-shadow: 0 0 10px #5ee300, inset 0 0 10px #5ee300;
  color: #1a1a1a;
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  display: block;
  line-height: 1.2;
}
/* レスポンス調整（コードの最後に配置） */
@media (max-width: 600px) {
  .lime-punk {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #5ee300, inset 0 0 8px #5ee300;
  }
}

デモ：アイス・バイオレット

ICE-VIOLET ICE-VIOLET
HTML （クリックで表示）
HTML 

<div class="ice-violet">
  文字を入力してください
</div>
CSS （クリックで表示）
CSS 

.ice-violet {
  margin: 20px auto;
  width: fit-content;
  max-width: 90%;
  padding: 15px 40px;
  background: #bf94ff;
  border: 2px solid #9933ff;
  border-radius: 8px;
  box-shadow: 0 0 10px #7a00ff, inset 0 0 10px #7a00ff;
  color: #ffffff;
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  display: block;
  line-height: 1.2;
}
/* レスポンス調整（コードの最後に配置） */
@media (max-width: 600px) {
  .ice-violet {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #7a00ff, inset 0 0 8px #7a00ff;
  }
}

デモ：クリムゾン・オレンジ

CRIMSON-ORANGE CRIMSON-ORANE
HTML （クリックで表示）
HTML 

<div class="crimson-orange">
  文字を入力してください
</div>
CSS （クリックで表示）
CSS 

.crimson-orange {
  margin: 20px auto;
  width: fit-content;
  max-width: 90%;
  padding: 15px 40px;
  background: #ff4500;
  border: 2px solid #ffaa33;
  border-radius: 8px;
  box-shadow: 0 0 10px #d32f00, inset 0 0 10px #d32f00;
  color: #ffffff;
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  display: block;
  line-height: 1.2;
}
/* レスポンス調整（コードの最後に配置） */
@media (max-width: 600px) {
  .crimson-orange {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #d32f00, inset 0 0 8px #d32f00;
  }
}

デモ：プラズマ・シアン

PLASMA-CYAN PLASMA-CYAN
HTML （クリックで表示）
HTML 

<div class="plasma-cyan">
  文字を入力してください
</div>
CSS （クリックで表示）
CSS 

.plasma-cyan {
  margin: 20px auto;
  width: fit-content;
  max-width: 90%;
  padding: 15px 40px;
  background: #00f2ff;
  border: 2px solid #a0f9ff;
  border-radius: 8px;
  box-shadow: 0 0 10px #00bfff, inset 0 0 10px #00bfff;
  color: #ffffff;
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  display: block;
  line-height: 1.2;
}
/* レスポンス調整（コードの最後に配置） */
@media (max-width: 600px) {
  .plasma-cyan {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #00bfff, inset 0 0 8px #00bfff;
  }
}

デモ：ルナ・シアン

LUNA-CYAN LUNA-CYAN
HTML （クリックで表示）
HTML 

<div class="luna-cyan">
  文字を入力してください
</div>
CSS （クリックで表示）
CSS 

.luna-cyan {
  margin: 20px auto;
  width: fit-content;
  max-width: 90%;
  padding: 15px 40px;
  background: #ffffff;
  border: 2px solid #70e8ef;
  border-radius: 8px;
  box-shadow: 0 0 10px #00f2ff, inset 0 0 10px #00f2ff;
  color: #00f2ff;
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  display: block;
  line-height: 1.2;
}
/* レスポンス調整（コードの最後に配置） */
@media (max-width: 600px) {
  .luna-cyan {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #00f2ff, inset 0 0 8px #00f2ff;
  }
}

デモ：ソーラー・ゴールド

SOLAR-GOLD SOLAR-GOLD
HTML （クリックで表示）
HTML 

<div class="solar-gold">
  文字を入力してください
</div>
CSS （クリックで表示）
CSS 

.solar-gold {
  margin: 20px auto;
  width: fit-content;
  max-width: 90%;
  padding: 15px 40px;
  background: #ffffff;
  border: 2px solid #ffcc00;
  border-radius: 8px;
  box-shadow: 0 0 10px #ffbf00, inset 0 0 10px #ffbf00;
  color: #ffbf00;
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  display: block;
  line-height: 1.2;
}
/* レスポンス調整（コードの最後に配置） */
@media (max-width: 600px) {
  .solar-gold {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #ffbf00, inset 0 0 8px #ffbf00;
  }
}

デモ：キャンディ・パルス

CANDY-PULSE CANDY-PULSE
HTML （クリックで表示）
HTML 

<div class="candy-pulse">
  文字を入力してください
</div>
CSS （クリックで表示）
CSS 

.candy-pulse {
  margin: 20px auto;
  width: fit-content;
  max-width: 90%;
  padding: 15px 40px;
  background: #ffffff;
  border: 2px solid #ff4db8;
  border-radius: 8px;
  box-shadow: 0 0 10px #e600a2, inset 0 0 10px #e600a2;
  color: #e600a2;
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  display: block;
  line-height: 1.2;
}
/* レスポンス調整（コードの最後に配置） */
@media (max-width: 600px) {
  .candy-pulse {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #e600a2, inset 0 0 8px #e600a2;
  }
}

カスタマイズ

＜文字色がおかしい・変わらない＞

以下のように color の後ろに !important を追加して優先度を上げてください。

例： 

.night-grid {
  color: #ffffff !important;
}
CSS

お使いのテンプレートや外部CSSで a:link（未訪問）や a:visited（訪問済み）、 あるいは IDセレクタ（#から始まる指定）によって、リンクの色が強力に固定されている場合にこの現象が起こります。

＜マウスを乗せたら背景色が変わる＞

ページ全体の a:hover 設定が干渉しているのが原因です。 その場合は、クラス専用の打ち消しコードを追加して、背景色を固定してください。

例： 

.night-grid:hover {
  background: #1a1a1a;
}
CSS

ご使用中のコードで指定している background と同じ色を指定すると、 背景を固定したままエフェクト（光）だけを綺麗に見せることができます。お好みの色にカスタマイズしてもOKです。

＜スマホでも綺麗に見せる＞

10 種類すべてのコードの末尾には、以下のようなレスポンシブ用コードを含めています。 スマホでの表示サイズを微調整したい場合に使用してください。不要な場合は削除しても問題ありません。


/* レスポンス調整（コードの最後に配置） */
@media (max-width: 600px) {
  .night-grid {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #00f2ff, inset 0 0 8px #00f2ff;
  }
}
CSS

＜各クラス名とカラーコード＞

名前クラス名文字色枠線背景色影
ナイト・グリッド.night-grid#ffffff#00f2ff#1a1a1a#00f2ff
フレア・ルビー.flare-ruby#ffffff#ff0000#1a1a1a#b30000
サイバー・マゼンタ.cyber-magenta#ffffff#ffffff#ff00ff#ff00ff
ライム・パンク.lime-punk#1a1a1a#76d200#adff2f#5ee300
アイス・バイオレット.ice-violet#ffffff#9933ff#bf94ff#7a00ff
クリムゾン・オレンジ.crimson-orange#ffffff#ffaa33#ff4500#d32f00
プラズマ・シアン.plasma-cyan#ffffff#a0f9ff#00f2ff#00bfff
ルナ・シアン.luna-cyan#00f2ff#70e8ef#ffffff#00f2ff
ソーラー・ゴールド.solar-gold#ffbf00#ffcc00#ffffff#ffbf00
キャンディ・パルス.candy-pulse#e600a2#ff4db8#ffffff#e600a2
★ このページのコードは、Gemini の協力のもと、主に私自身の学習・備忘録（メモ）用として作成しています。 複雑な機能や処理を含む部分については、公開前に私自身が入念な動作確認をしていますが、 ご利用の際は、必ずご自身で動作確認と必要に応じた修正をお願いいたします。
上に戻る