ウェブ入門

基本的なソフトウェアのインストール

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

  • まず最初に: 計画を立てる
    • 何について書かれた Web サイトですか？ : 犬，ニューヨーク，それともパックマン？
    • テーマについてどんなことを書きますか？: タイトルと少しの文章，それからページに表示させたい画像を考えます．
    • Webサイトをどんな見た目にしますか？: シンプルで高いレベルから考えます．背景の色は何色にする？サイトにピッタリのフォントの種類はどんなもの？フォーマルなフォント？漫画みたいなフォント？くっきりとした太字？それとも，繊細な細字のフォントでしょうか？
  • デザインを大まかに描き出す
  • アセットを選ぶ
    • 文章・テキスト
    • テーマカラー
      • カラーピッカー
      • ヘキサコード
    • 画像･イメージ
      • Google 画像検索
      • Google のライセンスフィルター ツールバーで｢再使用が許可された画像｣
    • フォント

ファイルの扱い

  • コンピュータ上で Web サイトがあるべき場所
  • 大文字と空白の除外
    • 多くのコンピュータ，特に Web サーバでは，大文字と小文字を区別
    • ブラウザ，Web サーバ，プログラミング言語は，空白の扱いが一貫していない
    • ファイル名にはハイフンを使うべきです
    • Google の検索エンジンはハイフンを単語の区切りとして扱うが，アンダースコアはそうでない
  • Web サイトはどのような構成にするべきか
    • index.html: このファイルには，一般的にホームページの内容，最初にあなたのサイトに行ったときに見るテキストと画像が含まれる
    • images フォルダ: このフォルダにはサイトで使用するすべての画像を入れます．
    • styles フォルダ: このフォルダには，コンテンツのスタイルを設定するための CSS コード（例えばテキストと背景色の設定など）を入れます
    • scripts フォルダ: このフォルダには，サイトにインタラクティブ機能を追加するために使用されるすべての JavaScript コード（クリックされたときにデータを読み込むボタンなど）が含まれます．
  • ファイルパス

HTML の基本

  • HTML (Hypertext Markup Language，ハイパーテキスト・マークアップ・ランゲージ)
<p class="editor-note">My cat is very grumpy</p>
  • HTML とは
  • HTML 要素の中身
    • 開始タグ (Opening tag): これは，要素の名前 (この場合は p) を山括弧で囲んだものです．どこから要素が始まっているのか，どこから効果が始まるのかを表します． — 今回の場合どこから段落が始まるかを表しています．
    • 終了タグ (Closing tag): これは，要素名の前にスラッシュが入っていることを除いて開始タグと同じです．どこで要素が終わるのかを表す
    • コンテンツ (Content): 要素の内容です．今回の場合はただのテキストです．
    • 要素 (Element): 開始タグ，終了タグ，コンテンツで要素を構成します．
    • 属性 (Attribute): 実際のコンテンツには表示させたくない，要素に関する追加情報
      • class が属性の名前
      • editor-note が属性の値
      • class 属性では，要素に一意ではない識別子を与えることができ，それを使って要素 (および同じ class 値を持つ他の要素) にスタイル情報などのターゲットを設定することができます．
      • 属性は常に次のような形式
        • 要素名 (すでにいくつか属性がある場合はひとつ前の属性) との間の空白
        • 属性名とそれに続く等号
        • 引用符で囲まれた属性の値

注: ASCII のホワイトスペース (または " ' ` = < > のいずれかの文字) を含まない単純な属性値は引用符を省略することができますが，コードを一貫性のあるものにし，理解を容易にするため，すべての属性値を引用符で囲むことをお勧めします．

  • 要素の入れ子 <p>私のネコは<strong>とっても</strong>機嫌が悪い．</p>

  • コンテンツを持たない要素

    • <img src="images/firefox-icon.png" alt="My test image">
    • この要素は 2 つの属性(src,alt)を持っていますが，終了タグ </img> がありませんし，内部にコンテンツもありません．
    • これは画像要素は，その機能を果たすためにコンテンツを囲むものではないから
    • 画像要素の目的は，画像を HTML ページの表示させたいところに埋め込むことです．

  • HTML 文書の構造

    • <!DOCTYPE html>: 文書型宣言．必須の前置き．HTML がまだ出来たばかりの頃 (1991～2年)，文書型宣言は HTML ページが正しい HTML と見なされるために従わなければならない，一連のルールへのリンクとして機能することを意味していました．つまり，自動エラーチェックなどの有益なものを表すことができました．しかし，最近ではあまり機能しておらず，文書が正しく動作するために必要なだけ
    • <html></html>: この要素は，このページのすべてのコンテンツを囲み，ルート要素と呼ばれることもあります．
    • <head></head>: この要素は，ページの閲覧者に向けて表示するためのコンテンツではない， HTML ページに含めたいものをすべて収めるための入れ物です． <head> 要素は検索エンジン向けの キーワード や説明書き，ページの見た目を変更するための CSS，文字コードの宣言などを含みます．
    • <meta charset="utf-8">: この要素は，大部分の書き言葉の文字のほとんどを含む UTF-8 を文書で使用するように設定しています．基本的には，文書はどんなテキストコンテンツでも扱えるようになります．これを設定しない理由はありませんし，後でいくつかの問題を回避するのに役立ちます．
    • <title></title>: ページのタイトルを指定．このタイトルはページが読み込まれた時にブラウザーのタブに表示され,ブックマークやお気に入りに登録した時の説明にも使われます．
    • <body></body>: これには，テキスト，画像，ビデオ，ゲーム，再生可能なオーディオトラックなど，ページを訪れたウェブの利用者に表示したいすべてのコンテンツが含まれます．

  • 画像

    • alt 属性
      • 目が不自由な人．著しく目の不自由な人はよく画面リーダーと呼ばれるツールを使っていて，それが画像の alt 属性の内容を読み上げます．
      • 何らかの理由で画像の表示に失敗した場合．例えば， src 属性の中のパスをわざと正しくないものに変更してみてください．ページを保存したり再読み込みしたりすると，画像の場所に下記のようなものが表示されるでしょう．

  • テキストのマークアップ

    • 見出し
      • h1 から h6 まで存在
    • 段落 <p></p>
    • リスト
      • 順序なしリスト: <ul>
      • 順序付きリスト: <ol>
      • リストの中に入るそれぞれのアイテムは <li> “list item”
      • リンク: <a> “anchor”
        • <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
        • 属性 href は hypertext reference の略

注: 見出しレベル 1 には，暗黙のスタイルがあることがわかりますね．テキストを大きくしたり，太くしたりするために見出し要素を使用しないでください．見出し要素はアクセシビリティや SEO などの理由で使用されているからです．レベルを飛ばすことなく，意味のある見出しの並びをページ上に作るようにしてください．

CSS の基本

CSS (Cascading Style Sheets)
ウェブページのスタイルを設定するコード
  • CSS とは何か: CSS はスタイルシート言語
p {
  color: red;
}
  • CSS 規則セットの構造
    • 全体の構造は規則セットと呼びます(単に規則とも呼ばれる)
    • 規則セットの先頭にある HTML 要素名です．これはスタイルを設定する要素 (この例の場合は <p> 要素) を定義．別の要素をスタイル付けするには，セレクターを変更してください．
    • color: red; のような単一の規則です．これは要素のプロパティのうち，スタイル付けしたいものを指定します．
    • これらは， HTML 要素をスタイル付けするための方法です． (この例では， color は <p> 要素のプロパティです．) CSS では，規則の中で影響を与えたいプロパティを選択します．
    • プロパティの右側には—コロンの後に—プロパティ値があります．与えられたプロパティの多くの外観から 1 つを選択します． (例えば， color の値は red 以外にもたくさんあります．)

構文の他の重要な部分に注意

  • セレクターを除き，それぞれの規則セットは中括弧 ({}) で囲む
  • それぞれの宣言内では，コロン (:) を使用してプロパティと値を分離する
  • それぞれの規則セット内でセミコロン (;) を使用して，それぞれの宣言と次の規則を区切る
p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

複数の要素の選択

p, li, h1 {
  color: red;
}

セレクター名 選択するもの 例
要素セレクター (タグまたは型セレクターと呼ばれることもあります 指定された型のすべての HTML 要素 p <p> を選択
ID セレクター 指定された ID を持つページ上の要素です．指定された HTML ページでは，各 id 値は一意でなければなりません． #my-id <p id="my-id"> または <a id="my-id"> を選択
クラスセレクター 指定されたクラスを持つページ上の要素です． 同じクラスの複数のインスタンスが 1 つのページに現れることがあります． .my-class <p class="my-class"> および <a class="my-class"> を選択
属性セレクター 指定された属性を持つページ上の要素です． img[src] <img src="myimage.png"> を選択するが， <img> は選択しない
擬似クラスセレクター 指定された要素が指定された状態にあるとき．(例えば，マウスポインターが上に乗っている (ホバー) 状態．) a:hover <a> を選択するが，マウスポインターがリンク上にあるときのみ．
  • フォントとテキスト
    • フォント
      • 要素を index.html の先頭のどこか ( タグと タグの間) に追加します．
      • <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
      • このコードは，ウェブページに Open Sans フォントファミリを読み込むスタイルシートにページをリンクします．
      • font-family の割り当てをウェブサイトをどんな外見にするかで選択した font-family に置き換え
html {
  font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high  */
  font-family: "Open Sans", sans-serif; /* this should be the rest of the output you got from Google fonts */
}

font-family というプロパティは，テキストに使用するフォントを指します．この規則では，ページ全体の基本フォントとフォントの大きさを定義します． <html> はページ全体の親要素なので，その中のすべての要素は同じ font-size と font-family を継承します．

注: CSS の /* と */ の間にあるものは何でも CSS コメントになります．ブラウザーはコードをレンダリングするときにこれを無視します． CSS コメントはコードや論理について役立つメモを書くための方法です．

次に， HTML 本文内にテキストを配置する要素 (<h1>, <li> , <p> ) のフォントの大きさを設定します．また，見出しを中央揃えにします．最後に， 2 つ目の規則セット (下記) を展開して，行の高さや文字の間隔などの設定を行い，本文のコンテンツを読みやすくしましょう．

h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}
  • CSS: ボックスのすべて
    • ページ上のほとんどの HTML 要素は，他の箱の上に置かれた箱と考えることができます -CSS のレイアウトは，主にボックスモデルに基づいています．
    • ページ上のスペースを占める各ボックスには，次のようなプロパティがあります．
    • コンテンツの周囲のスペースです．以下の例では，段落テキストの周りのスペースです．
    • padding のすぐ外側にある実線
    • 要素の外側の周りの空間
  • 本文のスタイル付け
  • メインページのタイトルの配置とスタイル付け
  • 画像のセンタリング
html {
  background-color: #00539f;
}

body {
  width: 600px;
  margin: 0 auto;
  background-color: #ff9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539f;
  text-shadow: 3px 3px 1px black;
}

img {
  display: block;
  margin: 0 auto;
}

JavaScript の基本

  • JavaScript はウェブサイトにインタラクティブ機能 (ゲーム，ボタンが押されたときやデータがフォームに入力されたときの反応，動的なスタイルの変更，アニメーションなど) を追加するプログラミング言語
  • Mozilla プロジェクト，Mozilla Foundation，Mozilla Corporation の共同設立者である Brendan Eich によって考案された
  • コアのJavaScript言語と多種多様なツールとの違いは MDN の JavaScript 学習エリア や， MDN の他の部分で詳しく解説
  • index.html ファイルの </body> 閉じタグの直前に新しい行で，以下の新しい要素を追加
const myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';
  • 最初に querySelector() と呼ばれる関数を使用して見出しの参照を取得し， myHeading と呼ばれる変数に格納
  • 注: 上記の説明で <script> 要素を HTML ファイルの末尾付近に置いたのは，ブラウザーがファイルに現れる順番でコードを読み込むから
  • JavaScript が先に読み込まれ，まだ読み込まれていない HTML に影響を与えることになると，問題が生じる可能性があります
  • JavaScript を HTML ページの下部に配置することは，この依存関係に対応する一つの方法です．
    • その他の方法 については，スクリプトの読み込み戦略をご覧ください．
  • 画像の切り替えの追加
    • 変数: var (非推奨), let どちらかのキーワードをつけて宣言
    • 注: 詳細は，var と let の違い
let myImage = document.querySelector('img');

myImage.onclick = function() {
    let mySrc = myImage.getAttribute('src');
    if(mySrc === './images/mozilla-logo.svg') {
      myImage.setAttribute('src','./images/MDN-logo.svg');
    } else {
      myImage.setAttribute('src','./images/mozilla-logo.svg');
    }
}
  • パーソナライズされた挨拶メッセージの追加
    • ユーザーがサイトにアクセスしたときに，ページの表題をパーソナライズされた挨拶メッセージに変更
    • 挨拶メッセージは，ユーザーがサイトを離れて後で戻った時にも保存されるように Web Storage API を使用して保存
    • 必要な時にいつでもユーザーと挨拶メッセージを変更できるオプションも用意
// Personalized welcome message code
let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');

function setUserName() {
  let myName = prompt('Please enter your name.');
  if(!myName) {
    setUserName();
  } else {
    localStorage.setItem('name', myName);
    myHeading.innerHTML = 'Mozilla is cool, ' + myName;
  }
}

if(!localStorage.getItem('name')) {
  setUserName();
} else {
  let storedName = localStorage.getItem('name');
  myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
}

myButton.onclick = function() {
  setUserName();
}

ウェブサイトの公開

ウェブのしくみ

  • クライアントとサーバー
    • クライアントは，一般的なウェブユーザーが使うインターネットに接続された端末のこと
    • サーバーとは，ウェブページ，サイト，アプリを格納しているコンピューターのこと
    • クライアント端末がウェブページにアクセスしたいときは，ウェブページのコピーがサーバーからクライアントにダウンロードされ，ユーザーのウェブブラウザーに表示
  • それ以外の関連技術
    • インターネット接続
    • TCP/IP
      • Transmission Control Protocol と Internet Protocol は，どのようにウェブ上をデータが動くのか，を定義した通信プロトコル
    • DNS
      • Domain Name Servers
      • ブラウザーにウェブアドレスを入力すると，ブラウザーはウェブサイトを取得する前に DNS を見て，ウェブサイトの本当のアドレスを探します．
      • ブラウザーはウェブサイトがどのサーバーにいるかを探し出す必要があり，それで HTTP のメッセージを正しい場所 (下記参照) に送ることができます
    • HTTP
      • Hypertext Transfer Protocol は，クライアントとサーバーが対話をする方法を定義するアプリケーションプロトコル
    • コンポーネントファイル ウェブサイトは多くの異なるファイルで構成されます．これらのファイルは主に2種類に当てはまります．
      • コードファイル
      • アセット
        • これは画像，音楽，動画，Word 文書，PDF といったウェブサイトを構成するコード以外のすべての材料の集合的な名前
  • ブラウザーにウェブアドレスを打ち込んだ時に何が起こっているか
    • ブラウザーは DNS サーバーにアクセスし，ウェブサイトのあるサーバーの実際のアドレスを探します
    • ブラウザーはサーバーに HTTP リクエストメッセージを送信して，ウェブサイトのコピーをクライアントに送るよう求めます
    • このメッセージ，およびクライアントとサーバーの間でやりとりされるその他すべてのデータは，TCP/IP を使用してインターネット経由で送信されます
    • サーバーがクライアントのリクエストを承認すると，サーバーはクライアントに 「200 OK」 というメッセージを送ります．
    • これは「もちろんそのウェブサイトを見ることができます．どうぞ！」という意味です．
    • そしてウェブサイトのファイルを，データパケットと呼ばれる一連の小さな塊 (chunk) としてブラウザーに送信し始めます
    • ブラウザーは小さな塊を完全なウェブページに組み立て，表示する

  • コンポーネントファイルが解析される順番

    • クライアントのリクエストが承認されると，サーバーはまず HTML (インデックス) ファイルを送信する
    • index.html は一般的に，サーバーによって解析されるウェブサイトの最初のファイルであるため，このような名前になっています
    • HTML ファイルは， CSS と JavaScript を参照することができます
    • それぞれ <link> と <script> 要素を使って外部ファイルに記述したり， <style> と <script> 要素を使ってHTMLページに埋め込んだりすることができます
    • まず HTML ファイルが解析され，そのファイルの中を見ることで，どの CSS ファイルや JavaScript ファイルが参照されているかをサーバーが認識します
    • HTML が解析され， DOM ツリー構造が生成された後，リンクされた CSS が解析され， DOM ツリーの適切な部分にスタイルが適用されます
    • この時点で，ページの視覚的な表現が画面に描かれ，ユーザーはページを見ることになります
    • JavaScript は通常， HTML と CSS の後に解析され，ページに適用されます

  • DNS の説明

    • 実際のウェブアドレスは，お気に入りのウェブサイトを見つけるためにアドレスバーに入力するような，すばらしい，覚えやすい文字列ではありません
    • 実際のウェブアドレスは 63.245.215.20 のような特殊な数字
    • これは， IP アドレスと呼ばれ，ウェブ上の一意の場所を表現
    • ドメインネームサーバーは特別なサーバーで，ブラウザーに入力したウェブアドレス (“mozilla.org” など) とウェブサイトの実際の (IP) アドレスを対応させます
    • ウェブサイトには，IP アドレスを使用して直接アクセスできます

  • パケットの説明

    • 先ほど，データがサーバーからクライアントに送信される形式を説明するために，「パケット」という用語を使用しました．

    • 基本的に，ウェブ上でデータが送信されると，何千もの小さな塊として送信されるため，たくさんの異なるユーザーが同じウェブサイトを同時にダウンロードできます

    • ウェブサイトが単一の大きな塊として送信されるとすると，一度に 1 人のユーザーしかダウンロードできなくなるため，ウェブはとても効率が悪くなる

  • 関連情報