← 2026-02-08 の一覧へ戻るホーム
**Show HN:** このクールなナビゲーションリベール（表示アニメーション）を見て、シンプルなHTML＋CSSバージョンを作ってみました。

2026/02/08 2:45

**Show HN:** このクールなナビゲーションリベール（表示アニメーション）を見て、シンプルなHTML＋CSSバージョンを作ってみました。

RSS: https://news.ycombinator.com/rss

元のHacker News記事へ ↗
要約▶

Japanese Translation:

概要：

この記事では、JavaScript を一切使わずに HTML と CSS だけでスムーズなメニュー表示効果を作る方法を説明しています。画面左上から右下へと拡大する円形の clip‑path（半径は 

calc(1.42 * 100vmax)
、乗数 1.42 は √2 で完全にカバーできるように設計）を適用すると、ボタンクリック時に視覚的に印象的なアニメーションが発生します。二次的に多角形の clip‑path を使って「光線」効果をシミュレートしています。ここではハードコードされていますが、JavaScript で動的に寸法を計算してレスポンシブデザインに適応させることも可能です。 https://iventions.com/ のコンセプトと X（旧 Twitter）などのプラットフォームで見られるアイデアに触発され、開発者はさらに実験できるようになっています。ネイティブな Web 技術だけを利用しているため、軽量かつ高性能な代替手段として、モダン UI デザインをミニマリズムと純粋な CSS ソリューションへ導く影響力があります。

本文

クリップパスで遊ぶ

これは、X（Twitter）で見た https://iventions.com/ からインスピレーションを得て、ちょっと盗んだだけのシンプルなコード実験です。

この例では、ユーザーがボタンをクリックするとメニューが表示される仕組みを、JavaScript を使わずに HTML と CSS のみで実装しています。

clip-path
には二種類の定義があります：

  1. メニューは画面左上から右下へと拡大する円として描画されます。
    ここで使用した計算式は以下の通りです。

    clip-path: circle(calc(1.42 * 100vmax) at 0 0);


    vmax
    はビューポート幅と高さのうち大きい方を指し、これに 1.42（≈ √2）を掛けることで幅と高さの比率を合わせています。

  2. 二つ目の 

    clip-path
    は「レイ」をシミュレートした多角形です。
    現在はハードコーディングされていますが、JavaScript で動的に計算すればナビゲーションのサイズに応じてレスポンシブに対応できます。

ご覧いただきありがとうございました！

同じ日のほかのニュース

一覧に戻る →

2026/02/08 6:45

小型 C コンパイラ

## Japanese Translation: Tiny C Compiler（TCC）は、非常に小さな（約100 KBのx86実行ファイル）Cコンパイラであり、1回のステップでコンパイル・アセンブル・リンクを行い、バイトコード層なしでネイティブx86マシンコードを生成します。2.4 GHz Pentium IV上では、Links BrowserテストをGCC（20.0 秒）より約10倍速く実行できます（2.27 秒）。これは別のコンパイルステージが不要であるためです。 TCCはISO C99を完全にサポートし、自身をコンパイルでき、任意のC動的ライブラリを直接リンクすることも可能です。完全なプリプロセッサ、GNUスタイルのアセンブラー構文、オプションのメモリと境界チェック機能、さらにはシェバンベースの「Cスクリプト」まで含まれ、コマンドラインから実行できます。libtccライブラリにより、他のプログラムがTCCをランタイムコード生成のバックエンドとして使用できるようになります。 性能テストはPentium IV上で行われました。新しい測定値（参照1–4）では、モダンハードウェアでも速度向上が継続しています。ドキュメント、メールリストサポート、およびSavannah/GitHubリポジトリは最新情報を提供します。 TCCはGNU Lesser General Public License（LGPL）の下で配布されており、商用利用も許可されています。

2026/02/08 8:23

**良質なコードの静かな終焉**

## Japanese Translation: 著者は中学時代から「Good Code™」―読みやすく、保守しやすく、特定の目的を持って存在するコード――を書き続けることに情熱を注いできました。機能提供に重点を置くソフトウェアエンジニアとして、彼は今日の高速開発環境で良いコードがますます希少になっていると感じています。 同僚の経験はこの状況をよく示しています。外部Linuxカーネル統合システムをCからRustへ書き換えた後、最初のバージョンは機能していたものの読みづらく保守が困難でした。原始的なCロジックを学習した上で再度書き直すと、コードはクリーンになり、自明であり、元のCよりも優れていると言えるようになりました。この経験が著者に品質コードへの熱意を再燃させました。 現在、彼はほとんどの場合初期バージョンを書かず、代わりに「Good Code™」ではなく許容できるものを生成するコーディングエージェントに頼っています。このようなツールへの継続的な依存が個々の行レベルでの品質への注意を薄め、業界実務におけるGood Codeの静かな消滅を招くと彼は恐れています。コード品質が低下すると保守コストや技術的負債が増大し、開発者の生産性、製品の信頼性、そして最終的には企業から提供されるソフトウェアへのユーザーの信頼まで損なわれます。

2026/02/08 2:39

**セクターC：512バイトで実装されたCコンパイラ**

## Japanese Translation: SectorCは、x86‑16アセンブリで完全に書かれたCコンパイラで、単一の512バイトのブートセクタに収まります。Ultra‑compactなトークン化スキーム「Barely C」を使用しており、各スペース区切り語を「メガトークン」とみなし、`atoi()`で識別子をハッシュし64Kテーブルに格納します。変数はこのハッシュを通じてセグメント0x3000に保存されます。最初のBarely C実装は468バイトで、シンボルテーブルなしの再帰下降パーサーでした。バイトスレッド化されたForth風の変種も試みられましたが、サイズをさらに削減することはできませんでした。 最終的なコンパイラはわずか **303 バイト** です。サイズは、フォールスルーロジック、テイルコール、コールフュージョン、`lodsw/stosw`の広範な使用、およびすべてのジャンプオフセットを1バイト内に収めるなどの手法で削減されました。残り約200バイトでBarely Cは完全なCサポートへと拡張されました：ネストされたif/whileブロック、包括的な演算子集合（+, −, *, &, |, ^, <<, >>, ==, !=, <, >, <=, >=）、ハッシュテーブルを介した関数定義と再帰、インライン`asm`ステートメント、および単一行(`//`)と複数行(`/* */`)コメントの両方が実装されました。 コンパイラのランタイムは `rt/` ディレクトリ内の2つのCファイルに分かれています：ライブラリルーチン（多くの場合インラインasmを含む）を持つ `lib.c` とエントリポイントとして機能する `_start.c` です。これらはプログラムソースと結合してからコンパイルされます。記事には、全ブートセクタのBase64文字列、VGAモード0x13hで動くサイン波を描画するデモ、および追加例（`hello.c` はビデオメモリ0xB8000に書き込み、`twinkle.c` はPCスピーカーで「Twinkle Twinkle Little Star」を再生）が含まれています。この作業は、512バイトという一見不可能な目標—完全機能のCコンパイラを実現すること—が、創造的なトークン化、ハッシュ化、および積極的なコードサイズ最適化によって達成できることを示しています。