初めてのウェブサイト

前提条件

このモジュールでは、ウェブ技術に関する予備知識は想定していませんが、オペレーティングシステムの操作に加えて、ファイルシステムの使用やウェブの閲覧などにすでに慣れている必要があります。コードエディターと複数のウェブブラウザーをインストールしている必要があります。

まだの場合は、先に環境設定モジュールを実行することをお勧めします。

チュートリアル

ウェブサイトをどんな外見にするか

ウェブサイトのコードを書き始める前に、まずは計画を立てることが大切です。あなたのウェブサイトにはどんな情報を載せますか？フォントや色はどうしたいですか？ここでは、コンテンツやデザインを計画するのに役に立つ簡単な方法を紹介します。

コンテンツの作成

HTML（HyperText Markup Language、ハイパーテキストマークアップ言語）とは、ウェブコンテンツを構成し、その内容に意味や目的を持たせるために使用するコードのことです。例えば、コンテンツは段落、箇条書きのリスト、または画像やデータ表を使用して構造化することができます。この記事では、 HTML とその機能の基本的な理解を深め、最初のウェブサイト用の基本的なコンテンツを作成する方法を説明します。

コンテンツのスタイル設定

CSS（カスケーディングスタイルシート、Cascading Style Sheets）は、ウェブサイトの見た目を決めるために使うコードです。 「コンテンツのスタイル設定」では、始めるために何が必要かを一通り追って行きます。 例えば、テキストを赤くするにはどうすればよいでしょうか？ コンテンツを（ウェブページ）レイアウトの特定の位置に表示するにはどうすればよいでしょうか？ 背景画像や背景色を使ってウェブページを装飾するにはどうすればよいでしょうか？

操作の追加

JavaScript は、ウェブサイトに操作を追加するために使うプログラミング言語です。これはゲーム、ボタンが押された際のレスポンスの動作、フォームへのデータ入力、動的なスタイル設定、アニメーションなど、さまざまな場面で現れます。この記事は、JavaScriptを使い始めたり、何ができるのかを理解したりするのに役立ちます。

サンプルコードの公開

コードを書き終え、ウェブサイトを構成するファイルを整理したら、人々が探せるようにすべてをオンラインで公開する必要があります。この記事では、最小限の手間でサンプルウェブサイトをどのようにオンラインで公開するかを説明します。

• 前のページ
• Overview: 入門モジュール
• 次のページ

関連情報

The Frontend Developer Career Path ^{MDN カリキュラムパートナー}

Scrimba's のフロントエンド開発者キャリアパスは、楽しい対話型のレッスンや課題、知識豊富な講師、対応しているコミュニティを通じて、有能なフロントエンドウェブ開発者になるために必要なすべてを教えてくれます。ゼロから最初のフロントエンドの仕事に就くまで。このコースの多くの部分は、無料版として単独で利用できます。