yoppa.org

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

第１回: 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

< !DOCTYPE html>


  
  多摩美術大学美術学部情報デザイン学科メディア芸術コース
  


  

    
多摩美術大学 情報デザイン学科 メディア芸術コース

    
Art & Media Cource Department of Information Desing Tama Art University

  

  
  

    
Overview / コース概要

    
    多摩美術大学情報デザイン学科「メディア芸術コース」は、デジタル・テクノロジーやバイオ・メディアを活用したインスタレーション/パフォーマンスや映像音響作品を中心に、インタラクティヴなインスタレーション、オーディオビジュアル・パフォーマンス、ソフトウエア・アート、バイオ・アート、デジタル・アニメーション、フューチャー・シネマといった、多彩なメディア芸術表現に取り組んでいます。テクノロジーと人間の関係のダイナミックな変化を背景に、情報と物質が一体化したポスト情報化時代の作品制作を通じて、21世紀の芸術・デザイン、さらには科学・技術・哲学の統合的な理解を目指した、実践的な制作研究を行っています。現在、コースはそれぞれ独自のテーマを持つ4つのラボから構成されています。それぞれのラボが自律かつ共同しながら、相乗的に独自の創造的文化をつくりだしています。
    
 Overview - Creating new framework of art

    Art & Media Course in Information Design Department of Tama Art University manages various kinds of art forms by utilizing digital technologies and bio medias, such like interactive installations, audio & visual performances, software arts, bio arts, digital animations, and future cinemas. Through the background of recent dynamic changes of relationship between technology and human society, we aim to bring up new types of multi-skilled creators who can transcend the traditional boundaries of fine arts, science, engineering, mathematics and philosophy.The Course has established unique creative environment configured by four individual laboratories which has their own research themes.
  

  

    
After Graduating / 卒業後の進路

    良質のメディア芸術作品は、インタラクション・デザインの可能性を開拓する実験場であり、創造的なアーティストはイノベーションを牽引する先進的なユーザーです。情報芸術コースの卒業生は、内外で多数の賞を受賞するメディア・アーティストや映像作家をはじめ、ウェブ、インターフェイス/インタラクション、ソフトウェア/デバイスに関連する企業や独立系プロダクション、広告、イベント、ゲーム、編集・制作などの映像音楽産業全般で幅広く活躍しています。
    
After Graduating

    Excellent media art is a test site for pathfinding the possibility of interaction design, and artists are advanced user for driving innovations.
    Many of our graduates has won prizes, and others are also taking an active part of web design, interaction design, software and device related independent productions.

style.css

body{
  margin:0;
  padding:0;
}

header, section{
  background-color:#ffffff;
  color:#8144ff;
  width: 960px;
  margin: 0 auto;
}

a {
  color:#8144ff;
}

header h1{
  text-align:center;
  font-size: 1.2em;
  font-weight: 100;
}

nav {
  padding: 4em 0;
  border-bottom: 1px solid #8144ff;
}

nav ul{
  width:960px;
  margin:0 auto;
  font-size: 0.8em;
  text-align:center;
}

nav li {
  display: inline;
  border-left: 1px solid #8144ff;
  padding: 0 2em;
}

section {
  clear:both;
}

section h1{
  margin:2em 0;
  font-weight:100;
  font-size: 1.4em;
}

section h2{
  font-weight: 100;
  border-top: 1px solid #8144ff;
  border-bottom: 1px solid #8144ff;
  font-size: 0.9em;
  padding: 1.5em 0;
  margin: 1.5em 0;
}

section p{
  padding: 1em 12%;
  line-height:2.0;
  font-size:0.85em;
}

section img{
  border: 1px solid #8144ff;
  padding: 5px;
  margin: 1em 12%;
  text-align:center;
}

footer {
  background-color:#ede5ff;
  padding: 1em;
}

footer p {
  color:#8144ff;
  width: 960px;
  margin: 0 auto;
  font-size: 0.6em;
  text-align: right;
}

ファイルをダウンロードしたら圧縮を展開しましょう。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つのキーワードが並んでいます「プロパティ（特性）」と「値」です。プロパティとは、デザインの「何を」変えるのかという指定です。プロパティは例えば「文字の色」「背景の色」「余白」「文字の大きさ」「行揃え」「行の間隔」など膨大な数が存在します。一度には覚えるのは大変なので、基本的なものから少しずつマスターしていきましょう。

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

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

例:

p {
  color: #333333;
  font-family: sans-serif;
  font-size: 0.9em;
}

最低限覚えておきたい、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から様々な方法で指定が可能です。

margin:12px;                  /* 上下左右に12pxのマージン */

padding-top:10px;             /* 上10pxのパディング */
padding-right:20px;           /* 右20pxのパディング */
padding-bottom:30px;          /* 下30pxのパディング */
padding-left:40px;            /* 左40pxのパディング */

margin: 10px 20px 30px 40px;  /*上、右、下、左の順に指定 */
padding: 10px 20px;           /*上下、左右順に指定 */

border: 1px solid #cccccc;       /* 1pxの実線、色は #cccccc */
border-bottom: 2px dashed blue;  /* 下の枠だけに2pxの破線、色は青 */

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

実習

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

次回までの課題

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

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

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

Tumblr

Tumblrとは?

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

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