インデックス

242 ページあります:

# ページ タグと要約
1 ウェブ開発を学ぶ Intro, Landing, ウェブ, 初心者, 学習, 索引
MDN 学習エリアへようこそ。この一連の記事では、ウェブ開発が全くの初心者にとって、シンプルなウェブサイトのコーディングを始めるのに必要な全てを提供することを目標とします。
2 アクセシビリティ ARIA, Accessibility, Articles, Beginner, CSS, CodingScripting, HTML, JavaScript, Landing, Learn, Module, アクセシビリティ, ランディング, 初心者
ウェブ開発者になりたい場合、HTML, CSS, JavaScript の学習は役立ちます。しかし知識は単に技術を使うよりも前に進める必要があります — それらを責任を持って使う必要があり、その結果ウェブサイトの聴衆を増やし、またそれを使わないことに縛らないことになります。これを達成するには、一般的な成功事例 (HTML, CSS, JavaScript のトピックに示されています) を積み上げ、クロスブラウザーテストを行って、最初からアクセシビリティを考慮しておきます。このモジュールでは後者を詳しく扱います。
3 評価: アクセシビリティのトラブルシューティング Accessibility, Assesment, Beginner, CSS, CodingScripting, HTML, JavaScript, Learn, WAI-ARIA
このモジュールの評価では、あなたが診断、修正するべきいくつかのアクセシビリティの問題を持った簡単なサイトを表示します。
4 CSS と JavaScript のアクセシビリティの ベスト・プラクティス Accessibility, Article, CSS, CodingScripting, Guide, JavaScript, Learn, color, contrast, hiding, unobtrusive, ひかえめ, アクセシビリティ, ガイド, コントラスト, 学習, 色, 隠す
CSS と JavaScript も、適切に使えばアクセシブルなウェブ体験を可能にしてくれる可能性がありますが、誤用すると、大幅にアクセシビリティを悪化させることがあります。本記事では、複雑なコンテンツでもできる限りアクセシブルにすることを保証するために考慮すべき、CSS と JavaScript のベスト・プラクティスのいくつかを概観します。
5 HTML: アクセシビリティの基礎 AT, Accessibility, Article, Beginner, Buttons, CodingScripting, Forms, HTML, Learn, Links, a11y, assistive technology, keyboard, screenreader, semantics, アクセシビリティ, キーボード, スクリーンリーダー, セマンティクス, フォーム, ボタン, リンク, 初心者, 学習, 意味
正確な HTML要素が、常に正しい目的で使用されているかを確認するだけで、たくさんのウェブコンテンツがアクセシブルになります。 ここでは、最大限のアクセシビリティを確保するために、HTML をどのように使用できるかについて詳しく説明します。
6 モバイルのアクセシビリティ Accessibility, コードスクリプト, スクリーンリーダー, タッチ, モバイル, レスポンシブ, 初心者, 学習, 記事
モバイルデバイスでのウェブアクセスは非常に人気があり、iOS や Android などの一般的なプラットフォームには本格的なアクセシビリティツールが備わっているため、これらのプラットフォームでのウェブコンテンツのアクセシビリティを考慮することが重要です。この記事では、モバイル固有のアクセシビリティについて検討します。
7 アクセシブルマルチメディア Accessibility, Article, Audio, Beginner, CodingScripting, HTML, Images, JavaScript, Learn, Multimedia, Video, captions, subtitles, text tracks
アクセシビリティの問題を引き起こす他のカテゴリーは、マルチメディアでです。ビデオ、オーディオ、画像といったコンテンツは、支援技術 (assistive technologies) とユーザーが理解可能となる適切な代替テキストを必要とします。この記事ではその方法を説明します。
8 WAI-ARIAの基本 ARIA, Accessibility, Article, Beginner, CodingScripting, Guide, HTML, JavaScript, Learn, WAI-ARIA, semantics, アクセシビリティ, セマンティクス, 初心者, 学習
前回の記事に続いて言えることですが、意味論的ではない HTML や JavaScript によって更新される動的なコンテンツを含むような、複雑な UI コントロールの作成は難しくなることがあります。 WAI-ARIA は、ブラウザーや支援技術が認識できるさらなる意味論を追加することによってそのような問題に対処し、ユーザーの理解を助ける技術です。 ここでは、アクセシビリティを向上させるための基本的な使い方を説明します。
9 アクセシビリティとは? AT, Accessibility, Article, Beginner, CSS, CodingScripting, HTML, JavaScript, Learn, Tools, Users, assistive technology, keyboard, screan reader, screenreader
この記事では実際アクセシビリティとは何かについてよく観察するモジュールから開始します — これには考慮が必要な人のグループや、いろいろな人がウェブとやり取りするのになぜ、どんなツールを使うのかや、アクセシビリティをウェブ開発のワークフローに取り組む方法が含まれます。
10 よくある質問 CodingScripting, Infrastructure, Learn, Web, WebMechanics
学習エリアのこのセクションでは、浮かんでくるかもしれないけれども、学習ルートの本筋 (例 HTMLCSS 学習記事) には必要でもない、よくある質問への回答を載せるために作りました。この記事は単独でこれだけを読んでも理解できるものになっています。
11 どんなテキストエディタが利用可能ですか?

この記事では Web 開発用のテキストエディタをインストールする際に考慮すべき点をいくつか取り上げます。

12 Web サイトが正しく機能することをどうやって確認しますか? ガイド, トラブルシューティング, ドキュメント, 初心者

この記事では、Webサイトのさまざまなトラブルシューティングの手順と、これらの問題を解決するための基本的な操作について説明します。

13 一般的な Web レイアウトには何が含まれていますか?

When designing pages for your website, it's good to have an idea of the most common layouts.

14 どのようにすべてのタイプのユーザーを対象に設計できますか?

この記事ではあらゆる種類のユーザーのための Web サイトを設計する基本的なヒントを紹介します。

15 インターネットはどのように動くのか WebMechanics, チュートリアル, 初心者

この記事はインターネットの仕組みとどのように動いているかを説明します。

16 Web で何かをするためにどのくらいコストがかかりますか?

Web に参加することは、見かけほど容易ではありません。この記事では、あなたがどのくらい費用をかける必要があるのか、そしてその理由について説明します。

17 アクセシビリティをよくする HTML の機能にはどんなものがある? Accessibility, Beginner, HTML, Learn, NeedsContent
以下のコンテンツは、さまざまな障害を持つ人々にとってウェブページをよりアクセシブルにするために使用できる HTML の特定の機能について説明しています。
18 ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンの違いは? NeedsActiveLearning, WebMechanics, 初心者

この記事では、ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンなどのウェブに関係する色々な概念に関して解説します。これらの用語はウェブの初心者を混乱させたり、間違って使われたりしています。それぞれの意味を学びましょう。

19 ローカルのテストサーバーはどのようにセットアップしますか? Express, Flask, Node, PHP, Python, django, lamp, サーバ, サーバーサイド, 初心者, 学習

この記事では、マシン上に簡単なローカルテストサーバを設定する方法と、その使い方の基本について説明します。

20 どのように Web サイトのデザインを始めるのか? Beginner, Composing, NeedsActiveLearning, needsSchema, 初心者
この記事では、すべてのプロジェクトの重要な第一歩として、そのプロジェクトで達成したいことを定義します。
21 どのようにファイルを Web サーバにアップロードしますか? FTP, GitHub, WebMechanics, rsync, sftp, アップロード, ホスティング, 初心者

この記事ではファイル転送ツールを使用してオンラインでサイトを公開する方法を説明します。

22 GitHub Pagesを使うには? Beginner, GitHub, Guide, Web, gh-pages, git, publish
GitHub は "ソーシャル・コーディング" のサイトです。Git バージョン管理システムのストレージに対して、ソースコードリポジトリーのアップロードを許可します。その後、コードプロジェクトで共同作業を行うことができます。また、システムはオープンソースに自動設定されています。つまり、世界中の誰もが GitHub コードを検索・使用また、そこから学習しコードを改善することができます。他の人のコードでもそれが可能です!この記事は Github の gh-pages 機能を使って、公開コンテンツに関する基本的なガイドを提供します。
23 ブラウザー開発者ツールとは? Beginner, Browser, CSS, CodingScripting, Dev Tools, HTML, JavaScript, Learn

近頃のブラウザにはパワフルな開発者ツールが入っています。開発者ツールでは、現在の HTML や CSS、JavaScript の状態を検証したり、ページがどういったアセットにアクセスし、どれだけ時間がかかったかといった多様なことができます。この記事ではブラウザの開発者ツールの使い方について説明します。

24 ハイパーリンクとは? Beginner, Infrastructure, Navigation

この記事では、ハイパーリンクとは何か、なぜ重要なのかを詳しく説明します。

25 ドメイン名とは何ですか? Web, イントロダクション, インフラ, ウェブ, ドメイン名, 初心者, 導入

この記事ではドメイン名について説明し、何であるか、どのように構造化されているのか、そして取得する方法を説明します。

26 URL とは何か Infrastructure, URL, urls, インフラ, リソース, 初心者

この記事では Uniform Resource Locators (URL) について説明し、その内容と構造を説明します。

27 Web サーバとは Beginner, インフラ

この記事では、Webサーバとは何か、Webサーバの仕組み、なぜWebサーバが重要なのかを復習します。

28 What is accessibility?

この記事はwebアクセシビリティの背景にある基本的なコンセプトを紹介します。

29 Web サイトを作成するのにどんなソフトウェアが必要か? NeedsActiveLearning, WebMechanics, 初心者

この記事では、Webサイトを編集、アップロード、または閲覧するときに必要なソフトウェアについて説明します。

30 CSS Beginner, CSS, CodingScripting, Debugging, Landing, NeedsContent, Topic, length, specificity
Cascading Style Sheets — CSS — はHTML を学んだら、まず次に勉強すべき技術です。HTML はコンテンツの構造とSemanticsを定義するのに使用されるのに対し、CSS はそのコンテンツにスタイルを与えたりレイアウトを決めるために使われます。例えばフォント、色、サイズ、余白を変更したり、コンテンツを複数の列に分割して段組を作成したり、アニメーションやその他の装飾機能を追加するのに CSS は利用できます。
31 CSS の構成要素 Beginner, CSS, Learn, building blocks
このモジュールは CSS の第一歩から派生しています。CSS の言語や文法に慣れてきて、それを使う上での基本的な経験を得てきたという前提で、もう少し掘り下げてみましょう。カスケードと継承・セレクターの全種類・単位・サイズ設定・背景と枠線・デバッグなどを見ていきます。
32 かっこいいボックス Assessment, Beginner, CSS, Learn, backgrounds, borders, box, box model, effects
この評価では、人目を引くボックスを作成しようとすることで、かっこいいボックスを作成する方法をさらに習得できます。
33 ボックスの高度なエフェクト Article, Beginner, Blend modes, Boxes, CSS, CodingScripting, Filters, Styling, box shadows, effects
この記事はトリックの箱として機能し、ボックスの影、ブレンドモード、フィルタのようなボックスの装飾に使用できる高度な機能のいくつかを紹介します。
34 背景と枠線 Background, Beginner, CSS, Image, Learn, Position, borders, color
このレッスンでは、CSS の背景・枠線モジュールの機能を使ったクリエイティブな表現方法をいくつか見ていきます。グラデーション、背景画像、角の丸めを加えることを通じて、CSS を使ったスタイリングの多様な課題に対する解答が得られるでしょう。
35 カスケードと継承 Beginner, CSS, Cascade, Inheritance, Learn, rules, source order, specificity
このレッスンでの目的は、CSS を HTML に適用する方法と競合した場合の解決方法について、もっとも基本的な概念(カスケード・詳細度・継承)の理解を深めていくことです。
36 装飾的なレターヘッド付きの便箋の作成 Assessment, Background, Beginner, Boxes, CSS, CodingScripting, border, box, letter, letterhead, letterheaded, paper
好印象を与えたいのなら、素敵なレターヘッドの便箋に手紙を書くのはとても良い考えです。この評価では、そのような見た目のオンラインテンプレートの作成に挑戦します。
37 CSS のデバッグ Beginner, CSS, DOM, Debugging, DevTools, Learn, source
CSS を書くとき、期待どおりに動作していないように見える問題が発生する場合があります。セレクターは合っているはずなのに何も起こらなかったり、ボックスのサイズが期待したどおりにならなかったりなどです。この記事では CSS の問題をデバッグする方法について案内し、何が起こっているかを調べるのに各モダンブラウザーのデベロッパーツールはどう役立つかを示します。
38 基本的な CSS の理解 Assessment, Beginner, CSS, CodingScripting, Syntax, コメント, スタイル, セレクタ, ボックスモデル, ルール
このモジュールで多くをカバーしてきました、最後まで来て気分が良いでしょう! 次に進む前の最後のステップは、モジュールの評価を試みることです。これには、最終的なデザイン (名刺/ゲーマーカード/ソーシャルメディアプロファイル) を作成するために完了しなければならないいくつかの関連演習が含まれます。
39 テキスト方向の操作 Beginner, CSS, Learn, logical properties, writing modes
CSSの学習でこれまでに遭遇したプロパティと値の多くは、画面の物理的な大きさに関係しています。たとえば、ボックスの上下左右にborderを作成します。これらの物理的大きさは、水平に表示されるコンテンツに非常にきちんとマッピングされ、デフォルトでは、ウェブは右から左への言語(アラビア語など)よりも左から右への言語(英語やフランス語など)をサポートする傾向があります。
40 画像・メディア・フォーム要素 Beginner, CSS, Forms, Images, Learn, Media, replaced content
このレッスンでは、特定の要素が CSS でどのように扱われるかを見ていきます。画像・メディア・フォーム要素では、CSS でスタイルを設定するにあたって通常のボックスとは少し異なる動作をします。何が可能で何が不可能かを理解することで、フラストレーションを軽減することができます。このレッスンでは、知っておくべきことのをいくつかを取り上げます。
41 CSS の整理 Beginner, CSS, CodingScripting, Learn, comments, formatting, methodologies, organizing, post-processor, pre-processor, styleguide
スタイルシートやプロジェクトが大きい状態で作業しはじめると、巨大な CSS ファイルを維持するのが難しいことがわかります。この記事では、CSS を書いていくのと保守していくのをやりやすくするためのベストプラクティスと、保守性を向上させるための解決策の一部を紹介します。
42 要素のはみ出し(オーバーフロー) Beginner, Block Formatting Context, CSS, Data Loss, Learn, overflow
このレッスンでは、CSS のもう1つの重要な概念である オーバーフロー(overflow)を見ていきますオーバーフローは、ボックス内にコンテンツが収まりきらないときに発生します。このガイドでは、その詳細とそれらについてどのように対処するかを学びます。
43 CSS セレクター Attribute, Beginner, CSS, Class, Learn, Pseudo, Selectors, id
CSSでは、ウェブページ上の HTML 要素にスタイルを設定するためにセレクターが使用されます。CSS セレクターにはさまざまな種類があり、きめ細かにスタイルを設定する要素を選択できます。この記事とそのサブ記事では、さまざまなタイプについて、どのように機能するかを詳しく見ていきます。
44 属性セレクター Attribute, Beginner, CSS, Learn, Selectors
HTML の学習で学んだように、要素はマークアップについてさらに詳細な情報を提供する属性を持つことがあります。 CSS では、属性セレクターを使用して、ある種類の属性のある要素を対象に指定できます。このレッスンでは、これらのとても便利なセレクターの使い方を紹介します。
45 結合子 Beginner, CSS, Learn, Selectors, combinators
ここで取り上げる最後のセレクターは、他のセレクターと、ドキュメント内のコンテンツの場所や場所との有用な関係を提供する方法で組み合わせるため、コンビネーターと呼ばれます。
46 疑似クラスと疑似要素
次に取り上げるセレクターのセットは、疑似クラス疑似要素と呼ばれます。これらは多数あり、多くの場合、それらは非常に特定の目的に役立ちます。それらの使用方法がわかったら、リストを見て、達成しようとしているタスクに有効なものがあるかどうかを確認できます。ここでも、各セレクターに関連するMDNページは、ブラウザーサポートの説明に役立ちます。
47 要素・クラス・ID によるセレクター Beginner, CSS, Class, Learn, Selectors, Syntax, id, universal
このレッスンでは、利用できる最も簡単にみえるセレクタをとりあげます。これは今後あなたが作業でよく使うことになります。
48 CSS によるサイズ設定 Beginner, CSS, Intrinsic size, Learn, max size, min size, percentage, sizing, viewport units
これまでのさまざまなレッスンで、CSS を使用してウェブページ上のアイテムのサイズを調整するいくつかの方法に出会いました。デザイン作業をしていくうえで、それぞれの手法がどれほど大事かを理解することが重要です。このレッスンでは、CSS によって要素のサイズを設定する方法をまとめ、サイジングに役立ついくつかの用語を定義します。
49 表のスタイリング Article, Beginner, CSS, CodingScripting, Guide, Styling, Tables
HTML の表を装飾することは、世界で最も魅力的な仕事ではありませんが、時にはそれをしなければならないこともあります。 この記事では、これまでに説明した機能のいくつかとともに、HTML の表を見栄え良くするためのガイドを提供します。
50 ボックスモデル Beginner, CSS, Learn, border, box model, display, margin, padding
CSS にはボックスの概念があり、これを理解することは CSS でレイアウトを作成したりアイテム同士を揃えたりするためのコツとなります。このレッスンでは CSS ボックスモデルを詳しく解説し、その仕組みと関連する用語を理解することでより複雑なレイアウトができるようにします。
51 CSS の値と単位 Beginner, CSS, Function, Image, Learn, Number, Position, color, length, percentage, units, values
CSS で使用されるすべてのプロパティには、特定の値または組み合わせのみが許可されており、MDN の各プロパティに関するページでは有効な値を理解するのに役立ちます。このレッスンでは、もっとも一般的な値と単位について見ていきます。
52 CSS レイアウト Beginner, CSS, Floating, Grids, Guide, Landing, Layout, Learn, Module, Multiple column, Positioning, alignment, flexbox, float, table
現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。 今度は、ビューポートや互いを基準にしてボックスを適切な場所に配置する方法を検討します。 必要な前提知識をカバーしているので、さまざまな display の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、 CSS レイアウトについて深く掘り下げることができます。
53 フレックスボックス Article, Beginner, CSS, CSS layouts, CodingScripting, Flexible Boxes, Guide, Layout, Layouts, Learn, flexbox
フレックスボックス(Flexbox)は、項目を行または列にレイアウトするための1次元のレイアウト方法です。 項目は追加のスペースを埋めるためにたわみ、小さいスペースに収まるように縮小します。 この記事では、すべての基本事項について説明します。
54 フロート Article, Beginner, CSS, Clearing, CodingScripting, Floats, Guide, Layout, columns, multi-column
float プロパティは、もともとはテキストブロック内の浮動画像のためのものでしたが、ウェブページ上に複数列レイアウトを作成するために最も一般的に使われるツールの1つになりました。 この記事で説明しているように、フレックスボックスとグリッドの出現により、今は当初の目的に戻っています。
55 基礎的なレイアウトの理解 Assessment, Beginner, CSS, Layout, Learn
このモジュールを乗り越えてきたならば、今日 CSS レイアウトを行うために知っておくべきことや、より古い CSS を使って作業するために必要なことの基本についてはすでに説明しているはずです。 このタスクでは、さまざまなテクニックを使用して簡単なウェブページレイアウトを作成することによって、あなたの知識の一部をテストします。
56 グリッド Article, Beginner, CSS, CSS Grids, CodingScripting, Grids, Guide, Layout, Learn, Tutorial, grid design, grid framework, grid system
CSS グリッドレイアウト(Grid Layout)は、ウェブ用の2次元レイアウトシステムです。 これにより、コンテンツを行と列にレイアウトすることができ、複雑なレイアウトを簡単に構築できるようにする多くの機能があります。 この記事では、ページレイアウトを始めるために知っておくべきことをすべて説明します。
57 CSS レイアウト入門 Article, Beginner, CSS, Floats, Grids, Introduction, Layout, Learn, Positioning, Tables, flexbox, flow
この記事では、以前のモジュールで既に触れた CSS レイアウト機能のいくつか(さまざまな display の値など)を要約し、このモジュール全体で取り上げるいくつかの概念を紹介します。
58 過去のレイアウト方法 Beginner, CSS, Floats, Guide, Layout, Learn, grid system, legacy
グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、CSS グリッドレイアウト以前はフロートや他のレイアウト機能を使用して実装される傾向がありました。 あなたはレイアウトをいくつかの列(例えば 4、6、または 12)として想像し、そしてコンテンツの列をこれらの想像上の列の内側に合わせます。 この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。
59 メディアクエリーの初心者向けガイド Beginner, CSS, Layout, Learn, media query
CSS メディアクエリー(CSS Media Query)を使用すると、例えば、「ビューポートは 480 ピクセルよりも広い」というような、ブラウザーとデバイスの環境が指定した規則に一致する場合にのみ CSS を適用できます。 メディアクエリーは、ビューポートのサイズに応じて異なるレイアウトを作成できるため、レスポンシブ Web デザイン(responsive web design、RWD)の重要な部分ですが、例えば、ユーザーはマウスではなくタッチスクリーンを使用しているというような、サイトが実行されている環境に関する他のものを検出するためにも使用できます。 このレッスンでは、最初にメディアクエリーで使用される構文について学習し、次に単純なデザインでどのようにレスポンシブにするかを示す実際の例で使用してみます。
60 段組みレイアウト Beginner, CSS, Guide, Layout, Learn, Learning, Multi-col, Multiple columns
段組みレイアウトの仕様では、新聞に見られるような、コンテンツを段にレイアウトする方法が提供されています。 この記事では、この機能の使い方について説明します。
61 通常フロー Beginner, CSS, Layout, Learn, float, grid, normal flow
この記事では、通常フロー、つまりレイアウトを変更していない場合のウェブページの要素のレイアウト方法について説明します。
62 位置指定 Article, Beginner, CSS, CodingScripting, Guide, Layout, Positioning, absolute, fixed, relative
位置指定を使用すると、通常のドキュメントレイアウトフローから要素を取り出して異なるふるまいをさせることができます。 例えば、互いの上に重なったり、常にブラウザーのビューポート内の同じ場所に留まったりします。 この記事では、さまざまな position の値とその使い方について説明します。
63 実用的な位置指定の例 Article, Beginner, CSS, CodingScripting, Guide, Layout, Learn, absolute, fixed, relative
この記事では、位置指定でどのようなことができるかを説明するために、実際に使用されるいくつかの例を作成する方法を示します。
64 レスポンシブデザイン Images, Media Queries, RWD, Responsive web design, flexbox, fluid grids, grid, multicol, typography
Web デザインの初期には、特定の画面サイズを対象とするページが作成されていました。 ユーザーの画面がデザイナーの予想よりも大きかったり小さかったりした場合、結果は望ましくないスクロールバーから、過度に長い行長、そして中途半端なスペースにまで及びました。 より多様な画面サイズが利用可能になると、レスポンシブ Web デザイン(responsive web design、RWD)の概念が登場しました。 これは、さまざまな画面幅、解像度などに合わせて Web ページがレイアウトと外観を変更できるようにする一連の実践です。 これは、マルチデバイス Web のデザイン方法を変えたアイデアであり、この記事は、それをマスターするために知っておくべき主なテクニックを理解するのに役立ちます。
65 古いブラウザーのサポート Beginner, CSS, Guide, Layout, Learn, feature queries, flexbox, float, grid, legacy
このモジュールでは、フレックスボックスとグリッドをデザインの主なレイアウト方法として使用することをお勧めしています。 しかしながら、サイトへの訪問者には、古いブラウザーや、使用している方法をサポートしていないブラウザーを使用している人がいます。 これはウェブ上で常に当てはまります — 新しい機能が開発されると、ブラウザーによって異なるものが優先されます。 この記事では、古い技術のユーザーを締め出すことなく最新のウェブテクニックを使用する方法について説明します。
66 CSS の第一歩 Beginner, CSS, Landing, Learn, Module, first steps
CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは CSS を習得するために、どう働くかの基本とともに、構文のありかたと HTML にスタイリングを加えることを簡単な始め方を提供します。
67 CSS 入門 Beginner, CSS, Classes, Elements, Learn, Selectors, Syntax, state
この記事では、かんたんな HTML コードに CSS を適用させ、その過程でこの言語についての実用的なことを学びます。
68 CSS の全体像 Beginner, CSS, HTML, Learn, Selectors, Structure, comments, properties, shorthand, values, whitespace
CSS の概要と基本的な使い方について理解できたので、今度は CSS の構造をもう少し詳しく見てみましょう。
69 CSS はどう働くか? Beginner, CSS, DOM, Learn
CSS の基本と目的、簡単なスタイルシートの書き方を学んできました。このレッスンでは、ブラウザーが CSS と HTML を実際にウェブページとして表示していくさまを見ていきます。
70 新しい知識を使う Beginner, CSS, Learn, Playground
先のいくつかのレッスンで、あなたは CSS を使ってシンプルなテキストドキュメントにスタイルを追加してフォーマットする方法を学びました。ここでは、それを実際に行ってみましょう。
71 CSSとは何か? Beginner, CSS, Introduction to CSS, Learn, Modules, Specifications, Syntax
CSS (Cascading Style Sheets;カスケーティングスタイルシート) は見栄えのよいページを作ることができますが、内部ではどう働くのでしょうか?この記事では簡単な構文の例とともに CSS とは何かについて説明し、この言語の重要な用語についても触れます。
72 CSS を使ってよくある問題を解決する Beginner, CSS, Learn
以下のリンクは CSS で解決できるよくある問題の解決法です。
73 装飾的なボックスの作成 Beginner, CSS, CodingScripting, Learn
CSS ボックスは、CSS で装飾されたウェブページの構成要素です。 見栄えを良くすることは、楽しさとやりがいの両方です。 デザインのアイデアを実用的なコードに変えることがすべてだからです。 面倒な制約と CSS の使用における狂気の自由のために、それは挑戦的です。 いくつかの装飾的なボックスをやりましょう。
74 CSS の一般的な質問 CSS, FAQ, Web, questions, ガイド, 例
この記事には、 CSS に関するいくつかのよくある質問(FAQ)とその解答が見つかり、ウェブ開発者になるための道で役に立つでしょう。
75 Content CSS, CSS:Getting_Started, Getting_Started
 CSS Getting Startedチュートリアルの第9章です; 文書が表示されたとき CSS を使ってコンテンツを追加するいくつかの方法について述べます。スタイルシートを編集して、テキストや画像を追加できます。
76 テキストの装飾 Beginner, CSS, CodingScripting, Fonts, Landing, Links, Module, Text, font, letter, line, lists, shadow, web fonts
CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で行う最も一般的なことの一つです。 ここでは、フォント、太字、イタリック体、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。
77 基本的なテキストとフォントの装飾 Article, Beginner, CSS, Guide, Style, Text, alignment, family, font, shorthand, spacing, weight
この記事では、CSS によるテキストの装飾の習得に向けて旅を始めましょう。 ここでは、フォントの太さ、ファミリーそしてスタイルの設定、フォントの一括指定、テキストの配置とその他のエフェクト、ラインと文字の間隔などを含んだ、テキストやフォントの装飾の基本について詳しく説明します。
78 リンクの装飾 Article, Beginner, CSS, Focus, Guide, Learn, Links, Pseudo-class, hover, hyperlinks, menus, tabs
リンクを装飾するときは、擬似クラスを使用してリンク状態を効果的に装飾する方法と、ナビゲーションメニューやタブなどの一般的なさまざまなインターフェイス機能で使用するためのリンクの装飾方法を理解することが重要です。 この記事では、これらすべてのトピックを見ていきます。
79 リストの装飾 Article, Beginner, CSS, Guide, Styling, Text, bullets, lists
リストは他のテキストとほとんど同じようにふるまいますが、知っておくべきリスト固有の CSS プロパティと、考慮すべきベストプラクティスがいくつかあります。 この記事はすべてを説明しています。
80 コミュニティスクールのホームページの組版 Assessment, Beginner, CSS, CodingScripting, Link, Styling text, font, list, web font
この評価では、コミュニティスクールのホームページ用にテキストを装飾することで、このモジュール全体でカバーしてきたすべてのテキスト装飾テクニックについての理解をテストします。 途中で楽しい時間があるかもしれません。
81 ウェブフォント @font-face, Article, Beginner, CSS, CSS Fonts, Fonts, Guide, Learn, Web Development, Web Fonts Article, Web fonts documentation, font-family, web fonts
このモジュールの最初の記事では、フォントとテキストの装飾に使用できる基本的な CSS 機能について調べました。 この記事では、ウェブフォントの詳細を調べながら、さらに進みます — これらを使用すると、ウェブページと一緒にカスタムフォントをダウンロードすることを可能にして、より多様なカスタムテキストの装飾を可能にします。
82 HTML フォーム Beginner, Featured, Forms, Guide, HTML, Landing, Learn, Web
このモジュールでは、ウェブフォームの習得に役立つ一連の記事をそろえています。ウェブフォームは、ユーザーとやり取りするための強力なツールです — 通常、ユーザーデータを集めたり、ユーザーインターフェイスの制御に使われてきました。しかし歴史的および技術的な理由から、その能力を十分に生かして使用する方法は、必ずしも明確とは限りません。このガイドではウェブフォームの構造からスタイル、データの検証やサーバーへの送信まであらゆる本質的な側面を取り上げます。
83 HTML フォームへの高度なスタイル設定 Advanced, CSS, Forms, HTML, Web, ガイド, 例
本記事では、スタイル設定が難しい一部の(不良なものと劣悪なもの)フォームコントロールで CSS を使用する方法を見ていきます。前の記事で見たように、テキストフィールドやボタンでの CSS 使用はまったく問題がありません。ここからは、HTML フォームへのスタイル設定の闇の部分を見ていきます。
84 基本的なネイティブフォームコントロール Beginner, Controls, Example, Forms, Guide, HTML, Input, Web, Widgets
一つ前の記事では、機能的なウェブフォームの例をマークアップし、いくつかのフォームコントロールとよくある構造要素を導入し、アクセシビリティのベストプラクティスを見てきました。次にさまざまなフォームコントロールやウィジェットの機能を詳しく見ていきます。 — 色々な種類のデータを集めるのにどんなオプションが使えるのかを見ていきます。とりわけこの記事では、ウェブの初期からありすべてのブラウザーで利用できる、元からあるフォームコントロールを見ていきます。
85 クライアント側のフォームデータ検証 HTML, Intermediate, JavaScript, Web, ウェブ, ガイド, フォーム, フォーム検証, 中級者向け, 例
データをサーバーへ送信する前に、必須のフォームコントロールが記入され、すべてのフォームコントロールが正しい書式で記入されていることを保証することが重要です。このクライアント側フォーム検証validationは、送信されるデータが様々なフォームコントロールで指定されている要件を満たしていることを保証します。この記事では、クライアント側フォーム検証の基本概念と例を紹介します。
86 カスタムフォームコントロールの作成方法 Advanced, Example, Forms, Guide, HTML, Web
HTML フォームで使用可能なコントロールだけでは十分でない場合が多くあります。例えば、select 要素のようなコントロールに高度なスタイル設定を行いたい場合や、独自の動作を提供したい場合は、あなた独自のコントロールを作成するしかありません。
87 例 1
これは、カスタムフォームウィジェットの作成方法を説明する最初のコード例です。
88 例 2 Forms, HTML
これは、カスタムフォームウィジェットの作成方法を説明する2番目の例です。
89 例 3 Forms, HTML
これは、カスタムフォームウィジェットの作成方法を説明する3番目の例です。
90 例 4 Advanced, Example, Forms, Guide, HTML, Web
これは、カスタムフォームウィジェットの作成方法を説明する4番目の例です。
91 例 5 Forms, HTML
これが、カスタムフォームウィジェットの作成方法を説明する最後の例です。
92 フォームの構築方法 CodingScripting, HTML, Web, ガイド, フォーム, 例, 初心者, 学習, 構造
基本から外れて、ここでは色々なフォームのパーツを構造化し、意味をつけるのに使われる要素を詳しく見ていきます。
93 例: お支払いフォーム
これは記事 HTML フォームの構築方法の基本的なお支払いフォームの例です。
94 古いブラウザーでの HTML フォーム Example, Forms, Guide, HTML, Intermediate, Web
ウェブ開発者は誰でも、ウェブが自分たちにとって非常に厳しい場所であることを、すぐに (時には痛みを伴って) 学びます。最悪の災いは古いブラウザーです。「古いブラウザー」というと、 Safari や古いバージョンの Internet Explorer を思い浮かべますが、それだけではありません。モバイルの世界では、古い Android スマホや iPhone のように、ブラウザーも OS もアップデートできない場合、アップデートされない純正ブラウザーも古いブラウザーです。
95 HTML5 入力タイプ Beginner, Controls, Example, Forms, Guide, HTML, Web, Widgets
前の記事では input 要素を見てきて、HTML の初期から利用できる type 属性の値をカバーしてきました。ここでは最近のフォームコントロールの機能、特定のデータを集めるのに HTML5 で追加された、新しい入力タイプを詳しく見ていきましょう。
96 その他のフォームコントロール Beginner, Controls, Example, Forms, Guide, HTML, Web, Widgets
ドロップダウンリストや複数行のテキストフィールドから、output要素(前の記事で見ました)やプログレスバーといったその他の役立つ機能まで、非-<input> 型のフォーム要素の機能を詳しく見ていきます。
97 フォームウィジェット向けプロパティ実装状況一覧 Advanced, CSS, Forms, Guide, HTML, NeedsUpdate, Web, ウェブ, ガイド, フォーム, 高度
以下の実装状況一覧表で、 HTML フォーム向けの CSS の対応状況を要約しています。 HTML フォームや CSS の複雑さにより、これらの表は完全なリファレンスであるとはいえません。それでも、何ができて何ができないかの見識を得られるでしょう。また、どうすればよいかを知る助けにもなるでしょう。
98 フォームデータの送信 CodingScripting, HTML, HTTP, Web, ガイド, セキュリティ, ファイル, フォーム, ヘッダー, 初心者
フォームがクライアント側での検証が終わったら、次はフォームの送信です。前の記事では検証を扱ったので、送信する準備はできています。この記事では、ユーザーがフォームを送信したときに何が起こるか、つまりデータがどこへ行くのか、そこに来たときにどう扱うのかを見ます。また、フォームデータの送信に関連するセキュリティの考慮事項のいくつかも見てみます。
99 JavaScript によるフォームの送信 Advanced, Example, Forms, Forms Guide, Guide, HTML, HTML forms, JavaScript, Learn, Security, Web, Web Forms
HTML フォームは HTTP リクエストを宣言的に送信できます。しかし、フォームは 、例えば XMLHttpRequest のように JavaScript 経由で送信する HTTP リクエストを準備することもできます。この記事ではその方法を探ります。
100 HTML フォームへのスタイル設定 CSS, Example, Forms, Guide, HTML, Intermediate, Web
前の記事ではウェブフォームを構築するのに必要な HTML のすべてを見てきました。この記事ではフォームコントロールにスタイル設定する CSS の使い方に進みます。これは歴史的に難しかったです — フォームコントロールは大きく変わり CSS を使ったフォームのカスタマイズは簡単になりました— しかし古いブラウザーが引退してモダンブラウザーが多くの機能を与えるため、より簡単になりました。
101 UI 擬似クラス Beginner, CSS, Example, Forms, Guide, HTML, Pseudo-classes, Styling, Web
In this article, we will explore in detail the different UI pseudo-classes available to us in modern browsers for styling forms in different states.
102 初めてのフォーム Beginner, CodingScripting, Example, Forms, Guide, HTML, Learn, Web, ウェブ, ガイド, フォーム, 初心者向け, 学習
このシリーズの最初の記事では、簡単なフォームの設計、HTML フォームコントロールとその他の HTML 要素を使用した正しい実装、CSS によるとても簡単なスタイル付け、データをサーバーに送る方法を含めた、ウェブフォームを作成する本当に初歩的な経験をします。サブトピックは、モジュールの後で詳しく展開していきます。
103 CodingScripting, HTML, Web, ガイド, フォーム, 例, 初心者, 学習
これは最初の HTML フォームの記事のサンプルコードです。
104 フロントエンドウェブ開発者
フロントエンドウェブ開発パスへようこそ!
105 ウェブ入門 Beginner, CSS, Design, Guide, HTML, Index, l10n:priority, publishing, theory

ウェブ入門は、実用的なウェブ開発の入門シリーズです。まずはじめに、簡単なウェブページを作るのに必要なツールをセットアップします。そして、簡単なコードを書いたら、実際にウェブに公開します。

106 CSS の基本 Beginner, CSS, CodingScripting, Learn, Styling, Web, l10n:priority, 初心者, 学習

CSS (Cascading Style Sheets) は、ウェブページのスタイルを設定するコードです。「CSS の基本」では、始めるのに必要なものを紹介します。ここでは、テキストを赤くするにはどうすればいいのか?コンテンツを (ウェブページの) レイアウトの中で特定の場所に表示するにはどうすればいいのか?背景画像と色を使って ウェブページをどのように飾るのか?というような疑問に答えていきます。

107 ファイルの扱い Beginner, CodingScripting, Files, HTML, l10n:priority, theory, website, ガイド

Web サイトは、テキストコンテンツ、コード、スタイルシート、メディアコンテンツなど、多くのファイルで構成されています。Web サイトを構築するときは、これらのファイルをローカルコンピュータ上の合理的な構造に組み立て、互いに呼び出すことができるようにして、最終的にサーバにアップロードする前に、すべてのコンテンツを正しいものにする必要があります。ファイルの扱いでは、Web サイトに合理的なファイル構造を設定できるように、注意すべきいくつかの問題について説明します。

108 ウェブのしくみ Beginner, Client, DNS, HTTP, IP, Infrastructure, Learn, Server, TCP, l10n:priority, クライアント, サーバー, 初心者, 学習

ウェブのしくみでは、あなたがコンピューターや携帯電話のウェブブラウザーでウェブページを見るときに起こることを簡単に説明します。

109 HTML の基本 Beginner, CodingScripting, Doctype html, HTML, Learn, Web, l10n:priority, 初心者, 学習

HTML (Hypertext Markup Language、ハイパーテキスト・マークアップ・ランゲージ)は、ウェブサイトのコンテンツの構造を作るために使うコードです。例えば、コンテンツは段落、箇条書きのリスト、画像の使用、データテーブルなどの組み合わせで構成されています。タイトルが示すように、この記事では HTML とその機能の基本的な理解ができるように説明します。

110 基本的なソフトウェアのインストール WebMechanics, l10n:priority, セットアップ, ツール, テキストエディタ, ブラウザ, 初心者, 学習

「基本的なソフトウェアのインストール」では、あなたが簡単な Web 開発をするのに必要なツールを紹介して、それらのツールを適切にインストールする方法について説明します。

111 JavaScript の基本 Beginner, CodingScripting, JavaScript, Learn, Web, l10n:priority

JavaScript はウェブサイトにインタラクティブ機能 (ゲーム、ボタンが押されたときやデータがフォームに入力されたときの反応、動的なスタイルの変更、アニメーションなど) を追加するプログラミング言語です。この記事は、このエキサイティングな言語を始めるのに役立ち、可能性についてのアイディアを提供します。

112 ウェブサイトの公開 Beginner, CodingScripting, FTP, GitHub, Google App Engine, Learn, Web, l10n:priority, publishing, web server, 初心者, 学習

ウェブサイトを構成するコードやファイルの整理が終わったら、それをオンラインで公開して、人々が見つけられるようにする必要があります。この記事では、簡単なサンプルコードを手軽にオンラインに公開する方法を説明します。

113 Web サイトをどんな外見にするか Assets, Composing, Deprecated, Plan, l10n:priority, コンテンツ, デザイン, フォント, 初心者, 学習

Web サイトをどのような外見にするか」では、「どんな情報を Web サイトで提供するか」、「どのフォントと色を使うのか」、「私の Web サイトは何をするのか」といった、コードを書き始める前にあなたの Web サイトについて計画したりデザインするべき事柄について説明します。

114 HTML の学習: ガイドとチュートリアル Beginner, Guide, HTML, Intro, Learn, Topic, ガイド, トピック, 初心者, 学習, 導入
ウェブサイトを構築するためには、ウェブページの構造を定義するための基本的な技術である HTML 言語を知っておくべきでしょう。 HTML はウェブコンテンツをどのよう解釈するべきかを特定するために使用します。段落、リスト、見出し、リンク、画像、マルチメディアプレーヤー、フォーム、又は他の数多くの要素の一つ、又はユーザーが定義した新しい要素などです。
115 一般的な問題解決に HTML を使う CodingScripting, HTML
下記のリンクは、日常の解決すべき問題を HTML を使って解決する解決法を指しています。
116 画像にヒットマップを追加する Graphics, Guide, HTML, Intermediate, Navigation

ここでは、イメージマップを設定する方法と、最初に検討すべきいくつかの欠点を説明します。

117 読み込みが速い HTML ページを作成するための豆知識 Advanced, Guide, HTML, NeedsUpdate, Performance, Web, Web Performance
これらの豆知識は、一般の知識や実験に基づくものです。
118 HTML で用語を定義する Beginner, Guide, HTML, Learn

HTML は、インラインであろうと構造化された用語集であろうと、記述の意味を伝達するいくつかの方法を提供します。 この記事では、キーワードを定義する際に適切にマークアップする方法について説明します。

119 データ属性の使用 HTML, HTML5, ウェブ, ガイド, 例, 独自データ属性
HTML5 は、特定の要素に関連付ける必要があるが、定義済みの意味を持つ必要のないデータに対する拡張性を念頭に置いて設計されています。 data-* 属性により、標準外の属性、 DOM の追加プロパティ、 Node.setUserData() のような特殊な方法に頼らずに、標準的な意味のある HTML 要素に追加情報を格納することができます。
120 ウェブページで JavaScript を使う方法 Beginner, HTML, JavaScript, OpenPractices

Take your webpages to the next level by harnessing JavaScript. Learn in this article how to trigger JavaScript right from your HTML documents.

121 HTML 入門 CodingScripting, HTML, Introduction to HTML, Landing, Links, Structure, Text, head, semantics
本来、HTML は、要素で構成される極めてシンプルな言語です。HTMLは、テキストの断片に、文書における他とは異なる意味 (段落なのか、箇条書きなのか、表の一部なのか) を与え、文書を論理的なセクションに構成し (ヘッダを持つのか、コンテンツを 3 段組にするのか、ナビゲーションメニューを持つのか) 、ページに画像や動画のようなコンテンツを貼り付けるために使うことができます。このモジュールでは、これらのうち最初の 2 つについて紹介し、 HTML を理解する上で知る必要がある基本的な概念や文法について紹介します。
122 高度なテキスト処理 Beginner, CodingScripting, Guide, HTML, Learn, Text, abbreviation, description list, quote, semantic
テキストの書式設定のための HTML には他にも多くの要素がありますが、これは HTML テキストの基礎 には書かれていません。この記事で説明されている要素はあまり知られていませんが、知っていると役に立ちます。(これはまだいかなる意味でも完全なリストではありません)。ここでは、注釈、説明リスト、コンピューターコードとその他の関連テキスト、下付き文字と上付き文字、連絡先情報などのマーキングについて学習します。
123 ハイパーリンクの作成 Beginner, CodingScripting, Guide, HTML, Learn, Links, Title, absolute, hyperlinks, relative, urls
ハイパーリンクとは本当に重要なものです— ウェブが網状組織を構成しているのもハイパーリンクのおかげです。この記事ではリンクを作るために必要な構文を示し、リンクに関するベストプラクティスについて議論します。
124 HTML のデバッグ CodingScripting, HTML, エラー, ガイド, デバッグ, バリデーション, バリデーター, ビギナー
HTML を書くことは良いですが、何か問題が生じた場合どうなります?また、コード内のどこにエラーがあるか見つけられますか?この記事では HTML 内のエラーの発見、および修正の手助けをしてくれるいくつかのツールを紹介します。
125 ドキュメントと Web サイトの構造 Beginner, CodingScripting, Guide, HTML, Layout, Page, Site, blocks, semantics
HTML は、ページの個々の部分 (「段落」や「画像」など) を定義するだけでなく、ウェブサイトの領域を定義するために使用される多数のブロックレベル要素 (「ヘッダー」、「ナビゲーションメニュー」、「メインコンテンツ列」など) も備えています。この記事では、基本的なウェブサイト構造を計画し、この構造を表す HTML を記述する方法について説明します。
126 HTML を始めよう Attribute, Beginner, CodingScripting, Comment, Element, Guide, HTML, entity reference, whitespace
この記事では HTML の不変的な基礎を扱って、始められるようにします。要素や属性などの重要な用語 (すでに聞き覚えはあるかもしれません)、それらが言語にどう組み込まれているか説明します。また、HTML 要素の構造、典型的な HTML ページの構造を見せて、その他の重要な基礎言語機能について説明します。それでは、 HTML の例とともに見ていきましょう。
127 HTML テキストの基礎 Beginner, CodingScripting, Guide, HTML, Introduction to HTML, Learn, Text, headings, paragraphs, semantics
HTML の役割の 1 つはテキストに構造と意味 (semanticsともいう) を与え、ブラウザーが正しく表示できるようにすることです。この記事では HTML を使ってテキストのページを構造化する方法、見出しとパラグラフをつけたり、言葉を強調したり、リストを作ったり、などを説明します。
128 手紙をマークアップする Beginner, CodingScripting, HTML, head, テキスト, リンク, 評価
テキストの書式設定のスキルを試すのも便利な例です。この課題では、ハイパーリンクを含む基本的な HTML テキストフォーマットスキルと高度な HTML テキストフォーマットスキルをテストするためにマークアップするための文字が与えられます。さらに HTML <head> コンテンツに対するあなたの慣れをテストします。
129 コンテンツページを構造化する Beginner, CodingScripting, HTML, セマンティクス, デザイン, レイアウト, 学習, 構造, 評価
CSS を使用してレイアウトできるようにコンテンツのページを構成することは、習得が非常に重要なスキルです。そのためこの評価では、ページがどのように表示されるのかを検討し、適切な構造セマンティクスを選択してその上にレイアウトを構築する能力についてテストします。
130 head には何が入る? HTML のメタデータ Beginner, CodingScripting, Guide, HTML, Meta, favicon, head, lang, metadata
HTML の文書の Head 部分は、ページが読み込まれてもウェブブラウザーには表示されない部分です。この部分には、例えば、 title といった情報や CSS へのリンク (もし HTML を CSS で修飾したいならば)、独自のファビコンへのリンク、そしてほかのメタデータ (HTML を誰が書いたのかとかその HTML を表現する重要なキーワードなど) の情報を含んでいます。この記事では、上記のすべてのことと、さらに、読者にマークアップ言語と頭に入れておくべきほかのコードについてよい基礎を与えます。
131 マルチメディアとその埋め込み方 Assessment, Audio, Beginner, CodingScripting, Flash, Guide, HTML, Images, Landing, Learn, SVG, Video, iframes, imagemaps, responsive, イメージマップ, ガイド, フラッシュ, レスポンシブ, 初心者, 動画, 学習, 画像, 着地ページ, 評価試験, 音声
このコースではここまで多くのテキストを見てきましたが、ただテキストだけのWebでは面白くありません。Web が生き生きとして、面白いコンテンツがどんどんあふれるようにする方法を見ていきましょう! このモジュールでは、HTMLをどのように用いれば、あなたの Web ページにマルチメディアを含めることができるかについて学びます。 また、画像を挿入するためのさまざまな方法や、動画・音声、さらには他の Web ページ全体を挿入する方法についても触れます。
132 ウェブにベクターグラフィックスを追加する Beginner, Graphics, Guide, HTML, Images, Learn, Raster, SVG, Vector, iframe, img, ガイド, グラフィックス, ベクター, ラスター, 初心者, 学習, 画像

ベクターグラフィックは多くの状況でとても便利です。 — ファイルサイズは小さく、スケーラビリティが高いため、ズームイン (拡大表示) したり、大きなサイズに拡大したりしてもモザイクになりません。この記事では、ウェブページにそれを組み込む方法を説明します。

133 HTML の画像 Beginner, Guide, HTML, Image, alt text, captions, figcaption, figure, img, ガイド, キャプション, 代替テキスト, 初心者, 図表, 画像, 記事
最初は、Web は単なるテキストに過ぎず、とても退屈でした。幸運なことに、Web ページ内に画像 (および他のより興味深いタイプのコンテンツ) を埋め込む能力が追加されるまでにはあまり時間がかかりませんでした。考慮すべき他のタイプのマルチメディアもありますが、単純な画像を Web ページに埋め込むために使用される、慎ましい img 要素から始めるのが理にかなっています。この記事では、基本的な使い方を含め、figure を使ったキャプションの注釈付け、CSS 背景画像との関連付けなど、詳細な使い方を見ていきます。
134 Mozilla のスプラッシュページ Assessment, Beginner, CodingScripting, Embedding, HTML, Multimedia, Video, iframe, picture, responsive, sizes, srcset, マルチメディア, レスポンシブ, 初心者, 動画, 埋め込み, 評価試験
今回の評価試験では、このモジュールの記事で説明したいくつかの技術の知識をテストするために、Mozilla のすべてついてのファンキーなスプラッシュページに、いくつかの画像と動画を追加してもらいます!
135 object から iframe へ — その他の埋め込み技術 Article, Beginner, CodingScripting, Embedding, Flash, Guide, HTML, Learn, Multimedia and embedding, Object, embed, iframe
そろそろ、画像、動画、音声など、ウェブページへの埋め込みのコツがつかめてきたはずです。ここでは、少し横道にそれて、ウェブページに様々な種類のコンテンツを埋め込むことができる要素、 iframeembedobject を見てみたいと思います。 <iframe> は他のウェブページを埋め込むためのもので、他の2つの要素は PDF、SVG、 さらに Flash — もうすぐなくなる技術ですが、まだ時々見かけるもの — も、埋め込むことができます。
136 レスポンシブ画像 Article, Beginner, CodingScripting, Design, Graphics, Guide, HTML, Image, Intermediate, img, picture, sizes, srcset, ガイド, グラフィックス, デザイン, 中級, 初心者, 画像, 記事
この記事では、レスポンシブ画像の概念 — 画面サイズ、解像度などの機能が大きく異なる機器で適切に動作する画像 — について学び、 HTML がそれを実装する上でどのような道具を提供しているかを見てみます。 レスポンシブ画像は、レスポンシブウェブデザインの一部にすぎませんが(そしてそれを実現する上で良いステージになりますが)、 CSS のトピックの将来のモジュールで多くのことを学ぶトピックです。
137 動画と音声のコンテンツ Article, Audio, Beginner, Guide, HTML, Video, captions, subtitles, track, ガイド, 初心者, 動画, 記事, 音声
Webページに簡単な画像を追加するのができるようになったので、次のステップは HTML 文書に動画と音声のプレイヤーを追加することです!  この記事では videoaudio 要素を使ってそうすることを見ていきます。それから動画にキャプションや字幕を追加する方法を見て完了します。
138 HTML テーブル Article, Beginner, CodingScripting, Guide, HTML, Landing, Module, Tables
HTML でのとてもよくある仕事はテーブルデータの構造化で、数々の要素と属性がこの目的のためにあります。スタイリング用の CSS と組み合わせて、HTML は Web 上に、学校の授業の計画や、水泳の時間割や、好きな恐竜やフットボールチームの統計情報といった、情報のテーブルを簡単に表示できます。このモジュールではHTMLを使ってテーブルデータを構造化するのに必要な知識を一通り案内します。
139 HTML 表の高度な機能とアクセシビリティ Accessibility, Advanced, Article, Beginner, CodingScripting, HTML, Headers, Learn, caption, scope, sumary, table, tbody, tfoot, thead
このモジュールの2番目の記事では、HTML テーブルのより高度な機能 (キャプション/要約、行をテーブルのヘッダー、本文、フッターのセクションにグループ化するなど) や、視覚障碍のあるユーザのためのテーブルのアクセシビリティについて調べます。
140 HTML の表の基本 Beginner, CodingScripting, HTML, Learn, basics, col, colgroup, colspan, header, row, rowspan, セル, テーブル, 記事
この記事は、 HTML の表を始めるために、行やセルなどとても基本的なところから、見出し、複数列や行のセルの結合、スタイルを適用するためにセルの列をすべてグループ化する方法などを扱います。
141 評価: 太陽系の惑星のデータを構造化する Assessment, Beginner, CodingScripting, HTML, Learn, テーブル
テーブルの評価では、太陽系の惑星に関するいくつかのデータを提供し、それを HTML テーブルに構造化しましょう。
142 JavaScript CodingScripting, JavaScript, JavaScripting beginner, Landing, Module, Topic, l10n:priority, 初心者
JavaScript はウェブページ上に複雑なものを実装することを可能にするプログラミング言語です。ウェブページが表示されるたびに静的な情報が表示されるだけでなく、タイムリーにコンテンツを更新したり、インタラクティブマップや 2D/3D グラフィックスのアニメーションを表示したり、またはビデオジュークボックスが流れたりします。ほかにもありますが、これらは 間違いなく JavaScript が関係しています。
143 非同期 JavaScript JavaScript, Promises, async, asynchronous, await, setInterval, setTimeout
このモジュールでは、asynchronous JavaScript に触れ、なぜそれが重要なのか、そして、潜在的なブロッキング処理(例えばサーバからリソースを取得する)に効果的に対処するためにどうやって使うのかを見ていきます。
144 非同期プログラミングの一般的概念 JavaScript, Learn, Promises, Threads, asynchronous, blocking
この記事では、非同期プログラミングに関するいくつかの重要な概念と、その概念がウェブブラウザーと JavaScript でどのように見えるのかをひと通り説明していきます。このモジュールの他の記事に取り組む前に、これらの概念を理解しておく必要があります。
145 JavaScript の構成要素 Article, Assesment, Beginner, CodingScripting, Conditionals, Functions, Guide, JavaScript, Landing, Loops, Module, events, l10n:priority
このモジュールでは、条件付きステートメント、ループ、関数、イベントなど一般的に発生するコードブロックの種類に注目し、JavaScript の重要な基本機能をすべてカバーしていきます。コースの中で既にこれらを目にしているのですが、説明を省いてきました。ここではすべて明示的に説明を行います。
146 独自の関数を作る Article, Beginner, CodingScripting, Functions, Guide, JavaScript, Learn, Tutorial, build, invoke, l10n:priority, parameters
前の記事で扱った重要な理屈をたくさん使って、この記事では実践的な練習を行ないます。ここではあなたが自力で独自関数を作成するための練習を行なっていきます。同時に、関数を扱う上で役に立つ細々の説明もしていきます。
147 コードでの意思決定 — 条件文 Article, Beginner, CodingScripting, Conditionals, JavaScript, Learn, Switch, conditions, else, if, l10n:priority, ternary
どのプログラミング言語でも、コードは様々な入力に応じた決定を迫られ、その結果として動作を起こします。例えば、ゲームではプレイヤーの残機が 0 になった場合、ゲームオーバーとなります。天気アプリは朝に起動された場合は日の出の画像を表示し、夜に起動された場合は星や月の画像を表示します。この記事では、JavaScript において、条件文と呼ばれるものがどのように動作するかを説明します。
148 イベントへの入門 Beginner, CodingScripting, JavaScript, イベント, イベントハンドラー, ガイド, 学習, 記事
イベントは、あなたがプログラムを書いているシステムで生じた動作、出来事を指します。システムからあなたへ、イベントとして何かあった事を知らせてくるので、必要であればそれに何らかの反応を返す事ができます。例えば、ユーザーがウェブページ上でボタンを押したとき、ある情報を表示するように反応させたいと思うかもしれません。この記事では、イベントに関する重要な概念を取り上げ、ブラウザーの中でのイベントの振る舞いを見ていきます。ここでは、全てを説明するのではなく、この段階で知っておくべき内容を取り上げます。
149 関数 — 再利用可能なコードブロック API, Article, Beginner, Browser, CodingScripting, Custom, Functions, Guide, JavaScript, Learn, Method, anonymous, invoke, l10n:priority, parameters
コーディングにおいて、不可欠なコンセプトが関数です。関数を使用することで、特定のタスクをこなすコードを定義し、保持しておいて、いつでも簡単なコマンドで呼び出すことを可能にしてくれます。同じコードを何度も打たなければならないよりとっても簡単です。この記事では関数の書き方や、関数を実行する方法、定義の仕方、スコープ、引数といった関数に関する基礎を学びます。
150 イメージギャラリー Assessment, Beginner, CodingScripting, Conditionals, Event Handler, JavaScript, Learn, Loops, events
JavaScript の基本的な構成要素を見てきたところで、これからたくさんのウェブサイトで見かける項目、JavaScript で動作するイメージギャラリーをつくってみることで、あなたが得た繰り返し、関数、条件とイベントの知識を試してみましょう。
151 ループコード Article, Beginner, CodingScripting, DO, Guide, JavaScript, Learn, Loop, break, continue, for, l10n:priority, while
プログラミング言語は、繰り返し実行するタスクを素早く終わらせるのがとても得意です。基本的な計算処理から、同じような作業がたくさんあるのならどんな状況でもこなします。今度は JavaScript でそういった目的を果たすために使用するループ構造を見てみましょう。
152 関数の戻り値 リターン, リターン値, 戻り値, 返り値, 返却値, 関数
このコースでの関数の学習を終えるために、最後に議論しておくべき関数についての大事なコンセプトがあります。それは戻り値です。関数によっては意味のある値を返さないものもありますが、値を返すものも当然あります。それらの値が何であるか、あなたのコードの中でどのように利用するのか、またどのように関数に意味のある値を返させるのかについて理解することは重要です。これらについてすべてを以下で紹介します。
153 クライアントサイド Web API API, CodingScripting, DOM, JavaScript, Landing, WebAPI, グラフィック, データ, メディア, モジュール, 初心者向け, 学習, 記事
Web サイトやアプリケーション用にクライアント側のJavaScriptを書いていると、すぐにアプリケーションプログラミングインターフェース (Apprication Programming Interfaces、API) にでくわします。API とはブラウザやサイトが動作している OS の様々な面を操作したり、他の Web サイト、サービスから取得したデータを操作するためのプログラムされた機能です。このモジュールでは API とは何か、開発作業の中でよく見かける最もよく利用される API のいくつかについて、どのように使うかを説明していきます。
154 クライアント側ストレージ API, Article, Beginner, CodingScripting, Guide, IndexedDB, JavaScript, Learn, Storage, Web Storage, ウェブストレージ, ガイド, 保存, 初心者, 学習
モダン・ウェブブラウザーは、ユーザーの許可のもとにウェブサイトがユーザーのコンピューター上にデータを保存して必要なときにそのデータを取得するための、いくつもの方法をサポートしています。このことにより、長期記憶のためにデータを存続させること、オフライン利用のためにサイトまたは文書を保存すること、サイトについてのユーザー独自の設定を保持すること、などなどが可能になります。本記事では、これらがどのようにして機能するのかについてのごく基本的な点を説明します。
155 グラフィックの描画 API, Article, Beginner, Canvas, CodingScripting, Graphics, JavaScript, Learn, WebGL
ブラウザーには Scalable Vector Graphics (SVG) 言語から、HTML canvas 要素へ描画するための API (The Canvas API と WebGL を参照) まで、非常に強力なグラフィックプログラミングツールが含まれています。
この記事では、canvas の概要とさらに詳細を学ぶためのリソースについて説明します。
156 サーバからのデータ取得 API, Article, Beginner, CodingScripting, Fetch, JSON, JavaScript, Learn, Promises, Server, XHR, XML, XMLHttpRequest, data, request
モダンな Web サイトやアプリケーションでしょっちゅう必要になる仕事は、サーバから個々のデータを取ってきて、新しいページ全体を読んでくることなしに、ページの一部を書き換える事です。この一見ちょっとした事が、サイトのパフォーマンスや振舞いに巨大なインパクトを与えました。この記事ではそのコンセプトを解説し、これを可能にした技術 XMLHttpRequest や Fetch API について見ていきます。
157 Web API の紹介 3rd party, API, Article, Beginner, Browser, CodingScripting, Learn, Object, WebAPI, client-side
まずはAPIを高い視点から見ていきます — これは何なのか、どう働くのか、あなたのコードでどう使うのか、どういう風に作られているのか? また様々なクラスのAPIは何なのか、どのような使い方があるのかも見ていきます。
158 ドキュメントの操作 API, Article, Beginner, CodingScripting, DOM, Document, Document Object Model, JavaScript, Learn, Navigator, WebAPI, Window
ウェブページやアプリを書く場合に、最も多く必要になるのはウェブ文書をどうかして操作する事でしょう。これは普通ドキュメントオブジェクトモデル (Document Object Model、DOM) によって為され、DOM は HTML とスタイルに関する情報を Document オブジェクトを多用して操作する一連の API です。この記事では、DOM の使い方を詳しく見ながら、面白い方法であなたの環境を変える事ができる興味深い他の API もいくつか見ていきます。
159 サードパーティ 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 の違いを見て、後者の典型的な使い方について説明します。
160 動画と音声の API API, Audio, Beginner, CodingScripting, Guide, JavaScript, Learn, Video, 記事
HTML5 comes with elements for embedding rich media in documents — video and audio — which in turn come with their own APIs for controlling playback, seeking, etc. This article shows you how to do common tasks such as creating custom playback controls.
161 JavaScript の第一歩 Arrays, Article, Assessment, Beginner, CodingScripting, Guide, JavaScript, Landing, Module, Numbers, Operators, Variables, l10n:priority, maths, strings
最初の JavaScript のモジュールでは、初めて JavaScript を書く実践的な経験を体験する前に、「JavaScript とは何?」や「どのようなもの?」や「何ができる?」といったような基本的な質問に答えます。その後変数や文字列、 数値、配列といったような言語の内容をお話します。
162 JavaScriptへの最初のダイブ CodingScripting, Conditionals, JavaScript, Objects, Operators, events, l10n:priority, 初心者, 変数, 学習, 記事, 関数
JavaScript の理論、そしてそれを使ってできることについて学んだところで、完全に実用的なチュートリアルを通じて、JavaScript の基本的な機能についての短期集中コースをお見せします。ここでは、簡単な「数字を当てる」ゲームをステップバイステップで構築します。
163 配列 CodingScripting, JavaScript, Join, Pop, Push, l10n:priority, shift, split, unshift, 初心者, 学習, 記事, 配列
このモジュールの最後に、配列について見ていきましょう。配列は 1 つの変数名でリスト形式のデータを保持するのに好都合です。ここでは、どう便利なのか、どのように作るのか、そして配列の項目を追加したり削除したり取得したりする方法について学びます。
164 JavaScriptでの基本演算 — 数値と演算子 Article, Beginner, CodingScripting, Guide, JavaScript, Learn, Math, Operators, augmented, increment, l10n:priority, maths, modulo
今回は JavaScript での数学的処理についてです。我々の命令を実行するために上手く数値を操作するのにどのように Operator や、その他の機能を使用できるのかを見ていきましょう。
165 バカ話ジェネレーター Arrays, Assessment, CodingScripting, JavaScript, Numbers, Operators, Variables, l10n:priority, strings, 初心者, 学習
この評価試験では、このモジュールを通して身に付けた知識を生かして、ランダムなバカ話を生成する楽しいアプリを作ります。楽しんでください!
166 テキストを扱う — JavaScript での文字列 Article, Beginner, CodingScripting, Guide, JavaScript, Join, Quotes, concatenation, l10n:priority, strings
プログラミングでは文字の羅列を文字列と呼びますが、次はこれを学習しましょう。この記事では、JavaScript でよく使われる、文字列を作ったり、引用符をエスケープしたり、文字列を結合したりといった、文字列について本当に知っておくべきことだけを見てみましょう。
167 あなたのスキルをテストしよう: 数学 Beginner, JavaScript, Learn, Math, test your skills
このスキルテストの目的は、JavaScript での基本演算 — 数値と演算子 の記事を理解しているかどうかを評価することです。
168 便利な文字列メソッド Article, Beginner, CodingScripting, JavaScript, Learn, case, indexof, l10n:priority, length, lower, replace, split, upper
文字列の基本についてはすでに見ました。ここからはレベルを上げて、組み込みのメソッドを使用して文字列に対して実行できる便利な操作について考えてみましょう。例えば、文字列の長さを調べたり、繋げたり、分割したり、ある文字を他の文字に置き換えたりなどです。
169 必要な情報を保存する — 変数 Arrays, Booleans, JavaScript, Numbers, Objects, Updating, Variables, declaring, initializing, l10n:priority, loose typing, strings
前回までの記事を読んで、高度な視点からその機能を概観し、JavaScript とは何なのか、それで何ができるのか、他の Web の技術とどう一緒に使うのか、そして、どのような機能があるのかが分かったのではないでしょうか。この記事では、本当の基本に立ち返り、JavaScript の基本的な構成要素である変数について見てみましょう。
170 JavaScript とは 3rd party, API, Article, Beginner, Browser, CodingScripting, Core, JavaScript, Learn, Script, comments, external, inline, l10n:priority, what
MDN 初心者向け JavaScript コースへようこそ! この最初の記事では、高水準から JavaScript を見ていき、「JavaScript とは何か?」「これを使うと何ができるか?」などの質問に答えます。JavaScript の用途にきっちりと親しめるようになります。
171 何が間違っている? JavaScript のトラブルシューティング Article, Beginner, CodingScripting, Debugging, Developer Tools, Error, JavaScript, Learn, Tutorial, console.log, l10n:priority
前の記事の「数字当てゲーム」を作っていて、動かないことはありませんでしたか?恐れることはありません。この記事では、そんな心配をしなくて済むように、JavaScript のエラーを見つけて直す方法を伝授します。
172 JavaScriptのコードのよくある問題を解決する Beginner, JavaScript, Learn
JavaScript のコードが正しく動作しないので修正したい、というような場合にみられる、よくある問題の解決方法へのリンクを以下に示します。
173 JavaScript オブジェクト入門 Article, Assesment, Beginner, CodingScripting, Guide, JavaScript, Learn, Objects, Tutorial, 学習
JavaScript では、文字列や配列などの JavaScript のコア機能から、JavaScript の最上部に構築されたブラウザ API まで、ほとんどのものがオブジェクトです。関連する関数や変数を効率的なパッケージにカプセル化して、便利なデータコンテナーとして動作する独自のオブジェクトを作成することもできます。JavaScript のオブジェクトベースの性質を理解することは、言語に関する知識をさらに深め、より効率的なコードを書く場合に重要です。したがって、この役立つモジュールを用意しました。ここではオブジェクトの理論と構文を詳しく説明し、独自のオブジェクトを作成する方法を見ていきます。
174 バウンスボールのデモに機能を追加する Assessment, Beginner, CodingScripting, JavaScript, Learn, OOJS, Object-Oriented, Objects, l10n:priority
この評価では、前の記事のバウンスボールのデモを出発点として用い、いくつかの面白い機能を新たに追加してもらいます。
175 JavaScript オブジェクトの基本 API, Article, Beginner, CodingScripting, JavaScript, Syntax, bracket notation, dot notation, instance, object literal, this, オブジェクト, 学習, 理論
この記事では、基本的な JavaScript オブジェクトの構文を学び、このコースで以前に見た一部の JavaScript の機能を復習し、すでに提供された多くの機能がオブジェクトであるという事実を再確認します。
176 JavaScript での継承 Article, CodingScripting, Inheritance, JavaScript, OOJS, OOP, Object, Prototype, l10n:priority, 初心者, 学習
OOJS のぞっとするような細部はほとんど説明されたので、ここでは”親”クラスからの機能を継承する”子供”のオブジェクトクラス (コンストラクタ) の生成方法について解説します。さらに、いつ、どこで OOJS を使うかについてのアドバイスを提示し、最新の ECMAScript の構文でクラスがどのように扱われるかを見ていきます。
177 JSON データの操作 Article, Beginner, CodingScripting, Guide, JSON, JavaScript, Learn, Objects, Tutorial, l10n:priority
JavaScript Object Notation (JSON) は表現用の標準的なテキストベースの構造データ表現フォーマットで、JavaScript 構造データオブジェクトの表記法をベースとしています。一般的にはウェブアプリケーションでデータを転送する場合に使われます。(例えば、データをサーバーからクライアントへ送信する場合などで、ウェブページに表示されたりすることもあり、その逆もあります)。頻繁に見かけるデータフォーマットですので、この節では JavaScript を使って JSON をパースする、JSON のデータを参照する、JSON を作るなど、JSON を扱うために必要となる操作を説明します。
178 オブジェクト構築の練習 Article, Beginner, Canvas, CodingScripting, Guide, JavaScript, Learn, Objects, Tutorial, l10n:priority
ここまでの記事で JavaScript オブジェクトの根幹部に関する理論と文法の詳細についてすべてを見てきて、始めていくのに十分な基礎固めをしました。この記事では実練習を行ない、独自の JavaScript オブジェクトを作っていくための実践をしていきましょう — 楽しくてカラフルなものを。
179 Object のプロトタイプ Beginner, CodingScripting, JavaScript, Learn, OOJS, OOP, Object, Prototype, create(), l10n:priority, コンストラクタ, 記事
プロトタイプは、JavaScript オブジェクトが互いに機能を継承するメカニズムです。この記事では、プロトタイプチェーンの仕組みを説明し、prototype プロパティを使って既存のコンストラクタにメソッドを追加する方法を見ていきます。
180 初心者のためのオブジェクト指向 JavaScript Beginner, Create, JavaScript, OOJS, OOP, オブジェクト, オブジェクト指向, 学習, 記事
基礎が片付いたところで、オブジェクト指向 JavaScript (OOJS) について取り上げます。この記事ではオブジェクト指向プログラミング (OOP) の基本的な視点を説明し、 JavaScript がどのようにコンストラクター関数を通じてオブジェクトクラスをエミュレートしているか、またどのようにオブジェクトインスタンスを生成しているかを紹介します。
181 スキルテスト: オブジェクトの基本
このスキルテストの目的は、JavaScript オブジェクトの基本の理解度をテストすることです。
182 ウェブパフォーマンス CSS, HTML, HTTP, JavaScript, Learn, Performance, Web Performance
ウェブサイトを構築するには、HTML、CSS、JavaScript が必要です。人々が使いたいと思うウェブサイトやアプリケーションを構築し、ユーザーを惹きつけ、維持するためには、優れた使い勝手を実現する必要があります。優れた使い勝手の一部は、コンテンツの読み込みが速く、ユーザーの操作に反応することです。これはウェブパフォーマンスと呼ばれています。このモジュールでは、パフォーマンスの高いウェブサイトを作成するための基礎知識を学びます。
183 ウェブパフォーマンスのビジネスケース Web パフォーマンス, Web 開発
ここまで、ウェブパフォーマンスの重要性についてお話してきました。ウェブパフォーマンスを最適化するために何をすべきかを学びました。しかし、クライアントや経営陣にパフォーマンスに優先順位をつけて投資するように説得するにはどうすればよいのでしょうか?このセクションでは、意思決定者に投資をするように説得するための明確なビジネスケースの作成について説明します。
184 パフォーマンスの測定 API, Beginner, Guide, Tools, Web
様々なウェブパフォーマンス API を通じて収集できる ウェブパフォーマンスの指標とデータの視覚化に利用できるツールの情報を提供すること
185 知覚されるパフォーマンス Perceived Performance, Web Performance
知覚されるパフォーマンス (en-US)
186 ウェブパフォーマンスの基礎 Best practices, Website performance
あなたのウェブサイトが可能な限りのパフォーマンスを発揮すべき理由はたくさんあります。
以下に、各トピックの詳細情報を提供するためのリンク付きのベストプラクティス、ツール、API の簡単なレビューを示します。
187 ウェブパフォーマンスとは Beginner, Introduction, Learn, Performance, Reference, Tutorial, Web Performance, Web パフォーマンス
ウェブパフォーマンスとは、遅い処理を速く見せることも含めて、ウェブサイトを速くすることです。サイトがすぐに読み込まれるか、ユーザーがすぐに操作を始めることができるか、何かの読み込みに時間がかかっている場合には安心感のあるフィードバック (ローディングスピナーなど) を提供しているか。スクロールやアニメーションはスムーズか。この記事では、客観的で測定可能なウェブパフォーマンス*について簡単に紹介し、ウェブの最適化にどのような技術、テクニック、ツールが必要なのかを見ていきます。
188 ウェブパフォーマンスの「なぜ」 Beginner, Introduction, Learn, Performance, Reference, Tutorial, Web Performance, Web パフォーマンス
ウェブパフォーマンスとそれに関連するベストプラクティスは、ウェブサイトの訪問者が良い体験をするために不可欠です。ある意味では、ウェブパフォーマンスはウェブアクセシビリティの一部と考えることができます。アクセシビリティと同様にパフォーマンスでは、サイト訪問者がサイトにアクセスするために使用している端末と端末の接続速度を考慮します。
189 学習エリアのリリースノート Learn, Release Notes
This page details significant changes made to the learning area. Check back here if you want to know what new content is available, and what existing content has been improved.
190 サーバサイド Web サイトプログラミング CodingScripting, Landing, NeedsTranslation, Server, Server-side programming, Topic, TopicStub, 初学者, 学習, 導入部
Dynamic(動的な)Webサイト サーバサイドプログラミング のトピックは、動的な Web サイト (HTTP リクエストに応じてカスタマイズされた情報を届ける Web サイト) の作り方を説明する一連のモジュールです。各モジュールは、一般的なサーバサイドプログラミングへの導入となる情報を提供するほか、特に初学者に向けて、Django (Python) や Express (Node.js/JavaScript) といった基礎的なアプリケーションを構築するためのWebフレームワークの使用方法について説明しています。
191 Djangoウェブフレームワーク (Python) Python, django, ウェブアプリケーションフレームワーク, サーバーサイドプログラミング, プログラミング, 初心者, 学習, 概要
Django は、Python で書かれた高機能なサーバーサイドウェブフレームワークで、とても普及しています。このモジュールは、Django が最も人気のあるウェブサーバーフレームワークの 1 つである理由、開発環境の設定方法、独自のウェブアプリケーションを作成する方法を説明します。
192 Django 開発環境の設定 Python, Webフレームワーク, django, サーバーサイドプログラミング
Djangoがどういうものか知ったので、Windows、Linux(Ubuntu)、およびmacOSでDjango開発環境をセットアップしてテストする方法を説明します。一般的なオペレーティングシステムを使っていれば、Djangoアプリケーションの開発を始められます。
193 Djangoの紹介 Python, Webフレームワーク, django, サーバーサイドプログラミング
最初のDjangoの記事では、 "Djangoとは何ですか?" という疑問に答え、このWebフレームワークの特徴と概要を説明します。主な機能の概要と、このモジュールで詳しく説明しない高度な機能などを紹介します。 また、Djangoアプリケーションの主要な構成部品のいくつかを示します。 (この時点ではまだテストできる開発環境を持っていません).
194 Django チュートリアル Part 3: モデルの使用
この記事では、LocalLibrary Web サイトのモデルを定義する方法を説明します。モデルとは何か、その宣言方法、および主要なフィールドタイプについて説明します。また、モデルデータにアクセスするための主な方法のいくつかについても簡単に説明します。
195 Django チュートリアル Part 2: スケルトンウェブサイトの作成 django, イントロダクション, ガイド, チュートリアル, 初心者, 学習, 記事
Djangoチュートリアル の2つ目の記事では、基本的なウェブサイトプロジェクトの「スケルトン」をどのように作っていくのかを説明します。サイト固有の設定、URL、モデル、ビュー、テンプレートを作成する方法について説明します。
196 Django チュートリアル: 地域図書館ウェブサイト Python, django, チュートリアル, 初心者
実践的なチュートリアルシリーズの最初の記事は、学習する内容を説明し、後の記事で進めていく「地域図書館」のサンプルウェブサイトの概要を示しています。
197 Django Web アプリケーションのセキュリティ
The Website security topic provides an overview of what website security means for server-side design, and some of the more common threats that you may need to protect against. One of the key messages in that article is that almost all attacks are successful when the web application trusts data from the browser.
198 Express Web フレームワーク (Node.js/JavaScript) Beginner, CodingScripting, Express, Express.js, Intro, JavaScript, Learn, Node, Server-side programming, node.js, イントロダクション, サーバサイドプログラミング, 初心者, 学習
Express は、JavaScript で書かれ、Node.js 実行環境内でホストされている、人気の指図しないウェブフレームワークです。このモジュールでは、このフレームワークの主な利点、開発環境の設定方法、一般的なウェブ開発と配置作業の実行方法について説明します。
199 Express チュートリアル Part 7: プロダクションへのデプロイ CodingScripting, Express, Node, heroku, サーバサイド, デプロイ, 初心者, 学習
これで素晴らしい地域図書館 Web サイトを作成 (およびテスト) したので、公共の Web サーバーにインストールして、図書館のスタッフとメンバーがインターネット経由でアクセスできるようにします。この記事では Web サイトをデプロイするためのホストを見つける方法、およびサイトを運用に向けて準備するために必要な作業の概要について説明します。
200 Node 開発環境の設定 CodingScripting, Express, Intro, Learn, Node, nodejs, npm, server-side, イントロダクション, サーバサイド, 初心者, 学習, 開発環境
Express の目的が理解できたので、Windows、Linux (Ubuntu)、および macOS 上で Node/Express 開発環境をセットアップしてテストする方法を説明します。どのような一般的な OS を使用していても、この記事では Express アプリケーションの開発を開始するために必要なものを提供します。
201 Express チュートリアル Part 5: ライブラリデータの表示 Express, nodejs, pug, コントローラ, テンプレート, ビュー, 初心者, 学習
これで地域図書館の Web サイトの書籍やその他のデータを表示するページを追加する準備が整いました。このページには、各モデルタイプのレコード数と、すべてのモデルのリストおよび詳細ページを示すホームページが含まれます。その過程で、データベースからレコードを取得したり、テンプレートを使用したりする際の実際的な経験を積むことになります。
202 著者詳細ページ
著者詳細ページには、指定された Author に関する情報を、その (自動的に生成された) _id フィールド値を使用して識別し、その Author に関連するすべての Book オブジェクトのリストを表示する必要があります。
203 著者リストページとジャンルリストページのチャレンジ
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.
204 本の詳細ページ
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.
205 ブックリストページ
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.
206 ブックインスタンス詳細ページとチャレンジ
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.
207 ブックインスタンスリストページ
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.
208 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. 
209 async を使用した非同期フロー制御
 
210 ジャンル詳細ページ
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.
211 ホームページ
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.
212 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.
213 テンプレートプライマー
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).
214 Express チュートリアル Part 6: フォームの操作
このチュートリアルでは、Pug を使用して Express で HTML フォームを操作する方法、特にデータベースからドキュメントを作成、更新、削除するためのフォームを作成する方法を説明します。
215 Express/Node のイントロダクション Beginner, CodingScripting, Express, Learn, Node, nodejs, server-side, サーバーサイド, 初心者
Express の最初の記事では ”Node って何だろう?”、”Express って何だろう?”という疑問に答え、なぜ Express ウェブフレームワークが特別なのかについて概要を説明します。主な特徴、Express アプリケーションの主な基本要素(テスト開発環境についてはここではまだ触れません) を大まかに説明します。
216 Express チュートリアル Part 3: データベースの使用 (Mongoose を使用)
この記事ではデータベースと、それらを Node/Express アプリケーションで使用する方法について簡単に紹介します。続いて、Mongoose を使用して地域図書館 Web サイトへのデータベースアクセスを提供する方法を説明します。 オブジェクトスキーマとモデルの宣言方法、主なフィールドタイプ、および基本的な検証について説明します。また、モデルデータにアクセスするための主な方法についても簡単に説明します。
217 Express チュートリアル Part 4: ルートとコントローラ
このチュートリアルでは、地域図書館 Web サイトで最終的に必要となるすべてのリソースエンドポイントに対して、"ダミー" ハンドラ関数を使用してルート (URL 処理コード) を設定します。完成すると、ルート処理コードのためのモジュール構造が得られます。これは、次の記事の実際のハンドラ関数で拡張できます。Express を使ってモジュラールートを作成する方法についても、非常によく理解しています。
218 Express チュートリアル Part 2: スケルトン Web サイトの作成 CodingScripting, Express, Node, イントロダクション, サーバサイド, 初心者, 学習, 開発環境
この Express チュートリアルの2回目の記事では、どのようにして "スケルトン" Web サイトプロジェクトを作成し、サイト固有のルート、テンプレート/ビュー、およびデータベース呼び出しを追加するかを説明します。
219 Express チュートリアル: 地域図書館の Web サイト Beginner, CodingScripting, Express, Intro, Learn, Node, Tutorial, nodejs, イントロダクション, サーバサイド, 初心者, 学習
実用的なチュートリアルシリーズの最初の記事では、これから学ぶことについて説明します。そして、私たちがこれから取り組んでいき、その後の記事で進化していく「地域図書館」のサンプルウェブサイトの概要を説明します。
220 サーバサイドの Web サイトプログラミングの第一歩 CodingScripting, Intro, Landing, ガイド, サーバサイドプログラミング, 初心者, 学習
このモジュールでは、サーバーサイドプログラミングに関するいくつかの基本的な質問、"これは何?"、"クライアントサイドプログラミングとどう違うの?"、"なぜ便利なの?" について答えます。次に、最も人気のあるサーバーサイドの ウェブフレームワークの概要と、最初のサイトを作成するための最適なフレームワークの選択方法に関するガイダンスを提供します。最後に、ウェブサーバーのセキュリティに関する高度な入門記事を提供します。
221 クライアント - サーバの概要 Beginner, CodingScripting, イントロダクション, ガイド, サーバ, サーバサイドプログラミング, 学習
サーバサイドプログラミングの目的と潜在的な利点を知ったので、サーバがブラウザーから "動的リクエスト" を受け取ったときに起こることを詳細に検討します。ほとんどの Web サイトのサーバサイドコードは同様の方法でリクエストとレスポンスを処理するので、これは自身のコードの大部分を書くときに何が必要かを理解するのに役立ちます。
222 サーバサイドの概要
MDN のサーバサイドプログラミング入門コースにようこそ!この最初の記事では、「それはどんなもの?」、「クライアントサイドプログラミングとはどう違う?」、「なぜ便利なの?」 という質問に答えながら、ハイレベルな視点からサーバサイドプログラミングを見ていきます。この記事を読めば、サーバサイドコーディングを行うことで、 Web サイトにどんな機能を加えることができるか、理解できるようになります。
223 サーバーサイドウェブフレームワーク Beginner, CodingScripting, Guide, Intro, Learn, Server, Server-side programming, Web frameworks
前の記事では、ウェブクライアントとサーバー間の通信、HTTP リクエストとレスポンスの性質、およびウェブブラウザーからのリクエストにレスポンスするためにサーバーサイドウェブアプリケーションが実行する必要があることについて説明しました。この知識をもとに、ウェブフレームワークがどのようにこれらのタスクを単純化できるかを探り、最初のサーバーサイドウェブアプリケーションのためのフレームワークをどのように選択するかを考えてみましょう。
224 Web サイトのセキュリティ CodingScripting, Web サイトセキュリティ, Web セキュリティ, イントロダクション, ガイド, サーバサイドプログラミング, セキュリテイ, 初心者, 学習
ウェブサイトのセキュリティでは、ウェブサイトのデザインと使用方法のあらゆる面で警戒が必要です。この入門記事だけではウェブサイトのセキュリティの第一人者にはなれませんが、脅威がどこから発生するのか、そして最も一般的な攻撃に対してウェブアプリケーションを強化するために何ができるのかを理解するのに役立ちます。
225 フレームワークなしの Node.js サーバ JavaScript, NeedsContent, Node, サーバ, フレームワークなし
この記事では、フレームワークを使用せずに、Node.jsだけで構築された単純な静的ファイルサーバを紹介します。
226 ツールとテスト Accessibility, Automation, Beginner, CSS, CodingScripting, HTML, JavaScript, Landing, Learn, Testing, Tools, Topic, cross browser, user testing, アクセシビリティ, クロスブラウザー, ツール, テスト, トピック, 初心者, 学習, 自動化
ウェブ技術のコア (HTML, CSS,  JavaScript のような) での快適なプログラミングを開始して、経験を積んで、色んなリソースを読み、色んなコツや技を学習すると、JavaScript フレームワークからテスト自動化ツールやそれ以外まで、すべてのツールに出くわします。ウェブプロジェクトが大きく複雑になっていくと、こうしたツールを活用したり、コードの信頼できるテスト計画を考案したくなるでしょう。
227 Understanding client-side JavaScript frameworks Beginner, Frameworks, JavaScript, Learn, NeedsTranslation, TopicStub, client-side
JavaScriptフレームワークは、最新のフロントエンドWeb開発に欠かせないものであり、開発者にスケーラブルでインタラクティブなWebアプリケーションを構築するための試行錯誤されたツールを提供しています。現代の多くの企業では、フレームワークをツールの標準的な一部として使用しているため、多くのフロントエンド開発の仕事でフレームワークの経験が必要とされています。
228 React アプリのコンポーネント化 Beginner, Frameworks, JavaScript, Learn, React, client-side, events, interactivity, state
この時点では、アプリは一枚岩です。アプリに何かをさせる前に、管理しやすく、記述しやすいコンポーネントに分解する必要があります。React には、何がコンポーネントで何がコンポーネントでないかという難しいルールはありません。それはあなた次第なのです!この記事では、アプリをコンポーネントに分解するための賢明な方法を紹介します。
229 Reactをはじめる Beginner, Frameworks, JavaScript, Learn, React, client-side
この記事では React のはじめかたを説明します。Reactの背景と使い方について説明し、ローカル環境で基本的な React ツールチェーンを設定します。また、シンプルな基本アプリを作成して、React がどのようなプロセスで機能するのかを学んでいきます。
230 React ToDoリストをはじめる
例えば、React でアイディアを検証するためにアプリを試作してみることになったとします(いわゆる、Proof of Concept - 概念実証)。ユーザーが作業したいタスクを追加、編集、削除することができ、また、タスクを削除せずに完了とすることができるアプリです。この記事では、基本的な App コンポーネントの構造とスタイルを整え、後から追加する個々のコンポーネントの定義とインタラクティブな機能の準備を行っていきます。
231 Getting started with Vue Beginner, Frameworks, Installation, JavaScript, Learn, client-side, vue
Now let's introduce Vue, the third of our frameworks. In this article we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.
232 クロスブラウザテスト Accessibility, Automation, Beginner, CSS, CodingScripting, HTML, JavaScript, Landing, Learn, Module, Testing, Tools, cross browser
このモジュールでは、色々なウェブブラウザー間でウェブプロジェクトをテストすることに焦点を当てます。あなたのターゲット視聴者 (例 どのユーザー、ブラウザー、デバイスに一番関心があるのか?) の特定や、テストをどう動かすかや、主な問題としてさまざまな種類のコードと対面してそれらを緩和する方法や、テストを楽にして問題を解決するのに最も役立つツールが何かや、自動化を利用してテストをスピードアップする方法を見て行きます。
233 よくあるアクセシビリティの問題を扱う Accessibility, Article, Beginner, CSS, CodingScripting, HTML, JavaScript, Learn, Testing, Tools, cross browser, keyboard
次に、私たちはアクセシビリティに注意を向け、一般的な問題、簡単なテストの方法、そしてアクセシビリティの問題を見つけるための監査/自動化ツールの使い方を説明します。
234 自動テストのイントロダクション
1日に数回、複数のブラウザやデバイスで手動でテストを実行すると、面倒で時間がかかる場合があります。これを効率的に処理するには、自動化ツールに慣れておく必要があります。この記事では、利用可能なもの、タスクランナーの使い方、そして Sauce Labs や Browser Stack などの市販のブラウザテスト自動化アプリケーションの基本的な使い方を見ていきます。
235 機能検出の実装 Article, Beginner, CSS, CodingScripting, JavaScript, Learn, Modernizr, Testing, Tools, cross browser, feature detection, 機能検出
機能検出は、あるブラウザーがあるコードのブロックに対応しているかどうかを調べ、対応しているか (またはしていないか) に応じて異なるコードを実行することで、ブラウザーが常に動作し、ブラウザーによってクラッシュやエラーが発生しないようにします。この記事では、独自の単純な機能検出の書き方、実装をスピードアップするためのライブラリの使い方、 @supports などの機能検出のためのネイティブ機能について詳しく説明します。
236 一般的な HTML と CSS の問題への対処 CSS, CodingScripting, HTML, linting, クロスブラウザ, セレクタ, テスト, 初心者, 学習, 記事
ここでは、HTML と CSS のコードで発生する可能性のある一般的なクロスブラウザの問題、および問題の発生を防ぐため、または発生する問題を修正するために使用できるツールについて具体的に説明します。これには、コードのリンティング、CSS プレフィックスの処理、問題を追跡するためのブラウザの開発者ツールの使用、ブラウザにサポートを追加するための polyfill の使用、レスポンシブデザイン問題への取り組みなどが含まれます。
237 はじめてのクロスブラウザテスト Article, Beginner, CodingScripting, Learn, Testing, concepts, cross browser
この記事では (クロス) ブラウザテストのトピックの概要を説明し、「クロスブラウザテストとは何ですか?」、「発生する最も一般的な問題の種類は何ですか?」、「問題のテスト、特定、および修正のための主なアプローチは?」などの質問に答えながらモジュールを始めます。
238 JavaScript のよくある問題を扱う Article, Beginner, CodingScripting, JavaScript, Learn, Libraries, Testing, cross browser, feature detection, linting, polyfills
ここではよくあるクロスブラウザー JavaScript 問題と、その直し方を見てみます。これにはブラウザーの開発ツールを使って問題をつきとめて修正したり、問題の回避に Polyfills やライブラリーを使ったりモダンな JavaScript 機能を古いブラウザーで使ったりなどです。
239 テスト実行のための戦略 Article, Automation, Beginner, CodingScripting, Learn, Testing, concepts, cross browser, device lab, user testing, virtual machine
この記事では「(クロス)ブラウザーテストとは何?」「最もよくある問題は何?」「問題をテスト、特定、修正する主な手法は何?」といった質問に答えることで、(クロス)ブラウザーテストの概観を与えることから始めます。
240 テスト自動化環境をセットアップする Article, Automation, Beginner, Browser, CodingScripting, Learn, Testing, Tools, cross browser, selenium
この記事では、Selenium/WebDriver や selenium-webdriver for Node のようなテストライブラリーを使って、自動化環境のインストールとテストを実行する方法を教えます。またあなたのローカルテスト環境と、以前の記事で見てきたような商用アプリとを統合する方法についても見て行きます。
241 Git と GitHub Beginner, GitHub, Learn, Web, git
すべての開発者が、何らかのバージョン管理システム (VCS) を使用しています。これは、他の開発者との共同作業において、お互いの作業を上書きする危険がなく、また、後で問題が発見された場合には以前のバージョンのコードベースにロールバックすることができるツールです。 (少なくともウェブ開発者の間では) 最も人気のある VCS は Git であり、 GitHub はリポジトリのホスティングとそれを操作するためのいくつかのツールを提供するサイトです。このモジュールは、この2つについて知っておくべきことを紹介することを目的としています。
242 クライアントサイドウェブ開発ツールの理解 Beginner, CSS, Deployment, HTML, JavaScript, Learn, Tools, Transformation, client-side, linting
クライアントサイドツールには、なかなか難しいものもありますが、この記事シリーズでは、いくつかの一般的なクライアントサイドツールの種類について、その目的を示し、一緒に連携させることができるツール、パッケージマネージャを使ったインストール方法、 コマンドラインでの制御を説明します。最後にツールチェーンの例を示して、生産性を高める方法を説明します。