File size: 6,574 Bytes
3ed48fd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ロゴジェネレーター</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<script type="module" src="effects.js"></script>
<script type="module" src="index.js"></script>
</head>
<body>
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h2 class="h4 mb-0">ロゴジェネレーター</h2>
</div>
<div class="card-body">
<div class="mb-3">
<label for="textInput" class="form-label">テキスト</label>
<textarea class="form-control" id="textInput" rows="3" placeholder="テキストを入力してください">プレビュー</textarea>
</div>
<div class="mb-3">
<label for="googleFontInput" class="form-label">フォント</label>
<select name="googleFontInput" class="form-select" id="googleFontInput">
<option>Aoboshi One</option>
<option>BIZ UDGothic</option>
<option>BIZ UDMincho</option>
<option>BIZ UDPGothic</option>
<option>BIZ UDPMincho</option>
<option>Cherry Bomb One</option>
<option>Chokokutai</option>
<option>Darumadrop One</option>
<option>Dela Gothic One</option>
<option>DotGothic16</option>
<option>Hachi Maru Pop</option>
<option>Hina Mincho</option>
<option>IBM Plex Sans JP</option>
<option>Kaisei Decol</option>
<option>Kaisei HarunoUmi</option>
<option>Kaisei Opti</option>
<option>Kaisei Tokumin</option>
<option>Kiwi Maru</option>
<option>Klee One</option>
<option>Kosugi</option>
<option>Kosugi Maru</option>
<option>M PLUS 1</option>
<option>M PLUS 1 Code</option>
<option>M PLUS 1p</option>
<option>M PLUS 2</option>
<option>M PLUS Rounded 1c</option>
<option selected="selected">Mochiy Pop One</option>
<option>Mochiy Pop P One</option>
<option>Monomaniac One</option>
<option>Murecho</option>
<option>New Tegomin</option>
<option>Noto Sans JP</option>
<option>Noto Serif JP</option>
<option>Palette Mosaic</option>
<option>Potta One</option>
<option>Rampart One</option>
<option>Reggae One</option>
<option>Rock 3D</option>
<option>RocknRoll One</option>
<option>Sawarabi Gothic</option>
<option>Sawarabi Mincho</option>
<option>Shippori Antique</option>
<option>Shippori Antique B1</option>
<option>Shippori Mincho</option>
<option>Shippori Mincho B1</option>
<option>Shizuru</option>
<option>Slackside One</option>
<option>Stick</option>
<option>Train One</option>
<option>Tsukimi Rounded</option>
<option>Yomogi</option>
<option>Yuji Boku</option>
<option>Yuji Hentaigana Akari</option>
<option>Yuji Hentaigana Akebono</option>
<option>Yuji Mai</option>
<option>Yuji Syuku</option>
<option>Yusei Magic</option>
<option>Zen Antique</option>
<option>Zen Antique Soft</option>
<option>Zen Kaku Gothic Antique</option>
<option>Zen Kaku Gothic New</option>
<option>Zen Kurenaido</option>
<option>Zen Maru Gothic</option>
<option>Zen Old Mincho</option>
</select>
</div>
<div class="mb-3 d-none">
<label for="fontSize" class="form-label">フォントサイズ</label>
<input type="number" class="form-control" id="fontSize" value="128" min="8" max="128">
</div>
<div class="mb-3 form-switch">
<input type="checkbox" class="form-check-input" id="verticalText" role="switch">
<label class="form-check-label" for="verticalText">縦書き</label>
</div>
<div class="effect-grid">
<!-- プリセットギャラリーはJavaScriptで動的に追加されます -->
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html> |