|
35 | 35 | const path_to_root = ""; |
36 | 36 | const default_light_theme = "light"; |
37 | 37 | const default_dark_theme = "navy"; |
38 | | - window.path_to_searchindex_js = "searchindex-4a935368.js"; |
| 38 | + window.path_to_searchindex_js = "searchindex-97c29d7e.js"; |
39 | 39 | </script> |
40 | 40 | <!-- Start loading toc.js asap --> |
41 | 41 | <script src="toc-8186ac84.js"></script> |
@@ -177,25 +177,25 @@ <h1 class="menu-title">留学生のためのJavaScript学習ガイド</h1> |
177 | 177 | <h1 id="html"><a class="header" href="#html">HTML</a></h1> |
178 | 178 | <p><strong><ruby>留学生<rt>りゅうがくせい</rt></ruby>のためのHTML基礎（きそ）ガイド：JavaScriptを学ぶ前に</strong></p> |
179 | 179 | <p>Web<ruby>開発<rt>かいはつ</rt></ruby>を<ruby>勉強<rt>べんきょう</rt></ruby>するみなさん、こんにちは。このガイドでは、プログラミングのJavaScriptを勉強する前に、とても<ruby>大切<rt>たいせつ</rt></ruby>な「HTML」と「CSS」をわかりやすく<ruby>説明<rt>せつめい</rt></ruby>します。</p> |
180 | | -<h2 id="i-はじめにwebページを構成する3つの力"><a class="header" href="#i-はじめにwebページを構成する3つの力">I. はじめに：Webページを構成する「3つの力」</a></h2> |
| 180 | +<h2 id="i-はじめにウェブページを構成する3つの力"><a class="header" href="#i-はじめにウェブページを構成する3つの力">I. はじめに：ウェブページを構成する「3つの力」</a></h2> |
181 | 181 | <p>Webサイトを作（つく）るときには、3つの技術（ぎじゅつ）を使（つか）います。それはHTML、CSS、そしてJavaScriptです。これらを「家」に<ruby>例<rt>たと</rt></ruby>えて考（かんが）えてみましょう。</p> |
182 | 182 | <ul> |
183 | 183 | <li>HTML： 家の「柱」や「壁」です。建物（たてもの）の<ruby>骨組<rt>ほねぐ</rt></ruby>みを作（つく）る役割（やくわり）があります。</li> |
184 | 184 | <li>CSS： 家の「ペンキ」や「インテリア」です。色（いろ）を塗（ぬ）ったりして、<ruby>見<rt>み</rt></ruby>た目（め）をきれいに整（ととの）えます。</li> |
185 | 185 | <li>JavaScript： 家の「電気（でんき）」や「機械（きかい）装置（そうち）」です。ボタンを押（お）すとライトがつくような、<ruby>動<rt>うご</rt></ruby>きや機能（きのう）を作ります。</li> |
186 | 186 | </ul> |
187 | | -<p>HTMLはWebページの<ruby>土台<rt>どだい</rt></ruby>です。HTMLの<ruby>骨組<rt>ほねぐ</rt></ruby>みが正（ただ）しくないと、あとからJavaScriptを使っても、うまく<ruby>動<rt>うご</rt></ruby>きません。まずは、ページの<ruby>見<rt>み</rt></ruby>えない部分（ぶぶん）である「<ruby>設定<rt>せってい</rt></ruby>」から理解（りかい）しましょう。</p> |
188 | | -<h2 id="ii-htmlのメタ情報じょうほうwebページの設定せっていを理解する"><a class="header" href="#ii-htmlのメタ情報じょうほうwebページの設定せっていを理解する">II. HTMLのメタ情報（じょうほう）：Webページの「<ruby>設定<rt>せってい</rt></ruby>」を理解する</a></h2> |
189 | | -<p>Webページには、ユーザーには見えませんが、ブラウザや<ruby>検索<rt>けんさく</rt></ruby>（けんさく）エンジンにとって<ruby>大切<rt>たいせつ</rt></ruby>な情報があります。これを「メタ情報（じょうほう）」と呼（よ）び、<code><head></code>タグの中（なか）に書きます。</p> |
| 187 | +<p>HTMLはウェブページの<ruby>土台<rt>どだい</rt></ruby>です。HTMLの<ruby>骨組<rt>ほねぐ</rt></ruby>みが正（ただ）しくないと、あとからJavaScriptを使っても、うまく<ruby>動<rt>うご</rt></ruby>きません。まずは、ページの<ruby>見<rt>み</rt></ruby>えない部分（ぶぶん）である「<ruby>設定<rt>せってい</rt></ruby>」から理解（りかい）しましょう。</p> |
| 188 | +<h2 id="ii-htmlのメタ情報じょうほうウェブページの設定せっていを理解する"><a class="header" href="#ii-htmlのメタ情報じょうほうウェブページの設定せっていを理解する">II. HTMLのメタ情報（じょうほう）：ウェブページの「<ruby>設定<rt>せってい</rt></ruby>」を理解する</a></h2> |
| 189 | +<p>ウェブページには、ユーザーには見えませんが、ブラウザや<ruby>検索<rt>けんさく</rt></ruby>（けんさく）エンジンにとって<ruby>大切<rt>たいせつ</rt></ruby>な情報があります。これを「メタ情報（じょうほう）」と呼（よ）び、<code><head></code>タグの中（なか）に書きます。</p> |
190 | 190 | <ul> |
191 | 191 | <li><code><title></code>タグ： ブラウザのタブに<ruby>表示<rt>ひょうじ</rt></ruby>される名前（なまえ）です。そのページの内容（ないよう）を伝（つた）えます。</li> |
192 | 192 | <li>文字（もじ）コードの<ruby>設定<rt>せってい</rt></ruby>： 日本語などが正しく<ruby>表示<rt>ひょうじ</rt></ruby>されるようにするための<ruby>設定<rt>せってい</rt></ruby>です。</li> |
193 | 193 | </ul> |
194 | 194 | <p>もし、文字コードの<ruby>設定<rt>せってい</rt></ruby>が正しくないと、文字が「読（よ）めない記号（きごう）」になってしまいます。これを「文字化（もじば）け」と言（い）います。<ruby>設定<rt>せってい</rt></ruby>が終わったら、次は実際（じっさい）に<ruby>画面<rt>がめん</rt></ruby>で<ruby>見<rt>み</rt></ruby>えるコンテンツを作（つく）りましょう。</p> |
195 | 195 | <h2 id="iii-いろいろなhtmlタグ情報じょうほうの意味いみを決める"><a class="header" href="#iii-いろいろなhtmlタグ情報じょうほうの意味いみを決める">III. いろいろなHTMLタグ：情報（じょうほう）の意味（いみ）を決める</a></h2> |
196 | | -<p>Webページをつくるための「HTMLタグ」と「特殊（とくしゅ）記号」について、やさしい日本語で説明します。</p> |
| 196 | +<p>ウェブページをつくるための「HTMLタグ」と「特殊（とくしゅ）記号」について、やさしい日本語で説明します。</p> |
197 | 197 | <h3 id="htmlタグとは"><a class="header" href="#htmlタグとは">HTMLタグとは？</a></h3> |
198 | | -<p>HTMLは、Webページの <strong>「<ruby>骨組<rt>ほねぐ</rt></ruby>み」</strong> をつくるための言葉です。 |
| 198 | +<p>HTMLは、ウェブページの <strong>「<ruby>骨組<rt>ほねぐ</rt></ruby>み」</strong> をつくるための言葉です。 |
199 | 199 | タグは、<code><</code> と <code>></code> で名前を囲（かこ）んで書きます。たいていの場合、始まりのタグ（<ruby>例<rt>れい</rt></ruby>：<code><p></code>）と終わりのタグ（<ruby>例<rt>れい</rt></ruby>：<code></p></code>）で文字をはさみます。タグはタグで囲まれた部分が、HTMLの中でどのような仕事をしているかを示します。</p> |
200 | 200 | <h4 id="1-見出しheading-h1--h6"><a class="header" href="#1-見出しheading-h1--h6">1. 見出し（Heading）: <code><h1></code> 〜 <code><h6></code></a></h4> |
201 | 201 | <p>ページのタイトルや、中身の「見出し」に使います。</p> |
@@ -329,7 +329,7 @@ <h3 id="特殊記号とくしゅきごう"><a class="header" href="#特殊記号 |
329 | 329 | </tbody> |
330 | 330 | </table> |
331 | 331 | </div> |
332 | | -<p>これらを使わないと、ブラウザが「これはタグかな？それとも文字かな？」と迷（まよ）ってしまい、Webページが正しく<ruby>表示<rt>ひょうじ</rt></ruby>されないことがあります。</p> |
| 332 | +<p>これらを使わないと、ブラウザが「これはタグかな？それとも文字かな？」と迷（まよ）ってしまい、ウェブページが正しく<ruby>表示<rt>ひょうじ</rt></ruby>されないことがあります。</p> |
333 | 333 | <hr> |
334 | 334 | <p><strong>アドバイス:</strong> |
335 | 335 | HTMLで構造をつくり、CSSで「<ruby>見<rt>み</rt></ruby>た<ruby>目<rt>め</rt></ruby>（色やサイズ）」を整（ととの）え、JavaScriptで「<ruby>動<rt>うご</rt></ruby>き」をつけます。まずはこのHTMLタグをしっかり覚（おぼ）えましょう！</p> |
@@ -458,7 +458,7 @@ <h2 id="6-まとめ"><a class="header" href="#6-まとめ">6. まとめ</a></h2> |
458 | 458 | <p>プログラミングの学習は、<ruby>一歩<rt>いっぽ</rt></ruby>ずつ進めば大丈夫です。</p> |
459 | 459 | <p><strong>HTML基礎のまとめ</strong></p> |
460 | 460 | <ul> |
461 | | -<li>HTMLはWebページの「<ruby>骨組<rt>ほねぐ</rt></ruby>み」です。</li> |
| 461 | +<li>HTMLはウェブページの「<ruby>骨組<rt>ほねぐ</rt></ruby>み」です。</li> |
462 | 462 | <li><code><head></code>タグの中にある<ruby>設定<rt>せってい</rt></ruby>が正しくないと、文字化（もじば）けが起（お）きます。</li> |
463 | 463 | <li>idは「1つだけ」、classは「グループ」のための目印（めじるし）です。</li> |
464 | 464 | <li>テーブルは、<code><table></code>の中に<code><tr></code>、その中に<code><th></code>や<code><td></code>を書く<ruby>構造<rt>こうぞう</rt></ruby>です。</li> |
@@ -501,22 +501,6 @@ <h2 id="6-まとめ"><a class="header" href="#6-まとめ">6. まとめ</a></h2> |
501 | 501 | <template id=fa-play><span class=fa-svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg></span></template> |
502 | 502 | <template id=fa-clock-rotate-left><span class=fa-svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M75 75L41 41C25.9 25.9 0 36.6 0 57.9V168c0 13.3 10.7 24 24 24H134.1c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24V256c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65V152c0-13.3-10.7-24-24-24z"/></svg></span></template> |
503 | 503 |
|
504 | | - <!-- Livereload script (if served using the cli tool) --> |
505 | | - <script> |
506 | | - const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:'; |
507 | | - const wsAddress = wsProtocol + "//" + location.host + "/" + "__livereload"; |
508 | | - const socket = new WebSocket(wsAddress); |
509 | | - socket.onmessage = function (event) { |
510 | | - if (event.data === "reload") { |
511 | | - socket.close(); |
512 | | - location.reload(); |
513 | | - } |
514 | | - }; |
515 | | - |
516 | | - window.onbeforeunload = function() { |
517 | | - socket.close(); |
518 | | - } |
519 | | - </script> |
520 | 504 |
|
521 | 505 |
|
522 | 506 | <script> |
|
0 commit comments