10.css

このWebページの詳細

このサイトのフォントはWindowsではSegoe UI、その他のOSではNoto Sans JPで表示されます

このような形で表示され、Windows10に似ています。

サンプルコードは次のとおりです

<div class="win10-window">
    <div class="win10-title-bar">
      <span class="win10-title">このWebページの詳細</span>
      <div class="win10-controls">
        <button class="win10-btn" aria-label="Minimize">🗕</button>
        <button class="win10-btn" aria-label="Maximize">🗖</button>
        <button class="win10-btn close" aria-label="Close">✕</button>
      </div>
      </div>
      <div class="win10-window-body">
      <p>このサイトのフォントはWindowsではSegoe UI、その他のOSではNoto Sans JPで表示されます</p>
      <div style="text-align: right; margin-top: 20px;">
        <button class="win10-button">OK</button>
        <button class="win10-button">キャンセル</button>
      </div>
  </div>
</div>

使用するにはをしたを使います

<link rel="stylesheet" href="https://sakuzyokun.github.io/10.css/10.css">