title: あまねけ！おもしろCSS 7選
author: Amane Katagiri
summary: Curious Style Sheet
date: 2026-06-22T17:21:00+09:00
category: tech
license: CC BY 4.0
rating: sfw
ai_summary: 個人サイト「あまねけ！」で実践されている、JavaScriptを極力使わずにCSSのみで利便性や視覚効果を高める7つのテクニックを紹介する記事です。テキスト選択の最適化や印刷用設定といった実用的なものから、チェックボックスを用いた状態管理、三角関数による疑似乱数の生成まで、CSSの宣言的記述が持つ可能性を解説。環境を選ばずシンプルかつ安全にサイトを構築するための知恵が詰まっています。
ai_keywords: CSS, 個人サイト, JavaScript排除, アクセシビリティ, Webデザイン, ダークモード, ノーコード, メディアクエリ, 疑似乱数, ユーザー体験

「[個人サイトWebオンリー めぐる市](https://picrea.jp/event/a306c73ff0f8e27bfdee1cd291159a49a8f21c31c4c832236d04b1cca8e48cfb)」に合わせて書かれた[【個人サイト】カスタマイズに便利なCSS 8選【2026】](https://ry0ryuka.xii.jp/design/8-useful-css-tips-2026)という記事[^ry0ryuka]が面白かったので、私も[あまねけ！](/)で使われている面白い（たぶん）CSSを7つ選んで紹介しようと思います。

[^ry0ryuka]: 先日[個人サイトwebオンリーめぐる市(2026)サークル参加・全スペース制覇ログ・お気に入りサイト紹介](https://ry0ryuka.xii.jp/design/wrapup-megruichi2026)であまねけ！の[「個人サイトWebオンリー めぐる市」参加によせて](/post/meguruichi/)を紹介いただいたヒフミさんのサイト「[涼 流 花](https://ry0ryuka.xii.jp/)」の記事です。

あまねけ！ではサイト内のJavaScriptをできるだけ排除しており、単純な記事の閲覧や基本的な機能は全てCSSのみで実現しています。ダークモードの切替や文字サイズの変更はもちろん、必要ならテキストブラウザで開いたり、プリンターで印刷して紙で読むこともできます。

そのため、この記事には広い環境をサポートするためのスタイルや、JavaScriptの方がイージー（not シンプル）に実現できる動作なども含んでいます。今すぐ便利にカッコよく！というわけでもない細かい調整も紹介するので、興味が出ましたら必要な範囲でお使いください。

[TOC]

## ① シェア用テキストを選択しやすくする

Click me!: <span class="selectable">amanejp2rawomh6vcxugcmz3lsdccfkgwcz755mawisr2yazu3bea2qd.onion</span>

```css
.sample-01-share-text {
  user-select: all;
}
```

[`user-select` 属性](https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/user-select)を `all` にすると、クリックやタップで子の内容が全て選択されるようになります。その後の操作（コピーやシェア）はブラウザあるいはOSの標準機能に任されるので、JavaScriptでコピーを代行するよりユーザーに親切です。

冒頭のサンプルでは、インタラクションがあることを提示するために `border-bottom: 1px dotted` で下線も表示しています。

## ② スマホでのみ電話番号をリンクとして表示する

Click me!: [+81 80-1665-4365](tel:+818016654365)

```css
@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
  }
}
```

電話番号を押下可能なリンクとして設定する場合、スマホからクリックすると電話アプリが立ち上がって電話番号が入力された状態になると期待できます。しかし、PCやタブレットといった電話アプリを前提としていない環境では、クリックできないテキストとして提示したいものです。

このとき、リンクの装飾として使われる（しばしば青い）文字色と下線のスタイルを外し、さらにクリック不可とすればCSSのみでリンクをふつうのテキストとして表示できます。それぞれ [`color` 属性](https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/color)・ [`text-decoration` 属性](https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/text-decoration) ・ [`pointer-events` 属性](https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/pointer-events)で設定します。

これらをメディアクエリでPC・タブレットを対象に、またセレクタを `a[href^="tel:"]` とすることで、手動でクラスを指定せずとも「電話番号へのリンク」に対して全て適用できます。このスタイルを適用する場合、リンクテキストは「電話をかける」のようなタップできる前提のものではなく、リンクとして設定する具体的な番号が分かるように表示すべきです。

冒頭のサンプルでは、リンクとして表示しない場合は代わりにコピーしやすいシェア用テキストとして提示しています。

## ③ ページ印刷時にURLも記載する

```css
@media print {
  a[href^="http"]:after {
    content: " " attr(href) " ";
    text-decoration: none;
    font-size: 80%;
  }
}
```

Webページを紙に印刷して利用する場合、リンクに関する情報はリンクテキストを残して失われます。PDFのみであればリンクを埋め込んで出力することもできますが、広い環境で利用できるようにURLも表示しておくと安心です。 [`::after` 疑似要素](https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Selectors/::after) などを使えばリンク先URLをテキストとして付加できるので、これをメディアクエリと組み合わせて印刷時のみ有効にするとよいでしょう。

例示したスタイルでは `http://～` あるいは `https://～` から始まる外部リンクのみを対象にしていますが、必要に応じて変更してかまいません。あまねけ！では、 `a[href^="/"]` な内部リンクには先頭にドメインを付与するスタイルも入っています。

表示が気になった方は、このページを印刷するかPDFとして保存して出力を確認してみてください。

## ④ 強調したいテキストに圏点を表示する

```css
.sample-04-kenten-text {
  text-emphasis: filled dot;
}
```

[`text-emphasis` 属性](https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/text-emphasis)を `dot` にすると、対象のテキストに圏点（テキストを強調するために文字の上に置く印）を表示できます。点の形（ `dot` ・ `triangle` ・ `sesame` など）や、それに対して図形の内部を塗りつぶすかどうか（ `filled` or `open` ）を決められるので、ある程度はサイトの雰囲気に合わせてカスタマイズできます。

表示が気になった方は、主に[さよなら、キョーカイの子](/post/goodbye-sga/)などの小説作品などで多用されているので眺めてみてください。

## ⑤ ドット絵をパキッと拡大して表示する

![!あまねけ！のサイトバナー](/appendices/media-kit/amanejp_88x31.gif){width=88 height=31}

![~あまねけ！のサイトバナー](/appendices/media-kit/amanejp_88x31.gif){width=88 height=31}

```css
.sample-05-pixel-art {
  image-rendering: pixelated;
}
```

[`image-rendering` 属性](https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/image-rendering)を `pixelated` にすると、画像のサイズ設定やブラウザのズーム機能による拡大・縮小に対して、ピクセルっぽさを残したアルゴリズムで表示されるようになります。

小さなサイズのドット絵など、ブラウザの幅に対してピクセルを十数倍に拡大して表示する場合、普通はなめらかに拡大するアルゴリズムによってピクセルがにじんでボケボケした見た目になります。これを回避するためには拡大済みの画像を事前に作るのが一般的ですが、このスタイルを当てれば画像が小さいままパキッと拡大できて便利です。[マイクロなGIFアニメバナーを目指して](/post/banner8831/)でも触れています。

冒頭のサンプルに表示した88ピクセルx31ピクセルの小さなバナーでは、 `image-rendering: pixelated` を当てていない下のバナーだけがぼやけた表示になることを確認できます。

## ⑥ CSSだけでクリックに応じてスタイルを切り替える

[動作サンプル](https://gist.githack.com/amane-katagiri/2f8aa285f72e8dff248ffe9d3d17bfde/raw/6a0e4d7f246830eca7a5ba3b2c099695922b500e/)

あまねけ！には、ページ左上の太陽 or 新月のマークでダークモードとライトモードを切り替える機能や、ページ右上の虫眼鏡のマークで文字の大きさを切り替える機能があります。このような動作は、JavaScriptを使えばクリックイベントでクラスを切り替えたり、カラーテーマについては [`color-scheme`](https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/color-scheme) 属性を書き換えれば実現できるものです。

もしこの機能をCSSのみで実現したい場合は、非表示のチェックボックスにラベルを紐付けて、チェック状態に応じてスタイルを切り替えるのがよいでしょう。

```css
/* 「状態」を保持するチェックボックスを隠しつつフォーカス可能にする */
input[type="checkbox"]#toggle {
  position: absolute;
  pointer-events: none;
  clip-path: rect(0 0 0 0);
  opacity: 0;
  appearance: none;
}

/* ユーザーに提示する切り替えUI */
label#toggle-button::before {
  content: "ここをクリックして背景色を変更";
}
input[type="checkbox"]#toggle:focus ~ label#toggle-button {
  outline: 2px solid royalblue;
}

/* 切り替えるスタイルの定義 */
#main {
  background-color: red;
}
input[type="checkbox"]#toggle:checked ~ #main {
  color: #eee;
  background-color: blue;
}
```

少し複雑ですが、実際に異なる2つのスタイルを宣言しているのは `#main` と `input[type="checkbox"]#toggle:checked ~ #main` のみです。他はユーザーに見せるためのクリック可能なラベルのスタイルと、チェックボックスを一切表示させないままフォーカス可能にするための工夫になっています。

もしチェックボックスを `display: none` などで隠してしまうと、マウス以外のインターフェース（Tabキーなど）でラベルに到達するのが難しくなるので、アクセシビリティの観点からこれらのスタイルをおすすめします。フォーカスしたことが分かりやすいよう、 [`outline` 属性](https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/outline)で可視化するのもポイントです。

この手法は[color-schemeとprefers-color-schemeのつかいかた](/post/prefers-dark-light/)で触れたものとほぼ同じです。兄方向・親方向に辿るセレクタが書けなかった時代に作ったので、チェックボックスをbody直下に置いて、その弟要素としてsectionを置いて全てのコンテンツを詰める、というちょっと特殊なレイアウトが必要なのが難点ですね。

最近は [`:has()` 疑似クラス](https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Selectors/:has) が広く利用できるようになりつつあるので、最近のブラウザが対象なら以下のように素直なセレクタにできるでしょう。

```css
body:has(input[type="checkbox"]#toggle:checked) #main {
  color: #eee;
  background-color: blue;
}
label#toggle-button:has(input[type="checkbox"]#toggle:focus) {
  outline: 2px solid royalblue;
}
```

これで「チェックボックスの直後のセクション」から「子にチェックボックスがあるbody」と、セレクタの基準が実際にスタイルを当てられる側に移ります。さらに、チェックボックスを上位に置く必要もなくなるので、再利用可能なコンポーネントに詰めて影響範囲を閉じることさえ可能です。

## ⑦ CSSだけでランダムっぽいパラメータを使う

[動作サンプル](https://gist.githack.com/amane-katagiri/6ba8407f657d451e38b756c5f1eafb34/raw/52274de8ae2ac6de84df9221a220c52bc58daa21/)

あまねけ！では、季節に合わせたミニ・エフェクト（[参考](https://x.com/amane_katagiri/status/2061362820781048170)）のように、ランダムな位置や動きを実現したいシーンがあります。

CSSで *ランダムっぽさ* を完結させたい場合は、事前にランダムな値を生成しておくか、ランダムっぽい計算を通せばよいでしょう。JavaScriptなら `Math.random()` で擬似乱数を得ることができますが、素直にやると各CSS属性のために何度も乱数を生成して大量に引き渡す実装になったり、スタイルの責務が曖昧になったりして筋が悪そうです。

もし完全にCSSのみでランダムっぽさを得たい場合は、CSS変数をシードとして非線形関数に通すのがおすすめです。CSSでは `sin()` や `cos()` といった三角関数が利用でき、これらはあらゆる数値を-1から1に変換する関数とみなせるので、以下のような使い方ができます。GLSLの古典的なハッシュ関数のアルゴリズムと同じですね。

```css
.sample-07-random-position {
  --left: (mod(sin(var(--seed) * 12.9898 * var(--index)) * 43758.5453, 1) * 95svw);
  --top: (mod(sin(var(--seed) * 78.233 * var(--index)) * 43758.5453, 1) * 95svh);
  position: fixed;
  left: calc(var(--left));
  top: calc(var(--top));
}
```

周期を超える大きめの数値を三角関数に通すと乱数っぽく見える性質を利用したもので、実際にはCSS変数で値が確定する決定的な計算しかしていません。サンプルページでスライダーを動かしてみると分かるとおり、実際には位置が偏ったりいかにも正弦波のプロットっぽい配置に近づくこともあります。それでも、簡単な処理で大量に取り出せるランダムプールとしては十分です。

## おわりに

CSSだけで実現できることは、他にもたくさんあります！　ちょっとした位置合わせや平面的な大きさの設定だけがCSSの能力ではありません。paddingとmarginの違いを峻別できるかなんて、広いCSSの世界の中では本当に小さな豆知識だということです。

そよ風に流される複雑なアニメーション、簡易的なダイアログ表示、ダークモードに合わせた画像反転、OSが提示した文字サイズへの追従、などなど……シンプルかつ安全な宣言的記述で「もう一歩」を叶えられるのがCSSの魅力です。みなさんもぜひ、日常生活のちょっとしたところからCSSを取り入れてみてくださいね。