LogoMark.png

情報デザイン演習I/2019

Whiteboard

情報デザイン演習I|情報デザイン専攻| 火曜 1・2限 17号館5F デジタルラボ 504


最終回

III. Webデザイン入門|演習07

第14回

はじめに

学内サーバーへのアップロード方法の確認

ブラウザの使いこなしについて

Webサイト構築

前回作成した枠組みを利用して以下の項目について再確認します。




第13回

III. Webデザイン入門

HTML+CSSによる、標準的なWebサイトのデザインについて、概要を体験します(詳細は次年度前期のWebデザイン実習で学習)。

開発環境の準備

サイトフォルダの準備

folder.jpg

注)フォルダ名、ファイル名は必ず半角英数で
images page01.html page-01.html page_01.html logoMark.jpg など、
Webサイトを構成するフォルダやファイルの名称は、すべて英字ではじまる半角英数で命名します。日本語や特殊記号、またスペースも不可です。


HTMLの記述例

HTMLとは、ページの内容を記述するためのマークアップ言語です。
まずは、以下のソースコードをテキストエディタにコピー&ペーストして、
index.html という名前で、作業用フォルダに保存して下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Sample Site</title>
</head>
<body>
  <div id="container">
    <header>
      <h1>Sample Page</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">about</a></li>
        <li><a href="#">gallery</a></li>
        <li><a href="#">links</a></li>
      </ul>
    </nav>
    <main>
      <section>
        <article>
          article 01
        </article>
        <article>
          article 02
        </article>
      </section>
      <aside>
        aside
      </aside>
    </main>
    <footer>
       &copy; http://www.example.com
    </footer>
  </div>
</body>
</html>


HTMLをブラウザで表示確認


HTMLタグの基本

HTMLは、情報要素を以下のようなタグでくくる形で記述します。

<◯◯> 〜 </◯◯> ← 前者を開始タグ、後者を終了タグといいます。

以下、基本的なものを列挙します。 > 詳しくはこちら


CSSでページのスタイルを定義

CSSとは、表示された要素のビジュアルを定義するためのものです。
まずは、以下のソースコードをテキストエディタにコピー&ペーストして、
style.cssとしてWebSiteフォルダに保存して下さい。

*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
#container{
  width: 84%;
  max-width: 1280px;
  min-width: 512px;
  margin: 0 auto;
}
header {
  position:relative;
  height: 8rem;
  background: #333;
  box-shadow: 0 4px 0.3125rem rgba(0,0,0,.3);
}
header h1{
  position: absolute;
  top: 3rem;
  left: 3rem;
  font-size: 2rem;
  color: white;
}
nav {
  padding: 1rem 3rem ;
  background: #333;
}
nav ul{
  display: flex;
  flex-direction: row;
}
nav ul li{
  margin-right: 2rem;
}
nav ul li a {
  color: white;
}
main{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
section{
  flex: 3;
  padding: 3rem;
  background: #EEE;
}
article{
  min-height: 8rem;
  padding: 1rem;
  margin-bottom: 2rem;
  background: #FFF;
}
aside{
  flex: 1;
  padding: 3rem;
  background: #DDD;
}
footer {
  padding: 2rem 3rem;
  text-align: center;
  background: #333;
  color: white;
}


HTMLとCSSの関連づけ

index.html の<head>内の以下の1行が、style.css の利用を明示しています。

<link rel="stylesheet" href="style.css">

これにより、CSSに書かれた内容が、ページのスタイルに反映します。

注)CSSを記述する方法は3つあります。
・ HTMLファイルに書かれた各タグの中に直接書く
・ HTMLファイルのヘッダー部分にまとめて書く
・ HTMLファイルとは独立した別のファイルに書く( 拡張子は .CSS )
で、結論から言うと、3つめを採用するのがWeb標準で、ここではそれにしたがって、style.css を別ファイルとして独立させています。

最初の index.html と この style.css を組み合わせた結果 → DEMO


CSSの記法

CSSではどの部分の・何を・どうするかを記述します。
記述の基本ルールは以下のとおりです。

セレクタ(どの部分の) {
    プロパティー(何を)  :  値(どうする) ;
    プロパティー(何を)  :  値(どうする) ;
             :
}

HTML内の特定の要素をセレクタで把握し、その要素をどう表示したいか、指示を列挙する・・というのがCSSの基本的な書き方です。


CSSによるページレイアウト

html_css.png

CSSによるレイアウト作業は、大きな箱の中に小さな箱を詰めていく作業と考えるとイメージしやすいでしょう。一般的には、container という外箱の中に、header 、navといった名前の内箱を順に詰め込んでいくことになります。

箱は、入れ子状に詰めるのが基本です。外の箱と中の箱が錯綜するような記述をするとレイアウトは正しく表示されないので、ソースコードを書く際は、きちんとインデントをとってわかりやすく書くことをお勧めします。

参考ZENGARDEN
ZENGARDENは、すべてまったく同じHTMLに対し、CSSの差し替えのみで様々なビジュアルが実現できることを示す事例集です。


テンプレートから個別ページへ

html_css_2.png

index.html と style.css のセットは、いわばページのテンプレート(ひな形)です。実際のWebデザインでは、ここまでの作業に多くの時間をかけます。

gallery.html や links.html など、新しいページは、index.htmlを複製して、主たる記事の部分の部分だけを書き換える・・という単純な作業となります。

ファイルのアップロードについて

作成したファイル(群)は、Webサーバーにアップして「公開」となります。
ここでは、説明のみとなります。> 詳しくはこちら

つまり、サーバー(ディレクトリ)がひとつあれば、フォルダの数の分だけ複数のWebサイトを持つことができる…ということになります。




第12回

II. 音楽と映像 - 3> 演習06:音×映像

第11回 12/3

II. 音楽と映像 - 3> 演習06:音×映像

参考:フリーの音楽

第10回

演習05 上映会の続き

学科ページのコメントについて

映像編集技術に関する補足講義

II. 音楽と映像 - 3> 演習06:音×映像

音×映像の「面白い!」

参考:フリーの音楽




第9回

II. 音楽と映像 > 2. 映像で遊ぶ

作品鑑賞 10:10 〜




第8回

II. 音楽と映像 > 2. 映像で遊ぶ


映像制作の基礎

演習05:映像で遊ぶ




第7回

II. 音楽と映像 > 1. 音で遊ぶ 9:00 -

II. 音楽と映像 > 1. 音で遊ぶ 作品鑑賞 10:10 -

学科サイト メンバー一覧



第6回

事務連絡

II. 音楽と映像 > 1. 音で遊ぶ

演習04:音で遊ぶ

10月22日(火)は「即位礼正殿の儀」で今年限定の国民の祝日です。
基盤センター等の施設も含め大学は休校日です。


文字X写真 展示のルール|2019.10.15

横置き(landscape)の場合

縦置き(portrait)の場合

失敗から学ぶこと

当専攻の主軸である「情報」には、電子媒体(Web・映像等)と紙媒体(ポスター・冊子等)とがありますが、電子媒体の仕事の「身軽さ」に比べて、紙媒体の仕事には多くのリスク(トラップ)が存在します。

などなど、要するにすべてのリスクは「紙」がハードウエアであることに起因します。現代社会では、このリスク回避と効率化のために、いかに情報を電子化して配信するか・・その技術が求められています。今後、多くの業務が「ハード」から「ソフト」へと移行することが予想されます。

もちろん、電子媒体にも致命的なリスクがあります。以下、電子化できても、なお残る致命的な問題についても確認しておいてください。電子情報は便利な分、トラブルが生じた際のリスクは、紙媒体よりも大きくなるため、より一層の注意が必要です。以下、電子媒体が抱えるリスクの例です。




第5回

I. 文字と写真 > 3.文字と写真のコラボレーション 演習003:文字 x 写真


9:00 - 9:30

9:30 - 10:50

パネルを製作します。

11:00 -

以下のとおり展示します。

第4回

10/8 開始前までのお願い

I. 文字と写真 > 3.文字と写真のコラボレーション 演習003:文字 x 写真


制作物の仕様

展示準備

第3回

I. 文字と写真 > 2.写真で遊ぶ  演習02:組写真

学科サイト|情報デザイン演習I


I. 文字と写真 > 3.文字と写真のコラボレーション 演習03:文字 x 写真

11:00 〜 課題の説明

課題の仕様

+演習 「写真で一言」

boketeipponグランプリ 写真で一言 のような文字と写真の関係構築について簡単な演習を行います。




第2回

事務連絡

I. 文字と写真 > 1.文字で遊ぶ 演習01


I. 文字と写真 > 2.写真で遊ぶ

第1回

ガイダンス

I. 文字と写真 > 文字で遊ぶ 演習01




PAGES

GUIDE

DATA


*1 補足:Dreamweaverやホームページビルダーの利用について
一般にWebページを作る際にはDreamweaverやホームページビルダーのようなWebオーサリングツールが必要なのではないか?という印象をお持ちの方も多いかと思いますが、HTMLもCSSもJavaScriptもすべてテキストファイルなので、テキストエディタさえあれば他には何もいりません。
これらはワープロ感覚で組み上げたページから自動的にHTMLとCSSを書き出すソフトで、HTMLとCSSの仕組みを理解した上で利用すれば格段に生産効率が上がりますが、はじめのうちはHTMLとCSSを直接テキストエディタでコツコツ手入力することをお勧めします。

*2 FileZiilaはドラッグ&ドロップにも対応しているので、フォルダを掴んで、ターゲットディレクトリにドラッグ&ドロップするだけで完了します。
添付ファイル: file文字X写真_2019_OL.pdf 30件 [詳細]
Last-modified: 2020-01-13 (月) 21:32:23