インデックス

173 ページあります:

# ページ タグと要約
1 Web 開発を学ぶ Intro, Landing, Web, 初心者, 学習, 索引
MDN のこのエリアのねらいは、あなたを「初心者」から「達人」に変えることではなく、「初心者」から「それなり」に変えることです。ウェブ開発において自分なりの方法を確立するためには、さらに、MDN のこのエリア以外の記事と他の中・上級者用のウェブサイトを読み進めなければなりません。しかしその前に、このエリアで沢山の前提知識を身に付けておく必要があります。
2 CSS Beginner, CSS, CodingScripting, Debugging, Landing, NeedsContent, Topic, length, specificity
Cascading Stylesheets — CSS — は、HTML の次に学習を始めるべき第 1 の技術です。HTML は、コンテンツの構造とセマンティクス決定するのに使用されるのに対し、CSS は、スタイルとレイアウトのために使用されます。例えば、コンテンツのフォント、色、サイズ、余白を変更したり、複数の列に分割したり、アニメーションやその他の装飾機能を追加するのに CSS は使用できます。
3 CSS layout
これまでの内容で、テキストを装飾する方法、コンテンツを格納するボックスを装飾・操作する方法といったCSSの基礎を見てきました。ここからは、ビューポートに対して正しい位置にボックスを配置する方法等を見ていきます。必要な前提知識は既にカバーしてきたので、CSSレイアウトに潜入してみることが可能です。様々な表示設定や、フレックスボックス・CSSグリッド・ポジショニングなど今風のレイアウトツール、既存の技術で今も関心を集めているものを見てみましょう。
4 CSS を使ってよくある問題を解決する Beginner, CSS, Learn
以下のリンクは CSS で解決できるよくある問題の解決法です。
5 CSS 入門 Beginner, CSS, Cascade, CodingScripting, Inheritance, Introduction to CSS, Landing, Module, Selectors, color, properties, rules, units, セレクター, プロパティ, 継承, 規則
CSS は、ウェブページのスタイルとレイアウトに使用されます — 例えば、コンテンツのフォント、色、サイズ、空白や複数カラムへの分割やアニメーションの追加、他の装飾機能の追加などがあります。このモジュールで、CSS 習得の道のりを開始できます。セレクターとプロパティ、CSS の記述ルール、CSS を HTML に適用する方法、CSS で長さや色やその他の単位を指定する方法、カスケードと継承、CSS のデバッグを含む動作の基本があります。
6 CSS の値と単位 CSS, CSS の単位, CSS カラー, CodingScripting, HTML のスタイリング, HTML のスタイル, HTML の色, ガイド, 初心者, 単位, 色, 記事, 長さ, 関数
数値から色、特定のアクションを実行する関数 (背景画像の埋め込み、要素の回転など) まで、考慮する CSS プロパティの値にはさまざまな種類があります。これらの一部は、表している正確な値を指定するために特定の単位に依存します。つまり、あなたの Box の幅を30 px、それとも30 cm、それとも30 em にしたいかということです。このガイドでは長さ、色、単純な関数などのより一般的な値に加え、度などの一般的でない単位、さらには単位なしの数値についても調べます。
7 CSS の働き CSS, CodingScripting, DOM, Guide, Syntax, external, internal, リンク
CSS (Cascading Style Sheets) を利用すると、すばらしい外見のウェブページを作成できますが、その裏側ではどのように動作しているのでしょう?この記事は、CSS とは何か、ウェブブラウザーが HTML を Document Object Model (DOM) に切り替える方法、CSS が DOM のパーツに適用される方法、とても基本的な文法例、実際に CSS をウェブページ内に含める方法を説明します。
8 CSS の構文 Beginner, CSS, CodingScripting, コメント, セレクター, ホワイトスペース, 一括指定, 初心者, 宣言, 構文, 規則
次に、CSS の構文について詳しく説明します。プロパティとそれらの値からどのように宣言 (Declaration) を作るか、複数の宣言からどのように宣言ブロック (Declaration blocks) を作るか、そして宣言ブロックとセレクターからどのように CSS 規則を完成するかを学びます。また補足として、コメントや空白などの他の CSS 構文の機能についても学びます。
9 カスケードと継承 Beginner, CSS, CodingScripting, カスケード, ガイド, スタイル, スタイルシート, ソース上の順序, レイアウト, 厳密度, 学習, 継承, 記事, 重要度
この記事では、 CSS のカスケードとは何か、厳密度とは何か、重要度とは何か、複数の規則からどのようにプロパティが継承されるかを定義します。
10 コンビネーターとセレクタリスト CSS, ガイド, セレクタ, 初心者, 学習, 記事
セレクタに関する最後の記事では、コンビネーターとセレクタのグループについて詳しく説明します。複数のセレクタを組み合わせてさらに有用な選択機能を得る2つの方法です。
11 セレクター Article, Beginner, CSS, Class, Guide, Learn, combinator, id, universal, セレクター, 疑似クラス, 疑似要素, 要素
CSS では、セレクターはスタイルを適用したいウェブページ上の HTML 要素を指定するのに使用されます。 CSS セレクターは幅広い種類があり、スタイルを適用する要素を選択するとき、きめ細かく指定できます。以下のいくつかの記事で、とても詳しく複数の種類を見ていきます。
12 ボックスモデル 記事
CSS ボックスモデルは Web 上のレイアウトの基盤です。各要素は長方形のボックスとして表され、ボックスの内容、余白、境界線、余白は玉ねぎの層のように互いに重なっています。 ブラウザが Web ページのレイアウトをレンダリングするときに、各ボックスのコンテンツに適用されるスタイル、周囲のタマネギ層の大きさ、およびボックス同士の位置関係がわかります。CSS レイアウトを作成する方法を理解する前に、ボックスモデルを理解する必要があります - これがこの記事で見ることになるものです。
13 単純セレクター Article, Beginner, CSS, Class, Guide, Learn, Type, id, universal, ガイド, クラス, セレクター, ユニバーサル, 型, 学習, 要素, 記事
セレクターについての最初の記事であるこの記事では、「単純」セレクターについて学びます。これは要素の型や classid に基づいて、文書中の1つまたは複数の要素を直接選択するものです。
14 属性セレクター Article, Attribute, Attribute selectors, Beginner, CSS, Guide, Learn, Selectors
属性セレクターは要素の属性およびその値に基づいてマッチする特殊なセレクターです。その一般的な文法は、属性の名前と、その値にマッチするオプションの条件を囲む角括弧 ([]) で構成されます。属性セレクターは属性の値にマッチする方法によって、2 つのカテゴリーに分けられます。存在および完全一致属性セレクターと部分一致属性セレクターです。
15 擬似クラスと擬似要素 CSS, ガイド, セレクタ, 初心者, 学習, 擬似, 擬似クラス, 擬似要素, 記事
ここでは、セレクタに関する一連の記事の3番目で、擬似セレクタについて説明します。これらは要素を選択するのではなく、むしろ要素の特定の部分、または特定のコンテキストにおける要素のみを選択します。それらは主に擬似クラス擬似要素という2つのタイプに分けられます。
16 テキストのスタイリング Beginner, CSS, CodingScripting, Fonts, Landing, Links, Module, Text, font, letter, line, lists, shadow, web fonts
CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストのスタイリングです — これは、CSS で行う最も一般的なことの一つです。ここでは、フォント、太字、イタリック体、線、文字間隔、影、その他のテキストの機能の設定を含むテキストスタイリングの基礎を確認します。あなたのページにカスタムフォントを適用し、リストとリンクにスタイルを適用することでこのモジュールを締めくくります。
17 ウェブフォント @font-face, Article, Beginner, CSS, CSS Fonts, Fonts, Guide, Learn, Web Development, Web Fonts Article, Web fonts documentation, font-family, web fonts
In the first article of the module, we explored the basic CSS features available for styling fonts and text. In this article we will go further, exploring web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.
18 基本的なテキストとフォントのスタイル
この記事では CSS を使用してテキストのスタイルを習得する方法について説明します。
19 ボックスの装飾 Beginner, Boxes, CSS, CodingScripting, Landing, Module, Tables, backgrounds, borders, effects
以前のモジュールではボックス内のコンテンツについて見てきました。このモジュールでは、ボックス自体の背景色や背景画像、境界線、その他の装飾について見ていきます。また、 <table> 要素の装飾や、filter や <blend-mode> などの応用的なエフェクトについても触れていきます。
20 HTML の学習: ガイドとチュートリアル Beginner, Guide, HTML, Intro, Learn, Topic, ガイド, トピック, 初心者, 学習, 導入
ウェブサイトを構築するためには、ウェブページの構造を定義するための基本的な技術である HTML 言語を知っておくべきでしょう。 HTML はウェブコンテンツをどのよう解釈するべきかを特定するために使用します。段落、リスト、見出し、リンク、画像、マルチメディアプレーヤー、フォーム、又は他の数多くの要素の一つ、又はユーザーが定義した新しい要素などです。
21 HTML テーブル Article, Beginner, CodingScripting, Guide, HTML, Landing, Module, Tables
HTML でのとてもよくある仕事はテーブルデータの構造化で、数々の要素と属性がこの目的のためにあります。スタイリング用の CSS と組み合わせて、HTML はウェブ上に、学校の授業の計画や、水泳の時間割や、好きな恐竜やフットボールチームの統計情報といった、情報のテーブルを簡単に表示できます。このモジュールではHTMLを使ってテーブルデータを構造化するのに必要な知識を一通り案内します。
22 HTML の表の基本
That just about wraps up the basics of HTML Tables. In the next article we will look at some slightly more advanced table features, and start to think how accessible they are for visually impaired people.
23 HTML 表の高度な機能とアクセシビリティ
There are a few other things you could learn about table HTML, but we have really given all you need to know at this moment in time. At this point, you might want to go and learn about styling HTML tables — see Styling Tables.
24 評価: 太陽系の惑星のデータを構造化する
HTMLのtableの復習として、太陽系の惑星に関するいくつかのデータを提供するので、HTMLの表として構造化してもらいます。
25 HTML フォームガイド Beginner, Featured, Forms, Guide, HTML, Landing, Learn, Web
このモジュールは、HTML フォームの習得に役立つ記事をそろえています。 HTML フォームは、ユーザーとやり取りするための強力なツールです。しかし歴史的および技術的な理由により、その能力を十分に生かして使用する方法は、必ずしも明確ではありません。このガイドで HTML フォームの構造からスタイル、データの扱いからカスタムウィジェットまでのあらゆる側面を網羅します。
26 HTML フォームの構築方法 Beginner, CodingScripting, Example, Forms, Guide, HTML, Learn, Structure, Web
基本から外れて、ここでは色々なフォームのパーツを構造化し、意味をつけるのに使われる要素を詳しく見ていきます。
27 Example
これは記事 HTML フォームの構築方法の基本的な支払いフォームの例です。
28 HTML フォームへのスタイル設定 CSS, Example, Forms, Guide, HTML, Intermediate, Web
本記事では、HTML フォームを (できれば) より美しくするために CSS を使用する方法を学びます。意外にも、これは少しコツがいります。歴史的や技術的な理由により、フォームウィジェットは CSS とうまくかみ合いません。このような難しさから、多くの開発者はウィジェットのルックアンドフィールをコントロールできるようにするために、独自の HTML ウィジェットを作成することを選択します。しかし現代のブラウザでは、Web デザイナーがフォーム要素のデザインをより多くコントロールできます。詳しく見ていきましょう。
29 HTML フォームへの高度なスタイル設定 Advanced, CSS, Forms, HTML, Web, ガイド, 例
本記事では、HTML フォームでカスタマイズが難しい一部のウィジェットで CSS を使用する方法を見ていきます。前の記事で見たように、テキストフィールドやボタンでの CSS 使用はまったく問題がありません。ここからは、HTML フォームへのスタイル設定の闇の部分を見ていきます。
30 JavaScript によるフォームの送信 Advanced, Example, Forms, Guide, HTML, JavaScript, Web
以前の記事で示したとおり、HTML フォームは HTTP リクエストを宣言的な方法で設定するのに便利です。しかし多くの場合、フォームは JavaScript を使用した HTTP リクエストの設定でも有用になり得ます。これを扱う方法はいくつかありますので、本記事で説明します。
31 カスタムウィジェットの作成方法 Advanced, Example, Forms, Guide, HTML, Web
HTML フォームで使用可能なウィジェットだけでは十分でない場合が多くあります。<select> 要素のようなウィジェットに高度なスタイル設定を行いたい場合や、独自の動作を提供したい場合は、あなた自身のウィジェットを作成するしかありません。
32 例 1
This is the first example of code that explains how to build a custom form widget.
33 ネイティブフォームウィジェット Example, Forms, Guide, HTML, Intermediate, Web
ここでは色々なウィジェットを詳しく見ていきます。色々なデータ型を集めるのにどんなオプションが使うるのかを見ていきます。このガイドはいくらか疲れるもので、利用できるネイティブフォームウィジェットをすべて網羅しています。
34 フォームウィジェット向けプロパティ実装状況一覧 Advanced, CSS, Forms, Guide, HTML, NeedsUpdate, Web, ウェブ, ガイド, フォーム, 高度
以下の実装状況一覧表で、 HTML フォーム向けの CSS の対応状況を要約しています。 HTML フォームや CSS の複雑さにより、これらの表は完全なリファレンスであるとはいえません。それでも、何ができて何ができないかの見識を得られるでしょう。また、どうすればよいかを知る助けにもなるでしょう。
35 フォームデータの検証 HTML, Intermediate, JavaScript, Web, ウェブ, ガイド, フォーム, フォーム検証, 中級者向け, 例
フォーム検証validationは、送信されたデータがアプリケーションで正しく動作するかを確認することで、ユーザーに正しい書式でフォームを埋めてもらうのに役立ちます。この記事では、フォーム検証について知っておくべきことを紹介します。
36 フォームデータの送信 Beginner, CodingScripting, Guide, HTML, HTTP, Web, セキュリティ, ファイル, フォーム
この記事は、ユーザーがフォームを送信したときに何が起こるかを見ます。 ― データがどこへ行くのか、そこに来たときにどう扱うのか。また、フォームデータの送信に関連するセキュリティの考慮事項のいくつかも見てみます。
37 初めての HTML フォーム Beginner, CodingScripting, Example, Forms, Guide, HTML, Learn, Web, ウェブ, ガイド, フォーム, 初心者向け, 学習
おめでとうございます! 初めての HTML フォームが完成しました。こちらが最終結果のデモです。
38 CodingScripting, HTML, Web, ガイド, フォーム, 例, 初心者, 学習
これは最初の HTML フォームの記事のサンプルコードです。
39 古いブラウザでの HTML フォーム Example, Forms, Guide, HTML, Intermediate, Web
すべての Web 開発者が、Web はとてもつらい場所であることをいち早く (時には痛いほど) 知ります。もっともいまいましいのは、古いブラウザーです。まあそれは受け入れて、"古いブラウザー" というときは古いバージョンの Internet Explorer を念頭に置きます... しかし、それだけではありません。ESR バージョンのような、1 年経過した Firefox も古いブラウザーです。また、モバイルでは? ブラウザーも OS も更新できないのではないでしょうか? そうです、最新ではないブラウザを備えている、多くの古い Android フォンや iPhone があります。これらもまた、古いブラウザです。
40 HTML入門 CodingScripting, HTML, Introduction to HTML, Landing, Links, Structure, Text, head, semantics
本来、HTML は、要素で構成される極めてシンプルな言語です。HTMLは、テキストの断片に、文書における他とは異なる意味 (段落なのか?箇条書きなのか?表の一部なのか?) を与え、文書を論理的なセクションに構成し (ヘッダを持つのか?コンテンツを3段組にするのか?ナビゲーションメニューを持つのか?) 、ページに画像や動画のようなコンテンツを貼り付けるために使うことができます。このモジュールでは、これらのうち最初の2つについて紹介し、HTMLを理解する上で知る必要がある基本的な概念や文法について紹介します。
41 HTML テキストの基礎 Beginner, CodingScripting, Guide, HTML, Introduction to HTML, Learn, Text, headings, paragraphs, semantics
That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to create hyperlinks, possibly the most important element on the Web.
42 HTMLのデバッグ CodingScripting, HTML, エラー, ガイド, デバッグ, バリデーション, バリデーター, ビギナー
HTMLを書くことは良いですが、何か問題が生じた場合どうなります?また、コード内のどこにエラーがあるか見つけられますか?この記事では、HTML内のエラーの発見、および修正の手助けをしてくれるいくつかのツールを紹介します。
43 HTMLを始めよう Attribute, Beginner, CodingScripting, Comment, Element, Guide, HTML, entity reference, whitespace
この記事の最後にたどり着きました — HTML のほんの初歩のツアーを楽しんでこられたことを望んでいます!ここではこの言語がどのようなものか、基本的にどうやって動作するのかを理解し、いくつかの要素と属性を書くことができるようになったでしょう。あなたがいる場所は完璧な場所です、続きの記事ではすでに見てきたことをもっと詳細に経験して、いくつか新しい言語機能を紹介します。引き続き注目!
44 head には何が入る? HTML のメタデータ Beginner, CodingScripting, Guide, HTML, Meta, favicon, head, lang, metadata
これで、HTMLヘッドの弾丸ツアーは終了しました。ここでできることは他にもたくさんありますが、この段階では徹底的なツアーでは退屈で混乱を招くことになるでしょう。あなたは今そこにいるでしょう! 次回の記事では、HTML テキストの基礎について説明します。
45 ドキュメントとウェブサイトの構造 Beginner, CodingScripting, Guide, HTML, Layout, Page, Site, blocks, semantics
At this point you should have a better idea about how to structure a web page/site. In the last article of this module, we'll study how to debug HTML.
46 ハイパーリンクの作成 Beginner, CodingScripting, Guide, HTML, Learn, Links, Title, absolute, hyperlinks, relative, urls
That's it for links, for now anyway! You'll return to links later on in the course when you start to look at styling them. Next up for HTML, we'll return to text semantics and look at some more advanced/unusual features that you'll find useful — Advanced text formatting is your next stop.
47 高度なテキスト処理 Beginner, CodingScripting, Guide, HTML, Learn, Text, abbreviation, description list, quote, semantic
That marks the end of our study of HTML text semantics. Bear in mind that what you have seen during this course is not an exhaustive list of HTML text elements — we wanted to try to cover the essentials, and some of the more common ones you will see in the wild, or at least might find interesting. To find way more HTML elements, you can take a look at our HTML element reference (the Inline text semantics section would be a great place to start.) In the next article we will look at the HTML elements you'd use to structure the different parts of an HTML document.
48 マルチメディアとその埋め込み方 Assessment, Audio, Beginner, CodingScripting, Flash, Guide, HTML, Images, Landing, Learn, SVG, Video, iframes, imagemaps, responsive, イメージマップ, ガイド, フラッシュ, レスポンシブ, 初心者, 動画, 学習, 画像, 着地ページ, 評価試験, 音声
このコースではここまで多くのテキストを見てきましたが、ただテキストだけのウェブでは面白くありません。 ウェブが生き生きとして、面白いコンテンツがどんどんあふれるようにする方法を見ていきましょう! このモジュールでは、HTMLをどのように用いれば、あなたのウェブページにマルチメディアを含めることができるかについて学びます。 また、画像を挿入するためのさまざまな方法や、動画・音声、さらには他のウェブページ全体を挿入する方法についても触れます。
49 HTMLの画像 Beginner, Guide, HTML, Image, alt text, captions, figcaption, figure, img, ガイド, キャプション, 代替テキスト, 初心者, 図表, 画像, 記事
最初は、ウェブは単なるテキストに過ぎず、とても退屈でした。 幸運なことに、ウェブページ内に画像(および他のより興味深いタイプのコンテンツ)を埋め込む能力が追加されるまでにはあまり時間がかかりませんでした。 考慮すべき他のタイプのマルチメディアもありますが、単純な画像をウェブページに埋め込むために使用される、慎ましい <img> 要素から始めるのが理にかなっています。 この記事では、基本的な使い方を含め、 <figure> を使ったキャプションの注釈付け、 CSS 背景画像との関連付けなど、詳細な使い方を見ていきます。
50 Mozillaのスプラッシュページ Assessment, Beginner, CodingScripting, Embedding, HTML, Multimedia, Video, iframe, picture, responsive, sizes, srcset, マルチメディア, レスポンシブ, 初心者, 動画, 埋め込み, 評価試験
今回の評価試験では、このモジュールの記事で説明したいくつかの技術の知識をテストするために、Mozilla のすべてついてのファンキーなスプラッシュページに、いくつかの画像と動画を追加してもらいます!
51 object から iframe へ — その他の埋め込み技術 Article, Beginner, CodingScripting, Embedding, Flash, Guide, HTML, Learn, Multimedia and embedding, Object, embed, iframe, ガイド, フラッシュ, マルチメディアと埋め込み, 初心者, 埋め込み, 学習, 記事
ウェブドキュメントに他のコンテンツを埋め込むという話題は、すぐに非常に複雑になる可能性があるので、関連する技術のより高度な機能のいくつかを示唆しながらも、すぐに関連すると思われる単純で使い慣れた方法で紹介しようとしました。 まず、あなたのページに地図や動画などの第三者のコンテンツを含めること以外に埋め込みを使用する可能性は低いです。 しかし、経験が増すにつれて、より多くの用途を見つけることになるでしょう。
52 ウェブにベクターグラフィックスを追加する Beginner, Graphics, Guide, HTML, Images, Learn, Raster, SVG, Vector, iframe, img, ガイド, グラフィックス, ベクター, ラスター, 初心者, 学習, 画像
この記事では、ベクターグラフィックスと SVG の概要、それらをなぜ知っておくと便利なのか、そして SVG をウェブページに組み込む方法について簡単に説明しました。 SVG を学ぶ上での完全なガイドとなることは決して考えられていませんでしたが、ウェブ上の旅行でそれに会っていれば、SVG が何であるかを知ることができます。 あなたがまだ SVG のエキスパートではないと感じたら心配しないでください。 もしそれがどう動くかについて詳しく知りたいなら助けになる以下のリンクを参考にしてください。
53 レスポンシブ画像 Article, Beginner, CodingScripting, Design, Graphics, Guide, HTML, Image, Intermediate, img, picture, sizes, srcset, ガイド, グラフィックス, デザイン, 中級, 初心者, 画像, 記事
それはレスポンシブ画像のラップです — あなたはこれらの新しいテクニックで遊ぶことを楽しんでください。 要約すると、私たちがここで議論してきた2つの明確な問題があります。
54 動画と音声のコンテンツ Article, Audio, Beginner, Guide, HTML, Video, captions, subtitles, track, ガイド, 初心者, 動画, 記事, 音声
それはラップです。 ウェブページで動画や音声を楽しみながら楽しく遊びました!  次の記事では、<iframe><object> などの技術を使用して、ウェブにコンテンツを埋め込む他の方法について説明します。
55 一般的な問題解決に HTML を使う CodingScripting, HTML
下記のリンクは、日常の解決すべき問題を HTML を使って解決する解決法を指しています。
56 HTML で用語を定義する Beginner, Guide, HTML, Learn
用語の意味が必要なときは、おそらくまっすぐに辞書や用語集に行くでしょう。 辞書や用語集は、キーワードを1つ以上の説明と正式に関連付けます。 この場合は次のようになります。
57 Using data attributes HTML, HTML5, ウェブ, ガイド, 例, 独自データ属性
HTML5 は、データの拡張性を念頭において設計されているため、特定の要素に関連させるべきデータが、定義済みの意味を持つ必要はありません。 data-* 属性により、標準外の属性、 DOM の追加プロパティ、 Node.setUserData() のような特殊な方法に頼らずに、標準的な意味のある要素に追加情報を格納することができます。
58 ウェブページで JavaScript を使う方法 Beginner, HTML, JavaScript, OpenPractices
JavaScript はウェブページをインタラクティブにするための、主にクライアントサイドで使われるプログラミング言語です。 JavaScript を使わなくてもすばらしいウェブページを作ることができますが、JavaScript は全く新しいレベルの可能性を開きます。
59 画像にヒットマップを追加する Graphics, Guide, HTML, Intermediate, Navigation
<a> 内に画像をネストすると、画像全体が1つのウェブページにリンクします。 一方、イメージマップは、それぞれが異なるリソースにリンクするいくつかのアクティブな領域(「ホットスポット」と呼ばれます)を含みます。
60 JavaScript CodingScripting, JavaScript, JavaScripting beginner, Landing, Module, Topic, l10n:priority, 初心者
JavaScript は Web ページ上に複雑なものを実装することを可能にするプログラミング言語です。Web ページが表示されるたびに静的な情報が表示されるだけでなく、タイムリーにコンテンツを更新したり、インタラクティブマップやアニメーション 2D/3D グラフィックスを表示したり、またはビデオジュークボックスが流れたりします。ほかにもありますが、これらは 間違いなく JavaScript が関係しています。
61 JavaScript の構成要素 Article, Assesment, Beginner, CodingScripting, Conditionals, Functions, Guide, JavaScript, Landing, Loops, Module, events, l10n:priority
このモジュールでは、条件付きステートメント、ループ、関数、イベントなど一般的に発生するコードブロックの種類に注目し、JavaScript の重要な基本機能をすべてカバーしていきます。コースの中で既にこれらを目にしているのですが、説明を省いてきました。ここではすべて明示的に説明を行います。
62 イベントの紹介 Beginner, CodingScripting, JavaScript, イベント, イベントハンドラー, ガイド, 学習, 記事
イベントは、あなたがプログラムを書いているシステムで生じた動作、出来事を指します。システムからあなたへ、イベントとして何かあった事を知らせてくるので、必要であればそれに何らかの反応を返す事ができます。例えば、ユーザーが Web ページ上でボタンを押したとき、ある情報を表示するように反応させたいと思うかもしれません。この記事では、イベントに関する重要な概念を取り上げ、ブラウザーの中でのイベントの振る舞いを見ていきます。ここでは、全てを説明するのではなく、この段階で知っておくべき内容を取り上げます。
63 イメージギャラリー Assessment, Beginner, CodingScripting, Conditionals, Event Handler, JavaScript, Learn, Loops, events
Javascript の基本的な構成要素を見てきたところで、これからたくさんのウェブサイトで見かける項目、 Javascript で動作するイメージギャラリーをつくってみることで、あなたが得た繰り返し、関数、条件とイベントの知識を試してみましょう。
64 コードでの意思決定 — 条件文 Article, Beginner, CodingScripting, Conditionals, JavaScript, Learn, Switch, conditions, else, if, l10n:priority, ternary
どのプログラミング言語でも、コードは様々な入力に応じた決定を迫られ、その結果として動作を起こします。例えば、ゲームではプレイヤーの残機が 0 になった場合、ゲームオーバーとなります。天気アプリは朝に起動された場合は日の出の画像を表示し、夜に起動された場合は星や月の画像を表示します。この記事では、JavaScript において、条件文と呼ばれるものがどのように動作するかを説明します。
65 ループコード Article, Beginner, CodingScripting, DO, Guide, JavaScript, Learn, Loop, break, continue, for, l10n:priority, while
プログラミング言語は、繰り返し実行するタスクを素早く終わらせるのがとても得意です。基本的な計算処理から、同じような作業がたくさんあるのならどんな状況でもこなします。今度は JavaScript でそういった目的を果たすために使用するループ構造を見てみましょう。
66 自分で関数を作る
前の記事で扱った重要な理屈をたくさん使って、この記事では実践的な練習を行ないます。ここではあなたが自力で独自関数を作成するための練習を行なっていきます。同時に、関数を扱う上で役に立つ細々の説明もしていきます。
67 関数 — 再利用可能なコードブロック API, Article, Beginner, Browser, CodingScripting, Custom, Functions, Guide, JavaScript, Learn, Method, anonymous, invoke, l10n:priority, parameters
コーディングにおいて、不可欠なコンセプトが関数です。関数を使用することで、特定のタスクをこなすコードを定義し、保持しておいて、いつでも簡単なコマンドで呼び出すことを可能にしてくれます。同じコードを何度も打たなければならないよりとっても簡単です。この記事では関数の書き方や、関数を実行する方法、定義の仕方、スコープ、引数といった関数に関する基礎を学びます。
68 関数の返値 リターン, リターン値, 戻り値, 返り値, 返却値, 関数
このコースでの関数の学習を終えるために、最後に議論しておくべき大事なコンセプトがあります。それは返値です。関数によっては完了時に特定の値を返さないものもありますが、値を返すものも当然あります。それらの値が何であるか、どのようにカスタム関数に意味のある値を返させるのかについて理解することは重要です。これらについてすべてを以下で紹介します。
69 JavaScript の第一歩 Arrays, Article, Assessment, Beginner, CodingScripting, Guide, JavaScript, Landing, Module, Numbers, Operators, Variables, l10n:priority, maths, strings
最初の JavaScript のモジュールでは、初めて JavaScript を書く実践的な経験を体験する前に、「JavaScript とは何?」や「どのようなもの?」や「何ができる?」といったような基本的な質問に答えます。その後変数や文字列、 数値、配列といったような言語の内容をお話します。
70 JavaScript とは CodingScripting, JavaScript, l10n:priority, インライン, コア, コメント, サードパーティー, スクリプト, ブラウザー, 初心者, 外部, 学習, 記事
さて、JavaScript の世界に足を踏み入れましたね。 なぜ JavaScript を使い、何ができるのかということに慣れるため、まずは理論から始めました。 進むにつれ、数行のコードでしたが、例を見て、何よりも JavaScript がどのようにウェブサイトの他のコードに組み込まれているかを学習しました。
71 JavaScriptでの基本演算 — 数値と演算子 Article, Beginner, CodingScripting, Guide, JavaScript, Learn, Math, Operators, augmented, increment, l10n:priority, maths, modulo
この記事では、JavaScript の数値処理で知っておくべき基礎的なことを学びました。JavaScript を学習する間、今後も繰り返し数値を扱うことになるので、しっかりと復習しておきましょう。数学が好きではなくとも、この章はとても短いので安心して (復習して) ください。
72 JavaScriptへの最初のダイブ Article, CodingScripting, Conditionals, JavaScript, Objects, Operators, events, l10n:priority, 初心者, 変数, 学習, 関数
JavaScript の理論のいくらかと、これで何ができるかを学びました。JavaScript の基本的な機能について、実践的なチュートリアルで紹介します。簡単な「数字当てゲーム」を一歩一歩作ってみましょう。
73 テキストを扱う — JavaScript での文字列 Article, Beginner, CodingScripting, Guide, JavaScript, Join, Quotes, concatenation, l10n:priority, strings
プログラミングでは文字の羅列を文字列と呼びますが、次はこれを学習しましょう。この記事では、JavaScript でよく使われる、文字列を作ったり、引用符をエスケープしたり、文字列を結合したりといった、文字列について本当に知っておくべきことだけを見てみましょう。
74 バカ話ジェネレーター Arrays, Assessment, CodingScripting, JavaScript, Numbers, Operators, Variables, l10n:priority, strings, 初心者, 学習
この評価試験では、このモジュールを通して身に付けた知識を生かして、ランダムなバカ話を生成する楽しいアプリを作ります。楽しんでください!
75 何が間違っている? JavaScript のトラブルシューティング Article, Beginner, CodingScripting, Debugging, Developer Tools, Error, JavaScript, Learn, Tutorial, console.log, l10n:priority
やっとここまで来ましたね。簡単な JavaScript プログラムのエラーを見つけ出すための基本が理解できました。コードの間違いを解決するのがいつも簡単とは限りませんが、学習の過程でうまくいかない時があったとしても、基本を押さえていれば、多少は寝る時間が取れたり、多少の進捗もより早くあげられたりするでしょう。
76 便利な文字列メソッド Article, Beginner, CodingScripting, JavaScript, Learn, case, indexof, l10n:priority, length, lower, replace, split, upper
文字列の基本についてはすでに見ました。ここからはレベルを上げて、組み込みのメソッドを使用して文字列に対して実行できる便利な操作について考えてみましょう。例えば、文字列の長さを調べたり、繋げたり、分割したり、ある文字を他の文字に置き換えたりなどです。
77 必要な情報を保存する — 変数 Arrays, Booleans, JavaScript, Numbers, Objects, Updating, Variables, declaring, initializing, l10n:priority, loose typing, strings
ここまでで JavaScript の変数の作り方について理解して、それ以外にもそれなりの知識を得ましたね。次の記事では、数値に焦点を当てて、JavaScript の数値計算の基礎について見ていきます。
78 配列 CodingScripting, JavaScript, Join, Pop, Push, l10n:priority, shift, split, unshift, 初心者, 学習, 記事, 配列
このモジュールの最後として、配列について見ていきましょう。配列とは一つの変数名でリスト形式のデータを保持するのに好都合です。ここでは、どう便利なのか、どのように作るのか、そして配列の項目を追加したり削除したり取得したりする方法について学びます。
79 JavaScript オブジェクト入門 Article, Assesment, Beginner, CodingScripting, Guide, JavaScript, Learn, Objects, Tutorial, 学習
JavaScript では、文字列や配列などの JavaScript のコア機能から、JavaScript の最上部に構築されたブラウザ API まで、ほとんどのものがオブジェクトです。関連する関数や変数を効率的なパッケージにカプセル化して、便利なデータコンテナーとして動作する独自のオブジェクトを作成することもできます。JavaScript のオブジェクトベースの性質を理解することは、言語に関する知識をさらに深め、より効率的なコードを書く場合に重要です。したがって、この役立つモジュールを用意しました。ここではオブジェクトの理論と構文を詳しく説明し、独自のオブジェクトを作成する方法を見ていきます。
80 JSONの利用 Article, Beginner, CodingScripting, Guide, JSON, JavaScript, Learn, Objects, Tutorial, l10n:priority
この節では、プログラム内で、JSON を生成する、JSON をパースする、JSON データを参照するなど、JSON を扱う方法について簡単に説明しました。次の節では、オブジェクト指向 JavaScript について見ていくことにします。
81 JavaScript オブジェクトの基本 API, Article, Beginner, CodingScripting, JavaScript, Syntax, bracket notation, dot notation, instance, object literal, this, オブジェクト, 学習, 理論
お疲れ様でした。最初の JS オブジェクトの記事の終わりまで到達しました。JavaScript のオブジェクトがどのように機能するかについて、良い考えを得ることができたのではないでしょうか。記事では、簡単なオリジナルオブジェクトの作成を含んでいました。オブジェクトはデータやファンクション関連を保存する構造として非常に便利であることも理解しなければいけません。もし別々の変数と関数として、person オブジェクトのすべてのプロパティとメソッドを記録していくとすると、非効率でありストレスが溜まります。そして同じ名前の他の変数や関数をクラッシュしてしまう危険性も抱えてしまいます。オブジェクトは有害な方法を避けて、パッケージの中で安全に鍵をして情報を守ってくれます。
82 JavaScriptでの継承 Article, CodingScripting, Inheritance, JavaScript, OOJS, OOP, Object, Prototype, l10n:priority, 初心者, 学習
OOJS(Object-oriented JavaScript の略)ライブラリが提供する各種機能のうち、ここでは”親”クラスからの機能を継承する”子供”のオブジェクトクラス(コンストラクタ)の生成方法について解説します。なお、Javascript のコンストラクタは Java のコンストラクタとは内容が全く異なるものであることに注意する必要があります。
83 Object のプロトタイプ
プロトタイプは JavaScript オブジェクトが機能を互いに継承するメカニズムです。この記事ではプロトタイプチェーンの動作を説明し、prototype プロパティを使用して既存のコンストラクタにメソッドを追加する方法を見ていきます。
84 オブジェクト作成の練習 Article, Beginner, Canvas, CodingScripting, Guide, JavaScript, Learn, Objects, Tutorial, l10n:priority
自分版の実世界で跳ね回るランダムボール例作り、この全単元で出てきた様々なオブジェクトやオブジェクト指向テクニックを使ったものをあなたに楽しんでいただけていれば、と思います。オブジェクトの実践的な使い方の練習や、実世界のコンテキストについて得られるものがあったはずです。
85 バウンスボールに機能を追加する Assessment, Beginner, CodingScripting, JavaScript, Learn, OOJS, Object-Oriented, Objects, l10n:priority
この評価では,前の記事を出発点として、あなたが、スーパーボールのデモを使えるようになることが期待されます。さらにいくつかの新機能や面白い機能を追加します。
86 初心者のためのオブジェクト指向 JavaScript Beginner, Create, JavaScript, OOJS, OOP, オブジェクト, オブジェクト指向, 学習, 記事
この記事はオブジェクト指向の理論の概略を見てきました。これですべてではありませんが、ここで扱っていることに関する考えを提示しました。加えて、オブジェクトのインスタンスを生成する様々な方法を見始めたところです。
87 JavaScriptのコードのよくある問題を解決する Beginner, JavaScript, Learn
JavaScript のコードが正しく動作しないので修正したい、というような場合にみられる、よくある問題の解決方法へのリンクを以下に示します。
88 クライアント側ウェブAPI API, CodingScripting, DOM, JavaScript, Landing, WebAPI, グラフィック, データ, メディア, モジュール, 初心者向け, 学習, 記事
ウェブサイトやアプリケーション用にクライアント側のJavaScriptを書いていると、すぐにアプリケーションプログラミングインターフェース(Apprication Programming Interfaces、API)にでくわします。APIとはブラウザーやサイトが動作しているOSの様々な面を操作したり、他のウェブサイト、サービスから取得したデータを操作するためのプログラムされた機能です。このモジュールではAPIとは何か、開発作業の中でしばしば見掛ける最もよく利用されるAPIのいくつかについて、どのように使うかを説明していきます。
89 ウェブAPIの紹介
まずはAPIを高い視点から見ていきます — これは何なのか、どう働くのか、あなたのコードでどう使うのか、どういう風に作られているのか? また様々なクラスのAPIは何なのか、どのような使い方があるのかも見ていきます。
90 クライアント側ストレージ API, Article, Beginner, CodingScripting, Guide, IndexedDB, JavaScript, Learn, Storage, Web Storage, ウェブストレージ, ガイド, 保存, 初心者, 学習
これで終わりです。クライアント側での保存の技術についてのこの概要を、皆さんが有用だと思ってくださったのであれば良いな、と望んでいます。
91 グラフィックの描画 API, Article, Beginner, Canvas, CodingScripting, Graphics, JavaScript, Learn, WebGL
At this point, you should have a useful idea of the basics of graphics programming using Canvas and WebGL and what you can do with these APIs, as well as a good idea of where to go for further information. Have fun!
92 サーバからのデータ取得
モダンな Web サイトやアプリケーションでしょっちゅう必要になる仕事は、サーバから個々のデータを取ってきて、新しいページ全体を読んでくることなしに、ページの一部を書き換える事です。この一見ちょっとした事が、サイトのパフォーマンスや振舞いに巨大なインパクトを与えました。この記事ではそのコンセプトを解説し、これを可能にした技術 XMLHttpRequest や Fetch API について見ていきます。
93 ドキュメントの操作
ウェブページやアプリを書く場合に、最も多く必要になるのはウェブ文書をどうかして操作する事でしょう。これは普通ドキュメントオブジェクトモデル(Document Object Model、DOM)、これはHTMLとスタイルに関する情報をDocumentオブジェクトを使いまくって操作する一連のAPIです。この記事では、DOMの使い方を詳しく見ながら、面白い方法であなたの環境を変える事ができる興味深い他のAPIもいくつか見ていきます。
94 MDN の学習エリアに貢献するには Beginner, Contribute, Documentation, Guide, Learn, MDN Meta, l10n:priority
このページでは、 MDN の学習コンテンツの改良に協力し始めるのに必要となる全てが見つかるでしょう。できることはたくさんあって、それはあなたがどれくらい時間を使えるか、初心者ウェブ開発者教師かによって決まります。
95 Web パフォーマンス
Web サイトを構築するには、HTML、CSS、および JavaScript が必要です。人々が使用したい Web サイトやアプリケーションを構築し、ユーザを引き付けて維持するには、優れたユーザエクスペリエンスを作成する必要があります。良好なユーザエクスペリエンスの一部は、コンテンツの読み込みが迅速であり、ユーザの操作に反応することを保証することです。これは Web パフォーマンスと呼ばれ、このモジュールではパフォーマンスのよい Web サイトを構築するために必要なすべてを学習します。
96 はじめに - Web 開発ツール
初心者にとっては、使用する適切なツールを見つけることが難しい場合があります。多くの疑問が浮かび上がってきます。このような質問は、どのテキストエディタがあなたのウェブ開発のニーズに最も適しているかを決定する重要なステップです。
97 よくある質問 CodingScripting, Infrastructure, Learn, Web, WebMechanics
学習エリアのこのセクションでは、浮かんでくるかもしれないけれども学習ルートの本筋 (例 HTMLCSS 学習記事) には必要でもない、よくある質問への回答を載せるために作りました。この記事は単独でこれだけを読んでも理解できるものになっています。
98 GitHub Pagesを使うには?
GitHub is a "social coding" site. It allows you to upload code repositories for storage in the Git version control system. You can then collaborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your GitHub code, use it, learn from it, and improve on it. You can do that with other people's code too! This article provides a basic guide to publishing content using Github's gh-pages feature.
99 URL とは何か Infrastructure, URL, urls, インフラ, リソース, 初心者
URLハイパーテキストHTTP とともに、ウェブの重要な概念の一つです。ブラウザーがウェブ上の公開されたリソースを取得するために使用するメカニズムです。
100 Web で何かをするためにどのくらいコストがかかりますか?
Web サイトを立ち上げるとき、あなたは何も使わないかもしれません、あるいはコストは天井知らずかもしれません。 この記事ではすべてのコスト、そしてあなたが費やすものをどうやって手に入れるか (あるいは費やさないか) について議論します。
101 Web ページ、Web サイト、Web サーバ、検索エンジン、これらは何が違うの? NeedsActiveLearning, WebMechanics, 初心者
あらゆる分野の知識と同様に、Web にも多くの専門用語があります。心配しないでください、私たちは全部をあなたにあふれさせることはありません (興味をお持ちなら用語集があります)。しかし、読んでいる間常にこれらの表現を聞くので、最初基本的な用語をいくつか理解しておく必要があります。 これらの用語は関連しているが異なる機能を参照しているため、混同しやすい場合があります。実際、これらの用語がニュースレポートや他の場所で誤って使用されていることがあります。
102 あなたのウェブサイトが正しく機能することをどうやって確認しますか? ガイド, トラブルシューティング, ドキュメント, 初心者
あなたはあなたのウェブサイトをオンラインで公開しましたか? 素晴らしい! しかし、あなたはそれが適切に動作していると思いますか?
103 どのように Web サイトのデザインを始めるのか? 初心者
Webプロジェクトを開始するとき、多くの人が技術面に焦点を当てます。もちろん、あなたは作るものの技術に精通していなければなりませんが、本当に重要なことは達成したいことです。はい、明らかですが、あまりにも多くのプロジェクトが技術的ノウハウの欠如からではなく、目標とビジョンの欠如から失敗します。
104 どのようにすべてのタイプのユーザーを対象に設計できますか?
When you're building a website, one top issue to consider is Universal Design: accommodating all users regardless of disability, technical constraints, culture, location, and so on.
105 どのようにファイルを Web サーバにアップロードしますか? WebMechanics, 初心者
シンプルな Web ページを作成している場合 (例として HTML の基本を参照)、Web サーバ上にオンラインで配置したいと思うかもしれません。この記事では SFTP クライアント、RSync、GitHub などのさまざまなオプションを使用して、その方法を説明します。
106 どんなテキストエディタが利用可能ですか?
Web サイトはほとんどテキストファイルで構成されているので、楽しくて楽しい開発経験のためにはテキストエディタを賢く選ぶべきです。
107 インターネットはどのように動くのか WebMechanics, チュートリアル, 初心者
インターネットは Web のバックボーンであり、Web を可能にする技術基盤です。最も基本的なインターネットは、すべてが一元的に通信を行う大規模なコンピュータネットワークです。
108 ウェブサイトを作成するのにどんなソフトウェアが必要か? WebMechanics, 初心者
Web 開発に必要なほとんどのプログラムは無料でダウンロードできます。この記事では、いくつかのリンクを提供します。
109 ウェブサーバーとは Beginner, インフラ
「ウェブサーバー」はハードウェアまたはソフトウェア、または共に動作する両方を指すことがあります。
110 ドメイン名とは何ですか? Web, イントロダクション, インフラ, ドメイン名, 初心者
ドメイン名はインターネットインフラストラクチャの重要な部分です。それらはインターネット上のあらゆる Web サーバで利用可能な、人間が読めるアドレスを提供します。
111 ハイパーリンクとは?
リンクと呼ばれるハイパーリンクは、Web の背後にある基本的な概念です。どのようなリンクであるかを説明するためには、Web アーキテクチャの基本に戻っていく必要があります。
112 ブラウザー開発者ツールとは? Beginner, Browser, CSS, CodingScripting, Dev Tools, HTML, JavaScript, Learn
開発者ツールはブラウザーのサブウィンドウの中にいます。大体こんな感じに...。
113 ローカルのテストサーバーはどのようにセットアップしますか? Express, Flask, Node, PHP, Python, django, lamp, サーバ, サーバーサイド, 初心者, 学習
ほとんどの学習領域では、ブラウザでサンプルを直接開くだけで済みます。HTML ファイルをダブルクリックするか、ブラウザウィンドウにドラッグ & ドロップするか、ファイル > 開く...を選択して HTML ファイルを選択するなどです。これを達成する方法はたくさんあります。
114 アクセシビリティ ARIA, Accessibility, Articles, Beginner, CSS, CodingScripting, HTML, JavaScript, Landing, Learn, Module
ウェブ開発者になりたい場合、HTML, CSS, JavaScript の学習は役立ちます。しかし知識は単に技術を使うよりも前に進める必要があります — それらを責任を持って使う必要があり、その結果ウェブサイトの聴衆を増やし、またそれを使わないことに縛らないことになります。これを達成するには、一般的な成功事例 (HTML, CSS, JavaScript のトピックに示されています) を積み上げ、クロスブラウザーテストを行って、最初からアクセシビリティを考慮しておきます。このモジュールでは後者を詳しく扱います。
115 CSS と JavaScript のアクセシビリティの ベスト・プラクティス Accessibility, Article, CSS, CodingScripting, Guide, JavaScript, Learn, color, contrast, hiding, unobtrusive, ひかえめ, アクセシビリティ, ガイド, コントラスト, 学習, 色, 隠す
ウェブページ上での CSS と JavaScript の使用にまつわるアクセシビリティの問題について、このページが適切な量の細部と理解をもたらしたのであれば幸いです。
116 HTML: アクセシビリティの基礎 AT, Accessibility, Article, Beginner, Buttons, CodingScripting, Forms, HTML, Learn, Links, a11y, assistive technology, keyboard, screenreader, semantics, アクセシビリティ, キーボード, スクリーンリーダー, セマンティクス, フォーム, ボタン, リンク, 初心者, 学習, 意味
今や読者の皆さんは、ほとんどの場合にアクセシブルな HTML を書くことについて、熟知しているはずです。WAI-ARIA の基本 の記事も、この知識の抜けを埋めてくれるでしょうが、本記事でもその基本には気を配ってきました。次は、CSS と JavaScript を検討しましょう。そして、CSS と JavaScript の良い使い方やまずい使い方によって、アクセシビリティがどのような影響を受けるのかを検討しましょう。
117 WAI-ARIAの基本 ARIA, Accessibility, Article, Beginner, CodingScripting, Guide, HTML, JavaScript, Learn, WAI-ARIA, semantics
本記事は、WAI-ARIA で利用可能なすべてのものを取り扱ったとは、到底、言えません。でも、WAI-ARIA の使い方を理解するのに十分な情報をお伝えしたはずです。また、これから出会うであろう、WAI-ARIA を必要とするような最もよくあるパターンのうちのいくつかを知るのに十分な情報も、お伝えしたはずです。
118 アクセシビリティとは? AT, Accessibility, Article, Beginner, CSS, CodingScripting, HTML, JavaScript, Learn, Tools, Users, assistive technology, keyboard, screan reader, screenreader
このページでは高いレベルでアクセシビリティの概要を説明し、それが重要である理由と、作業フローに取り込む方法を見てきました。サイトをアクセシブルにするための実装の詳細について学ぶことを渇望する人もいるでしょう。それでは次の節では、HTML がアクセシビリティの良い基本である理由を見ていきます。
119 アクセシブルマルチメディア Accessibility, Article, Audio, Beginner, CodingScripting, HTML, Images, JavaScript, Learn, Multimedia, Video, captions, subtitles, text tracks
アクセシビリティの問題を引き起こす他のカテゴリーは、マルチメディアでです。ビデオ、オーディオ、画像といったコンテンツは、支援技術 (assistive technologies) とユーザが理解可能となる適切な代替テキストを必要とします。この記事ではその方法を説明します。
120 モバイルのアクセシビリティ Accessibility, コードスクリプト, スクリーンリーダー, タッチ, モバイル, レスポンシブ, 初心者, 学習, 記事
No summary!
121 評価: アクセシビリティのトラブルシューティング Accessibility, Assesment, Beginner, CSS, CodingScripting, HTML, JavaScript, Learn, WAI-ARIA
このモジュールの評価では、あなたが診断、修正するべきいくつかのアクセシビリティの問題を持った簡単なサイトを表示します。
122 インデックス MDN Meta, インデックス, 学習
120 ページあります:
123 ウェブ入門 Beginner, CSS, HTML, Index, l10n:priority, publishing, ガイド, デザイン, 学習, 理論
プロが作るようなウェブサイトを作るのはとても大変な作業です。ウェブ開発の初心者は、まずは小さなものから作り始めるとよいでしょう。今すぐ Facebook のようなサイトを作ることはできませんが、簡単なウェブサイトなら作るのはそれほど難しくありません。私たちはここから始めることにしましょう。
124 CSS の基本 CSS, CodingScripting, Styling, Web, l10n:priority, 初心者, 学習
HTML のように、CSS は本当のプログラミング言語ではありません。またマークアップ言語でもありません。CSS はスタイルシート言語です。つまり HTML 文書の要素に選択的にスタイルを適用できます。例えば、HTML ページのすべての段落要素を選択し、その中のテキストを赤色にするには、次のような CSS を記述します。
125 HTML の基本 CodingScripting, HTML, Web, l10n:priority, 初心者, 学習
HTML はプログラミング言語ではありません。マークアップ言語と言って、コンテンツの構造を決めるものです。 HTML は 要素の集まりでできています。要素とは様々なコンテンツがどのように見えるか、またどのように動くかを表現するためにタグで囲まれたまとまりです。タグは言葉や画像を表示したり、他のページに移動するハイパーリンクを作ったり、文字を斜体にしたり、大きくしたり小さくしたり、色々なことが出来ます。例えば、次の文を見てください。
126 JavaScript の基本 JavaScript, Learn, Web, codescripting, l10n:priority, 初心者
JavaScript (略して "JS" ) は成熟した動的プログラミング言語であり、 HTML 文書に適用すると、ウェブサイトに動的な対話操作を提供できます。Mozilla プロジェクト、Mozilla Foundation、Mozilla Corporation の共同設立者である Brendan Eich によって考案されました。
127 Web サイトをどんな外見にするか Assets, Composing, Deprecated, Plan, l10n:priority, コンテンツ, デザイン, フォント, 初心者, 学習
始める前に、いくつか考えておかなければいけないことがあります。あなたの Web サイトは実際に何をすべきでしょうか?普通 Web サイトは様々なことができますが、はじめは単純なことにとどめておくべきでしょう。まずは見出し、画像、そしていくつか段落をもつシンプルな Web ページを作ることから始めましょう。
128 ウェブのしくみ DNS, HTTP, IP, Infrastructure, TCP, l10n:priority, クライアント, サーバー, 初心者, 学習
この理論は、短期間でウェブのコードを書く上で必須ではありませんが、背景で何が起きているのかを理解しておくと、まもなく役に立つでしょう。
129 ウェブサイトの公開 FTP, GitHub, Google App Engine, Learn, Web, l10n:priority, publishing, web server, コードスクリプティング, 初心者, 学習
ウェブサイトを公開するというのは簡単に語れることではありません。なぜなら、ウェブサイトの公開の仕方には、さまざまな方法があるからです。この記事での私たちの目標は、そのすべての方法を記述することではありません。むしろ、我々は初心者の視点から、大まかに 3 つの手法の長所と短所をお話しし、その次に、今のところはこれでうまくいくという方法で一通りやってみます。
130 ファイルの扱い Beginner, CodingScripting, Files, HTML, l10n:priority, theory, website, ガイド
自分のコンピューター上の Web サイトでローカルに作業している時、関連するすべてのファイルを、サーバー上に公開されたWeb サイトのファイル構造のミラーである単一のフォルダに保持する必要があります。このフォルダは好きな場所に置くことができますが、簡単に見つけることができる場所、たとえばデスクトップ上、ホームフォルダの中、またはハードディスクのルートなどに置いてください。
131 基本的なソフトウェアのインストール WebMechanics, l10n:priority, セットアップ, ツール, テキストエディタ, ブラウザ, 初心者, 学習
上のリストにはたくさんのツールが書かれていて、ちょっと恐ろしかったかもしれませんね。でも大丈夫です。ウェブ開発を始めるのには、まだ上のツールをほとんど知らなくても問題ありません。これから私たちが、ウェブ開発に必要最小限のツールのセットアップの仕方を説明しておきます。必要なものは、テキストエディターと最新のウェブブラウザーだけで十分です。
132 サーバーサイド Web サイトプログラミング CodingScripting, Landing, NeedsTranslation, Server, Server-side programming, Topic, TopicStub, 初学者, 学習, 導入部
Dynamic(動的な)ウェブサイト サーバーサイドプログラミング のトピックは、動的なウェブサイト (HTTP リクエストに応じてカスタマイズされた情報を届けるウェブサイト) の作り方を説明する一連のモジュールです。各モジュールは、一般的なサーバーサイドプログラミングへの導入となる情報を提供するほか、特に初学者に向けて、Django (Python) や Express (Node.js/JavaScript) といった基礎的なアプリケーションを構築するためのウェブフレームワークの使用方法について説明しています。
133 Djangoウェブフレームワーク (Python) Python, django, ウェブアプリケーションフレームワーク, サーバーサイドプログラミング, プログラミング, 初心者, 学習, 概要
Django は、Python で書かれた高機能なサーバーサイドウェブフレームワークで、とても普及しています。このモジュールは、Django が最も人気のあるウェブサーバーフレームワークの 1 つである理由、開発環境の設定方法、独自のウェブアプリケーションを作成する方法を説明します。
134 Django チュートリアル Part 2: スケルトンウェブサイトの作成 django, イントロダクション, ガイド, チュートリアル, 初心者, 学習, 記事
Djangoチュートリアル の2つ目の記事では、基本的なウェブサイトプロジェクトの「スケルトン」をどのように作っていくのかを説明します。サイト固有の設定、URL、モデル、ビュー、テンプレートを作成する方法について説明します。
135 Django チュートリアル: 地域図書館ウェブサイト Python, django, チュートリアル, 初心者
実践的なチュートリアルシリーズの最初の記事は、学習する内容を説明し、後の記事で進めていく「地域図書館」のサンプルウェブサイトの概要を示しています。
136 Django 開発環境の設定 Python, Webフレームワーク, django, サーバーサイドプログラミング
Djangoがどういうものか知ったので、Windows、Linux(Ubuntu)、およびmacOSでDjango開発環境をセットアップしてテストする方法を説明します。一般的なオペレーティングシステムを使っていれば、Djangoアプリケーションの開発を始められます。
137 Djangoの紹介 Python, Webフレームワーク, django, サーバーサイドプログラミング
最初のDjangoの記事では、 "Djangoとは何ですか?" という疑問に答え、このWebフレームワークの特徴と概要を説明します。
138 Express Web フレームワーク (Node.js/JavaScript) CodingScripting, Express, Express.js, JavaScript, Node, TopicStub, node.js, イントロダクション, サーバサイドプログラミング, 初心者, 学習
Express は、JavaScript で書かれ、Node.js 実行環境内でホストされている、人気の独創的な Web フレームワークです。このモジュールでは、このフレームワークの主な利点、開発環境の設定方法、一般的な Web 開発と配置作業の実行方法について説明します。
139 Express チュートリアル Part 2: スケルトン Web サイトの作成 CodingScripting, Express, Node, イントロダクション, サーバサイド, 初心者, 学習, 開発環境
この Express チュートリアルの2回目の記事では、どのようにして "スケルトン" Web サイトプロジェクトを作成し、サイト固有のルート、テンプレート/ビュー、およびデータベース呼び出しを追加するかを説明します。
140 Express チュートリアル Part 3: データベースの使用 (Mongoose を使用)
この記事ではデータベースと、それらを Node/Express アプリケーションで使用する方法について簡単に紹介します。続いて、Mongoose を使用して地域図書館 Web サイトへのデータベースアクセスを提供する方法を説明します。 オブジェクトスキーマとモデルの宣言方法、主なフィールドタイプ、および基本的な検証について説明します。また、モデルデータにアクセスするための主な方法についても簡単に説明します。
141 Express チュートリアル Part 4: ルートとコントローラ
このチュートリアルでは、地域図書館 Web サイトで最終的に必要となるすべてのリソースエンドポイントに対して、"ダミー" ハンドラ関数を使用してルート (URL 処理コード) を設定します。完成すると、ルート処理コードのためのモジュール構造が得られます。これは、次の記事の実際のハンドラ関数で拡張できます。Express を使ってモジュラールートを作成する方法についても、非常によく理解しています。
142 Express チュートリアル Part 5: ライブラリデータの表示 Express, nodejs, pug, コントローラ, テンプレート, ビュー, 初心者, 学習
これで地域図書館の Web サイトの書籍やその他のデータを表示するページを追加する準備が整いました。このページには、各モデルタイプのレコード数と、すべてのモデルのリストおよび詳細ページを示すホームページが含まれます。その過程で、データベースからレコードを取得したり、テンプレートを使用したりする際の実際的な経験を積むことになります。
143 LocalLibrary 基本テンプレート
Now that we understand how to extend templates using Pug, let's start by creating a base template for the project. This will have a sidebar with links for the pages we hope to create across the tutorial articles (e.g. to display and create books, genres, authors, etc.) and a main content area that we'll override in each of our individual pages.
144 async を使用した非同期フロー制御
The controller code for some of our LocalLibrary pages will depend on the results of multiple asynchronous requests, which may be required to run either in some particular order or in parallel. In order to manage flow control, and render pages when we have all the required information available, we'll use the popular node async module.
145 moment を使用した日付のフォーマット
The default rendering of dates from our models is very ugly: Tue Dec 06 2016 15:49:58 GMT+1100 (AUS Eastern Daylight Time). In this section we'll show how you can update the BookInstance List page from the previous section to present the due_date field in a more friendly format: December 6th, 2016.
146 ジャンル詳細ページ
The genre detail page needs to display the information for the particular genre instance using its automatically generated _id field value as the identifier. The page should display the genre name, and a list of all books in the genre with links to each book's details page.
147 テンプレートプライマー
A template is a text file defining the structure or layout of an output file, with placeholders used to represent where data will be inserted when the template is rendered (in Express, templates are referred to as views).
148 ブックインスタンスリストページ
Next we'll implement our list of all book copies (BookInstance) in the library. This page needs to include the title of the Book associated with each BookInstance (linked to its detail page) along with other information in the BookInstance model, including the status, imprint, and unique id of each copy. The unique id text should be linked to the BookInstance detail page.
149 ブックインスタンス詳細ページとチャレンジ
The BookInstance detail page needs to display the information for each BookInstance, identified using its (automatically generated) _id field value. This will include the Book name (as a link to the Book detail page) along with other information in the record.
150 ブックリストページ
Next we'll implement our book list page. This page needs to display a list of all books in the database along with their author, with each book title being a hyperlink to its associated book detail page.
151 ホームページ
The first page we'll create will be the website home page, which is accessible from either the site ('/') or catalog (catalog/) root. This will display some static text describing the site, along with dynamically calculated "counts" of different record types in the database.
152 本の詳細ページ
The Book detail page needs to display the information for a specific Book, identified using its (automatically generated) _id field value, along with information about each associated copy in the libary (BookInstance). Wherever we display an author, genre, or book instance, these should be linked to the associated detail page for that item.
153 著者リストページとジャンルリストページのチャレンジ
The author list page needs to display a list of all authors in the database, with each author name linked to its associated author detail page. The date of birth and date of death should be listed after the name on the same line.
154 著者詳細ページ
著者詳細ページには、指定された Author に関する情報を、その (自動的に生成された) _id フィールド値を使用して識別し、その Author に関連するすべての Book オブジェクトのリストを表示する必要があります。
155 Express チュートリアル Part 6: フォームの操作
このチュートリアルでは、Pug を使用して Express で HTML フォームを操作する方法、特にデータベースからドキュメントを作成、更新、削除するためのフォームを作成する方法を説明します。
156 Express チュートリアル Part 7: プロダクションへのデプロイ CodingScripting, Express, Node, heroku, サーバサイド, デプロイ, 初心者, 学習
これで素晴らしい地域図書館 Web サイトを作成 (およびテスト) したので、公共の Web サーバーにインストールして、図書館のスタッフとメンバーがインターネット経由でアクセスできるようにします。この記事では Web サイトをデプロイするためのホストを見つける方法、およびサイトを運用に向けて準備するために必要な作業の概要について説明します。
157 Express チュートリアル: 地域図書館の Web サイト CodingScripting, Express, Node, Tutorial, nodejs, イントロダクション, サーバサイド, 初心者, 学習
実用的なチュートリアルシリーズの最初の記事では、これから学ぶことについて説明します。そして、私たちがこれから取り組んでいき、その後の記事で進化していく「地域図書館」のサンプル Web サイトの概要を説明します。
158 Express/Node のイントロダクション CodingScripting, Express, Node, nodejs, サーバーサイド, 初心者, 学習
Express の最初の記事では ”Node って何だろう?”、”Express って何だろう?”という疑問に答え、なぜ Express web が特別なのかについて概要を説明します。主な特徴、Express アプリケーションの主なビルディングブロック(テスト開発環境についてはここではまだ触れません) を大まかに説明します。
159 Node 開発環境の設定 CodingScripting, Express, Node, nodejs, npm, イントロダクション, サーバサイド, 初心者, 学習, 開発環境
Express の目的が理解できたので、Windows、Linux (Ubuntu)、および macOS 上で Node/Express 開発環境をセットアップしてテストする方法を説明します。どのような一般的な OS を使用していても、この記事では Express アプリケーションの開発を開始するために必要なものを提供します。
160 PWS/Cloud Foundry に LocalLibrary をインストールする
If you followed the above steps, you should have now deployed the LocalLibrary app to PWS. Well done! If the deployment wasn't successful, double check all the steps.
161 サーバサイドの Web サイトプログラミングの第一歩 CodingScripting, Intro, Landing, ガイド, サーバサイドプログラミング, 初心者, 学習
このモジュールでは、サーバサイドプログラミングに関するいくつかの基本的な質問、"これは何?"、"クライアントサイドプログラミングとどう違うの?"、"なぜ便利なの?" について答えます。次に、最も人気のあるサーバサイドの Web フレームワークの概要と、最初のサイトを作成するための最適なフレームワークの選択方法に関するガイダンスを提供します。最後に、Web サーバのセキュリティに関する高度な入門記事を提供します。
162 Client-Server の概要
At this point you should have a good overview of the operations that server-side code has to perform, and know some of the ways in which a server-side web framework can make this easier.
163 Web サイトのセキュリティ
This article has explained the concept of web security and some of the more common threats against which your website should attempt to protect. Most importantly, you should understand that a web application cannot trust any data from the web browser. All user data should be sanitized before it is displayed, or used in SQL queries and file system calls.
164 フレームワークなしの Node.js サーバ JavaScript, NeedsContent, Node, サーバ, フレームワークなし
この記事では、フレームワークを使用せずに、純粋な Node.js で構築された単純な静的ファイルサーバを紹介します。
165 ツールとテスト CSS, CodingScripting, HTML, JavaScript, Landing, TopicStub, user testing, アクセシビリティ, クロスブラウザ, ツール, テスト, トピック, 初心者, 学習, 自動化
ウェブ技術のコア (HTML, CSS,  JavaScriptのような) での快適なプログラミングを開始して、経験を積んで、色んなリソースを読み、色んなコツや技を学習すると、準備された CSS と JavaScript といったものからテスト自動化アプリやそれ以外の、全てのツールに出くわします。ウェブプロジェクトが大きく複雑になっていくと、こうしたツールを活用したり、コードの信頼できるテスト計画を考案したくなるでしょう。学習エリアのこのパートでは、開始したり選択するために必要なものを与えることを狙いとします。
166 クロスブラウザテスト Accessibility, Automation, Beginner, CSS, CodingScripting, HTML, JavaScript, Landing, Learn, Module, Testing, Tools, cross browser
このモジュールでは、色々なウェブブラウザー間でウェブプロジェクトをテストすることに焦点を当てます。あなたのターゲット視聴者 (例 どのユーザー、ブラウザー、デバイスに一番関心があるのか?) の特定や、テストをどう動かすかや、主な問題としてさまざまな種類のコードと対面してそれらを緩和する方法や、テストを楽にして問題を解決するのに最も役立つツールが何かや、自動化を利用してテストをスピードアップする方法を見て行きます。
167 JavaScript のよくある問題を扱う Article, Beginner, CodingScripting, JavaScript, Learn, Libraries, Testing, cross browser, feature detection, linting, polyfills
So that's JavaScript. Simple huh? Maybe not so simple, but this article should at least give you a start, and some ideas on how to tackle the JavaScript-related problems you will come across.
168 はじめてのクロスブラウザテスト Article, Beginner, CodingScripting, Learn, Testing, concepts, cross browser
この記事では、クロスブラウザテストに関して知っておくべき最も大事な概念について、高位の理解を与えてきました。この知識を備えたことで、クロスブラウザテストの戦略について学び始める準備ができています。
169 テスト実行のための戦略 Article, Automation, Beginner, CodingScripting, Learn, Testing, concepts, cross browser, device lab, user testing, virtual machine
この記事を読んで、ターゲット顧客/ブラウザーの表を特定して、その表に載っているクロスブラウザーテストを効率的に実行することが良くわかったでしょう。
170 テスト自動化環境をセットアップする Article, Automation, Beginner, Browser, CodingScripting, Learn, Testing, Tools, cross browser, selenium
This module should have proven fun, and should have given you enough of an insight into writing and running automated tests for you to get going with writing your own automated tests.
171 一般的な HTML と CSS の問題への対処 CSS, CodingScripting, HTML, linting, クロスブラウザ, セレクタ, テスト, 初心者, 学習, 記事
Now you should be familiar with the main types of cross browser HTML and CSS problems that you'll meet in web development, and how to go about fixing them.
172 機能検出の実装
This article covered feature detection in a reasonable amount of detail, going through the main concepts and showing you how to both implement your own feature detection tests and use the Modernizr library to implement tests more easily.
173 自動テストのイントロダクション
This was quite a ride, but I'm sure you can start to see the benefit in having automation tools do a lot of the heavy lifting for you in terms of testing.