ブラッシュアップ

Author: osamu377

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

@@ -36,7 +36,7 @@
             const path_to_root = "";
             const default_light_theme = "light";
             const default_dark_theme = "navy";
-            window.path_to_searchindex_js = "searchindex-f5ad13de.js";
+            window.path_to_searchindex_js = "searchindex-62837989.js";
         </script>
         <!-- Start loading toc.js asap -->
         <script src="toc-39f1f835.js"></script>

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

@@ -35,7 +35,7 @@
             const path_to_root = "";
             const default_light_theme = "light";
             const default_dark_theme = "navy";
-            window.path_to_searchindex_js = "searchindex-f5ad13de.js";
+            window.path_to_searchindex_js = "searchindex-62837989.js";
         </script>
         <!-- Start loading toc.js asap -->
         <script src="toc-39f1f835.js"></script>
@@ -174,7 +174,7 @@ <h1 class="menu-title">初めてのウェブサイト</h1>
 
                 <div id="mdbook-content" class="content">
                     <main>
-                        <h1 id="はじめてのウェブサイト作り"><a class="header" href="#はじめてのウェブサイト作り">はじめてのウェブサイト作り</a></h1>
+                        <h1 id="i-はじめてのウェブサイト作り"><a class="header" href="#i-はじめてのウェブサイト作り">I. はじめてのウェブサイト作り</a></h1>
 <h2 id="1-はじめにウェブ開発の世界へようこそ"><a class="header" href="#1-はじめにウェブ開発の世界へようこそ">1. はじめに：ウェブ開発の世界へようこそ</a></h2>
 <p>みなさん、こんにちは！ ウェブサイトを作ってみたいと思ったことはありますか？ 今の社会では、自分の考えや情報を世界に伝えるために、ウェブサイトを作る技術はとても大きな力になります。</p>
 <p>特に留学生のみなさんにとって、ウェブサイトは「言葉の壁（かべ）」をこえるための強い味方です。完全な日本語を話すのが難しくても、ウェブサイトなら写真やデザイン、図を使って、あなたの魅力（みりょく）や才能を視覚的に伝えることができます。</p>

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

@@ -35,7 +35,7 @@
             const path_to_root = "";
             const default_light_theme = "light";
             const default_dark_theme = "navy";
-            window.path_to_searchindex_js = "searchindex-f5ad13de.js";
+            window.path_to_searchindex_js = "searchindex-62837989.js";
         </script>
         <!-- Start loading toc.js asap -->
         <script src="toc-39f1f835.js"></script>
@@ -174,7 +174,7 @@ <h1 class="menu-title">初めてのウェブサイト</h1>
 
                 <div id="mdbook-content" class="content">
                     <main>
-                        <h1 id="デザインと計画のガイドブック"><a class="header" href="#デザインと計画のガイドブック">デザインと計画のガイドブック</a></h1>
+                        <h1 id="ii-デザインと計画のガイドブック"><a class="header" href="#ii-デザインと計画のガイドブック">II. デザインと計画のガイドブック</a></h1>
 <p>ウェブサイトを作るとき、いきなりパソコンでコード（プログラムの言葉）を書き始めるのは、おすすめしません。まずは「計画（プランニング）」をしましょう。</p>
 <p>このガイドブックでは、ウェブ開発の専門家が、留学生のみなさんにも分かりやすい「やさしい日本語」で、サイト作りの準備について教えます。</p>
 <hr>
@@ -185,6 +185,7 @@ <h2 id="1-はじめになぜ計画プランニングが大切なのか"><a class
 <li>最後まで完成（かんせい）できる： 最初にやることを決めると、迷わずに最後まで作ることができます。</li>
 </ul>
 <p>計画を立てることは、プロのエンジニアも一番大切にしているステップです。</p>
+<hr>
 <h2 id="2-ウェブサイトの目的を整理する"><a class="header" href="#2-ウェブサイトの目的を整理する">2. ウェブサイトの目的を整理する</a></h2>
 <p>最初のプロジェクトでは、内容（ないよう）を「シンプル」にすることが成功のヒミツです。大きすぎる目標を立てると、途中で嫌になって諦めてしまうからです。</p>
 <p>まずは、次の3つの質問に答えてみましょう。</p>
@@ -196,6 +197,7 @@ <h2 id="2-ウェブサイトの目的を整理する"><a class="header" href="#2
 <p>専門家の知恵：デザインガイド</p>
 <p>大きなプロジェクトでは、「デザインガイド（デザインシステム）」というルールブックを作ります。例えば、Firefoxには「Firefox Acorn Design System」という有名なガイドがあります。これを見ると、プロがどうやって「色」や「文字」のルールを統一（とういつ）して、きれいに見せているかが分かります。</p>
 <p>目的が決まったら、次はそれを絵に描いてみましょう。</p>
+<hr>
 <h2 id="3-デザインのスケッチ見た目のイメージを作る"><a class="header" href="#3-デザインのスケッチ見た目のイメージを作る">3. デザインのスケッチ：見た目のイメージを作る</a></h2>
 <p>ペンと紙を使って、サイトの形を自由に描いてみましょう。これを「スケッチ」と言います。</p>
 <p>プロも、最初はパソコンを使わず、紙に書くことから始めます。ここで大切なのは、**「完璧（かんぺき）を目指さないこと」**です。有名な画家のゴッホ（Van Gogh）のように上手に描く必要はありません。どこにタイトルがあり、どこに画像があるか、自分が分かれば十分です。</p>
@@ -204,6 +206,7 @@ <h2 id="3-デザインのスケッチ見た目のイメージを作る"><a class
 グラフィックデザイナー	ウェブサイトの 見（み）た目（め）を きれいに デザインする 人
 UXデザイナー	ユーザーが ボタンを 押（お）しやすくしたり、情報（じょうほう）を 見（み）つけやすくしたりする 人</p>
 <p>今は、あなたがこの両方の仕事をします。自分のアイデアを自由に紙に書いてみてください。</p>
+<hr>
 <h2 id="4-テーマカラー色の名前とコードを決める"><a class="header" href="#4-テーマカラー色の名前とコードを決める">4. テーマカラー（色の名前とコード）を決める</a></h2>
 <p>サイトの印象を決める「色」を選びましょう。</p>
 <ol>
@@ -212,6 +215,7 @@ <h2 id="4-テーマカラー色の名前とコードを決める"><a class="head
 </ol>
 <p>16進数コード（hex code）とは</p>
 <p>コンピュータが「この色です！」と正しく理解するための専用の番号です。あとでコードを書くときに使うので、必ずメモしておきましょう。</p>
+<hr>
 <h2 id="5-画像の準備ルールを守って探す方法"><a class="header" href="#5-画像の準備ルールを守って探す方法">5. 画像の準備：ルールを守って探す方法</a></h2>
 <p>インターネットにある画像には「持ち主」がいます。これを <strong>著作権（コピーライト）</strong> と言います。勝手に使うと法律（ほうりつ）のトラブルになることがあるので、注意してください。</p>
 <p>「自由に使ってもいい画像」をGoogleで探す方法は、次の通りです。</p>
@@ -221,6 +225,7 @@ <h2 id="5-画像の準備ルールを守って探す方法"><a class="header" hr
 <li>ライセンスを選ぶ： その下に表示される「使用権（しようけん）」をクリックし、「クリエイティブ・コモンズ ライセンス」を選びます。</li>
 <li>保存する： 好きな画像を見つけたら、右クリック（Macは Ctrl + クリック）をして、「名前を付けて画像を保存」を選びます。</li>
 </ol>
+<hr>
 <h2 id="6-フォント文字の形の選択"><a class="header" href="#6-フォント文字の形の選択">6. フォント（文字の形）の選択</a></h2>
 <p>フォントには2つのタイプがあります。</p>
 <ul>
@@ -234,6 +239,7 @@ <h2 id="6-フォント文字の形の選択"><a class="header" href="#6-フォ
 <li>2つのコードを保存する： 画面に表示された <strong>2つのコードブロック（2つのまとまったコード）</strong> を両方ともコピーして、メモ帳などに保存してください。フォントを動かすには、この2つが両方必要です。</li>
 </ol>
 <p>⚠️ 注意：商業利用（しょうぎょうりよう）について フォントにもライセンスがあります。勉強で使うのは大丈夫ですが、将来、仕事でサイトを作るときは、必ず「商売（ビジネス）で使ってもいいか」を確認しましょう。</p>
+<hr>
 <h2 id="7-まとめと次のステップ"><a class="header" href="#7-まとめと次のステップ">7. まとめと次のステップ</a></h2>
 <p>お疲れ様でした！これで「サイトの設計図」と「素材（そざい）」がすべて揃いました。</p>
 <ul>

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

@@ -35,7 +35,7 @@
             const path_to_root = "";
             const default_light_theme = "light";
             const default_dark_theme = "navy";
-            window.path_to_searchindex_js = "searchindex-f5ad13de.js";
+            window.path_to_searchindex_js = "searchindex-62837989.js";
         </script>
         <!-- Start loading toc.js asap -->
         <script src="toc-39f1f835.js"></script>
@@ -174,7 +174,7 @@ <h1 class="menu-title">初めてのウェブサイト</h1>
 
                 <div id="mdbook-content" class="content">
                     <main>
-                        <h1 id="ウェブサイトの形かたちを作つくろう"><a class="header" href="#ウェブサイトの形かたちを作つくろう">ウェブサイトの形（かたち）を作（つく）ろう</a></h1>
+                        <h1 id="iii-ウェブサイトの形かたちを作つくろう"><a class="header" href="#iii-ウェブサイトの形かたちを作つくろう">III. ウェブサイトの形（かたち）を作（つく）ろう</a></h1>
 <p>ウェブサイトを作（つく）るための 最初（さいしょ）の一歩（いっぽ）へ ようこそ！ プログラミングや ウェブ制作（せいさく）を 始（はじ）めるとき、 最初（さいしょ）に 覚（おぼ）えるのが「HTML」です。</p>
 <p>HTMLは ウェブサイトの「骨組み（ほねぐみ）」、つまり 構造（こうぞう）を 作（つく）るための 言葉（ことば）です。この 基本（きほん）を 正（ただ）しく 知（し）ることは、ウェブサイトを 作（つく）る プロ（仕事（しごと）を する人（ひと））に なるために、とても 大切（たいせつ）なことです。</p>
 <hr>

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

@@ -35,7 +35,7 @@
             const path_to_root = "";
             const default_light_theme = "light";
             const default_dark_theme = "navy";
-            window.path_to_searchindex_js = "searchindex-f5ad13de.js";
+            window.path_to_searchindex_js = "searchindex-62837989.js";
         </script>
         <!-- Start loading toc.js asap -->
         <script src="toc-39f1f835.js"></script>
@@ -174,7 +174,7 @@ <h1 class="menu-title">初めてのウェブサイト</h1>
 
                 <div id="mdbook-content" class="content">
                     <main>
-                        <h1 id="ウェブサイトをデザインするcss"><a class="header" href="#ウェブサイトをデザインするcss">ウェブサイトをデザインするCSS</a></h1>
+                        <h1 id="iv-ウェブサイトをデザインするcss"><a class="header" href="#iv-ウェブサイトをデザインするcss">IV. ウェブサイトをデザインするCSS</a></h1>
 <h2 id="1-はじめにcssとは何でしょうか"><a class="header" href="#1-はじめにcssとは何でしょうか">1. はじめに：CSSとは何でしょうか？</a></h2>
 <p>ウェブサイトを作るとき、文字や画像などの「内容」を準備するだけでは、まだデザインが完成していません。そこで使われるのが <strong>CSS（シーエスエス）</strong> です。</p>
 <p>CSSは、ウェブサイトの「見た目」を整えるための専用の言葉です。HTMLで作成した文章に色をつけたり、大きさを変えたり、好きな場所に並べたりすることができます。</p>

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

@@ -35,7 +35,7 @@
             const path_to_root = "";
             const default_light_theme = "light";
             const default_dark_theme = "navy";
-            window.path_to_searchindex_js = "searchindex-f5ad13de.js";
+            window.path_to_searchindex_js = "searchindex-62837989.js";
         </script>
         <!-- Start loading toc.js asap -->
         <script src="toc-39f1f835.js"></script>
@@ -174,7 +174,7 @@ <h1 class="menu-title">初めてのウェブサイト</h1>
 
                 <div id="mdbook-content" class="content">
                     <main>
-                        <h1 id="ウェブサイトを動かすjavascript"><a class="header" href="#ウェブサイトを動かすjavascript">ウェブサイトを動かすJavaScript</a></h1>
+                        <h1 id="v-ウェブサイトを動かすjavascript"><a class="header" href="#v-ウェブサイトを動かすjavascript">V. ウェブサイトを動かすJavaScript</a></h1>
 <p>ウェブサイトを見たときに、ボタンを押して画面が変わったり、画像が動いたりすることはありませんか？それは「JavaScript（ジャバスクリプト）」という言葉が働いているからです。</p>
 <p>このガイドでは、プログラミングが初めての人や、日本語を勉強中の留学生にも分かりやすく、JavaScriptの基本を説明します。</p>
 <hr>

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

@@ -35,7 +35,7 @@
             const path_to_root = "";
             const default_light_theme = "light";
             const default_dark_theme = "navy";
-            window.path_to_searchindex_js = "searchindex-f5ad13de.js";
+            window.path_to_searchindex_js = "searchindex-62837989.js";
         </script>
         <!-- Start loading toc.js asap -->
         <script src="toc-39f1f835.js"></script>
@@ -174,7 +174,7 @@ <h1 class="menu-title">初めてのウェブサイト</h1>
 
                 <div id="mdbook-content" class="content">
                     <main>
-                        <h1 id="はじめてのウェブサイト作り"><a class="header" href="#はじめてのウェブサイト作り">はじめてのウェブサイト作り</a></h1>
+                        <h1 id="i-はじめてのウェブサイト作り"><a class="header" href="#i-はじめてのウェブサイト作り">I. はじめてのウェブサイト作り</a></h1>
 <h2 id="1-はじめにウェブ開発の世界へようこそ"><a class="header" href="#1-はじめにウェブ開発の世界へようこそ">1. はじめに：ウェブ開発の世界へようこそ</a></h2>
 <p>みなさん、こんにちは！ ウェブサイトを作ってみたいと思ったことはありますか？ 今の社会では、自分の考えや情報を世界に伝えるために、ウェブサイトを作る技術はとても大きな力になります。</p>
 <p>特に留学生のみなさんにとって、ウェブサイトは「言葉の壁（かべ）」をこえるための強い味方です。完全な日本語を話すのが難しくても、ウェブサイトなら写真やデザイン、図を使って、あなたの魅力（みりょく）や才能を視覚的に伝えることができます。</p>