Skip to content

Commit c8fc45e

Browse files
osamu377osamu377
committed
初めてのウェブサイトブラッシュアップ
1 parent 56e4cba commit c8fc45e

24 files changed

Lines changed: 561 additions & 857 deletions

‎memo/難しい日本語.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
サイト 3
2+
ウェブサイト 2
3+
合わさる 1
4+
骨組み 1
5+
段落 1
6+
リスト 1
7+
画像 1
8+
コンテンツ 1
9+
見た目 1
10+
アニメーション 1
11+
バラバラ 1
12+
ユーザー 1

‎初めてのウェブサイト/book.toml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
[book]
22
title = "初めてのウェブサイト"
33
authors = ["Osamu377"]
4-
language = "ja"
4+
language = "ja-JP"
5+
6+
[output.html]

‎初めてのウェブサイト/book/404.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE HTML>
2-
<html lang="ja" class="light sidebar-visible" dir="ltr">
2+
<html lang="ja-JP" class="light sidebar-visible" dir="ltr">
33
<head>
44
<!-- Book generated using mdBook -->
55
<meta charset="UTF-8">
@@ -36,10 +36,10 @@
3636
const path_to_root = "";
3737
const default_light_theme = "light";
3838
const default_dark_theme = "navy";
39-
window.path_to_searchindex_js = "searchindex-d399a07a.js";
39+
window.path_to_searchindex_js = "searchindex-1453a6c4.js";
4040
</script>
4141
<!-- Start loading toc.js asap -->
42-
<script src="toc-53e519e3.js"></script>
42+
<script src="toc-39f1f835.js"></script>
4343
</head>
4444
<body>
4545
<div id="mdbook-help-container">

‎初めてのウェブサイト/book/chapter_1.html‎

Lines changed: 46 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE HTML>
2-
<html lang="ja" class="light sidebar-visible" dir="ltr">
2+
<html lang="ja-JP" class="light sidebar-visible" dir="ltr">
33
<head>
44
<!-- Book generated using mdBook -->
55
<meta charset="UTF-8">
@@ -35,10 +35,10 @@
3535
const path_to_root = "";
3636
const default_light_theme = "light";
3737
const default_dark_theme = "navy";
38-
window.path_to_searchindex_js = "searchindex-d399a07a.js";
38+
window.path_to_searchindex_js = "searchindex-1453a6c4.js";
3939
</script>
4040
<!-- Start loading toc.js asap -->
41-
<script src="toc-53e519e3.js"></script>
41+
<script src="toc-39f1f835.js"></script>
4242
</head>
4343
<body>
4444
<div id="mdbook-help-container">
@@ -176,11 +176,11 @@ <h1 class="menu-title">初めてのウェブサイト</h1>
176176
<main>
177177
<h1 id="はじめてのウェブサイト作り"><a class="header" href="#はじめてのウェブサイト作り">はじめてのウェブサイト作り</a></h1>
178178
<h2 id="1-はじめにウェブ開発の世界へようこそ"><a class="header" href="#1-はじめにウェブ開発の世界へようこそ">1. はじめに：ウェブ開発の世界へようこそ</a></h2>
179-
<p>みなさん、こんにちは！ ウェブサイトを作ってみたいと思ったことはありますか？ 今の社会では、自分の考えや情報を世界中に伝えるために、ウェブサイトを作る技術（スキル）はとても大きな力になります。</p>
180-
<p>特に留学生のみなさんにとって、ウェブサイトは「言葉の壁（かべ）」をこえるための強い味方です。完璧な日本語を話すのが難しくても、ウェブサイトなら写真やデザイン、図を使って、あなたの魅力（みりょく）や才能を視覚的に伝えることができます。</p>
181-
<p>「ウェブ開発は難しそう……」と感じるかもしれません。確かに、Facebook（フェイスブック）のような世界中で使われる複雑なサイトを、いきなり一人で作ることは難しいです。しかし、安心してください。自分だけのシンプルなウェブサイトなら、小さなステップを積み重ねることで、誰でも作ることができます。</p>
182-
<p>このガイドでは、ウェブサイトがどのような仕組みで動いているのか、そしてどうすれば自分の作品を世界中に公開できるのかを、やさしく解説します。自分で情報を発信する力を身につけることは、将来のキャリア（仕事）や自分を表現するために、必ず素晴らしいプラスになるはずです。</p>
183-
<p>準備はいいですか？まずは、スタートするために必要なものを確認しましょう。</p>
179+
<p>みなさん、こんにちは！ ウェブサイトを作ってみたいと思ったことはありますか？ 今の社会では、自分の考えや情報を世界に伝えるために、ウェブサイトを作る技術はとても大きな力になります。</p>
180+
<p>特に留学生のみなさんにとって、ウェブサイトは「言葉の壁（かべ）」をこえるための強い味方です。完全な日本語を話すのが難しくても、ウェブサイトなら写真やデザイン、図を使って、あなたの魅力（みりょく）や才能を視覚的に伝えることができます。</p>
181+
<p>「ウェブ開発は難しそう……」と感じるかもしれません。確かに、Facebook（フェイスブック）のような複雑なサイトを、いきなり一人で作ることは難しいです。しかし、安心してください。自分だけのシンプルなウェブサイトなら、少しずつ進むことで、誰でも作ることができます。</p>
182+
<p>このガイドでは、ウェブサイトがどのように動いているのか、そしてどうすれば自分の作品を世界に広めることができるのかを、やさしく解説します。自分で情報を広める力を身につけることは、将来の仕事や自分を表現するために、必ず素晴らしいプラスになるはずです。</p>
183+
<p>準備はいいですか？ まずは、スタートするために必要なものを確認しましょう。</p>
184184
<hr>
185185
<h2 id="2-準備するものスタートラインに立つ"><a class="header" href="#2-準備するものスタートラインに立つ">2. 準備するもの：スタートラインに立つ</a></h2>
186186
<p>実際にコード（コンピュータへの命令）を書き始める前に、自分のコンピュータで作業ができる準備をすることが大切です。これを「環境構築（かんきょうこうちく / パソコンでサイトを作るための準備）」と呼びます。</p>
@@ -190,33 +190,55 @@ <h2 id="2-準備するものスタートラインに立つ"><a class="header" hr
190190
<li>ファイルシステムの理解： ファイルを保存したり、フォルダを作って整理したりできる。</li>
191191
<li>ブラウザの利用： インターネットで検索をしたり、サイトを見たりできる。</li>
192192
</ol>
193-
<p>もし「まだ難しいな」と感じる場合は、無理をせず、まずはMDNの「環境構築（Environment setup）モジュール」を読んで、基本を学んでおくことを強くおすすめします。</p>
194193
<p>次に、以下の「道具」を用意しましょう。</p>
195194
<ul>
196-
<li>コードエディター： プログラムのコードを書くための専用ソフトです。</li>
197-
<li>複数のウェブブラウザ： Google Chromeだけでなく、FirefoxやSafariなど、いくつかのブラウザをインストールしてください。</li>
195+
<li>コードエディター： プログラムのコードを書くための専用ソフトです。Visual Studio Codeを使います。すでに皆さんのPCにインストールされています。</li>
196+
<li>ウェブブラウザ： 主にGoogle Chrome を使います。こちらもんストール済みです。</li>
198197
</ul>
199-
<p>なぜ「複数」のブラウザが必要なのでしょうか？</p>
200-
<p>実は、ブラウザの種類によって、プログラムの「解釈（かいしゃく / 読み取り方）」が少しずつ違います。そのため、一方のブラウザではきれいに見えても、もう一方では崩れて見えることがあります。世界中の人に正しく見てもらうために、複数のブラウザでチェックする習慣をつけましょう。</p>
201-
<p>道具が揃ったら、次は「どんなサイトを作るか」という計画を立てるステップです。</p>
198+
<p>道具がそろったら、次は「どんなサイトを作るか」という計画を立てるステップです。</p>
202199
<hr>
203200
<h2 id="3-計画を立てるサイトの見た目を決める"><a class="header" href="#3-計画を立てるサイトの見た目を決める">3. 計画を立てる：サイトの見た目を決める</a></h2>
204-
<p>いきなりコードを書き始めるのは、設計図なしで家を建てるようなものです。まずは「計画（プランニング）」から始めましょう。最初にしっかり計画を立てることで、作業の途中で迷わなくなり、結果として「情報の整理された見やすいサイト」を作ることができます。</p>
201+
<p>いきなりコードを書き始めるのは、設計図なしで家を建てるようなものです。まずは「計画」から始めましょう。最初にしっかり計画を立てることで、作業の途中で迷わなくなり、結果として「情報の整理された見やすいサイト」を作ることができます。</p>
205202
<p>計画を立てるときは、以下のポイントを整理してみてください。</p>
206203
<ul>
207204
<li>どんな情報を載せるか： 誰に、何を伝えたいですか？（自己紹介、趣味の紹介など）</li>
208-
<li>どんなフォントや色を使うか： 明るいイメージですか？それともプロフェッショナルで落ち着いたイメージですか？</li>
205+
<li>どんなフォントや色を使うか： 明るいイメージですか？ それともクールで落ち着いたイメージですか？</li>
209206
</ul>
210207
<p>見た目のイメージが固まったら、いよいよサイトの「中身（文章）」と「形」を作っていく工程に入ります。</p>
208+
<blockquote class="blockquote-tag blockquote-tag-note">
209+
<p class="blockquote-tag-title"><svg viewbox="0 0 16 16" width="18" height="18"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>Note</p>
210+
<p>見た目: 外から見た物事のありさま
211+
（例 その車は <strong>見た目</strong> は美しいが中身は壊れている）</p>
212+
</blockquote>
211213
<hr>
212214
<h2 id="4-サイトの3つの要素htmlcssjavascript"><a class="header" href="#4-サイトの3つの要素htmlcssjavascript">4. サイトの「3つの要素」：HTML、CSS、JavaScript</a></h2>
213215
<p>ウェブサイトは、主に3つの技術が組み合わさってできています。これを「家づくり」に例えて見てみましょう。</p>
214-
<p>技術名 役割（家の例え） 詳しい説明
215-
HTML 構造（骨組み） 段落、リスト、画像など、コンテンツの「意味」や「土台」を作ります。
216-
CSS 見た目（装飾） 色、サイズ、配置、背景など、サイトを「美しく」整えます。
217-
JavaScript 動き（設備） ボタンの反応、アニメーション、ゲームなど「便利な機能」を加えます。</p>
216+
<div class="table-wrapper">
217+
<table>
218+
<thead>
219+
<tr><th>技術名</th><th>役割（家の例え）</th><th>詳しい説明</th></tr>
220+
</thead>
221+
<tbody>
222+
<tr><td>HTML</td><td>構造</td><td>段落、リスト、画像など、コンテンツの「意味」や「土台」を作ります。</td></tr>
223+
<tr><td>CSS</td><td>見た目（かざり）</td><td>色、サイズ、配置、背景など、サイトを「美しく」整えます。</td></tr>
224+
<tr><td>JavaScript</td><td>動き</td><td>ボタンの反応、アニメーション、ゲームなど「便利な機能」を加えます。</td></tr>
225+
</tbody>
226+
</table>
227+
</div>
218228
<p>これらの技術は、どれか一つ欠けてもうまくいきません。たとえば、HTMLだけでは文字が並んでいるだけで読みにくく、CSSがないとデザインがバラバラになります。また、JavaScriptがないと動きのない静かなサイトになってしまいます。</p>
219229
<p>これらを正しく組み合わせることで、ユーザーにとって「読みやすく」「使いやすく」「楽しい」ウェブサイトが完成するのです。</p>
230+
<blockquote class="blockquote-tag blockquote-tag-note">
231+
<p class="blockquote-tag-title"><svg viewbox="0 0 16 16" width="18" height="18"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>Note</p>
232+
<p>段落：長い文章を内容などから分けた、言葉の集まり</p>
233+
</blockquote>
234+
<blockquote class="blockquote-tag blockquote-tag-note">
235+
<p class="blockquote-tag-title"><svg viewbox="0 0 16 16" width="18" height="18"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>Note</p>
236+
<p>リスト：複数の項目や要素を集めたもの</p>
237+
</blockquote>
238+
<blockquote class="blockquote-tag blockquote-tag-note">
239+
<p class="blockquote-tag-title"><svg viewbox="0 0 16 16" width="18" height="18"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>Note</p>
240+
<p>画像：写真や絵など</p>
241+
</blockquote>
220242
<hr>
221243
<h2 id="5-世界へ公開するパブリッシング"><a class="header" href="#5-世界へ公開するパブリッシング">5. 世界へ公開する：パブリッシング</a></h2>
222244
<p>自分のパソコンで作ったファイルは、そのままでは自分にしか見ることができません。これをインターネット上にアップロードして、世界中の誰でも見られる状態にすることを「公開（パブリッシング）」と言います。</p>
@@ -226,7 +248,10 @@ <h2 id="5-世界へ公開するパブリッシング"><a class="header" href="#5
226248
<li>ファイルを整理する： 画像やコードのファイルを正しいフォルダにまとめます。</li>
227249
<li>オンラインにアップロードする： 「サーバー」と呼ばれる、インターネット上の場所へファイルを送ります。</li>
228250
</ol>
229-
<p>「公開する」という作業は、単に学習の終わりを意味するのではありません。あなたの作ったものが、国境をこえて世界中の人と繋がる「第一歩」です。自分の作品がインターネットを通じて誰かに届くという経験は、これからの学習の大きな自信になるでしょう。</p>
251+
<blockquote class="blockquote-tag blockquote-tag-note">
252+
<p class="blockquote-tag-title"><svg viewbox="0 0 16 16" width="18" height="18"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>Note</p>
253+
<p>授業では、このステップは実施しません。</p>
254+
</blockquote>
230255
<hr>
231256
<h2 id="6-まとめと次のステップ"><a class="header" href="#6-まとめと次のステップ">6. まとめと次のステップ</a></h2>
232257
<p>ここまで、ウェブサイト制作の全体像を見てきました。ウェブ開発の学習は、一度で完璧（かんぺき）にする必要はありません。小さな「できた！」を積み重ねていくプロセスそのものが大切です。</p>

‎初めてのウェブサイト/book/chapter_2.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE HTML>
2-
<html lang="ja" class="light sidebar-visible" dir="ltr">
2+
<html lang="ja-JP" class="light sidebar-visible" dir="ltr">
33
<head>
44
<!-- Book generated using mdBook -->
55
<meta charset="UTF-8">
@@ -35,10 +35,10 @@
3535
const path_to_root = "";
3636
const default_light_theme = "light";
3737
const default_dark_theme = "navy";
38-
window.path_to_searchindex_js = "searchindex-d399a07a.js";
38+
window.path_to_searchindex_js = "searchindex-1453a6c4.js";
3939
</script>
4040
<!-- Start loading toc.js asap -->
41-
<script src="toc-53e519e3.js"></script>
41+
<script src="toc-39f1f835.js"></script>
4242
</head>
4343
<body>
4444
<div id="mdbook-help-container">
@@ -208,12 +208,12 @@ <h2 id="4-テーマカラー色の名前とコードを決める"><a class="head
208208
<p>サイトの印象を決める「色」を選びましょう。</p>
209209
<ol>
210210
<li>色を選ぶ： カラーピッカーなどのツールで、背景（はいけい）に使いたい色を探します。</li>
211-
<li>コードをメモする： 色を選ぶと、#660066 のような「6つの英数字」が表示されます。これを**16進数コード（hex code／ヘックスコード）**と呼びます。</li>
211+
<li>コードをメモする： 色を選ぶと、#660066 のような「6つの英数字」が表示されます。これを <strong>16進数コード（hex code／ヘックスコード）</strong> と呼びます。</li>
212212
</ol>
213213
<p>16進数コード（hex code）とは</p>
214214
<p>コンピュータが「この色です！」と正しく理解するための専用の番号です。あとでコードを書くときに使うので、必ずメモしておきましょう。</p>
215215
<h2 id="5-画像の準備ルールを守って探す方法"><a class="header" href="#5-画像の準備ルールを守って探す方法">5. 画像の準備：ルールを守って探す方法</a></h2>
216-
<p>インターネットにある画像には「持ち主」がいます。これを**著作権（コピーライト）**と言います。勝手に使うと法律（ほうりつ）のトラブルになることがあるので、注意してください。</p>
216+
<p>インターネットにある画像には「持ち主」がいます。これを <strong>著作権（コピーライト）</strong> と言います。勝手に使うと法律（ほうりつ）のトラブルになることがあるので、注意してください。</p>
217217
<p>「自由に使ってもいい画像」をGoogleで探す方法は、次の通りです。</p>
218218
<ol>
219219
<li>Google画像検索を使う： 好きな言葉で検索します。</li>
@@ -231,7 +231,7 @@ <h2 id="6-フォント文字の形の選択"><a class="header" href="#6-フォ
231231
<ol>
232232
<li>Google Fontsへ行く： サイトのイメージに合うフォントを探します。</li>
233233
<li>コードを取得する： 好きなフォントを選び、「Get font」ボタンを押してから、「Get embed code（埋め込みコードを取得）」をクリックします。</li>
234-
<li>2つのコードを保存する： 画面に表示された**2つのコードブロック（2つのまとまったコード）**を両方ともコピーして、メモ帳などに保存してください。フォントを動かすには、この2つが両方必要です。</li>
234+
<li>2つのコードを保存する： 画面に表示された <strong>2つのコードブロック（2つのまとまったコード）</strong> を両方ともコピーして、メモ帳などに保存してください。フォントを動かすには、この2つが両方必要です。</li>
235235
</ol>
236236
<p>⚠️ 注意：商業利用（しょうぎょうりよう）について フォントにもライセンスがあります。勉強で使うのは大丈夫ですが、将来、仕事でサイトを作るときは、必ず「商売（ビジネス）で使ってもいいか」を確認しましょう。</p>
237237
<h2 id="7-まとめと次のステップ"><a class="header" href="#7-まとめと次のステップ">7. まとめと次のステップ</a></h2>

0 commit comments

Comments
 (0)