Download to read offline
![更に進化するCSSの表現力と 新しいWebツール [Reloaded]](https://cdn.slidesharecdn.com/ss_thumbnails/html5jadobecsstools-121023060320-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
HTML + CSSで名刺作る！！！（アイマスハッカソン2024 ライトニングトーク用資料）
- 1.
- 2.
- 3.
- 4. テンプレートをダウンロード テンプレートを用意したので ZIP をダウンロー ドするなりgit clone するなりお好きな方法で取 得してください https://github.com/yu-ko-ba/business-card-templ ate ↓ こ こ
- 5. テキストエディタで開く メモ帳なり VS Codeなり Vim なり Neovim な り、お好きなテキストエディタで index.html を 開きます
- 6. HTML を編集する Google Fontsから推してるフォントを引っ張っ てきたり担当アイドル名や P 名、画像などを置 いていきます
- 7. ブラウザで確認する ブラウザで確認してみます ブラウザに index.html をドラッグ& ドロップす るなり npx reload するなりしてブラウザで開い てみましょう ここでは表示したい文字や画像が表示されてい ることだけ確認できれば OK です！ いい感じに並べるのは次のステップで行います
- 8.
- 9.
- 10.
- 11. ブラウザで確認する 表面と同様、裏面もブラウザで確認します ブラウザに back.html をドラッグ& ドロップす るなり http://localhost:8080/backに移動するな りしてブラウザで確認しましょう
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18. 開発者ツールを開く ︙ → → （ケバブメニュー）その他のツール デ ベロッパー ツール の順でクリックし、開発者ツールを開きます
- 19. 開発者ツールを開く ︙ → → （ケバブメニュー）その他のツール デ ベロッパー ツール の順でクリックし、開発者ツールを開きます
- 20. 開発者ツールを開く ︙ → → （ケバブメニュー）その他のツール デ ベロッパー ツール の順でクリックし、開発者ツールを開きます
- 21. 開発者ツールを開く ︙ → → （ケバブメニュー）その他のツール デ ベロッパー ツール の順でクリックし、開発者ツールを開きます
- 22. カスタムデバイスを作る 1. 「要素」タブを選択 2. 「デバイスのツールバーを切り替え」ボタンを クリック 3.「サイズ : ▼ レスポンシブ 」ボタンをクリック 4. 「編集 ... 」を選択 5. 「カスタム デバイスを追加 ... 」ボタンをク リック 6. デバイス名、幅、高さ、デバイスのピクセル比 を入力 7. 「追加」ボタンをクリック 8. 「サイズ : ▼ レスポンシブ 」ボタンをもう一度 クリック 9. 「（「 6. で入力したデバイス名）」を選択 10. 「閉じる」ボタンをクリック
- 23. カスタムデバイスを作る 1. 「要素」タブを選択 2. 「デバイスのツールバーを切り替え」ボタンを クリック 3.「サイズ : ▼ レスポンシブ 」ボタンをクリック 4. 「編集 ... 」を選択 5. 「カスタム デバイスを追加 ... 」ボタンをク リック 6. デバイス名、幅、高さ、デバイスのピクセル比 を入力 7. 「追加」ボタンをクリック 8. 「サイズ : ▼ レスポンシブ 」ボタンをもう一度 クリック 9. 「（「 6. で入力したデバイス名）」を選択 10. 「閉じる」ボタンをクリック
- 24. カスタムデバイスを作る 1. 「要素」タブを選択 2. 「デバイスのツールバーを切り替え」ボタンを クリック 3.「サイズ : ▼ レスポンシブ 」ボタンをクリック 4. 「編集 ... 」を選択 5. 「カスタム デバイスを追加 ... 」ボタンをク リック 6. デバイス名、幅、高さ、デバイスのピクセル比 を入力 7. 「追加」ボタンをクリック 8. 「サイズ : ▼ レスポンシブ 」ボタンをもう一度 クリック 9. 「（「 6. で入力したデバイス名）」を選択 10. 「閉じる」ボタンをクリック
- 25. カスタムデバイスを作る 1. 「要素」タブを選択 2. 「デバイスのツールバーを切り替え」ボタンを クリック 3.「サイズ : ▼ レスポンシブ 」ボタンをクリック 4. 「編集 ... 」を選択 5. 「カスタム デバイスを追加 ... 」ボタンをク リック 6. デバイス名、幅、高さ、デバイスのピクセル比 を入力 7. 「追加」ボタンをクリック 8. 「サイズ : ▼ レスポンシブ 」ボタンをもう一度 クリック 9. 「（「 6. で入力したデバイス名）」を選択 10. 「閉じる」ボタンをクリック
- 26. カスタムデバイスを作る 1. 「要素」タブを選択 2. 「デバイスのツールバーを切り替え」ボタンを クリック 3.「サイズ : ▼ レスポンシブ 」ボタンをクリック 4. 「編集 ... 」を選択 5. 「カスタム デバイスを追加 ... 」ボタンをク リック 6. デバイス名、幅、高さ、デバイスのピクセル比 を入力 7. 「追加」ボタンをクリック 8. 「サイズ : ▼ レスポンシブ 」ボタンをもう一度 クリック 9. 「（「 6. で入力したデバイス名）」を選択 10. 「閉じる」ボタンをクリック
- 27. カスタムデバイスを作る 1. 「要素」タブを選択 2. 「デバイスのツールバーを切り替え」ボタンを クリック 3.「サイズ : ▼ レスポンシブ 」ボタンをクリック 4. 「編集 ... 」を選択 5. 「カスタム デバイスを追加 ... 」ボタンをク リック 6. デバイス名、幅、高さ、デバイスのピクセル比 を入力 7. 「追加」ボタンをクリック 8. 「サイズ : ▼ レスポンシブ 」ボタンをもう一度 クリック 9. 「（「 6. で入力したデバイス名）」を選択 10. 「閉じる」ボタンをクリック
- 28. カスタムデバイスを作る 1. 「要素」タブを選択 2. 「デバイスのツールバーを切り替え」ボタンを クリック 3.「サイズ : ▼ レスポンシブ 」ボタンをクリック 4. 「編集 ... 」を選択 5. 「カスタム デバイスを追加 ... 」ボタンをク リック 6. デバイス名、幅、高さ、デバイスのピクセル比 を入力 7. 「追加」ボタンをクリック 8. 「サイズ : ▼ レスポンシブ 」ボタンをもう一度 クリック 9. 「（「 6. で入力したデバイス名）」を選択 10. 「閉じる」ボタンをクリック
- 29. カスタムデバイスを作る 1. 「要素」タブを選択 2. 「デバイスのツールバーを切り替え」ボタンを クリック 3.「サイズ : ▼ レスポンシブ 」ボタンをクリック 4. 「編集 ... 」を選択 5. 「カスタム デバイスを追加 ... 」ボタンをク リック 6. デバイス名、幅、高さ、デバイスのピクセル比 を入力 7. 「追加」ボタンをクリック 8. 「サイズ : ▼ レスポンシブ 」ボタンをもう一度 クリック 9. 「（「 6. で入力したデバイス名）」を選択 10. 「閉じる」ボタンをクリック
- 30. カスタムデバイスを作る 1. 「要素」タブを選択 2. 「デバイスのツールバーを切り替え」ボタンを クリック 3.「サイズ : ▼ レスポンシブ 」ボタンをクリック 4. 「編集 ... 」を選択 5. 「カスタム デバイスを追加 ... 」ボタンをク リック 6. デバイス名、幅、高さ、デバイスのピクセル比 を入力 7. 「追加」ボタンをクリック 8. 「サイズ : ▼ レスポンシブ 」ボタンをもう一度 クリック 9. 「（「 6. で入力したデバイス名）」を選択 10. 「閉じる」ボタンをクリック
- 31. カスタムデバイスを作る 1. 「要素」タブを選択 2. 「デバイスのツールバーを切り替え」ボタンを クリック 3.「サイズ : ▼ レスポンシブ 」ボタンをクリック 4. 「編集 ... 」を選択 5. 「カスタム デバイスを追加 ... 」ボタンをク リック 6. デバイス名、幅、高さ、デバイスのピクセル比 を入力 7. 「追加」ボタンをクリック 8. もう一度「サイズ : ▼ レスポンシブ 」ボタンを クリック 9. 「（「 6. で入力したデバイス名）」を選択 10. 「閉じる」ボタンをクリック
- 32. カスタムデバイスを作る 1. 「要素」タブを選択 2. 「デバイスのツールバーを切り替え」ボタンを クリック 3.「サイズ : ▼ レスポンシブ 」ボタンをクリック 4. 「編集 ... 」を選択 5. 「カスタム デバイスを追加 ... 」ボタンをク リック 6. デバイス名、幅、高さ、デバイスのピクセル比 を入力 7. 「追加」ボタンをクリック 8. 「サイズ : ▼ レスポンシブ 」ボタンをもう一度 クリック 9. 「（「 6. で入力したデバイス名）」を選択 10. 「閉じる」ボタンをクリック
- 33. カスタムデバイスを作る 1. 「要素」タブを選択 2. 「デバイスのツールバーを切り替え」ボタンを クリック 3.「サイズ : ▼ レスポンシブ 」ボタンをクリック 4. 「編集 ... 」を選択 5. 「カスタム デバイスを追加 ... 」ボタンをク リック 6. デバイス名、幅、高さ、デバイスのピクセル比 を入力 7. 「追加」ボタンをクリック 8. 「サイズ : ▼ レスポンシブ 」ボタンをもう一度 クリック 9. 「（「 6. で入力したデバイス名）」を選択 10. 「閉じる」ボタンをクリック
- 34. カスタムデバイスを作る 1. 「要素」タブを選択 2. 「デバイスのツールバーを切り替え」ボタンを クリック 3.「サイズ : ▼ レスポンシブ 」ボタンをクリック 4. 「編集 ... 」を選択 5. 「カスタム デバイスを追加 ... 」ボタンをク リック 6. デバイス名、幅、高さ、デバイスのピクセル比 を入力 7. 「追加」ボタンをクリック 8. 「サイズ : ▼ レスポンシブ 」ボタンをもう一度 クリック 9. 「（「 6. で入力したデバイス名）」を選択 10. 「閉じる」ボタンをクリック
- 35. カスタムデバイスを作る 1. 「要素」タブを選択 2. 「デバイスのツールバーを切り替え」ボタンを クリック 3.「サイズ : ▼ レスポンシブ 」ボタンをクリック 4. 「編集 ... 」を選択 5. 「カスタム デバイスを追加 ... 」ボタンをク リック 6. デバイス名、幅、高さ、デバイスのピクセル比 を入力 7. 「追加」ボタンをクリック 8. 「サイズ : ▼ レスポンシブ 」ボタンをもう一度 クリック 9. 「（「 6. で入力したデバイス名）」を選択 10. 「閉じる」ボタンをクリック
- 36.
- 37. スクリーンショットを撮る 1. <html lang="ja">を右クリック 2. ノードのスクリーンショットをキャプ チャ」を選択
- 38. スクリーンショットを撮る 1. <html lang="ja">を右クリック 2. ノードのスクリーンショットをキャプ チャ」を選択
- 39. スクリーンショットを撮る 1. <html lang="ja">を右クリック 2. ノードのスクリーンショットをキャプ チャ」を選択 3. 環境によってはダウンロード先を聞かれ ます
- 40.
- 41.
- 42. ※ここから先は環境によって手順がかなり変ってくると思います ここではMac OS +GIMP の場合を紹介します
- 43.
- 44. PDF としてエクスポートする 1. 「ファイル(F) 」を選択 2. 「名前をつけてエクスポート (X)... 」を 選択 3. 拡張子を「 pdf 」に変更します 4. 「エクスポート (E) 」ボタンをクリック 5. もう一度「エクスポート (E) 」ボタンをク リック
- 45. PDF としてエクスポートする 1. 「ファイル(F) 」を選択 2. 「名前をつけてエクスポート (X)... 」を 選択 3. 拡張子を「 pdf 」に変更します 4. 「エクスポート (E) 」ボタンをクリック 5. もう一度「エクスポート (E) 」ボタンをク リック
- 46. PDF としてエクスポートする 1. 「ファイル(F) 」を選択 2. 「名前をつけてエクスポート (X)... 」を 選択 3. 拡張子を「 pdf 」に変更します 4. 「エクスポート (E) 」ボタンをクリック 5. もう一度「エクスポート (E) 」ボタンをク リック
- 47. PDF としてエクスポートする 1. 「ファイル(F) 」を選択 2. 「名前をつけてエクスポート (X)... 」を 選択 3. 拡張子を「 pdf 」に変更します 4. 「エクスポート (E) 」ボタンをクリック 5. もう一度「エクスポート (E) 」ボタンをク リック
- 48. PDF としてエクスポートする 1. 「ファイル(F) 」を選択 2. 「名前をつけてエクスポート (X)... 」を 選択 3. 拡張子を「 pdf 」に変更します 4. 「エクスポート (E) 」ボタンをクリック 5. もう一度「エクスポート (E) 」ボタンをク リック
- 49. PDF としてエクスポートする 1. 「ファイル(F) 」を選択 2. 「名前をつけてエクスポート (X)... 」を 選択 3. 拡張子を「 pdf 」に変更します 4. 「エクスポート (E) 」ボタンをクリック 5. もう一度「エクスポート (E) 」ボタンをク リック
- 50. PDF としてエクスポートする 1. 「ファイル(F) 」を選択 2. 「名前をつけてエクスポート (X)... 」を 選択 3. 拡張子を「 pdf 」に変更します 4. 「エクスポート (E) 」ボタンをクリック 5. もう一度「エクスポート (E) 」ボタンをク リック
- 51.
- 52.