yoppa.org


多摩美 - サウンド&ネット 2014年度

第1回: Web基礎1 – Web制作はじめの一歩

インターネットの歴史

「WWW = インターネット」と誤用されることがありますが、これは正しくありません。WWWはインターネットの中に含まれていますが、インターネットはWWW以外にも多くの機能を持っています。例えば、email(SMTP)は今でも頻繁に利用されますが、WWW登場するよりもずっと昔からある仕組みです。その他、Skypeなどで用いられるP2P(Peer to Peer)技術、ファイル転送のための仕組み(FTP, SFTP)などWWW以外のインターネットの利用は数多くあります。

インターネット自体の歴史は、WWWよりさらに昔に遡り、1960年代の末から研究が始まり、1970年代には主に大学や研究施設を結ぶ研究者のネットワークとして実用化され、発展してきた歴史があります。

1969年ARPANET(インターネットの前身)開始直後のネットワーク図。カリフォルニア大学ロサンゼルス校(UCLA)、カリフォルニア大学サンタバーバラ校(UCSB)、ユタ大学、スタンフォード研究所(SRI; Stanford Research Institute)の4拠点

1972年のネットワーク接続図。

Webの進化と現状

World Wide Web(WWW)がティム・バーナーズ=リーによって生み出されたのは1991年、いまからほぼ四半世紀前になります。

誕生当初のWWWは、科学技術文書を公開し共有するための仕組みでした。しかし現在は、オーディオやビデオなどのマルチメディア、ショッピング、地図やスケジューラーやワードプレセッサーといったアプリケーション、さらにはそれ自身がオペレーションシステムとして使用されるようになり、様々な機能を含む広い概念へと進化しています。

そうした位置付け、機能の進化にあわせて、WWWを構成する技術も大きく変化してきました。そして今もなお変化する途上にあります。

現在のWWWを構成する技術は、代表的なものだけでも数多くあげられます。

  • Javascript
  • HTML5
  • Offline web, Local storage
  • Vieo, Audio
  • Canvas
  • WebGL
  • …etc.

ひとことで言うと、現在のWWWは、「文書」から「アプリケーション」へと変化しつつあると言えるでしょう。

参考: ティム・バーナーズ=リーが示す次のウェブ(TED)

http://www.ted.com/talks/tim_berners_lee_on_the_next_web?language=ja

参考: The Evolution of the Web

http://www.evolutionoftheweb.com/

screenshot_260

参考: W3C HTML5

http://www.w3.org/html/logo/

screenshot_261

速習 HTMLとCSS

WWWを構成する技術が大きく変化したとはいえ、その根本のを支える技術はバージョンアップを続けながら、ずっと続いています。それは「HTML(Hyper Text Markup Language)」と「CSS(Cascading Style Sheet)」という2つの技術です。

  • HTML(Hyper Text Markup Language)
  • CSS(Cascading Style Sheet)

この2つは、車輪の両輪のように両者で分担してWebページの表示を定義しています。この2つの分担は以下のように要約できます。

  • HTML : 意味、構造
  • CSS : 体裁(デザイン)、表現

構造と体裁を分離する、という発想がWebサイトを制作・デザインしていく際のポイントとなります。常に意識するようにしましょう。

授業の前半では、まずこの2つの技術について、すばやく理解していきたいと思います。

サンプルファイルの配布

※ ちなみにこのサンプルは、多摩美術大学情報デザイン学科メディア芸術コース – コース概要のページをアレンジしました。

index.html

style.css

ファイルをダウンロードしたら圧縮を展開しましょう。2つのファイルが入っています。

  • index.html
  • style.css

この中から、「index.html」をWebブラウザで開いてみましょう。下記のキャプチャー画面のようなページが閲覧できます。

screenshot_263

HTML(Hypertext Markup Language)

では、このWebページを構成している、HTMLとCSSについて解析していきましょう。

「HTML」という用語の成り立ちが、そのコンセプトを的確にあらわしています。それぞれの文字は「HyperText Markup Language」という文字の頭文字からとられています。単語ごとに意味を分解していくと以下のようになります。

  • Hypertext – ハイパーリンク(いわゆるリンク)で複数の文書(テキスト)を相互に関連付け、結び付ける仕組み
  • Markup – 文書の中に目印をつけて、文章の構造(段落など)関する指定を記述すること
  • Language – 言語

つまり、HTMLとは

「文書の中に目印をつけて構造を記述した、ハイパーテキストを記述するための言語」

という意味になります。この目印(Markup)という概念がHTML記述のキーとなります。

HTMLの基本的な考えかた

HTMLは、文書の見た目ではなく構造を記述しています。ここでいう構造とは、例えば、段落、見出し、箇条書き、画像といったその文書の中での役割のことを指しています。

構造を記述する際に、HTMLではその文書の中に目印を記入していきます。この目印をつける行為を「マークアップ(Markup)」といいます。そしてこのマークの目印で囲まれた部分を、その文書の「要素(element)」と読んでいます。

HTMLではその要素の開始位置と終了位置を指定することで、囲まれる領域を要素として明示します。開始位置をあらわすマークを「開始タグ」、終了位置をあらわすマークを「終了タグ」と呼びます。開始タグと終了タグで囲まれた範囲を「要素内容」と呼んでいます。

  • HTMLは、文書の見た目ではなく構造を記述したもの
  • 文書内の役割に応じて目印をつけて構造化する
    • 段落、見出し、箇条書、インライン画像、リンク…など
    • 文書内の役割を「要素」と呼ぶ
  • タグ(tag): 文書の中につけられた目印、“< … >” という三角括弧が目印。
    • 開始タグ: どこからその要素かを示す。“< タグの種類>” 例:文書のタイトルの始まり
    • 終了タグ: どこまでがその要素かを示す。“” 例:文書のタイトルの始まり

HTMLの要素(タグ)の記述の基本のようになります。

例:

複数のタグが入れ子構造(ネスト)されることもあります。

例:

今日、最低限憶えたい要素(タグ)

以下の要素(タグ)の使い方と意味を押さえれば、基本的なWebページの作成が可能です。頑張って使い方をマスターしましょう!

  • 文書全体の構造をつくる要素
    • html
    • head
    • body
  • 文書内の意味による構造
    • header
    • nav
    • section
    • footer
  • 見出し
    • h1, h2, h3, h4, h5, h6
  • 文書内での役割
    • p
    • ul, li
    • a
    • img

CSS(Cascading Style Sheets)

HTML文書の体裁(デザイン)を指定するための仕組み。HTML(構造)とCSS(デザイン)を分離するという理念を理解することが重要です。構造を担当するのがHTML、そして体裁(デザイン)を担当するのがCSSです。

CSSの基本文法は以下のようになっています。

「セレクタ」とは、そのデザインをどこに適用するのか場所を指し示すものです。例えばセレクタを「h1」にすると、h1の見出しに対して指定のデザインが適用されます。セレクタには、さらに様々な複雑な指定方法があるのですが、ここではあまり深入りせず、徐々に学んでいこうと思います。興味のある方は、以下のリンクを参照してください。

セレクタに続いて中括弧 {…} で囲まれた部分が、具体的なデザインの指示にあたります。2つのキーワードが並んでいます「プロパティ(特性)」と「値」です。プロパティとは、デザインの「何を」変えるのかという指定です。プロパティは例えば「文字の色」「背景の色」「余白」「文字の大きさ」「行揃え」「行の間隔」など膨大な数が存在します。一度には覚えるのは大変なので、基本的なものから少しずつマスターしていきましょう。

セレクタとコロン「:」で区切られて、次に「値」を指定します。この値は、プロパティーの種類によって変化します。例えばプロパティが色に関するものであれば色の値になりますし、長さに関するプロパティであれば値は長さの値になります。値の使いかたも多岐に渡るので、徐々に覚えていきましょう。

これらを組合せると、以下の例のようになります。

例:

最低限覚えておきたい、CSSプロパティー

文字や画像に関するプロパティーで、まずは、以下のプロパティーと値の使い方を把握すると良いでしょう。

プロパティー 意味
color 色の値 文字の色
background-color 色の値 背景の色
font-size 長さの値 フォントの大きさ
font-weight 長さの値 フォントの太さ
line-height 長さの値 行間の大きさ
text-align left, center, light, justify 行揃え

ここで、値の指定として「色の値」と「長さの値」という2つの値が指定されています。色と長さには、CSSで決められた値の単位を指定します。色や長さの単位は、いくつか種類があり、用途や好みに応じて使い分けることが可能となっています。

単位 値の指定方法
色の値 色の名前 (red, blue, yellow, white…etc.)
16進数でRGBの値 (#000000 〜 #ffffff)
RGBを0〜255の10進数で(rgb(0,0,0)〜rgb(255,255,255))
長さの値 em:1文字分の大きさが1em
% :パーセント指定
pt:ポイント (72pt = 1in)
px:ピクセル (画面上の最小単位)

Box Model – CSSのレイアウトの基本

CSSでは、矩形(長方形)に囲まれた範囲をひとつのデザインの単位として考え、その配置や余白の大きさ、枠線、背景色などを指定することでページ全体をレイアウトしていきます。長方形の積み木を汲み上げて一つのデザインにしていくようなイメージです。

このデザインの基本単位となる矩形をBoxと呼んでいて、このBoxには共通の属性(プロパティー)が備わっています。これをCSSのBox Modelといいます。CSSでWebページの全体のレイアウトやデザインをするには、このBox modelの理解が欠かせません。

段落や見出し、インライン画像など、全てのコンテント(Content)の周囲には、表示/非表示に関わらず周囲に枠線(border)が存在しています。この枠線を挟んで、コンテントと枠線との間の内側の余白をpadding、枠線の外側の余白をmarginと呼びます。

border、padding、marginには、CSSから様々な方法で指定が可能です。

この他にも様々な方法でBox Modelのプロパティーは指定可能です。実際にいろいろ試しながら身につけていきましょう。

実習

  • サンプルのCSSと、その結果のデザインを見比べて、CSSのプロパティと値の意味を解読する
  • サンプルのCSSを、自分の好みに改造する
  • 次回、発表・提出してもらいます!

次回までの課題

次回からは、TumblrというWebサービスをつかって、オンラインポートフォリオを制作していきます。そのためには会員登録が必要です(無料)。来週までに会員登録を済ませておきましょう。

来週までに以下の内容を課題とします。

課題: Tumblrの会員登録をして、最低5つ投稿する!!

Tumblr

Tumblrとは?

  • https://www.tumblr.com/
  • ブログとSNS(ソーシャルネットワーキングサービス)が一体化したような、統合マイクロブログサービス。
  • 2007年、David Karpによってサービス開始。
  • 登録は無料
  • Twitterでいうところの、リツイートに相当する、リブログ(Reblog)という仕組みが特徴
  • デザインのカスタマイズの自由度が高い
  • 独自のドメインで運用することも可能

授業内で登録の手順を説明するので、次回の授業までに各自登録を済ませてきてください。