Zenn
😸

デスクトップにリンクハブ用のHTML設置すると楽だよ

に公開
気付き
idea

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Link Hub</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
    <style>
        /* ページ全体の基本スタイル */
        body {
            font-family: 'Inter', sans-serif; /* モダンなフォント */
            background-color: #f8f9fa; /* 背景色を薄いグレーに */
            color: #343a40; /* 基本の文字色 */
            display: flex; /* Flexboxを使って中央揃え */
            justify-content: center; /* 水平方向中央 */
            align-items: center; /* 垂直方向中央 */
            min-height: 100vh; /* 画面の高さ全体を使う */
            margin: 0; /* bodyのデフォルトマージンを削除 */
            line-height: 1.8; /* 行間を広げて読みやすく */
        }

        /* コンテンツを囲むコンテナ */
        .container {
            max-width: 600px; /* コンテンツの最大幅 */
            width: 90%; /* 幅を画面サイズの90%に */
            background-color: #ffffff; /* コンテナの背景は白 */
            padding: 3em 4em; /* 内側の余白を多めに (上下, 左右) */
            border-radius: 15px; /* 角を丸くする */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* 影をつけて立体感を出す */
            text-align: center; /* コンテナ内のテキストを中央揃え */
        }

        /* 見出しのスタイル */
        h1 {
            font-size: 2.8em; /* 見出しの文字をかなり大きく */
            font-weight: 600; /* 少し太字に */
            margin-bottom: 1.8em; /* 見出しの下の余白を多めに */
            color: #212529; /* 見出しの色 */
        }

        /* リスト全体のスタイル */
        ul {
            list-style: none; /* リストのマーカー（点）を削除 */
            padding: 0; /* リストのデフォルトパディングを削除 */
            margin: 0; /* リストのデフォルトマージンを削除 */
        }

        /* リスト項目のスタイル */
        li {
            margin-bottom: 2em; /* 各リンク間の余白をさらに大きく */
        }

        /* 最後のリスト項目の下の余白を削除 */
        li:last-child {
            margin-bottom: 0;
        }

        /* リンクのスタイル */
        a {
            font-size: 1.6em; /* リンクの文字を大きく */
            color: #007bff; /* リンクの色 (青) */
            text-decoration: none; /* 下線を削除 */
            display: inline-block; /* インラインブロック要素にしてpaddingを適用可能に */
            padding: 0.6em 1.2em; /* リンクの内側の余白 */
            border-radius: 8px; /* リンクの角を少し丸く */
            transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out, transform 0.1s ease; /* ホバー時の変化を滑らかに */
        }

        /* リンクにマウスを乗せた時、またはフォーカスが当たった時のスタイル */
        a:hover, a:focus {
            color: #ffffff; /* 文字色を白に */
            background-color: #0056b3; /* 背景色を濃い青に */
            text-decoration: none; /* 下線は表示しない */
            outline: none; /* フォーカス時のデフォルトアウトラインを削除 */
            transform: translateY(-2px); /* 少し上に移動する効果 */
        }
    </style>
</head>
<body>

    <div class="container">
        <ul>
            <li>
                <a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Google</a>
            </li>
            <li>
                <a href="https://x.com" target="_blank" rel="noopener noreferrer">X (Twitter)</a> 
            </li>
            <li>
                <a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer">YouTube</a>
            </li>
            <li>
                <a href="https://zenn.dev" target="_blank" rel="noopener noreferrer">Zenn</a>
            </li>
        </ul>
    </div>

</body>
</html>

htmlはwebサイトにアップするのが当たり前になってますが、よく使うサイトを一括で表示したらすごく生産性上がるのでお勧めです。

Discussion