ぱたぱたアニメ館

すでに「ネオ・ブルータリズム・プレート」を配布していますが、CSS での作り方（HTML/CSSコード）も掲載しておきます。 80px のデカ文字に対して、あえて padding を 12px まで絞ることで生まれる『塊感』がこだわりです。

デモでは視認性を高めるために一部に水色を使用していますが、 配布コード内では黄色（#ffff00）で統一しています。お好みの色に書き換えてご使用ください。

デモ：フラット版

HELLO WORLD

デモ：斜め版

HELLO WORLD

デモ：フラット版 / 押すと沈む

HELLO WORLD

デモ：斜め版 / 押すと沈む

HELLO WORLD

[0] HTML：body（:activeを使う場合）

HTML 

<body ontouchstart="">

iOS Safariでは、この ontouchstart="" を記述することで、 タップした瞬間にCSSの :active スタイル（色や動きの変化）が即座に反映されるようになります。 動かないプレートとして使用する場合は不要ですが、クリック・タップで沈み込むボタン演出 :active （[7]または[8]）を取り入れる場合は、この記述を推奨します。

[1] HTML：フラット版

HTML（フラット版） 

<div class="brutal-flat">HELLO WORLD</div>

[2] HTML：斜め版

HTML（斜め版） 

<div style="padding:20px 10px 60px 10px;">
  <div class="brutal-tilt">HELLO WORLD</div>
</div>

回転によるはみ出しを防止するための余白を設定しています。

[3] CSS：基本プレート

CSS（フラット版 + 斜め版） 

.brutal-flat,
.brutal-tilt {
  display: inline-block;
  padding: 12px 40px;         /* 上下を絞って文字を際立たせる */
  margin: 20px;               /* 周囲との干渉を防ぐ安全マージン */
  background-color: #ffff00;  /* お好みの色に変更してください */
  border: 8px solid #000;
  box-shadow: 16px 16px 0px #000;
  font-family: 'Arial Black', sans-serif;
  font-size: 80px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  color: #000;               /* お好みの色に変更してください */
  user-select: none;
  white-space: nowrap;
}

デモでは視認性を高めるために一部に水色を使用していますが、 配布コード内では黄色（#ffff00）で統一しています。お好みの色に書き換えてご使用ください。

[4] CSS：斜め版にする場合は追加

CSS（斜め版） 

.brutal-tilt {
  transform: rotate(-2.5deg); /* この絶妙な角度がポイント */
}

[5] CSS：ボタンにしたい場合は追加

CSS（フラット版 + 斜め版） 

.brutal-flat,
.brutal-tilt {
  cursor: pointer;                           /* 指カーソル */
  -webkit-tap-highlight-color: transparent;  /* タップ時の青い選択跡を消す */
  transition: all 0.1s;                      /* 戻る時のアニメーション */
}

これらはボタンとしての挙動をスムーズにするための準備として、通常時のスタイルに記述します。 実際に <a> タグを使いリンクを張る際は、以下の設定を追加することで、 見た目を維持したままボタンとして機能させることができます。（HTMLは差し替え、CSSは追加です。）

HTML + CSS（フラット版） 

/* [HTML] リンクとして使う場合（差し替え） */
<a href="https://example.com" class="brutal-flat">HELLO WORLD</a>

/* [CSS] aタグ用のスタイル（追加） */
a.brutal-flat {
  text-decoration: none;
  color: #000;
}
HTML + CSS（斜め版） 

/* [HTML] リンクとして使う場合（差し替え） */
<div style="padding:20px 10px 60px 10px;">
  <a href="index.html" class="brutal-tilt">HELLO WORLD</a>
</div>

/* [CSS] aタグ用のスタイル（追加） */
a.brutal-tilt {
  text-decoration: none;
  color: #000;
}

[6] CSS：スマホでの色残りを防止

CSS（フラット版 + 斜め版） 

@media (hover: hover) {
  .brutal-flat:hover,
  .brutal-tilt:hover {
    background-color: #000;  /* お好みの色に変更してください */
    color: #ffff00;          /* お好みの色に変更してください */
  }
}

[7] CSS：「押すと沈む」を追加（フラット版）

CSS（フラット版） 

.brutal-flat:active {
  transform: translate(12px, 12px);
  box-shadow: 4px 4px 0px #000;
  background-color: #000;  /* お好みの色に変更してください */
  color: #ffff00;          /* お好みの色に変更してください */
}

必ず、@media (hover: hover)の後に記述してください。

[8] CSS：「押すと沈む」を追加（斜め版）

CSS（斜め版） 

.brutal-tilt:active {
  transform: rotate(-2.5deg) translate(12px, 12px);
  box-shadow: 4px 4px 0px #000;
  background-color: #000;  /* お好みの色に変更してください */
  color: #ffff00;          /* お好みの色に変更してください */
}

必ず、@media (hover: hover)の後に記述してください。

各パーツの番号対応表

[0]HTMLbody（[7]または[8]の:active を使う場合）
[1]HTMLフラット版（基本プレート）
[2]HTML斜め版（回転によるはみ出し防止の余白を設定）
[3]CSS基本プレート（フラット版・斜め版）
[4]CSS斜め版にする場合は追加（斜め版）
[5]CSSボタンにしたい場合は追加（フラット版・斜め版）+ リンク化のコード
[6]CSSスマホでの色残りを防止（フラット版・斜め版）
[7]CSS「押すと沈む」を追加（フラット版）
[8]CSS「押すと沈む」を追加（斜め版）
①動かないプレート（フラット版）[1] ＋ [3]
②動かないプレート（斜め版）[2] ＋ [3] ＋ [4]
③押すと沈むボタン（フラット版）[0] ＋ [1] ＋ [3] ＋ [5] ＋ [6] ＋ [7]
④押すと沈むボタン（斜め版）[0] ＋ [2] ＋ [3] ＋ [4] ＋ [5] ＋ [6] ＋ [8]

④ 斜めボタン版 + リンク付き

HTML + CSS 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .brutal-flat,
    .brutal-tilt {
      display: inline-block;
      padding: 12px 40px;         /* 上下を絞って文字を際立たせる */
      margin: 20px;               /* 周囲との干渉を防ぐ安全マージン */
      background-color: #ffff00;  /* お好みの色に変更してください */
      border: 8px solid #000;
      box-shadow: 16px 16px 0px #000;
      font-family: 'Arial Black', sans-serif;
      font-size: 80px;
      font-weight: 900;
      line-height: 1.1;
      text-transform: uppercase;
      color: #000;               /* お好みの色に変更してください */
      user-select: none;
      white-space: nowrap;
    }
    .brutal-tilt {
      transform: rotate(-2.5deg); /* この絶妙な角度がポイント */
    }
    .brutal-flat,
    .brutal-tilt {
      cursor: pointer;                           /* 指カーソル */
      -webkit-tap-highlight-color: transparent;  /* タップ時の青い選択跡を消す */
      transition: all 0.1s;                      /* 戻る時のアニメーション */
    }
    a.brutal-tilt {
      text-decoration: none; /* 下線を消す */
      color: #000;           /* 文字色を固定する */
    }
    @media (hover: hover) {
      .brutal-flat:hover,
      .brutal-tilt:hover {
        background-color: #000;  /* お好みの色に変更してください */
        color: #ffff00;          /* お好みの色に変更してください */
      }
    }
    .brutal-tilt:active {
      transform: rotate(-2.5deg) translate(12px, 12px);
      box-shadow: 4px 4px 0px #000;
      background-color: #000;  /* お好みの色に変更してください */
      color: #ffff00;          /* お好みの色に変更してください */
    }
  </style>
</head>
<body ontouchstart="">
<div style="padding:20px 10px 60px 10px;">
  <a href="index.html" class="brutal-tilt">HELLO WORLD</a>
</div>
</body>
</html>

斜めボタン完成版のHTML/CSSコードです。コピーペーストするだけで使えます。不要な部分（角度など）は削ってください。 このコードは、インパクトを重視した巨大なサイズに設定されています。もしスマートフォンの画面幅に収めたい場合は、font-size や padding などを調整してください。

★ このページのコードは、Gemini の協力のもと、主に私自身の学習・備忘録（メモ）用として作成しています。 複雑な機能や処理を含む部分については、公開前に私自身が入念な動作確認をしていますが、 ご利用の際は、必ずご自身で動作確認と必要に応じた修正をお願いいたします。
上に戻る