Revision 1104359 of Webを学ぶ

<div>
<p class="summary">MDN Learning Areaへようこそ。WebサイトやWebアプリケーションを自分の手で作ってみたいですか？このページはあなたの役に立つでしょう。</p>
</div>

<p>WebデザインやWeb開発を行うにはたくさんのことを学ばなければなりません。でも、心配はいりません。あなたがコードを書き始めたばかりの初心者でも、あるいは一人前のプロの開発者でも、このページはきっとあなたの役に立ちますよ。</p>

<div class="warning">
<p><strong>Important</strong>: The content in Learning Area is at an early stage, with more being added regularly. If you have questions regarding topics you'd like to see covered or feel are missing, see the {{anch("Contact us")}} section below for information on how to get in touch.</p>
</div>

<h2 id="レベル別ガイド">レベル別ガイド</h2>

<ul class="card-grid">
 <li><span>私はまだ初心者です。</span>はじめまして！Web開発を始めるなら、<a href="/ja/docs/Learn/Getting_started_with_the_web">"Web入門"</a>&nbsp;を読むのが一番です。これを読めば、Web開発を始めるのに必要な基本的な知識はすべて見つかるでしょう。</li>
 <li><span>Specific questions:</span> If you have a specific question about web development, our <a href="/ja/docs/Learn/Common_questions">Common questions</a> section may have something to help you.</li>
 <li><span>中級者: 私はWebについてある程度は知っています。</span>良いですね！Web技術の真髄までもっと深く学ぶには、<a href="/ja/docs/Learn/HTML">HTML</a>、<a href="/ja/docs/Learn/CSS">CSS</a>、<a href="/ja/docs/Learn/JavaScript">JavaScript</a>についてさらに学ぶと良いでしょう。</li>
 <li><span>上級者: 私はWebをマスターしました。</span>素晴らしいですね！あなたは発展的な<a href="/ja/docs/Web/Guide">ガイド</a>や<a href="/ja/docs/Web/Tutorials">チュートリアル</a>を読んでみると良いかもしれません。また、<a href="/ja/docs/Learn/How_to_contribute">学んだ分野について貢献</a>していただけると嬉しいです。;)</li>
</ul>

<div class="note">
<p><strong>注記</strong>: Our <a href="/ja/docs/Glossary">用語集</a> provides terminology definitions.</p>
</div>

<div class="note">
<p><strong>注意:</strong> 将来的に私たちはより多くの学習コースを提案したいと考えています。例えば、経験豊かなコーダーが特殊で発展的な技術を学ぶコースや、ネイティブアプリの開発者でWebについては初心者のためのコース、Webデザインを学びたい人向けのコースなどです。</p>
</div>

<p>{{LearnBox({"title":"Random glossary entry"})}}</p>

<h2 id="Contact_us">Contact us</h2>

<p>学習のエリアは、すべて他の貢献者たちによって作り上げられています。あなたが初心者でも、先生でも、熟練のWebデベロッパーであっても、私たちにはあなたが必要です。もし少しでも興味があれば、<a href="/ja/docs/Learn/How_to_contribute">協力するには？</a>をのぞいてみてください。<a href="/ja/docs/MDN/Community#Join_our_mailing_lists">メーリングリスト</a>や<a href="/ja/docs/MDN/Community#Get_into_IRC">IRC チャンネル</a>でのお話するのも大歓迎です。</p>

<p>If you're interested in helping develop/improve the content, take a look at <a href="/en-US/Learn/How_to_contribute">how you can help</a>, and get in touch! We are more than happy to talk to you, whether you are a learner, teacher, experienced web developer, or someone else interested in helping to improve the learning experience.</p>

<p>{{CommunityBox("Learn", "dev-mdc", "mozilla.dev.mdc", "mdn")}}</p>

<h2 id="See_also">関連情報</h2>

<dl>
 <dt><a href="https://www.codecademy.com/">Codecademy</a></dt>
 <dd>A great interactive site for learning programming languages from scratch.</dd>
 <dt><a href="https://code.org/">Code.org</a></dt>
 <dd>Basic coding theory and practice, mainly aimed at children/complete beginners.</dd>
 <dt><a href="https://teach.mozilla.org/web-literacy/">Web Literacy Map</a></dt>
 <dd>A framework for entry-level web literacy &amp; 21st Century skills, which also provides access to teaching activities sorted by category.</dd>
 <dt><a href="https://teach.mozilla.org/activities">Teaching activities</a></dt>
 <dd>A series of teaching activities for teaching (and learning) created by the Mozilla Foundation, covering everything from basic web literacy and privacy to JavaScript and hacking Minecraft.</dd>
</dl>

<h2 id="目次">目次</h2>

<ol>
 <li><a href="/ja/docs/Learn/Getting_started_with_the_web">Web 入門</a></li>
 <li><a href="/ja/docs/Learn/HTML">HTML — structuring the Web</a>
  <ol>
   <li><strong><a href="https://developer.mozilla.org/ja/docs/Learn/docs/HTML">HTML overview</a></strong></li>
   <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>
    <ol>
     <li><strong><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML overview</a></strong></li>
     <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
     <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
     <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
     <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
     <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
     <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
     <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
     <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Assessment: Marking up a letter</a></li>
     <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Assessment: Structuring a page of content</a></li>
    </ol>
   </li>
   <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a>
    <ol>
     <li><strong><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding overview</a></strong></li>
     <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
     <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
     <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From object to iframe — other embedding technologies</a></li>
     <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
     <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
     <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Assessment: Mozilla splash page</a></li>
    </ol>
   </li>
  </ol>
 </li>
 <li><a href="/ja/docs/Learn/CSS">CSS — styling the Web</a>
  <ol>
   <li><strong><a href="/ja/docs/Learn/CSS">CSS overview</a></strong></li>
   <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>
    <ol>
     <li><strong><a href="/ja/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS overview</a></strong></li>
     <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">How CSS works</a></li>
     <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Syntax">CSS syntax</a></li>
     <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors">Selectors</a></li>
     <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS values and units</a></li>
     <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">Cascade and inheritance</a></li>
     <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model">The box model</a></li>
     <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a></li>
     <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Assessment: Fundamental CSS comprehension</a></li>
    </ol>
   </li>
   <li><a href="/ja/docs/Learn/CSS/Styling_text">Styling text</a>
    <ol>
     <li><strong><a href="/ja/docs/Learn/CSS/Styling_text">Styling text overview </a></strong></li>
     <li><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li>
     <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></li>
     <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></li>
     <li><a href="/ja/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></li>
     <li><a href="/ja/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Assessment: Typesetting a community school homepage</a></li>
    </ol>
   </li>
   <li><a href="/ja/docs/Learn/CSS/Styling_boxes">Styling boxes</a>
    <ol>
     <li><strong><a href="/ja/docs/Learn/CSS/Styling_boxes">Styling boxes overview</a></strong></li>
     <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Box_model_recap">Box model recap</a></li>
     <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Backgrounds">Backgrounds</a></li>
     <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Borders">Borders</a></li>
     <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Styling_tables">Styling tables</a></li>
     <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">Advanced box effects</a></li>
     <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Assessment: Creating fancy letterheaded paper</a></li>
     <li><a href="/ja/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">Assessment: A cool looking box</a></li>
    </ol>
   </li>
   <li><a href="/ja/docs/Learn/CSS/CSS_layout">CSS layout</a>
    <ol>
     <li><strong><a href="/ja/docs/Learn/CSS/CSS_layout">CSS layout overview</a></strong></li>
     <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
     <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
     <li><a href="/ja/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></li>
     <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
    </ol>
   </li>
  </ol>
 </li>
 <li><a href="/ja/docs/Learn/JavaScript">JavaScript — dynamic web scripting</a>
  <ol>
   <li><strong><a href="/ja/docs/Learn/JavaScript">JavaScript overview</a></strong></li>
   <li><a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>
    <ol>
     <li><strong><a href="/ja/docs/Learn/JavaScript/First_steps">First steps overview</a></strong></li>
     <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
     <li><a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
     <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
     <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — variables</a></li>
     <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
     <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
     <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
     <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
     <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
    </ol>
   </li>
   <li><a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a>
    <ol>
     <li><strong><a href="/ja/docs/Learn/JavaScript/Building_blocks">Building blocks overview</a></strong></li>
     <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
     <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
    </ol>
   </li>
  </ol>
 </li>
 <li><a href="/ja/docs/Learn/Other_learning_material">Advanced learning material</a>
  <ol>
   <li><a href="/ja/docs/Learn/WebGL">WebGL — graphics processing</a></li>
  </ol>
 </li>
 <li><a href="/ja/docs/Learn/Common_questions">Common questions</a>
  <ol>
   <li><a href="/ja/docs/Learn/HTML/Howto">HTML questions</a></li>
   <li><a href="/ja/docs/Learn/CSS/Howto">CSS questions</a></li>
   <li><a href="/ja/docs/Learn/Common_questions#How_the_Web_works">How the Web works</a></li>
   <li><a href="/ja/docs/Learn/Common_questions#Tools_and_setup">Tools and setup</a></li>
   <li><a href="https://developer.mozilla.org/ja/docs/Learn/Common_questions#Design_and_accessibility">Design and accessibility</a></li>
  </ol>
 </li>
 <li><a href="/ja/docs/Learn/How_to_contribute">How to contribute</a></li>
</ol>