インデックス

227 ページあります:

# ページ タグと要約
1 ウェブ開発を学ぶ Intro, Landing, ウェブ, 初心者, 学習, 索引
MDN 学習エリアへようこそ。この一連の記事では、ウェブ開発が全くの初心者にとって、シンプルなウェブサイトのコーディングを始めるのに必要な全てを提供することを目標とします。
2 CSS Beginner, CSS, CodingScripting, Debugging, Landing, NeedsContent, Topic, length, specificity
Cascading Style Sheets — CSS — はHTML を学んだら、まず次に勉強すべき技術です。 HTML はコンテンツの構造と意味論を定義するのに使用されるのに対し、CSS はそのコンテンツにスタイルを与えたりレイアウトを決めるために使われます。 例えばフォント、色、サイズ、余白を変更したり、コンテンツを複数の列に分割して段組を作成したり、アニメーションやその他の装飾機能を追加するのに CSS は利用できます。
3 CSS の構成要素 Beginner, CSS, Learn, building blocks
このモジュールは CSS の第一歩から派生しています。CSS の言語や文法に慣れてきて、それを使う上での基本的な経験を得てきたという前提で、もう少し掘り下げてみましょう。カスケードと継承・セレクターの全種類・単位・サイズ設定・背景と枠線・デバッグなどを見ていきます。
4 CSS によるサイズ設定 Beginner, CSS, Intrinsic size, Learn, max size, min size, percentage, sizing, viewport units
このレッスンでは、Web上のサイズを決定するときに遭遇する可能性があるいくつかの重要な問題の概要を説明しました。CSSレイアウトに移ると、さまざまなレイアウトメソッドを習得する際にサイズ設定が非常に重要になるため、先に進む前に、ここで概念を理解しておくことをお勧めします。
5 CSS のデバッグ Beginner, CSS, DOM, Debugging, DevTools, Learn, source
CSS を書くとき、期待どおりに動作していないように見える問題が発生する場合があります。セレクターは合っているはずなのに何も起こらなかったり、ボックスのサイズが期待したどおりにならなかったりなどです。この記事では CSS の問題をデバッグする方法について案内し、何が起こっているかを調べるのに各モダンブラウザーのデベロッパーツールはどう役立つかを示します。
6 CSS の値と単位 Beginner, CSS, Function, Image, Learn, Number, Position, color, length, percentage, units, values
ここまで最もよく見かける値と単位を一通り見てきました。CSS 値と単位 のリファレンスページで、さまざまなタイプをすべて見ることができます。多くはこのレッスンを進んでいくと出てくるでしょう。
7 CSS の整理 Beginner, CSS, CodingScripting, Learn, comments, formatting, methodologies, organizing, post-processor, pre-processor, styleguide
スタイルシートやプロジェクトが大きい状態で作業しはじめると、巨大な CSS ファイルを維持するのが難しいことがわかります。この記事では、CSS を書いていくのと保守していくのをやりやすくするためのベストプラクティスと、保守性を向上させるための解決策の一部を紹介します。
8 CSS セレクター Attribute, Beginner, CSS, Class, Learn, Pseudo, Selectors, id
CSSでは、ウェブページ上の HTML 要素にスタイルを設定するためにセレクターが使用されます。CSS セレクターにはさまざまな種類があり、きめ細かにスタイルを設定する要素を選択できます。この記事とそのサブ記事では、さまざまなタイプについて、どのように機能するかを詳しく見ていきます。
9 属性セレクター Attribute, Beginner, CSS, Learn, Selectors
HTML の学習で学んだように、要素はマークアップについてさらに詳細な情報を提供する属性を持つことがあります。 CSS では、属性セレクターを使用して、ある種類の属性のある要素を対象に指定できます。このレッスンでは、これらのとても便利なセレクターの使い方を紹介します。
10 疑似クラスと疑似要素
次に取り上げるセレクターのセットは、疑似クラス疑似要素と呼ばれます。これらは多数あり、多くの場合、それらは非常に特定の目的に役立ちます。それらの使用方法がわかったら、リストを見て、達成しようとしているタスクに有効なものがあるかどうかを確認できます。ここでも、各セレクターに関連するMDNページは、ブラウザーサポートの説明に役立ちます。
11 結合子 Beginner, CSS, Learn, Selectors, combinators
ここで取り上げる最後のセレクターは、他のセレクターと、ドキュメント内のコンテンツの場所や場所との有用な関係を提供する方法で組み合わせるため、コンビネーターと呼ばれます。
12 要素・クラス・ID によるセレクター Beginner, CSS, Class, Learn, Selectors, Syntax, id, universal
このレッスンでは、利用できる最も簡単にみえるセレクタをとりあげます。これは今後あなたが作業でよく使うことになります。
13 カスケードと継承 Beginner, CSS, Cascade, Inheritance, Learn, rules, source order, specificity
このレッスンでの目的は、CSS を HTML に適用する方法と競合した場合の解決方法について、もっとも基本的な概念(カスケード・詳細度・継承)の理解を深めていくことです。
14 テキスト方向の操作 Beginner, CSS, Learn, logical properties, writing modes
このレッスンで説明する概念は、CSSでますます重要になっています。ブロックとインラインの方向、および書き込みモードの変更に伴うテキストフローの変化を理解することは、今後非常に役立ちます。水平モード以外の書き込みモードを使用しない場合でも、CSSを理解するのに役立ちます。

次のモジュールでは、CSSのオーバーフローについて詳しく見ていきます。
15 ボックスの高度なエフェクト Article, Beginner, Blend modes, Boxes, CSS, CodingScripting, Filters, Styling, box shadows, effects
この記事が楽しかったことを願っています — ぴかぴかのおもちゃで遊ぶのは概してそうで、最先端のブラウザーで、どのような種類のツールが使用可能になりつつあるのかを見るのはいつも面白いです。 ボックスの装飾の記事の終わりに到達したので、次に私たちの評価であなたのボックスの装飾のスキルをテストします。
16 ボックスモデル Beginner, CSS, Learn, border, box model, display, margin, padding
以上が、ボックスモデルについて理解する必要があるほとんどのことです。レイアウト内の大きなボックスの大きさについて混乱している場合は、このレッスンに戻ってください。
17 画像・メディア・フォーム要素 Beginner, CSS, Forms, Images, Learn, Media, replaced content
このレッスンでは、CSSで画像、メディア、およびその他の異常な要素を操作するときに発生するいくつかの違いを強調しました。次の記事では、HTMLテーブルをスタイルする必要がある場合に役立ついくつかのヒントについて説明します。
18 背景と枠線 Background, Beginner, CSS, Image, Learn, Position, borders, color
このレッスンではかなり多くのことを説明してきましたが、そのなかで背景や枠線をボックスに追加する方法がたくさんあることがわかりました。これまでに説明した機能について詳しく知りたくなったら、各プロパティのMDNページに目を通してみましょう。これらのページには知識を活用したり強化したりするための使用例が書かれています。
19 表のスタイリング Article, Beginner, CSS, CodingScripting, Guide, Styling, Tables
テーブルのスタイリングも終わりに近づいてきたので、他にも何か時間を割くものが必要になってきました。次の記事では、CSS をデバッグする方法を探ります。レイアウトが思うように見えない、プロパティが適用されないなどの問題を解決する方法です。これには、ブラウザの DevTools を使用して問題を解決する方法についての情報も含まれています。
20 要素のはみ出し(オーバーフロー) Beginner, Block Formatting Context, CSS, Data Loss, Learn, overflow
この短いレッスンではオーバーフローの概念を紹介しました。CSS はオーバーフローしたコンテンツが見えなくなることによる、データ損失の回避を試みることを理解しました。潜在的なオーバーフローを管理できること、また、問題のあるオーバーフローを引き起こしてしまわないかを確認する必要があることもわかりました。
21 CSS の第一歩 Beginner, CSS, Landing, Learn, Module, first steps
CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは CSS を習得するために、どう働くかの基本とともに、構文のありかたと HTML にスタイリングを加えることを簡単な始め方を提供します。
22 CSS の全体像 CSS, HTML, コメント, ショートハンド, セレクタ, プロパティ, 値, 初心者, 学習, 構造, 空白
CSSの概要と基本的な使い方について理解できたので、今度は言語自体の構造をもう少し詳しく見てみましょう。 ここで説明した概念の多くはすでに目にしています。 さらに先に進んでわかりにくい概念に出会ったとき、この記事に戻って見直してください。
23 CSS はどう働くか? Beginner, CSS, DOM, Learn
CSS の基本と目的、簡単なスタイルシートの書き方を学んできました。このレッスンでは、ブラウザーが CSS と HTML を実際にウェブページとして表示していくさまを見ていきます。
24 CSS 入門 Beginner, CSS, Classes, Elements, Learn, Selectors, Syntax, state
この記事では、かんたんな HTML コードに CSS を適用させ、その過程でこの言語についての実用的なことを学びます。
25 CSSとは何か? Beginner, CSS, Introduction to CSS, Learn, Modules, Specifications, Syntax
CSS (Cascading Style Sheets;カスケーティングスタイルシート) は見栄えのよいページを作ることができますが、内部ではどう働くのでしょうか?この記事では簡単な構文の例とともに CSS とは何かについて説明し、この言語の重要な用語についても触れます。
26 新しい知識を使う Beginner, CSS, Learn, Playground
先のいくつかのレッスンで、あなたは CSS を使ってシンプルなテキストドキュメントにスタイルを追加してフォーマットする方法を学びました。ここでは、それを実際に行ってみましょう。
27 CSS を使ってよくある問題を解決する Beginner, CSS, Learn
以下のリンクは CSS で解決できるよくある問題の解決法です。
28 Content CSS, CSS:Getting_Started, Getting_Started
 CSS Getting Startedチュートリアルの第9章です; 文書が表示されたとき CSS を使ってコンテンツを追加するいくつかの方法について述べます。スタイルシートを編集して、テキストや画像を追加できます。
29 装飾的なボックスの作成 Beginner, CSS, CodingScripting, Learn
CSS ボックスは、CSS で装飾されたウェブページの構成要素です。 見栄えを良くすることは、楽しさとやりがいの両方です。 デザインのアイデアを実用的なコードに変えることがすべてだからです。 面倒な制約と CSS の使用における狂気の自由のために、それは挑戦的です。 いくつかの装飾的なボックスをやりましょう。
30 CSS レイアウト Beginner, CSS, Floating, Grids, Guide, Landing, Layout, Learn, Module, Multiple column, Positioning, alignment, flexbox, float, table
現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。 今度は、ビューポートや互いを基準にしてボックスを適切な場所に配置する方法を検討します。 必要な前提知識をカバーしているので、さまざまな display の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、CSS レイアウトについて深く掘り下げることができます。
31 CSS レイアウト入門 Article, Beginner, CSS, Floats, Grids, Introduction, Layout, Learn, Positioning, Tables, flexbox, flow
この記事では、知っておくべきすべてのレイアウト技術について簡単に説明しました。 個々の技術の詳細については、続けて読んでください!
32 グリッド Article, Beginner, CSS, CSS Grids, CodingScripting, Grids, Guide, Layout, Learn, Tutorial, grid design, grid framework, grid system
この概要では、CSS グリッドレイアウトの主な機能について説明しました。 あなたのデザインでそれを使い始めることができるはずです。 仕様をさらに深く掘り下げるには、以下にあるグリッドレイアウトのガイドを読んでください。
33 フレックスボックス Article, Beginner, CSS, CSS layouts, CodingScripting, Flexible Boxes, Guide, Layout, Layouts, Learn, flexbox
これで、フレックスボックスの基本についてのツアーは終了です。 私たちはあなたが楽しみを持って、学習と共に前進するにつれてそれと一緒に良い遊びがあることを願っています。 次に、CSS レイアウトのもう1つの重要な側面、CSS グリッドについて見ていきます。
34 フロート Article, Beginner, CSS, Clearing, CodingScripting, Floats, Guide, Layout, columns, multi-column
あなたは今、現代のウェブ開発でフロートについて知っておくべきことがすべてわかっています。 過去のレイアウト方法の使用方法については、過去のレイアウト方法に関する記事を参照してください。 古いプロジェクトで作業している場合に便利です。
35 メディアクエリーの初心者向けガイド Beginner, CSS, Layout, Learn, media query
このレッスンでは、メディアクエリーについて学び、実際にそれらを使用してモバイルファースト レスポンシブデザインを作成する方法もみいだしました。
36 レスポンシブデザイン Images, Media Queries, RWD, Responsive web design, flexbox, fluid grids, grid, multicol, typography
レスポンシブデザインとは、表示される環境に対応するサイトまたはアプリのデザインを指します。 これには多くの CSS および HTML の機能とテクニックが含まれており、現在では基本的に Web サイトをデフォルトで構築する方法になっています。 サイトを携帯電話でアクセスするところを考えてください — デスクトップバージョンを縮小したサイトや、物事を見つけるために横にスクロールする必要があるサイトに出くわすことは、おそらくかなり珍しいことです。 これは、Web がレスポンシブデザインのこのアプローチに移行したためです。
37 位置指定 Article, Beginner, CSS, CodingScripting, Guide, Layout, Positioning, absolute, fixed, relative
私はあなたが基本的な位置指定と一緒に遊ぶことができて楽しかったと確信しています。 これは、レイアウト全体に使用する方法ではありませんが、ご覧のとおり、それが適しているタスクはたくさんあります。
38 古いブラウザーのサポート Beginner, CSS, Guide, Layout, Learn, feature queries, flexbox, float, grid, legacy
今やあなたは自信を持ってグリッドやフレックスボックスのようなテクニックを使い、古いブラウザーのための代替手段を作り、そして将来現れるであろう新しいテクニックを利用する知識を持っています。
39 基礎的なレイアウトの理解 Assessment, Beginner, CSS, Layout, Learn
このモジュールを乗り越えてきたならば、今日 CSS レイアウトを行うために知っておくべきことや、より古い CSS を使って作業するために必要なことの基本についてはすでに説明しているはずです。 このタスクでは、さまざまなテクニックを使用して簡単なウェブページレイアウトを作成することによって、あなたの知識の一部をテストします。
40 実用的な位置指定の例 Article, Beginner, CSS, CodingScripting, Guide, Layout, Learn, absolute, fixed, relative
それでは、位置指定の見方を締めくくります — これまでのところ、基本的な仕組みがどのように機能するのか、またこれらを適用して興味深い UI 機能を構築する方法を理解しているはずです。 これをすぐに理解できなくても心配しないでください — 位置指定はかなり高度なトピックであり、理解を助けるために記事をいつでも再び参照することができます。 次の話題はフレックスボックスです。
41 段組みレイアウト Beginner, CSS, Guide, Layout, Learn, Learning, Multi-col, Multiple columns
これで、構築中のデザインのレイアウト方法を選択するときに、意のままにできるもう一つのツールである段組みレイアウトの基本機能の使用方法がわかりました。
42 通常フロー Article, Beginner, CSS, Introduction, Layout, Learn, float, grid
通常フロー、およびブラウザーがデフォルトでどのようにレイアウトするかを理解したので、次にこのデフォルトの display を変更してデザインに必要なレイアウトを作成する方法を理解することに進みます。
43 過去のレイアウト方法 Beginner, CSS, Floats, Guide, Layout, Learn, grid system, legacy
これで、さまざまなグリッドシステムの作成方法が理解できました。 これは、古いサイトでの作業や、CSS グリッドレイアウトのネイティブグリッドとこれらの古いシステムとの違いの理解に役立ちます。
44 テキストの装飾 Beginner, CSS, CodingScripting, Fonts, Landing, Links, Module, Text, font, letter, line, lists, shadow, web fonts
CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で行う最も一般的なことの一つです。 ここでは、フォント、太字、イタリック体、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。
45 ウェブフォント @font-face, Article, Beginner, CSS, CSS Fonts, Fonts, Guide, Learn, Web Development, Web Fonts Article, Web fonts documentation, font-family, web fonts
これは、幅、太さ、スタイルごとに別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを一つのファイルに組み込むことができるフォントです。これらのフォントは初心者向けのコースにしてはやや高度なものですが、もしあなたが自分自身を伸ばして調べたいと思っているのであれば、可変フォントガイドを読んでみてください。
46 コミュニティスクールのホームページの組版 Assessment, Beginner, CSS, CodingScripting, Link, Styling text, font, list, web font
この評価では、コミュニティスクールのホームページ用にテキストを装飾することで、このモジュール全体でカバーしてきたすべてのテキスト装飾テクニックについての理解をテストします。 途中で楽しい時間があるかもしれません。
47 リストの装飾 Article, Beginner, CSS, Guide, Styling, Text, bullets, lists
関連するいくつかの基本的な原則と特定のプロパティを知っていれば、リストの装飾のこつは比較的簡単です。 次の記事では、リンクの装飾テクニックについて説明します。
48 リンクの装飾 Article, Beginner, CSS, Focus, Guide, Learn, Links, Pseudo-class, hover, hyperlinks, menus, tabs
あなたはこの記事の最後に到達し、すでに私たちのアクティブラーニングのセクションでいくつかのスキルテストを行いましたが、今後の最も重要な情報を覚えていますか?この情報を保持しているかどうかを確認するためのアセスメントがモジュールの最後にあります。コミュニティスクールのホームページの組版を参照してください。
49 基本的なテキストとフォントの装飾 Article, Beginner, CSS, Guide, Style, Text, alignment, family, font, shorthand, spacing, weight
この記事のテキストで遊んで楽しんでくださいね! 次の記事では、HTML リストの装飾について知っておくべきことをすべて説明します。
50 HTML の学習: ガイドとチュートリアル Beginner, Guide, HTML, Intro, Learn, Topic, ガイド, トピック, 初心者, 学習, 導入
ウェブサイトを構築するためには、ウェブページの構造を定義するための基本的な技術である HTML 言語を知っておくべきでしょう。 HTML はウェブコンテンツをどのよう解釈するべきかを特定するために使用します。段落、リスト、見出し、リンク、画像、マルチメディアプレーヤー、フォーム、又は他の数多くの要素の一つ、又はユーザーが定義した新しい要素などです。
51 HTML テーブル Article, Beginner, CodingScripting, Guide, HTML, Landing, Module, Tables
HTML でのとてもよくある仕事はテーブルデータの構造化で、数々の要素と属性がこの目的のためにあります。スタイリング用の CSS と組み合わせて、HTML は Web 上に、学校の授業の計画や、水泳の時間割や、好きな恐竜やフットボールチームの統計情報といった、情報のテーブルを簡単に表示できます。このモジュールではHTMLを使ってテーブルデータを構造化するのに必要な知識を一通り案内します。
52 HTML の表の基本 Beginner, CodingScripting, HTML, Learn, basics, col, colgroup, colspan, header, row, rowspan, セル, テーブル, 記事
HTML テーブルの基本はこれで終わりです。次の記事では、もう少し高度なテーブルの機能を見て、視覚障害者にとってそれらがどれほどアクセシブルであるかを考えます。
53 HTML 表の高度な機能とアクセシビリティ Accessibility, Advanced, Article, Beginner, CodingScripting, HTML, Headers, Learn, caption, scope, sumary, table, tbody, tfoot, thead
表の HTML について他にも学べることがいくつかありますが、現時点で知っておく必要があることは全てここで説明しました。 この時点で、HTML の表のスタイリングについて学びたいと思うかもしれません — スタイリングされた表を参照してください。
54 評価: 太陽系の惑星のデータを構造化する Assessment, Beginner, CodingScripting, HTML, Learn, テーブル
テーブルの評価では、太陽系の惑星に関するいくつかのデータを提供し、それを HTML テーブルに構造化しましょう。
55 HTML 入門 CodingScripting, HTML, Introduction to HTML, Landing, Links, Structure, Text, head, semantics
本来、HTML は、要素で構成される極めてシンプルな言語です。HTMLは、テキストの断片に、文書における他とは異なる意味 (段落なのか?箇条書きなのか?表の一部なのか?) を与え、文書を論理的なセクションに構成し (ヘッダを持つのか?コンテンツを3段組にするのか?ナビゲーションメニューを持つのか?) 、ページに画像や動画のようなコンテンツを貼り付けるために使うことができます。このモジュールでは、これらのうち最初の2つについて紹介し、HTMLを理解する上で知る必要がある基本的な概念や文法について紹介します。
56 HTML のデバッグ CodingScripting, HTML, エラー, ガイド, デバッグ, バリデーション, バリデーター, ビギナー
HTML を書くことは良いですが、何か問題が生じた場合どうなります?また、コード内のどこにエラーがあるか見つけられますか?この記事では HTML 内のエラーの発見、および修正の手助けをしてくれるいくつかのツールを紹介します。
57 HTML を始めよう Attribute, Beginner, CodingScripting, Comment, Element, Guide, HTML, entity reference, whitespace
この記事の最後にたどり着きました — HTML のほんの初歩のツアーを楽しんでこられたことを望んでいます!ここではこの言語がどのようなものか、基本的にどうやって動作するのかを理解し、いくつかの要素と属性を書くことができるようになったでしょう。あなたがいる場所は完璧な場所です、続きの記事ではすでに見てきたことをもっと詳細に経験して、いくつか新しい言語機能を紹介します。引き続き注目!
58 HTML テキストの基礎 Beginner, CodingScripting, Guide, HTML, Introduction to HTML, Learn, Text, headings, paragraphs, semantics
今はここで終わりとしましょう。 この記事では、HTMLでテキストをマークアップする方法についての優れたアイデアを説明し、この分野で最も重要な要素のいくつかを紹介しました。この分野には、さらに多くのセマンティック要素を網羅する必要があります。この後の「その他のセマンティック要素」の記事で、さらに詳しく説明します。 次回の記事では、Web上で最も重要な要素と思われるハイパーリンクの作成方法について詳しく説明します。
59 head には何が入る? HTML のメタデータ Beginner, CodingScripting, Guide, HTML, Meta, favicon, head, lang, metadata
これで HTML head の弾丸ツアーは終了します。ここでできることは他にもたくさんありますが、この段階では徹底的なツアーでは退屈で混乱を招くことになるでしょうから、もっとも一般的なことに関する考えだけを紹介したかったのです。たった今、そこに到達しました。次回の記事では、HTML テキストの基礎について説明します。
60 コンテンツページを構造化する Beginner, CodingScripting, HTML, セマンティクス, デザイン, レイアウト, 学習, 構造, 評価
CSS を使用してレイアウトできるようにコンテンツのページを構成することは、習得が非常に重要なスキルです。そのためこの評価では、ページがどのように表示されるのかを検討し、適切な構造セマンティクスを選択してその上にレイアウトを構築する能力についてテストします。
61 ドキュメントと Web サイトの構造 Beginner, CodingScripting, Guide, HTML, Layout, Page, Site, blocks, semantics
この時点であなたはウェブページ/サイトをどのように構成するかについてより良い考えを持っているはずです。このモジュールの最後の記事では、HTML をデバッグする方法を学びます。
62 ハイパーリンクの作成 Beginner, CodingScripting, Guide, HTML, Learn, Links, Title, absolute, hyperlinks, relative, urls
とにかく今のところ、それはリンクのためのそれです!
スタイルの設定を見始めると、コースの後半のリンクに戻ります。次に HTML について説明します。テキストのセマンティクスに戻って、役に立つと思われるより高度な機能や変わった機能について説明します。高度なテキストの書式設定は、次に行うことです。
63 手紙をマークアップする Beginner, CodingScripting, HTML, head, テキスト, リンク, 評価
この課題を開始するには、マークアップする必要がある生のテキストと、HTML に含める必要がある CSS を入手します。テキストエディタを使用して新しい .html ファイルを作成し、作業を行います (または、JSBinThimble などのサイトを使用して課題を行います)。
64 高度なテキスト処理 Beginner, CodingScripting, Guide, HTML, Learn, Text, abbreviation, description list, quote, semantic
これで HTML テキストのセマンティクスに関する学習が終わりました。このコースで見たことが HTML テキスト要素の完全なリストではないことに注意してください — 私たちは必要不可欠なもの、そしてあなたがどこかで見るであろう、あるいは少なくとも面白いと思うかもしれないより一般的なものの一部をカバーしたいと思いました。もっと多くの HTML 要素を見つけるために、HTML 要素のリファレンス (インラインテキストセマンティクスセクションは始めるのに素晴らしい場所でしょう) を参照することができます。次回の記事では、HTML 文書のさまざまな部分を構造化するために使用する HTML 要素について説明します。
65 マルチメディアとその埋め込み方 Assessment, Audio, Beginner, CodingScripting, Flash, Guide, HTML, Images, Landing, Learn, SVG, Video, iframes, imagemaps, responsive, イメージマップ, ガイド, フラッシュ, レスポンシブ, 初心者, 動画, 学習, 画像, 着地ページ, 評価試験, 音声
このコースではここまで多くのテキストを見てきましたが、ただテキストだけのWebでは面白くありません。Web が生き生きとして、面白いコンテンツがどんどんあふれるようにする方法を見ていきましょう! このモジュールでは、HTMLをどのように用いれば、あなたの Web ページにマルチメディアを含めることができるかについて学びます。 また、画像を挿入するためのさまざまな方法や、動画・音声、さらには他の Web ページ全体を挿入する方法についても触れます。
66 HTML の画像 Beginner, Guide, HTML, Image, alt text, captions, figcaption, figure, img, ガイド, キャプション, 代替テキスト, 初心者, 図表, 画像, 記事
最初は、Web は単なるテキストに過ぎず、とても退屈でした。幸運なことに、Web ページ内に画像 (および他のより興味深いタイプのコンテンツ) を埋め込む能力が追加されるまでにはあまり時間がかかりませんでした。考慮すべき他のタイプのマルチメディアもありますが、単純な画像を Web ページに埋め込むために使用される、慎ましい <img> 要素から始めるのが理にかなっています。この記事では、基本的な使い方を含め、<figure> を使ったキャプションの注釈付け、CSS 背景画像との関連付けなど、詳細な使い方を見ていきます。
67 Mozilla のスプラッシュページ Assessment, Beginner, CodingScripting, Embedding, HTML, Multimedia, Video, iframe, picture, responsive, sizes, srcset, マルチメディア, レスポンシブ, 初心者, 動画, 埋め込み, 評価試験
今回の評価試験では、このモジュールの記事で説明したいくつかの技術の知識をテストするために、Mozilla のすべてついてのファンキーなスプラッシュページに、いくつかの画像と動画を追加してもらいます!
68 Web にベクターグラフィックスを追加する Beginner, Graphics, Guide, HTML, Images, Learn, Raster, SVG, Vector, iframe, img, ガイド, グラフィックス, ベクター, ラスター, 初心者, 学習, 画像
この記事では、ベクターグラフィックと SVG の概要、それらをなぜ知っておくと便利なのか、そして SVG をWebページに組み込む方法について簡単に説明しました。SVG を学ぶ上での完全なガイドとなることは決して考えられていませんでしたが、Web上の旅行でそれに会っていれば、SVG が何であるかを知ることができます。あなたがまだ SVG のエキスパートではないと感じたら心配しないでください。もしそれがどう動くかについて詳しく知りたいなら助けになる以下のリンクを参考にしてください。
69 object から iframe へ — その他の埋め込み技術 Article, Beginner, CodingScripting, Embedding, Flash, Guide, HTML, Learn, Multimedia and embedding, Object, embed, iframe, ガイド, フラッシュ, マルチメディアと埋め込み, 初心者, 埋め込み, 学習, 記事
Web ドキュメントに他のコンテンツを埋め込むという話題は、すぐに非常に複雑になる可能性があるので、関連する技術のより高度な機能のいくつかを示唆しながらも、すぐに関連すると思われる単純で使い慣れた方法で紹介しようとしました。まず、あなたのページに地図や動画などの第三者のコンテンツを含めること以外に埋め込みを使用する可能性は低いです。しかし、経験が増すにつれて、より多くの用途を見つけることになるでしょう。
70 レスポンシブ画像 Article, Beginner, CodingScripting, Design, Graphics, Guide, HTML, Image, Intermediate, img, picture, sizes, srcset, ガイド, グラフィックス, デザイン, 中級, 初心者, 画像, 記事
それはレスポンシブ画像のラップです — あなたはこれらの新しいテクニックで遊ぶことを楽しんでください。 要約すると、私たちがここで議論してきた2つの明確な問題があります。
71 動画と音声のコンテンツ Article, Audio, Beginner, Guide, HTML, Video, captions, subtitles, track, ガイド, 初心者, 動画, 記事, 音声
それはラップです。Web ページで動画や音声を楽しみながら楽しく遊びました!  次の記事では、<iframe><object> などの技術を使用して、Webにコンテンツを埋め込む他の方法について説明します。
72 一般的な問題解決に HTML を使う CodingScripting, HTML
下記のリンクは、日常の解決すべき問題を HTML を使って解決する解決法を指しています。
73 HTML で用語を定義する Beginner, Guide, HTML, Learn
用語の意味が必要なときは、おそらくまっすぐに辞書や用語集に行くでしょう。 辞書や用語集は、キーワードを1つ以上の説明と正式に関連付けます。 この場合は次のようになります。
74 ウェブページで JavaScript を使う方法 Beginner, HTML, JavaScript, OpenPractices
JavaScript はウェブページをインタラクティブにするための、主にクライアントサイドで使われるプログラミング言語です。 JavaScript を使わなくてもすばらしいウェブページを作ることができますが、JavaScript は全く新しいレベルの可能性を開きます。
75 データ属性の使用 HTML, HTML5, ウェブ, ガイド, 例, 独自データ属性
HTML5 は、特定の要素に関連付ける必要があるが、定義済みの意味を持つ必要のないデータに対する拡張性を念頭に置いて設計されています。 data-* 属性により、標準外の属性、 DOM の追加プロパティ、 Node.setUserData() のような特殊な方法に頼らずに、標準的な意味のある HTML 要素に追加情報を格納することができます。
76 画像にヒットマップを追加する Graphics, Guide, HTML, Intermediate, Navigation
<a> 内に画像をネストすると、画像全体が1つのウェブページにリンクします。 一方、イメージマップは、それぞれが異なるリソースにリンクするいくつかのアクティブな領域(「ホットスポット」と呼ばれます)を含みます。
77 HTML フォーム Beginner, Featured, Forms, Guide, HTML, Landing, Learn, Web
このモジュールでは、ウェブフォームの習得に役立つ一連の記事をそろえています。ウェブフォームは、ユーザーとやり取りするための強力なツールです — 通常、ユーザーデータを集めたり、ユーザーインターフェイスの制御に使われてきました。しかし歴史的および技術的な理由から、その能力を十分に生かして使用する方法は、必ずしも明確とは限りません。このガイドではウェブフォームの構造からスタイル、データの検証やサーバーへの送信まであらゆる本質的な側面を取り上げます。
78 HTML フォームへのスタイル設定 CSS, Example, Forms, Guide, HTML, Intermediate, Web
前の記事ではウェブフォームを構築するのに必要な HTML のすべてを見てきました。この記事ではフォームコントロールにスタイル設定する CSS の使い方に進みます。これは歴史的に難しかったです — フォームコントロールは大きく変わり CSS を使ったフォームのカスタマイズは簡単になりました— しかし古いブラウザーが引退してモダンブラウザーが多くの機能を与えるため、より簡単になりました。
79 HTML フォームへの高度なスタイル設定 Advanced, CSS, Forms, HTML, Web, ガイド, 例
HTML フォームで CSS を使用するのはまだ困難ですが、しばしばそれらを回避する方法があります。クリーンでユニバーサルな解決方法はありませんが、最新のブラウザーでは新しい可能性があります。今のところ、最良の解決策は、HTML フォームウィジェットに適用されたときに異なるブラウザーが CSS をサポートする方法の詳細を学ぶことです。
80 HTML5 入力タイプ Beginner, Controls, Example, Forms, Guide, HTML, Web, Widgets
ここで HTML5 フォーム入力タイプの旅が終了です。動作が特殊なため簡単に分類できないその他のコントロールタイプも少しあって、それを知るのも大事です。次の記事で扱います。
81 JavaScript によるフォームの送信 Advanced, Example, Forms, Forms Guide, Guide, HTML, HTML forms, JavaScript, Learn, Security, Web, Web Forms
HTML フォームは HTTP リクエストを宣言的に送信できます。しかし、フォームは 、例えば XMLHttpRequest のように JavaScript 経由で送信する HTTP リクエストを準備することもできます。この記事ではその方法を探ります。
82 UI 擬似クラス Beginner, CSS, Example, Forms, Guide, HTML, Pseudo-classes, Styling, Web
This completes our look at UI pseudo-classes that relate to form inputs. Keep playing with them, and create some fun form styles! Next up, we'll move on to something different — client-side form validation.
83 その他のフォームコントロール Beginner, Controls, Example, Forms, Guide, HTML, Web, Widgets
最も後のいくつかの記事で見てきたように、利用できるフォーム要素にはいろいろな種類がたくさんあります。一見してすべてを詳しく覚えておく必要はなく、詳細について調べたいだけ、記事に戻ることができます。
84 カスタムフォームコントロールの作成方法 Advanced, Example, Forms, Guide, HTML, Web
HTML フォームで使用可能なコントロールだけでは十分でない場合が多くあります。例えば、<select> 要素のようなコントロールに高度なスタイル設定を行いたい場合や、独自の動作を提供したい場合は、あなた独自のコントロールを作成するしかありません。
85 例 1
これは、カスタムフォームウィジェットの作成方法を説明する最初のコード例です。
86 例 2 Forms, HTML
これは、カスタムフォームウィジェットの作成方法を説明する2番目の例です。
87 例 3 Forms, HTML
これは、カスタムフォームウィジェットの作成方法を説明する3番目の例です。
88 例 4 Advanced, Example, Forms, Guide, HTML, Web
これは、カスタムフォームウィジェットの作成方法を説明する4番目の例です。
89 例 5 Forms, HTML
これが、カスタムフォームウィジェットの作成方法を説明する最後の例です。
90 クライアント側のフォームデータ検証 HTML, Intermediate, JavaScript, Web, ウェブ, ガイド, フォーム, フォーム検証, 中級者向け, 例
データをサーバーへ送信する前に、必須のフォームコントロールが記入され、すべてのフォームコントロールが正しい書式で記入されていることを保証することが重要です。このクライアント側フォーム検証validationは、送信されるデータが様々なフォームコントロールで指定されている要件を満たしていることを保証します。この記事では、クライアント側フォーム検証の基本概念と例を紹介します。
91 ネイティブフォームウィジェット Example, Forms, Guide, HTML, Intermediate, Web
直前の記事では、機能的なウェブフォームの例をマークアップし、いくつかのフォームコントロールとよくある構造要素を導入し、アクセシビリティのベストプラクティスを見てきました。次にさまざまなフォームコントロールやウィジェットの機能を詳しく見ていきます — 色々な種類のデータを集めるのにどんなオプションが使えるのかを見ていきます。とりわけこの記事では、ウェブの初期からある全てのブラウザーで利用できる、オリジナルのフォームコントロールを見ていきます。
92 フォームの構築方法 CodingScripting, HTML, Web, ガイド, フォーム, 例, 初心者, 学習, 構造
基本から外れて、ここでは色々なフォームのパーツを構造化し、意味をつけるのに使われる要素を詳しく見ていきます。
93 例: お支払いフォーム
これは記事 HTML フォームの構築方法の基本的なお支払いフォームの例です。
94 フォームウィジェット向けプロパティ実装状況一覧 Advanced, CSS, Forms, Guide, HTML, NeedsUpdate, Web, ウェブ, ガイド, フォーム, 高度
以下の実装状況一覧表で、 HTML フォーム向けの CSS の対応状況を要約しています。 HTML フォームや CSS の複雑さにより、これらの表は完全なリファレンスであるとはいえません。それでも、何ができて何ができないかの見識を得られるでしょう。また、どうすればよいかを知る助けにもなるでしょう。
95 フォームデータの送信 Beginner, CodingScripting, Guide, HTML, HTTP, Web, セキュリティ, ファイル, フォーム
フォームがクライアント側で検証されたら、フォームの送信は大丈夫です。前の記事では検証をカバーしたので、送信する準備はできています! この記事では、ユーザーがフォームを送信したときに何が起こるか、つまりデータがどこへ行くのか、そこに来たときにどう扱うのかを見ます。また、フォームデータの送信に関連するセキュリティの考慮事項のいくつかも見てみます。
96 初めてのフォーム Beginner, CodingScripting, Example, Forms, Guide, HTML, Learn, Web, ウェブ, ガイド, フォーム, 初心者向け, 学習
おめでとうございます! 初めてのウェブフォームが完成しました。こちらが最終結果のデモです。
97 CodingScripting, HTML, Web, ガイド, フォーム, 例, 初心者, 学習
これは最初の HTML フォームの記事のサンプルコードです。
98 古いブラウザでの HTML フォーム Example, Forms, Guide, HTML, Intermediate, Web
すべての Web 開発者は、Web が非常につらい場所であることをいち早く (時に痛いほど) 学びます。もっともいまいましいのは古いブラウザです。まあそれは受け入れて、我々が「古いブラウザ」と言うとき、みんなが古いバージョンの Internet Explorer を念頭に置いています...しかしそれだけではありません。ESR バージョンのような1年経過した Firefox もまた古いブラウザです。そしてモバイルの世界では? ブラウザも OS もアップデートできないときは?そう、最新ではない標準的なブラウザを搭載している多くの古い Android 携帯電話または iPhone があります。これらも古いブラウザです。
99 JavaScript CodingScripting, JavaScript, JavaScripting beginner, Landing, Module, Topic, l10n:priority, 初心者
JavaScript はウェブページ上に複雑なものを実装することを可能にするプログラミング言語です。ウェブページが表示されるたびに静的な情報が表示されるだけでなく、タイムリーにコンテンツを更新したり、インタラクティブマップや 2D/3D グラフィックスのアニメーションを表示したり、またはビデオジュークボックスが流れたりします。ほかにもありますが、これらは 間違いなく JavaScript が関係しています。
100 JavaScript の構成要素 Article, Assesment, Beginner, CodingScripting, Conditionals, Functions, Guide, JavaScript, Landing, Loops, Module, events, l10n:priority
このモジュールでは、条件付きステートメント、ループ、関数、イベントなど一般的に発生するコードブロックの種類に注目し、JavaScript の重要な基本機能をすべてカバーしていきます。コースの中で既にこれらを目にしているのですが、説明を省いてきました。ここではすべて明示的に説明を行います。
101 イベントの紹介 Beginner, CodingScripting, JavaScript, イベント, イベントハンドラー, ガイド, 学習, 記事
イベントは、あなたがプログラムを書いているシステムで生じた動作、出来事を指します。システムからあなたへ、イベントとして何かあった事を知らせてくるので、必要であればそれに何らかの反応を返す事ができます。例えば、ユーザーがウェブページ上でボタンを押したとき、ある情報を表示するように反応させたいと思うかもしれません。この記事では、イベントに関する重要な概念を取り上げ、ブラウザーの中でのイベントの振る舞いを見ていきます。ここでは、全てを説明するのではなく、この段階で知っておくべき内容を取り上げます。
102 イメージギャラリー Assessment, Beginner, CodingScripting, Conditionals, Event Handler, JavaScript, Learn, Loops, events
Javascript の基本的な構成要素を見てきたところで、これからたくさんのウェブサイトで見かける項目、Javascript で動作するイメージギャラリーをつくってみることで、あなたが得た繰り返し、関数、条件とイベントの知識を試してみましょう。
103 コードでの意思決定 — 条件文 Article, Beginner, CodingScripting, Conditionals, JavaScript, Learn, Switch, conditions, else, if, l10n:priority, ternary
どのプログラミング言語でも、コードは様々な入力に応じた決定を迫られ、その結果として動作を起こします。例えば、ゲームではプレイヤーの残機が 0 になった場合、ゲームオーバーとなります。天気アプリは朝に起動された場合は日の出の画像を表示し、夜に起動された場合は星や月の画像を表示します。この記事では、JavaScript において、条件文と呼ばれるものがどのように動作するかを説明します。
104 ループコード Article, Beginner, CodingScripting, DO, Guide, JavaScript, Learn, Loop, break, continue, for, l10n:priority, while
プログラミング言語は、繰り返し実行するタスクを素早く終わらせるのがとても得意です。基本的な計算処理から、同じような作業がたくさんあるのならどんな状況でもこなします。今度は JavaScript でそういった目的を果たすために使用するループ構造を見てみましょう。
105 独自の関数を作る Article, Beginner, CodingScripting, Functions, Guide, JavaScript, Learn, Tutorial, build, invoke, l10n:priority, parameters
前の記事で扱った重要な理屈をたくさん使って、この記事では実践的な練習を行ないます。ここではあなたが自力で独自関数を作成するための練習を行なっていきます。同時に、関数を扱う上で役に立つ細々の説明もしていきます。
106 関数 — 再利用可能なコードブロック API, Article, Beginner, Browser, CodingScripting, Custom, Functions, Guide, JavaScript, Learn, Method, anonymous, invoke, l10n:priority, parameters
コーディングにおいて、不可欠なコンセプトが関数です。関数を使用することで、特定のタスクをこなすコードを定義し、保持しておいて、いつでも簡単なコマンドで呼び出すことを可能にしてくれます。同じコードを何度も打たなければならないよりとっても簡単です。この記事では関数の書き方や、関数を実行する方法、定義の仕方、スコープ、引数といった関数に関する基礎を学びます。
107 関数の戻り値 リターン, リターン値, 戻り値, 返り値, 返却値, 関数
このコースでの関数の学習を終えるために、最後に議論しておくべき大事なコンセプトがあります。それは戻り値です。関数によっては完了時に特定の値を返さないものもありますが、値を返すものも当然あります。それらの値が何であるか、どのようにカスタム関数に意味のある値を返させるのかについて理解することは重要です。これらについてすべてを以下で紹介します。
108 JavaScript の第一歩 Arrays, Article, Assessment, Beginner, CodingScripting, Guide, JavaScript, Landing, Module, Numbers, Operators, Variables, l10n:priority, maths, strings
最初の JavaScript のモジュールでは、初めて JavaScript を書く実践的な経験を体験する前に、「JavaScript とは何?」や「どのようなもの?」や「何ができる?」といったような基本的な質問に答えます。その後変数や文字列、 数値、配列といったような言語の内容をお話します。
109 JavaScript とは CodingScripting, JavaScript, l10n:priority, インライン, コア, コメント, サードパーティー, スクリプト, ブラウザー, 初心者, 外部, 学習, 記事
さて、JavaScript の世界に足を踏み入れましたね。なぜ JavaScript を使い、何ができるのかということに慣れるため、まずは理論から始めました。進むにつれ、少しでしたが例を見て、何よりも JavaScript がどのようにウェブサイトの他のコードに組み込まれているかを学習しました。
110 JavaScriptでの基本演算 — 数値と演算子 Article, Beginner, CodingScripting, Guide, JavaScript, Learn, Math, Operators, augmented, increment, l10n:priority, maths, modulo
この記事では、JavaScript の数値処理で知っておくべき基礎的なことを学びました。JavaScript を学習する間、今後も繰り返し数値を扱うことになるので、しっかりと復習しておきましょう。数学が好きではなくとも、この章はとても短いので安心して (復習して) ください。
111 JavaScriptへの最初のダイブ CodingScripting, Conditionals, JavaScript, Objects, Operators, events, l10n:priority, 初心者, 変数, 学習, 記事, 関数
JavaScript の理論、そしてそれを使ってできることについて学んだところで、完全に実用的なチュートリアルを通じて、JavaScript の基本的な機能についての短期集中コースをお見せします。ここでは、簡単な「数字を当てる」ゲームをステップバイステップで構築します。
112 テキストを扱う — JavaScript での文字列 Article, Beginner, CodingScripting, Guide, JavaScript, Join, Quotes, concatenation, l10n:priority, strings
プログラミングでは文字の羅列を文字列と呼びますが、次はこれを学習しましょう。この記事では、JavaScript でよく使われる、文字列を作ったり、引用符をエスケープしたり、文字列を結合したりといった、文字列について本当に知っておくべきことだけを見てみましょう。
113 バカ話ジェネレーター Arrays, Assessment, CodingScripting, JavaScript, Numbers, Operators, Variables, l10n:priority, strings, 初心者, 学習
この評価試験では、このモジュールを通して身に付けた知識を生かして、ランダムなバカ話を生成する楽しいアプリを作ります。楽しんでください!
114 何が間違っている? JavaScript のトラブルシューティング Article, Beginner, CodingScripting, Debugging, Developer Tools, Error, JavaScript, Learn, Tutorial, console.log, l10n:priority
やっとここまで来ましたね。簡単な JavaScript プログラムのエラーを見つけ出すための基本が理解できました。コードの間違いを解決するのがいつも簡単とは限りませんが、特に学習の最初の過程で、うまくいかない時があったとしても、基本を押さえていれば、多少は寝る時間が取れたり、多少早く進捗をあげられたりするでしょう。
115 便利な文字列メソッド Article, Beginner, CodingScripting, JavaScript, Learn, case, indexof, l10n:priority, length, lower, replace, split, upper
文字列の基本についてはすでに見ました。ここからはレベルを上げて、組み込みのメソッドを使用して文字列に対して実行できる便利な操作について考えてみましょう。例えば、文字列の長さを調べたり、繋げたり、分割したり、ある文字を他の文字に置き換えたりなどです。
116 必要な情報を保存する — 変数 Arrays, Booleans, JavaScript, Numbers, Objects, Updating, Variables, declaring, initializing, l10n:priority, loose typing, strings
ここまでで JavaScript の変数の作り方について理解して、それ以外にもそれなりの知識を得ましたね。次の記事では、数値に焦点を当てて、JavaScript の数値計算の基礎について見ていきます。
117 配列 CodingScripting, JavaScript, Join, Pop, Push, l10n:priority, shift, split, unshift, 初心者, 学習, 記事, 配列
このモジュールの最後に、配列について見ていきましょう。配列は 1 つの変数名でリスト形式のデータを保持するのに好都合です。ここでは、どう便利なのか、どのように作るのか、そして配列の項目を追加したり削除したり取得したりする方法について学びます。
118 JavaScript オブジェクト入門 Article, Assesment, Beginner, CodingScripting, Guide, JavaScript, Learn, Objects, Tutorial, 学習
JavaScript では、文字列や配列などの JavaScript のコア機能から、JavaScript の最上部に構築されたブラウザ API まで、ほとんどのものがオブジェクトです。関連する関数や変数を効率的なパッケージにカプセル化して、便利なデータコンテナーとして動作する独自のオブジェクトを作成することもできます。JavaScript のオブジェクトベースの性質を理解することは、言語に関する知識をさらに深め、より効率的なコードを書く場合に重要です。したがって、この役立つモジュールを用意しました。ここではオブジェクトの理論と構文を詳しく説明し、独自のオブジェクトを作成する方法を見ていきます。
119 JSON データの操作 Article, Beginner, CodingScripting, Guide, JSON, JavaScript, Learn, Objects, Tutorial, l10n:priority
この節では、プログラム内で、JSON を生成する、JSON をパースする、JSON データを参照するなど、JSON を扱う方法について簡単に説明しました。次の節では、オブジェクト指向 JavaScript について見ていくことにします。
120 JavaScript での継承 Article, CodingScripting, Inheritance, JavaScript, OOJS, OOP, Object, Prototype, l10n:priority, 初心者, 学習
OOJS (Object-oriented JavaScript の略) ライブラリが提供する各種機能のうち、ここでは”親”クラスからの機能を継承する”子供”のオブジェクトクラス (コンストラクタ) の生成方法について解説します。なお、Javascript のコンストラクタは Java のコンストラクタとは内容が全く異なるものであることに注意する必要があります。
121 JavaScript オブジェクトの基本 API, Article, Beginner, CodingScripting, JavaScript, Syntax, bracket notation, dot notation, instance, object literal, this, オブジェクト, 学習, 理論
お疲れ様でした。最初の JS オブジェクトの記事の終わりまで到達しました。JavaScript のオブジェクトがどのように機能するかについて、良い考えを得ることができたのではないでしょうか。記事では、簡単なオリジナルオブジェクトの作成を含んでいました。オブジェクトはデータやファンクション関連を保存する構造として非常に便利であることも理解しなければいけません。もし別々の変数と関数として、person オブジェクトのすべてのプロパティとメソッドを記録していくとすると、非効率でありストレスが溜まります。そして同じ名前の他の変数や関数をクラッシュしてしまう危険性も抱えてしまいます。オブジェクトは有害な方法を避けて、パッケージの中で安全に鍵をして情報を守ってくれます。
122 Object のプロトタイプ Beginner, CodingScripting, JavaScript, Learn, OOJS, OOP, Object, Prototype, create(), l10n:priority, コンストラクタ, 記事
プロトタイプは JavaScript オブジェクトが機能を互いに継承するメカニズムです。この記事ではプロトタイプチェーンの動作を説明し、prototype プロパティを使用して既存のコンストラクタにメソッドを追加する方法を見ていきます。
123 オブジェクト作成の練習 Article, Beginner, Canvas, CodingScripting, Guide, JavaScript, Learn, Objects, Tutorial, l10n:priority
自分版の実世界で跳ね回るランダムボール例作り、この全単元で出てきた様々なオブジェクトやオブジェクト指向テクニックを使ったものをあなたに楽しんでいただけていれば、と思います。オブジェクトの実践的な使い方の練習や、実世界のコンテキストについて得られるものがあったはずです。
124 バウンスボールに機能を追加する Assessment, Beginner, CodingScripting, JavaScript, Learn, OOJS, Object-Oriented, Objects, l10n:priority
この評価では、前の記事のバウンスボールのデモを出発点として用い、いくつかの面白い機能を新たに追加してもらいます。
125 初心者のためのオブジェクト指向 JavaScript Beginner, Create, JavaScript, OOJS, OOP, オブジェクト, オブジェクト指向, 学習, 記事
この記事はオブジェクト指向の理論の概略を見てきました。これですべてではありませんが、ここで扱っていることに関する考えを提示しました。加えて、オブジェクトのインスタンスを生成する様々な方法を見始めたところです。
126 JavaScriptのコードのよくある問題を解決する Beginner, JavaScript, Learn
JavaScript のコードが正しく動作しないので修正したい、というような場合にみられる、よくある問題の解決方法へのリンクを以下に示します。
127 クライアントサイド Web API API, CodingScripting, DOM, JavaScript, Landing, WebAPI, グラフィック, データ, メディア, モジュール, 初心者向け, 学習, 記事
Web サイトやアプリケーション用にクライアント側のJavaScriptを書いていると、すぐにアプリケーションプログラミングインターフェース (Apprication Programming Interfaces、API) にでくわします。API とはブラウザやサイトが動作している OS の様々な面を操作したり、他の Web サイト、サービスから取得したデータを操作するためのプログラムされた機能です。このモジュールでは API とは何か、開発作業の中でよく見かける最もよく利用される API のいくつかについて、どのように使うかを説明していきます。
128 Web API の紹介
まずはAPIを高い視点から見ていきます — これは何なのか、どう働くのか、あなたのコードでどう使うのか、どういう風に作られているのか? また様々なクラスのAPIは何なのか、どのような使い方があるのかも見ていきます。
129 クライアント側ストレージ API, Article, Beginner, CodingScripting, Guide, IndexedDB, JavaScript, Learn, Storage, Web Storage, ウェブストレージ, ガイド, 保存, 初心者, 学習
これで終わりです。クライアント側での保存の技術についてのこの概要を、皆さんが有用だと思ってくださったのであれば良いな、と望んでいます。
130 グラフィックの描画 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!
131 サードパーティ API 3rd party, API, Beginner, CodingScripting, Google Maps, Learn, NYTimes, Third party, youtube
これまで説明してきた API はブラウザーに組み込まれていましたが、すべての API がそうというわけではありません。Google Maps・Twitter・Facebook・PayPal などの大規模なサイトやサービスの多くは開発者がそれらのデータ (ブログに Twitter のストリームを表示するなど) やサービス (ユーザーのログインに Facebook ログインを利用するなど) を利用できるように API を提供しています。この記事ではブラウザー API とサードパーティ API の違いを見て、後者の典型的な使い方について説明します。
132 サーバからのデータ取得 API, Article, Beginner, CodingScripting, Fetch, JSON, JavaScript, Learn, Promises, Server, XHR, XML, XMLHttpRequest, data, request
モダンな Web サイトやアプリケーションでしょっちゅう必要になる仕事は、サーバから個々のデータを取ってきて、新しいページ全体を読んでくることなしに、ページの一部を書き換える事です。この一見ちょっとした事が、サイトのパフォーマンスや振舞いに巨大なインパクトを与えました。この記事ではそのコンセプトを解説し、これを可能にした技術 XMLHttpRequest や Fetch API について見ていきます。
133 ドキュメントの操作
ウェブページやアプリを書く場合に、最も多く必要になるのはウェブ文書をどうかして操作する事でしょう。これは普通ドキュメントオブジェクトモデル(Document Object Model、DOM)によって為され、DOMはHTMLとスタイルに関する情報をDocumentオブジェクトを多用して操作する一連のAPIです。この記事では、DOMの使い方を詳しく見ながら、面白い方法であなたの環境を変える事ができる興味深い他のAPIもいくつか見ていきます。
134 動画と音声の API API, Audio, Beginner, CodingScripting, Guide, JavaScript, Learn, Video, 記事
I think we've taught you enough in this article. The HTMLMediaElement API makes a wealth of functionality available for creating simple video and audio players, and that's only the tip of the iceberg. See the "See also" section below for links to more complex and interesting functionality.
135 非同期 JavaScript JavaScript, Promises, async, asynchronous, await, setInterval, setTimeout
このモジュールでは、asynchronous JavaScript に触れ、なぜそれが重要なのか、そして、潜在的なブロッキング処理(例えばサーバからリソースを取得する)に効果的に対処するためにどうやって使うのかを見ていきます。
136 MDN の学習エリアに貢献するには Beginner, Contribute, Documentation, Guide, Learn, MDN Meta, l10n:priority
このページでは、 MDN の学習コンテンツの改良に協力し始めるのに必要となる全てが見つかるでしょう。できることはたくさんあって、それはあなたがどれくらい時間を使えるか、初心者ウェブ開発者教師かによって決まります。
137 Web パフォーマンス
Web サイトを構築するには、HTML、CSS、および JavaScript が必要です。人々が使用したい Web サイトやアプリケーションを構築し、ユーザを引き付けて維持するには、優れたユーザエクスペリエンスを作成する必要があります。良好なユーザエクスペリエンスの一部は、コンテンツの読み込みが迅速であり、ユーザの操作に反応することを保証することです。これは Web パフォーマンスと呼ばれ、このモジュールではパフォーマンスのよい Web サイトを構築するために必要なすべてを学習します。
138 What is web performance? Beginner, Introduction, Learn, Performance, Reference, Tutorial, Web Performance
ウェブパフォーマンスは、実際には遅い処理を速く見せることを含め、ウェブサイトを速くすることに関わるすべてを表します。サイトを速く読み込む、ユーザが速くインタラクションを始められるようにする、あるいは読み込みに時間がかかる場合は、たとえばローディングスピナーを表示するなど、ユーザーが安心できるフィードバックを提供する、こういったことができていますか?スクロールとアニメーションは滑らかですか?この記事では、客観的で測定可能なウェブパフォーマンス*についての簡潔なイントロダクションを提示し、どのような技術、テクニック、そして最適化に関わるツールを利用できるかを探っていきます。
139 ウェブパフォーマンスの基礎 Best practices, Website performance
あなたのウェブサイトのパフォーマンス改善を可能な限り行うべき 理由 はたくさんあります。
以下はそれぞれの項目について、より詳細な情報を提供するためのベストプラクティス、ツール、API、リンクの簡潔な紹介です。何があなたのユーザーにとって本当に大事なのかを理解するために不可欠なものでもあります。大事なことは絶対的なタイミングではなく、 ユーザーの知覚 かもしれません。
140 よくある質問 CodingScripting, Infrastructure, Learn, Web, WebMechanics
学習エリアのこのセクションでは、浮かんでくるかもしれないけれども、学習ルートの本筋 (例 HTMLCSS 学習記事) には必要でもない、よくある質問への回答を載せるために作りました。この記事は単独でこれだけを読んでも理解できるものになっています。
141 GitHub Pagesを使うには? Beginner, GitHub, Guide, Web, gh-pages, git, publish
GitHub は "ソーシャル・コーディング" のサイトです。Git バージョン管理システムのストレージに対して、ソースコードリポジトリーのアップロードを許可します。その後、コードプロジェクトで共同作業を行うことができます。また、システムはオープンソースに自動設定されています。つまり、世界中の誰もが GitHub コードを検索・使用また、そこから学習しコードを改善することができます。他の人のコードでもそれが可能です!この記事は Github の gh-pages 機能を使って、公開コンテンツに関する基本的なガイドを提供します。
142 URL とは何か Infrastructure, URL, urls, インフラ, リソース, 初心者
URLハイパーテキストHTTP とともに、ウェブの重要な概念の一つです。ブラウザーがウェブ上の公開されたリソースを取得するために使用するメカニズムです。
143 Web で何かをするためにどのくらいコストがかかりますか?
Web サイトを立ち上げるとき、費用は何も掛からないかもしれませんし、青天井かもしれません。 この記事では、費用の有無にかかわらず、どのように準備し、またどれだけ費用がかかるかについて議論します。
144 Web サイトが正しく機能することをどうやって確認しますか? ガイド, トラブルシューティング, ドキュメント, 初心者
自身の Web サイトをオンラインで公開しましたか? 素晴らしい! ただ、それは適切に動作しているでしょうか?
145 Web サイトを作成するのにどんなソフトウェアが必要か? NeedsActiveLearning, WebMechanics, 初心者
Web 開発に必要なほとんどのプログラムは無料でダウンロードできます。この記事では、いくつかのリンクを提供します。
146 Web サーバとは Beginner, インフラ
「Webサーバ」はハードウェアまたはソフトウェア、あるいは両方が動作しているものを指します。
147 What is accessibility?
物理的、技術的制限のせいで、たぶんあなたの訪問者はあなたの望むような体験をあなたのウェブサイトからできません。 この記事では一般的なアクセシビリティの原則や平易ないくつかの規則を示します。
148 どのように Web サイトのデザインを始めるのか? Beginner, Composing, NeedsActiveLearning, needsSchema, 初心者
ウェブプロジェクトを開始するとき、多くの人が技術面に焦点を当てます。もちろん、作るものの技術に精通していなければなりませんが、本当に重要なことは何を達成したいかということです。そう、それは明らかなことのようですが、あまりにも多くのプロジェクトが技術的ノウハウがないためではなく、目標とビジョンがないために失敗します。
149 どのようにすべてのタイプのユーザーを対象に設計できますか?
ウェブサイトを構築する際に考えなければならない課題のトップの一つがユニバーサルデザインです。障害、技術的な制約、文化、場所などに関わらず、すべてのユーザーが包含されるものです。
150 どのようにファイルを Web サーバにアップロードしますか? FTP, GitHub, WebMechanics, rsync, sftp, アップロード, ホスティング, 初心者
シンプルな Web ページを作成している場合 (例として HTML の基本を参照)、Web サーバ上にオンラインで転送したいと思うかもしれません。この記事では SFTP クライアント、RSync、GitHub などの選択肢をとおして、その方法を説明します。
151 どんなテキストエディタが利用可能ですか?
Web サイトは、ほとんどテキストファイルで構成されています。その開発を容易で快適なものにするため、最適なテキストエディタを選びましょう。
152 アクセシビリティをよくする HTML の機能にはどんなものがある? Accessibility, Beginner, HTML, Learn, NeedsContent
以下のコンテンツは、さまざまな障害を持つ人々にとってウェブページをよりアクセシブルにするために使用できる HTML の特定の機能について説明しています。
153 インターネットはどのように動くのか WebMechanics, チュートリアル, 初心者
インターネットは Web のバックボーンであり、Web を可能にする技術基盤です。最も基本的なインターネットは、すべてが一元的に通信を行う大規模なコンピュータネットワークです。
154 ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンの違いは? NeedsActiveLearning, WebMechanics, 初心者
あらゆる分野の知識と同様に、ウェブにも多くの専門用語があります。すべてを一気に押し付けるつもりはありませんのでご心配なく (興味をお持ちなら用語集があります)。しかし、最初に理解しておく必要がある基本的な用語がいくつかあり、これは読む際に常に聞く表現です。これらは互いに関連するものの、異なる役割を持つため、混同しやすいものです。実際、ニュースやその他の場所でこれらの用語が誤って使用されているのを時々見かけるので、これらをまとめて理解しましょう。
155 ドメイン名とは何ですか? Web, イントロダクション, インフラ, ウェブ, ドメイン名, 初心者, 導入
ドメイン名はインターネット基盤の重要な部分です。インターネット上で利用できるあらゆるウェブサーバーに対して、人間が読めるアドレスを提供します。
156 ハイパーリンクとは? Beginner, Infrastructure, Navigation
ハイパーリンクは通常リンクと呼ばれ、Web の背後にある基本概念です。リンクとは何かを説明するために、Web アーキテクチャの基本に戻る必要があります。
157 ブラウザー開発者ツールとは? Beginner, Browser, CSS, CodingScripting, Dev Tools, HTML, JavaScript, Learn
開発者ツールはブラウザのサブウィンドウの中にいます。大体こんな感じに...。
158 ローカルのテストサーバーはどのようにセットアップしますか? Express, Flask, Node, PHP, Python, django, lamp, サーバ, サーバーサイド, 初心者, 学習
ほとんどの学習領域では、ブラウザでサンプルを直接開くだけで済みます。HTML ファイルをダブルクリックするか、ブラウザウィンドウにドラッグ & ドロップするか、ファイル > 開く...を選択して HTML ファイルを選択するなどです。これを達成する方法はたくさんあります。
159 一般的な Web レイアウトには何が含まれていますか?
There's a reason we talk about web design. You start out with a blank page, and you can take it so many directions. And if you don't have much experience, starting out with a blank page might be a bit scary. We have over 25 years' experience and we'll give you some common rules of thumb to help you design your site.
160 アクセシビリティ ARIA, Accessibility, Articles, Beginner, CSS, CodingScripting, HTML, JavaScript, Landing, Learn, Module, アクセシビリティ, ランディング, 初心者
ウェブ開発者になりたい場合、HTML, CSS, JavaScript の学習は役立ちます。しかし知識は単に技術を使うよりも前に進める必要があります — それらを責任を持って使う必要があり、その結果ウェブサイトの聴衆を増やし、またそれを使わないことに縛らないことになります。これを達成するには、一般的な成功事例 (HTML, CSS, JavaScript のトピックに示されています) を積み上げ、クロスブラウザーテストを行って、最初からアクセシビリティを考慮しておきます。このモジュールでは後者を詳しく扱います。
161 CSS と JavaScript のアクセシビリティの ベスト・プラクティス Accessibility, Article, CSS, CodingScripting, Guide, JavaScript, Learn, color, contrast, hiding, unobtrusive, ひかえめ, アクセシビリティ, ガイド, コントラスト, 学習, 色, 隠す
ウェブページ上での CSS と JavaScript の使用にまつわるアクセシビリティの問題について、このページが適切な量の細部と理解をもたらしたのであれば幸いです。
162 HTML: アクセシビリティの基礎 AT, Accessibility, Article, Beginner, Buttons, CodingScripting, Forms, HTML, Learn, Links, a11y, assistive technology, keyboard, screenreader, semantics, アクセシビリティ, キーボード, スクリーンリーダー, セマンティクス, フォーム, ボタン, リンク, 初心者, 学習, 意味
今や読者の皆さんは、ほとんどの場合にアクセシブルな HTML を書くことについて、熟知しているはずです。WAI-ARIA の基本 の記事も、この知識の抜けを埋めてくれるでしょうが、本記事でもその基本には気を配ってきました。次は、CSS と JavaScript を検討しましょう。そして、CSS と JavaScript の良い使い方やまずい使い方によって、アクセシビリティがどのような影響を受けるのかを検討しましょう。
163 WAI-ARIAの基本 ARIA, Accessibility, Article, Beginner, CodingScripting, Guide, HTML, JavaScript, Learn, WAI-ARIA, semantics, アクセシビリティ, セマンティクス, 初心者, 学習
本記事は、WAI-ARIA で利用可能なすべてのものを取り扱ったとは、到底、言えません。 でも、WAI-ARIA の使い方を理解するのに十分な情報をお伝えしたはずです。 また、これから出会うであろう、WAI-ARIA を必要とするような最もよくあるパターンのうちのいくつかを知るのに十分な情報も、お伝えしたはずです。
164 アクセシビリティとは? AT, Accessibility, Article, Beginner, CSS, CodingScripting, HTML, JavaScript, Learn, Tools, Users, assistive technology, keyboard, screan reader, screenreader
この記事では高いレベルでアクセシビリティの概要を説明し、それが重要である理由と、ワークフローに取り込む方法を見てきました。サイトをアクセシブルにするための実装の詳細について学ぶことを渇望する人もいるでしょう。それでは次の記事では、HTML がアクセシビリティの良い基礎である理由を見ていきます。
165 アクセシブルマルチメディア Accessibility, Article, Audio, Beginner, CodingScripting, HTML, Images, JavaScript, Learn, Multimedia, Video, captions, subtitles, text tracks
このチャプターでは、マルチメディアにおけるアクセシビリティの関心ごとの要約をいくつかの実践的なソリューションと共に提供しました。
166 モバイルのアクセシビリティ Accessibility, コードスクリプト, スクリーンリーダー, タッチ, モバイル, レスポンシブ, 初心者, 学習, 記事
この記事では、モバイルのアクセシビリティ固有の一般的な問題とその解決方法について詳しく説明しました。また、アクセシビリティテストを支援するために、最も一般的なスクリーンリーダーの使い方を紹介しました。
167 評価: アクセシビリティのトラブルシューティング Accessibility, Assesment, Beginner, CSS, CodingScripting, HTML, JavaScript, Learn, WAI-ARIA
このモジュールの評価では、あなたが診断、修正するべきいくつかのアクセシビリティの問題を持った簡単なサイトを表示します。
168 インデックス MDN Meta, インデックス, 学習
227 ページあります:
169 ウェブ入門 Beginner, CSS, HTML, Index, l10n:priority, publishing, ガイド, デザイン, 学習, 理論
プロが作るようなウェブサイトを作るのはとても大変な作業です。ウェブ開発の初心者は、まずは小さなものから作り始めるとよいでしょう。今すぐ Facebook のようなサイトを作ることはできませんが、簡単なウェブサイトなら作るのはそれほど難しくありません。私たちはここから始めることにしましょう。
170 CSS の基本 CSS, CodingScripting, Styling, Web, l10n:priority, 初心者, 学習
HTML のように、CSS は本当のプログラミング言語ではありません。またマークアップ言語でもありません。CSS はスタイルシート言語です。つまり HTML 文書の要素に選択的にスタイルを適用できます。例えば、HTML ページのすべての段落要素を選択し、その中のテキストを赤色にするには、次のような CSS を記述します。
171 HTML の基本 CodingScripting, HTML, Web, l10n:priority, 初心者, 学習
HTML はプログラミング言語ではありません。マークアップ言語と言って、コンテンツの構造を決めるものです。 HTML は 要素の集まりでできています。要素とは様々なコンテンツがどのように見えるか、またどのように動くかを表現するためにタグで囲まれたまとまりです。タグは言葉や画像を表示したり、他のページに移動するハイパーリンクを作ったり、文字を斜体にしたり、大きくしたり小さくしたり、色々なことが出来ます。例えば、次の文を見てください。
172 JavaScript の基本 JavaScript, Learn, Web, codescripting, l10n:priority, 初心者
JavaScript (略して "JS") は成熟した動的プログラミング言語であり、HTML 文書に適用すると、ウェブサイトに動的な対話操作を提供できます。Mozilla プロジェクト、Mozilla Foundation、Mozilla Corporation の共同設立者である Brendan Eich によって考案されました。
173 Web サイトの公開 FTP, GitHub, Google App Engine, Learn, Web, l10n:priority, publishing, web server, コードスクリプティング, 初心者, 学習
ウェブサイトを公開するというのは簡単に語れることではありません。なぜなら、ウェブサイトの公開の仕方には、さまざまな方法があるからです。この記事での私たちの目標は、そのすべての方法を記述することではありません。むしろ、我々は初心者の視点から、大まかに 3 つの手法の長所と短所をお話しし、その次に、今のところはこれでうまくいくという方法で一通りやってみます。
174 ウェブのしくみ DNS, HTTP, IP, Infrastructure, TCP, l10n:priority, クライアント, サーバー, 初心者, 学習
この理論は、ウェブのコードを書く上ですぐにでも必要というわけではありませんが、背景で何が起きているのかを理解しておくと、いずれ役に立つでしょう。
175 ウェブサイトをどんな外見にするか Assets, Composing, Deprecated, Plan, l10n:priority, コンテンツ, デザイン, フォント, 初心者, 学習
始める前に、いくつか考えておかなければいけないことがあります。あなたのウェブサイトは実際に何をすべきでしょうか?普通ウェブサイトは様々なことができます。しかし、はじめは単純なことにとどめておくべきでしょう。まずは、一つの見出し、一つの画像、そして少しの文章をもつシンプルなウェブページを作ることから始めましょう。
176 ファイルの扱い Beginner, CodingScripting, Files, HTML, l10n:priority, theory, website, ガイド
自分のコンピューター上の ウェブサイトでローカルに作業している時、関連するすべてのファイルを、サーバー上に公開されたウェブサイトのファイル構造のミラーである単一のフォルダーに保持する必要があります。このフォルダーは好きな場所に置くことができますが、簡単に見つけることができる場所、たとえばデスクトップ上、ホームフォルダーの中、またはハードディスクのルートなどに置いてください。
177 基本的なソフトウェアのインストール WebMechanics, l10n:priority, セットアップ, ツール, テキストエディタ, ブラウザ, 初心者, 学習
上のリストにはたくさんのツールが書かれていて、ちょっと恐ろしかったかもしれませんね。でも大丈夫です。ウェブ開発を始めるのには、まだ上のツールをほとんど知らなくても問題ありません。これから私たちが、ウェブ開発に必要最小限のツールのセットアップの仕方を説明しておきます。必要なものは、テキストエディタと最新の ウェブブラウザーだけで十分です。
178 サーバサイド Web サイトプログラミング CodingScripting, Landing, NeedsTranslation, Server, Server-side programming, Topic, TopicStub, 初学者, 学習, 導入部
Dynamic(動的な)Webサイト サーバサイドプログラミング のトピックは、動的な Web サイト (HTTP リクエストに応じてカスタマイズされた情報を届ける Web サイト) の作り方を説明する一連のモジュールです。各モジュールは、一般的なサーバサイドプログラミングへの導入となる情報を提供するほか、特に初学者に向けて、Django (Python) や Express (Node.js/JavaScript) といった基礎的なアプリケーションを構築するためのWebフレームワークの使用方法について説明しています。
179 Djangoウェブフレームワーク (Python) Python, django, ウェブアプリケーションフレームワーク, サーバーサイドプログラミング, プログラミング, 初心者, 学習, 概要
Django は、Python で書かれた高機能なサーバーサイドウェブフレームワークで、とても普及しています。このモジュールは、Django が最も人気のあるウェブサーバーフレームワークの 1 つである理由、開発環境の設定方法、独自のウェブアプリケーションを作成する方法を説明します。
180 Django Web アプリケーションのセキュリティ
Django has effective protections against a number of common threats, including XSS and CSRF attacks. In this article we've demonstrated how those particular threats are handled by Django in our LocalLibrary website. We've also provided a brief overview of some of the other protections.
181 Django チュートリアル Part 2: スケルトンウェブサイトの作成 django, イントロダクション, ガイド, チュートリアル, 初心者, 学習, 記事
Djangoチュートリアル の2つ目の記事では、基本的なウェブサイトプロジェクトの「スケルトン」をどのように作っていくのかを説明します。サイト固有の設定、URL、モデル、ビュー、テンプレートを作成する方法について説明します。
182 Django チュートリアル Part 3: モデルの使用
In this article we've learned how models are defined, and then used this information to design and implement appropriate models for the LocalLibrary website.
183 Django チュートリアル: 地域図書館ウェブサイト Python, django, チュートリアル, 初心者
実践的なチュートリアルシリーズの最初の記事は、学習する内容を説明し、後の記事で進めていく「地域図書館」のサンプルウェブサイトの概要を示しています。
184 Django 開発環境の設定 Python, Webフレームワーク, django, サーバーサイドプログラミング
Djangoがどういうものか知ったので、Windows、Linux(Ubuntu)、およびmacOSでDjango開発環境をセットアップしてテストする方法を説明します。一般的なオペレーティングシステムを使っていれば、Djangoアプリケーションの開発を始められます。
185 Djangoの紹介 Python, Webフレームワーク, django, サーバーサイドプログラミング
最初のDjangoの記事では、 "Djangoとは何ですか?" という疑問に答え、このWebフレームワークの特徴と概要を説明します。
186 Express Web フレームワーク (Node.js/JavaScript) Beginner, CodingScripting, Express, Express.js, Intro, JavaScript, Learn, Node, Server-side programming, node.js, イントロダクション, サーバサイドプログラミング, 初心者, 学習
Express は、JavaScript で書かれ、Node.js 実行環境内でホストされている、人気の指図しないウェブフレームワークです。このモジュールでは、このフレームワークの主な利点、開発環境の設定方法、一般的なウェブ開発と配置作業の実行方法について説明します。
187 Express チュートリアル Part 2: スケルトン Web サイトの作成 CodingScripting, Express, Node, イントロダクション, サーバサイド, 初心者, 学習, 開発環境
この Express チュートリアルの2回目の記事では、どのようにして "スケルトン" Web サイトプロジェクトを作成し、サイト固有のルート、テンプレート/ビュー、およびデータベース呼び出しを追加するかを説明します。
188 Express チュートリアル Part 3: データベースの使用 (Mongoose を使用)
この記事ではデータベースと、それらを Node/Express アプリケーションで使用する方法について簡単に紹介します。続いて、Mongoose を使用して地域図書館 Web サイトへのデータベースアクセスを提供する方法を説明します。 オブジェクトスキーマとモデルの宣言方法、主なフィールドタイプ、および基本的な検証について説明します。また、モデルデータにアクセスするための主な方法についても簡単に説明します。
189 Express チュートリアル Part 4: ルートとコントローラ
このチュートリアルでは、地域図書館 Web サイトで最終的に必要となるすべてのリソースエンドポイントに対して、"ダミー" ハンドラ関数を使用してルート (URL 処理コード) を設定します。完成すると、ルート処理コードのためのモジュール構造が得られます。これは、次の記事の実際のハンドラ関数で拡張できます。Express を使ってモジュラールートを作成する方法についても、非常によく理解しています。
190 Express チュートリアル Part 5: ライブラリデータの表示 Express, nodejs, pug, コントローラ, テンプレート, ビュー, 初心者, 学習
これで地域図書館の Web サイトの書籍やその他のデータを表示するページを追加する準備が整いました。このページには、各モデルタイプのレコード数と、すべてのモデルのリストおよび詳細ページを示すホームページが含まれます。その過程で、データベースからレコードを取得したり、テンプレートを使用したりする際の実際的な経験を積むことになります。
191 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.
192 async を使用した非同期フロー制御
No summary!
193 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.
194 ジャンル詳細ページ
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.
195 テンプレートプライマー
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).
196 ブックインスタンスリストページ
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.
197 ブックインスタンス詳細ページとチャレンジ
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.
198 ブックリストページ
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.
199 ホームページ
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.
200 本の詳細ページ
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.
201 著者リストページとジャンルリストページのチャレンジ
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.
202 著者詳細ページ
著者詳細ページには、指定された Author に関する情報を、その (自動的に生成された) _id フィールド値を使用して識別し、その Author に関連するすべての Book オブジェクトのリストを表示する必要があります。
203 Express チュートリアル Part 6: フォームの操作
このチュートリアルでは、Pug を使用して Express で HTML フォームを操作する方法、特にデータベースからドキュメントを作成、更新、削除するためのフォームを作成する方法を説明します。
204 Express チュートリアル Part 7: プロダクションへのデプロイ CodingScripting, Express, Node, heroku, サーバサイド, デプロイ, 初心者, 学習
これで素晴らしい地域図書館 Web サイトを作成 (およびテスト) したので、公共の Web サーバーにインストールして、図書館のスタッフとメンバーがインターネット経由でアクセスできるようにします。この記事では Web サイトをデプロイするためのホストを見つける方法、およびサイトを運用に向けて準備するために必要な作業の概要について説明します。
205 Express チュートリアル: 地域図書館の Web サイト Beginner, CodingScripting, Express, Intro, Learn, Node, Tutorial, nodejs, イントロダクション, サーバサイド, 初心者, 学習
実用的なチュートリアルシリーズの最初の記事では、これから学ぶことについて説明します。そして、私たちがこれから取り組んでいき、その後の記事で進化していく「地域図書館」のサンプルウェブサイトの概要を説明します。
206 Express/Node のイントロダクション Beginner, CodingScripting, Express, Learn, Node, nodejs, server-side, サーバーサイド, 初心者
Express の最初の記事では ”Node って何だろう?”、”Express って何だろう?”という疑問に答え、なぜ Express ウェブフレームワークが特別なのかについて概要を説明します。主な特徴、Express アプリケーションの主な基本要素(テスト開発環境についてはここではまだ触れません) を大まかに説明します。
207 Node 開発環境の設定 CodingScripting, Express, Intro, Learn, Node, nodejs, npm, server-side, イントロダクション, サーバサイド, 初心者, 学習, 開発環境
Express の目的が理解できたので、Windows、Linux (Ubuntu)、および macOS 上で Node/Express 開発環境をセットアップしてテストする方法を説明します。どのような一般的な OS を使用していても、この記事では Express アプリケーションの開発を開始するために必要なものを提供します。
208 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.
209 サーバサイドの Web サイトプログラミングの第一歩 CodingScripting, Intro, Landing, ガイド, サーバサイドプログラミング, 初心者, 学習
このモジュールでは、サーバーサイドプログラミングに関するいくつかの基本的な質問、"これは何?"、"クライアントサイドプログラミングとどう違うの?"、"なぜ便利なの?" について答えます。次に、最も人気のあるサーバーサイドの ウェブフレームワークの概要と、最初のサイトを作成するための最適なフレームワークの選択方法に関するガイダンスを提供します。最後に、ウェブサーバーのセキュリティに関する高度な入門記事を提供します。
210 Web サイトのセキュリティ CodingScripting, Web サイトセキュリティ, Web セキュリティ, イントロダクション, ガイド, サーバサイドプログラミング, セキュリテイ, 初心者, 学習
ウェブサイトのセキュリティでは、ウェブサイトのデザインと使用方法のあらゆる面で警戒が必要です。この入門記事だけではウェブサイトのセキュリティの第一人者にはなれませんが、脅威がどこから発生するのか、そして最も一般的な攻撃に対してウェブアプリケーションを強化するために何ができるのかを理解するのに役立ちます。
211 クライアント - サーバの概要 Beginner, CodingScripting, イントロダクション, ガイド, サーバ, サーバサイドプログラミング, 学習
サーバサイドプログラミングの目的と潜在的な利点を知ったので、サーバがブラウザーから "動的リクエスト" を受け取ったときに起こることを詳細に検討します。ほとんどの Web サイトのサーバサイドコードは同様の方法でリクエストとレスポンスを処理するので、これは自身のコードの大部分を書くときに何が必要かを理解するのに役立ちます。
212 サーバサイドの概要
MDN のサーバサイドプログラミング入門コースにようこそ!この最初の記事では、「それはどんなもの?」、「クライアントサイドプログラミングとはどう違う?」、「なぜ便利なの?」 という質問に答えながら、ハイレベルな視点からサーバサイドプログラミングを見ていきます。この記事を読めば、サーバサイドコーディングを行うことで、 Web サイトにどんな機能を加えることができるか、理解できるようになります。
213 サーバーサイドウェブフレームワーク Beginner, CodingScripting, Guide, Intro, Learn, Server, Server-side programming, Web frameworks
前の記事では、ウェブクライアントとサーバー間の通信、HTTP リクエストとレスポンスの性質、およびウェブブラウザーからのリクエストにレスポンスするためにサーバーサイドウェブアプリケーションが実行する必要があることについて説明しました。この知識をもとに、ウェブフレームワークがどのようにこれらのタスクを単純化できるかを探り、最初のサーバーサイドウェブアプリケーションのためのフレームワークをどのように選択するかを考えてみましょう。
214 フレームワークなしの Node.js サーバ JavaScript, NeedsContent, Node, サーバ, フレームワークなし
この記事では、フレームワークを使用せずに、Node.jsだけで構築された単純な静的ファイルサーバを紹介します。
215 ツールとテスト CSS, CodingScripting, HTML, JavaScript, Landing, TopicStub, user testing, アクセシビリティ, クロスブラウザ, ツール, テスト, トピック, 初心者, 学習, 自動化
ウェブ技術のコア (HTML, CSS,  JavaScript のような) での快適なプログラミングを開始して、経験を積んで、色んなリソースを読み、色んなコツや技を学習すると、JavaScript フレームワークからテスト自動化ツールやそれ以外まで、すべてのツールに出くわします。ウェブプロジェクトが大きく複雑になっていくと、こうしたツールを活用したり、コードの信頼できるテスト計画を考案したくなるでしょう。
216 Understanding client-side JavaScript frameworks Beginner, Frameworks, JavaScript, Learn, NeedsTranslation, TopicStub, client-side
JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience.
217 React ToDoリストをはじめる
たとえば、Reactで概念実証を作成する必要があるとします。これは、ユーザーが作業したいタスクを追加、編集、削除したり、タスクを削除せずに完了としてマークしたりできるアプリです。この記事では、基本的なAppコンポーネントの構造とスタイルを設定し、個々のコンポーネントの定義と変更に対応できるようにします。これについては後で追加します。
218 Reactをはじめる Beginner, Frameworks, JavaScript, Learn, React, client-side
これで、React をローカルでインストールする方法、スターターアプリを作成する方法、基本的にどのように機能するかなど、React の入門が終わりました。次の記事では、最初に適したアプリケーションである todo リストの作成を開始します。ただし、その前に、私たちが学んだことのいくつかをおさらいしましょう。
219 クロスブラウザテスト Accessibility, Automation, Beginner, CSS, CodingScripting, HTML, JavaScript, Landing, Learn, Module, Testing, Tools, cross browser
このモジュールでは、色々なウェブブラウザー間でウェブプロジェクトをテストすることに焦点を当てます。あなたのターゲット視聴者 (例 どのユーザー、ブラウザー、デバイスに一番関心があるのか?) の特定や、テストをどう動かすかや、主な問題としてさまざまな種類のコードと対面してそれらを緩和する方法や、テストを楽にして問題を解決するのに最も役立つツールが何かや、自動化を利用してテストをスピードアップする方法を見て行きます。
220 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.
221 はじめてのクロスブラウザテスト Article, Beginner, CodingScripting, Learn, Testing, concepts, cross browser
この記事では、クロスブラウザテストに関して知っておくべき最も大事な概念について、高位の理解を与えてきました。この知識を備えたことで、クロスブラウザテストの戦略について学び始める準備ができています。
222 よくあるアクセシビリティの問題を扱う Accessibility, Article, Beginner, CSS, CodingScripting, HTML, JavaScript, Learn, Testing, Tools, cross browser, keyboard
たぶん、この記事はあなたが遭遇するかもしれない主なアクセシビリティ問題とそれらをどうやってテストして克服するかについての良い下地を与えたでしょう。
223 テスト実行のための戦略 Article, Automation, Beginner, CodingScripting, Learn, Testing, concepts, cross browser, device lab, user testing, virtual machine
この記事を読んで、ターゲット顧客/ブラウザーの表を特定して、その表に載っているクロスブラウザーテストを効率的に実行することが良くわかったでしょう。
224 テスト自動化環境をセットアップする 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.
225 一般的な HTML と CSS の問題への対処 CSS, CodingScripting, HTML, linting, クロスブラウザ, セレクタ, テスト, 初心者, 学習, 記事
ここでは、HTML と CSS のコードで発生する可能性のある一般的なクロスブラウザの問題、および問題の発生を防ぐため、または発生する問題を修正するために使用できるツールについて具体的に説明します。これには、コードのリンティング、CSS プレフィックスの処理、問題を追跡するためのブラウザの開発者ツールの使用、ブラウザにサポートを追加するための polyfill の使用、レスポンシブデザイン問題への取り組みなどが含まれます。
226 機能検出の実装 Article, Beginner, CSS, CodingScripting, JavaScript, Learn, Modernizr, Testing, Tools, cross browser, feature detection, 機能検出
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.
227 自動テストのイントロダクション
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.