PAGES

GUIDE

DATA

WhiteBoard

Webデザイン基礎B | 造形短期大学部1年次後期 デジタルアトリエ 3
Webデザイン基礎B/受講生2019

  • 学園のサーバーを利用する方へ
    • FTP接続HOST:ftp.ip.kyusan-u.ac.jp
    • ID,PW:K'sLifeと同一
    • アップ先:WWW-KSU 直下

第15回

参考


成果発表

  • 13:15 までに最新のデータをサーバーにアップして下さい。
  • 13:15 〜 以下の事項について、学籍番号順に発表して下さい。
    • サイト名、サイトの目的、
    • サイトの構成(サイトマップ)と各ページの内容紹介
    • 工夫した点について(HTML+CSSのソースを見せながら説明)
    • 今後の課題

  • 成績評価は後期末試験期間中に行います。
    Webデザイン基礎B/受講生2019から閲覧できるよう、
    アップロードとチェックを完了して下さい。
  • 技術的な完成度について
    ・サイトのナビゲーションは正しく動作するか
    ・画像等は正しく表示されているか
    ・HTMLとCSSを適切に使用した標準的なページの構築ができているか
    ・ソースコードは見やすいか(内容を理解した書き方になっているか)
  • 構成と内容について
    ・閲覧者にとってわかりやすい情報の構成になってるか
    ・著作権侵害等の問題がないか
    ・不適切な表現はないか
    ・視覚的に美しいデザインになっているか
  • 付記
    ・部分的に「準備中」のページがあっても構いません。
    「ページが存在しない(404エラー)」ということがないように…



第13 - 14回 制作期間

第13 - 14回をWebサイトの制作期間とします。各自、自分のテーマに沿ってサイトの制作を進めて下さい。いくつかの補足説明を行いますが、大半の時間を個別対応とします。

サイト名の投稿について

以下の投稿窓口から、サイト名を投稿して下さい。確認次第、順次こちらで学籍番号からサイト名へとリンクを書き換えます。
Webデザイン基礎B/受講生2019

動作確認について

  • 手元のファイルは、適宜学園サーバーにアップして動作確認して下さい。
    • ホスト名:ftp.ip.kyusan-u.ac.jp
    • ID, PW :K'sLife と同様
    • アップ先:WWW-KSU

アップロード後の確認について

「再読み込み」しても変化が見られない場合は、ブラウザのキャッシュをクリアする必要があります。以下の操作でキャッシュのクリアが可能です。

  • Firefox:Shift + 「再読み込み」| Ctrl + F5 |Ctrl + R (Mac では ⌘ + R)
  • Google Chrome:Ctrl + Shift + R (Mac では ⌘ +Shift + R)
  • Safari: Shift + 「再読み込み」|Ctrl + F5 or Ctrl + R (Mac では ⌘ + R)
  • Internet Explorer:Ctrl +「最新の情報に更新」| Ctrl-F5

画像の扱いについて

Webフォントについて

以下のページで解説しています。


CSSに関する補足

  • マウスのホバリング時の処理について(hover擬似クラスの利用)
    以下のように書くと、マウスのホバリング時に文字がイタリックになります。
    nav li a:hover {
     font-style: italic;
    }
  • その他よくある質問については、以下のページに記載しています。
    CSS/Tips


これまでの内容


第12回 12/14 13:00-

はじめに

  • この回は、12月9日(月)3限分の補講です。
  • こちら都合(急な校務による休講)による補講となりますので、K'sLifeの登録では「全員出席」とします。予定のある方は無理する必要はありません。

JavaScript入門 2

JavaScript の定番ライブラリーである jQuery と、jQuery を用いた各種のプラグインについて紹介します。ソースコードを含め情報量が多いので、それぞれ別ページで説明します。


休講のお知らせ

  • 12月9日(月)3限 の授業は、校務のため休講となります。
  • 補講は、12月14日(土)3限目となります。
  • 内容は、前回の応用実践編で JavaScript ライブラリーの活用についてです。


第11回

JavaScript入門

ソースコードを含め情報量が多いので、それぞれ別ページで説明します。


第10回

設計期間の留意事項

  • index.html がトップページです。
  • フォルダ、ファイル名は半角英数。日本語・特殊記号・スペースは不可。
  • HTMLとCSSは分離して別ファイルにするのが原則です。
  • HTML内には、ビジュアルに関することは一切書かないようにしましょう。
    ネット上の記事やテンプレート等を参考にする際には注意して下さい。
    • レイアウト、背景色、背景画像などは、CSS側で指定します。
    • 配置する画像のサイズなども、CSS側で指定します。
  • index.html + style.css でページのテンプレート(雛形)をつくる・・という感覚で、作業を進めて下さい。テンプレートが未完成の状態で他のページを作ると、作業の行き戻りが発生して効率が悪くなります。すべてのページが共通の構造を持つのが前提なので、まずテンプレートを完成させ、それからテンプレートを複製して他のページをつくる・・という順で進めて下さい。
  • テンプレートの作成時には、まず、HTMLの構造にエラーがないか確認して下さい。HTML自体にミスがあると、CSSによる制御は正常には効きません。
    Firefoxで「ページのソースを表示」すると、構造的な間違いが赤字で指摘されます。赤字タグ以前のどこかでタグの開始・終了の関係がおかしい・・という意味なので、まずはその問題を先に解決しましょう。
  • HTML、CSSともに、無駄な全角スペースが含まれていないことを確認して下さい。これがあるとレイアウト崩れ、CSS制御が無効になるなど、様々なトラブルのもとになります。
  • スタイルシートの記載順序
    • まず、ユニバーサルセレクタ( * )による余白の0リセット
    • html、body、a など、全体に関すること
    • #container header nav main article aside footer など、レイアウト要素について、全体から部分へ、上から下へ順に記載する
  • ロゴマークの画像は、表示サイズと同じあるいは、その整数倍で
    背景を透明にできる png形式 で作成するとよいでしょう。




第9回

Webサイトの構築準備

まずは、WebDesign/Workflowをご覧ください。

  • サイトの目的・テーマを決める
  • サイト名を決める  ← <head>内の<title>タグに記載する内容
  • 掲載する情報を洗い出す
  • サイトマップづくり
    html_css.png
  • ワイヤーフレーム(レイアウト)
    レイアウトの仕様を考える際は、スケッチブック等の紙の上でワイヤーフレームを描き、これをもとにHTMLの構造を決めるようにしてください。
  • レイアウトはデバイスごとにレスポンシブなものになるよう検討します。
    • スマホ用
    • タブレット用
    • PC用
  • index.htmlとstyle.cssでテンプレートをつくる
  • index.htmlを複製して、個別ページの記事(画像と文章)を作成
  • その他、これらの作業と並行して以下の準備も進めて下さい。
    • ロゴマーク、背景画像、ボタン画像等のパーツの準備(主にPhotoshop)
    • 本文記事
    • 掲載画像のサイズ・色の最適化(Photoshop)

簡単なレスポンシブサンプル

DEMO:https://koichi-inoue.github.io/responsive01/
CODE:https://github.com/koichi-inoue/responsive01


今後の日程

  • 第9回・第10回を設計期間とします。
    • サイトタイトル決め、掲載情報の整理
    • サイトマップ
    • ワイヤーフレーム
    • HTML+CSSによるテンプレートづくり
  • 今後の日程
    • 第9,10回:設計期間
    • 第11,12回:JavaScriptの導入について概説
    • 第13,14回:制作期間
    • 第15回:最終報告

Webテンプレート等について

オープンなテンプレートは、サイトの雛形づくりの参考になりますが、HTML + CSSが十分に理解できていることが前提になります。高度な技術を使ったテンプレートを使用すると、かえって混乱する場合がありますので、しくみが理解できないテンプレートは使わないというのが賢明です。


ポートフォリオサイトのページ構成について

記事の分類方法.png

例えば、イラスト / グラフィック / CG とジャンルで分類する。アナログとデジタルで分類する、制作年ごとに整理する・・、様々な分類方法があって、どんなメニュー構成にするか悩むことも多いと思います。そんなときは、「分類しない」つまり「1作品1ページ」で作ってしまう・・という方法も検討する価値があります。

要確認


第8回

はじめに

  • 前回の内容(複数のデザインパターン)について、再確認して下さい。
  • 受講生一覧を最新の状態にして下さい。
    複数のパターンの中から1つで構いません。

CSSによるレイアウトIII

レスポンシブデザインについて(重要)

  • レスポンシブデザインとは、PC、タブレット、スマートフォンなどの様々なサイズの画面表示に対して、フレキシブルにレイアウトを最適化して表示する手法のことをいいます。一般に、HTMLの<meta>タグでviewport指定を行うとともに、スタイルシートにメディアクエリーを使って実現します。
    ResponsiveDesign

マルチページ vs シングルページ

  • index.html をトップとして複数のページの集合となるWebサイト
    様々な情報が頻繁に更新される一般的なサイト、大規模サイト
  • index.html 1ページでつくるシングルページWebデザイン
    • ページ遷移なく、一通りの情報が得られる
    • スマートフォンでの流し読みに親和性
    • 「情報量が大きい」から「情報を厳選してシンプル」へ
    • 更新頻度の低い短期決戦型キャンペーンには最適
    • 参考:SinglePage


補足:サイトのロゴの配置

positionを使ってロゴを配置します。

  • ロゴとなる画像を(何でも構いません)準備して下さい。
    imagesフォルダの中に、png、jpg、gifいずれかの形式の画像を用意します。
  • HTMLの<header>の中に以下のコードを記述して、ファイル名を変更します。
    <img id="logo" src="images/logo.png">
  • 既存のstyle.css(前回からの続き)に、以下の修正を加えて、お試し下さい。
    #container{
       position: relative;
                :
    }
#logo{
   position:absolute;
   top:40px;
   left:40px;
   width:40px;
}


補足:背景画像について

ページ全体を大きなビジュアルで一括する最もシンプルな方法として、あらゆる要素のグラフィックを#containerの背景画像として作ってしまう・・・という方法があります。各要素は、背景に合うようにpositionで配置していく・・・という発想です。

#container{
    background-image: url(images/back.gif);
}

但し、大きな画像はそれなりに情報量が大きくなるので、ファイルサイズ(通信量)が小さくなるよう、うまく圧縮することが重要になります。

補足:CSSのコメントについて

以下のように /* と */ で範囲を囲むと、その部分はコメント扱いとなります。一時的に機能を停止させたい場合にも使えます。

/*  color: red;    */
/*
nav ul {
  flex-direction: column;
}
*/




第7回

はじめに

  • 開発中のフォルダをデスクトップに用意して、以下の確認をして下さい。
    • index.html と style.css をエディタで開いて部分的に変更
    • ブラウザで変更が正しく反映されることを確認
    • FTPツール(FileZilla)で学内サーバーにアップ
      ・ホスト:ftp.ip.kyusan-u.ac.jp
      ・IDとパスワードは、K'sLifeと同じ
      ・ポートは空欄のまま
      ・[クイック接続 / QuickConnect]をクリック
    • WWW-KSU直下に index.html 他をアップ(既存ファイルを上書き)
    • 受講生一覧から自分のページが最新になっていることを確認

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

position プロパティーを用いた位置指定について紹介します。Webページのレイアウトの多くは、「flexbox による箱詰め」 と 「position による自由な位置決め」の2つで実現可能です。

  • 位置の基準となるブロック(#container , header などの親要素)に
    position:relative;
    と書きます。これで基準となるブロックの左上が原点(0,0)となります。
  • 対象となるブロック(子要素)に
    position:absolute;
    top: Ypx;
    left: Xpx;
    などと書きます。これで当該ブロックは(X,Y)の位置に表示されます。

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

様々なHTML構造でCSSを書く演習を行います。前回のサンプルをフォルダごと以下のように複製して、それぞれ異なるレイアウトを実現してみましょう。

sample_01, sample_02, sample_03・・・・


  • 前回紹介したサンプルの構造は以下のとおり
    #container{ header,  nav, main{ article, aside } , footer }
  • 以下のパターンは、元のサンプルから比較的簡単に変形できます。
    #container{ header{ nav} , main{ article, aside } , footer }
    #container{ header, main{ nav, article, aside } , footer }

全体を #container で囲むというのは、初歩の体験として全体をつかみやすくするための事例です。必須のものではありません。

  • header, footer が画面幅100%になるパターン
    header{ nav } , main{ article, aside } , footer
  • シングルページで構成する場合は、以下が典型的です。
    header, nav,  main{ section, section, section ・・}, footer

CSSを書く順序

絶対的な決まりがあるわけではありませんが、基本的には「全体から部分へ」「ページの上部から下部へ」を意識して記載します。意識的に追加するCSSなどを除いて、基本的に記述が重複しないよう、注意して下さい。一般に以下の順番になります。

  • * (ユニバーサルセレクタ)で全体に余白を0にするなどのリセット指示
  • body(フォント), a(リンクの色), p(本文文字サイズ、行間) などページ全体のルールの統一
  • header , nav, main, section, article , aside, footer と、上から順にレイアウトに関わる事項を指示
  • 特別・例外的なルールなど(タブレット用、スマホ用、印刷用・・など)
  • 参考:CSS/CodingRule



第6回

CSSによるページレイアウトI 「箱詰め」とボックスモデル

Webページは、一般に container と名付けられた大きな箱の中に、
以下のような「箱」を配置するように組み立てられるのが基本です。

  • header ヘッダー
  • navigation メインメニュー
  • article 本文記事
  • footer フッター

以下、標準的な構造です。はじめに新規のフォルダを作って、以下のソースをindex.htmlとして保存して下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>Sample Page</title>
</head>
<body>
  <div id="container">
    <header>
      <h1>information</h1>
    </header>
    <nav>
      <ul>
        <li><a href="index.html">home</a></li>
        <li><a href="gallery.html">gallery</a></li>
        <li><a href="profile.html">profile</a></li>
        <li><a href="links.html">links</a></li>
      </ul>
    </nav>
    <main>
      <article>
        <h1>2019.10.21</h1>
        <p>
          ここに記事が入ります。
        </p>
      </article>
      <aside>
        <h1>関連リンク</h1>
        <p>
          関連リンク情報
        </p>
      </aside>
    </main>
    <footer>
      &copy; Your Name http://www.example.com
    </footer>
   </div>
</body>
</html>


動作確認

では次にCSSでレイアウトをはじめてみます。
以下のコードを style.css に書いて保存してください。

  • container を画面中央に配置します。
    #container{
      width:70%;
      max-width: 960px;
      min-width: 512px;
      margin: 0 auto;
      background-color: silver;
    }

  • header と footer が明確になるよう、異なる背景色を与えます。
    header {
      height: 5rem;
      padding: 2rem;
      background: #333;
      color: white;
    }
    
    footer {
      height: 2rem;
      padding: 2rem;
      background: #333;
      color: white;
      text-align: center;
    }

  • ナビゲーションメニューを横並びにします。
    nav ul{
      display: flex;
      flex-direction: row;
    }
    
    nav ul li {
      margin-right: 2rem;
    }

ここでは、Flexbox という仕様を用いて横並びを実現しています。従来は、float というプロパティを用いて回りこみを設定していましたが、最近はこの方法が使われることが多くなりました。詳しくは CSS/Flexbox をご覧ください。

  • mainの中の article とaside が横並びになるようにします。
    main {
      display: flex;
      flex-direction: row;
    }
    
    article{
      flex: 3;
      padding: 2rem;
      background: #EEE;
    }
    
    aside{
      flex: 1;
      padding: 2rem;
      background: #DDD;
    }


レイアウトに使える単位

  • px (ピクセル):画素数
  • rem(レム):文字サイズ相対(1文字分のサイズ=1rem)
  • %(パーセント):コンテナ領域に対するパーセント

ボックスモデルについて

  • margin 境界の外側の余白
  • border 境界
  • padding 境界の内側の余白
  • width, height 内容部分の幅と高さ
     
    boxModel.png

ユニバーサルセレクタを用いたリセット

正確なレイアウトを行うには、各HTML要素がデフォルトで持っているマージンやパディングを一旦 「0 」にリセットする必要があります。
 その際に使われるのが、以下のユニバーサルセレクタと言われるもので、これを使うと、すべての要素に一括で属性を定義することができます。
 以下のように書くと、すべての余白を0にリセットできます。

*{
    margin: 0;
    padding: 0;
    line-height: 100%;
}

リセットすることが目的なので、このコードはCSSファイルの先頭に書きます。ここに margin: 40px などと書くと大変なことになります。あくまでもリセットすることが目的なので「0」以外は書かないようにしましょう。



第5回

CSSの利用

  • はじめに
    CSS(Cascading Style Sheets)とは、HTMLで記述された文書内の各要素のビジュアルに関する仕様(書)を意味します。CSSを記述することにより、ページのレイアウト(各要素の配置)、文字の種類・サイズ・色、また背景色・背景画像といった、ビジュアルに関する細かな設定が可能になります。
  • スタイルシートファイルの作成
    ページのビジュアルデザインに関する情報、つまりレイアウトや文字のサイズ・色・背景といった情報は、スタイルシートに記述します。
    • エディターで新規ファイルを準備して下さい。
    • 以下の内容をコピー&ペーストして style.css というファイル名で
      WebSiteフォルダの中に保存して下さい。
      h1 {
          background-color: black;
          color: silver;
       }
      a {
          color: red;
          text-decoration: none;
       }
    • これだけでは、まだ何も起こりません。次の作業が必要です。
  • HTMLとCSSの関連づけ
    style.cssというスタイルシートを利用することを、HTML上で宣言します。
    • index.htmlをエディターで開きます。
    • <head> ~ </head>の間に以下の一行を挿入して下さい。
      <link rel="stylesheet" href="style.css">
    • ブラウザで確認すると、色やレイアウトに関する情報が適用されていることがわかると思います。
    • 他のページ、また今後作るすべてのHTMLファイルに、同じ記述を加えれば、すべてのページに同じデザインが適用されることになります。

CSSの基本的な書き方

  • セレクタ、プロパティ、値
    ルールは以下のとおり、コロン(:)とセミコロン(;)を間違えないように。
    セレクタ {
       プロパティー : 値 ;
              :
    }
  • セレクタ=既存のタグの場合
    <body>や<h1>など、タグ要素に対してスタイルを定義する場合
    h1 {
         background-color : gray;
    }
  • セレクタ=ID要素(自由に好きな名前を付けられます)の場合
    <p id="danraku01">など、IDに対してスタイルを定義する場合
    #danraku01 {
         background-color : gray;
    }
  • セレクタ=CLASS要素の場合
    <a class="moji01">など、CLASSにスタイルを定義する場合
    .moji01 {
         font-weight : bold;
    }

文字色と背景色

  • RGB値による色定義
    color : #rrggbb;
    rr、gg、bb は16進表記で 00〜ff(0~255)
  • 背景画像
    背景に画像を使う場合は以下の要領
    background-image : url("images/back.gif");

補足

  • レイアウト(箱組み)に関わる演習は、次週以降行います。
  • CSSのプロパティーは多種多様で、基本的なもの以外は「覚える」というより、必要に応じて調べながら使う・・というのが普通です。Web検索では、 [ CSS 文字 影 ] などのキーワードセットで検索してみて下さい。CSSの書き方の事例は多数紹介されていますので、大半はそれで解決します。


注意

ネットで事例を調べていると、以下のような書き方に出会うことがありますが、HTMLの中に直接CSSを書くことはおすすめできません。内容とビジュアルは分離するというのがWeb標準の考え方です。

<body style="background: gray;" >  ← この書き方は非推奨です。




第4回

はじめに

  • 前回内容の確認
    • a タグによるリンク、ダウンロード
    • リスト(箇条書き)の記法

FTPクライアントによるファイルのアップロードと公開

前回までに試した様々なメディアの表示、リンク等が正常に動作するか、現状のWebsiteを学園サーバーにアップします。学内からのみの閲覧とはいえ、不特定多数の人から見える状態になりますので、不適切な記述、画像がないか、事前に確認しておいて下さい。

  • FTPに関する説明 > FTP
  • 接続方法
    FileZillaのトップバーに以下の3項目を入力して [ クイック接続 ]
    • FTPサーバー(ホスト名) ftp.ip.kyusan-u.ac.jp
    • ユーザID K'sLifeのユーザIDと同じ
    • パスワード K'sLifeのパスワードと同じ
  • 接続に関する注意事項
    通常は、サイトマネージャに一度登録すると、次回からはサイトを選択して「接続」とするだけでいいのですが、現状の実習室環境では、設定情報がリセットされてしまいます。面倒ですが、授業ごとに初回接続時には、上の情報を入力する必要がある・・・というふうに理解して下さい。
  • ファイルのアップロード
    一般的にはウインドウの左側(ローカル)にサイトのディレクトリ(ここではwebsiteフォルダ)、右側(リモート)にターゲットディレクトリ(ここではWWW-KSU)・・・という状態にして、index.htmlを筆頭とするすべての関連ファイルをアップロードします。
     このツールはドラッグ&ドロップにも対応しているので、フォルダの中身を、すべてまとめて、ターゲットディレクトリ(WWW-KSU)直下にドラッグ&ドロップするだけでアップできます。
  • アップされたサイトを確認するには
    ブラウザのアドレス欄に、以下の形式で入力して下さい。
    http://www.kyusan-u.ac.jp/~z19zc000/
  • アップロードの仕方によって、アクセスの方法がかわります
    • WWW-KSU 直下に index.html を含むファイルをアップした場合
      www.kyusan-u.ac.jp/~z19zc000/ でアクセスできます
    • WWW-KSU 直下に top.html をアップした場合
      www.kyusan-u.ac.jp/~z19zc000/top.html と入力する必要があります
    • WWW-KSU/ に Websiteフォルダをアップした場合(index.htmlを含む)
      www.kyusan-u.ac.jp/~z19zc000/Website とするとアクセスできます
  • ブックマークツールバーの活用
    今後は随時更新とアップロードを繰り返すので、以下の2つをブックマークして、それぞれのチェックがスムーズにできるようにしましょう。
    • ローカルにあるindex.html のブックマーク
      file://・・・というかたちのURLになります
    • リモートにある index.html のブックマーク
      http://www.kyusan-u.ac.jp/~z19zc000/ というかたちになります

補足

  • ブラウザからもftp接続は可能です。ブラウザのアドレス欄に以下の通り入力してみてください。ID, PW を入力すると、自分のディレクトリが見えます。
    ftp://ftp.ip.kyusan-u.ac.jp


補足2 画像のアップロードについて

Google検索でヒットした画像は、誰かの著作物なので、そのままあなたのサイトで利用すると著作権を侵害することになります。画像を使う場合は、PD あるいは CC の画像を使いましょう。詳細は以下。
FreeMaterials




第3回

事務連絡

  • 第3回、9月30日の授業について
    大学基準協会による大学評価対応のため、説明等は 13:45までとし、以後、各自本日の内容について自学演習をお願いします。説明不足の部分については、次回以降補います。何卒、ご了承下さい。

はじめに

  • Websiteフォルダをデスクトップにコピーして、前回の確認をして下さい。
  • HTMLタグの全体像について再確認します。> HTML
  • Webに掲載する画像について確認します。> WebDesign/Images

リンク|<A>

前回は1つのページ(index.html)のみで表示を確認しましたが、今回は、他のWebサイトへのジャンプ、また、サイト内の別のページへのジャンプなどをアンカータグ(<A>)を使って試してみましょう。

  • 外部リンク
    <a href="http://www.kyusan-u.ac.jp">九産大</a>
  • 内部リンク
    <a href="gallery.html">ギャラリーのページへ</a>
  • ファイルへのリンク(ファイルをダウンロードさせる)
    書き方は簡単、リンク先に直接ファイルを指定るすだけです。
    <a href="files/sample.zip">DOWNLOAD</a>

補足
リンクのボタンになる部分には、文字や画像が使えます。

<a href="###">(ここに置かれた文字や画像がリンクボタンになります)</a>

画像をボタンにする場合は、以下のように書きます。

<a href="###"><img src="images/btn1.gif"></a>

参考:Google:Web素材 ボタン

リスト|<ol>, <ul>, <li>

箇条書きをする場合にはリストタグ <li>を使います。<ol> で囲むと「番号付き」、<ul> で囲むと「番号なし」の箇条書きになります。リストの典型は、サイトのメニュー部分で、トップページ、ギャラリーのページ、リンク集のページ、アバウトなど、サイト内の複数のページへのリンクをまとめて箇条書きする際に、一般に以下のような記述をします。

<nav>
    <ul>
        <li><a href="〜.html">HOME</a></li>
        <li><a href="〜.html">GALLERY</a></li>
        <li><a href="〜.html">LINKS</a></li>
        <li><a href="〜.html">ABOUT</a></li>
    </ul>
</nav>


とりあえず、ここまでの知識があれば、十分に情報発信するこができます。

  • 見出し|<h1> 〜 <h6>
  • 本文段落|<p>
  • 強制改行|<br>
  • 箇条書き|<ul>, <li>
  • リンク|<a>
  • 画像|<img>
  • インラインフレーム|<iframe>




第2回

前回の確認

サイトフォルダの準備

around

Webサイトは複数のファイルから構成されます。

  • はじめにWebサイト用のフォルダを作ります。
  • 関連するファイルは、すべてこのフォルダに保存します。
  • 1ページ = 1ファイル(〜.html)が基本です。
  • 写真やイラストなどの画像は imagesフォルダで管理します。
  • ファイル・フォルダの扱いについて
    • ファイル名は原則として半角英数、特殊記号やスペースの使用は不可
    • 毎回終了前にフォルダごとバックアップ(複製の保存)をとって下さい。

HTMLでページを作成(前回と同じです)

HTMLとは、ページの内容を記述するためのマークアップ言語です。
詳しくは右のページをご覧下さい。> HTML

  • 以下のソースコードをテキストエディタにコピー&ペーストして、
    index.html という名前で、WebSiteフォルダに保存して下さい。
    <!DOCTYPE html>
    <html lang="ja">
      <head>
        <meta charset="UTF-8">
        <title>Sample Page</title>
      </head>
      <body>
        <h1>見出し</h1>
        <p>
          ここに本文
        </p>
      </body>
    </html>
  • Webページ(HTML)は以下の2つの部分から構成されます。
    • <head> 〜 </head> ページに関する前置き情報
    • <body> 〜 </body> 画面表示される情報

エディタの操作について

  • [COMMAND] + [X]:カット
  • [COMMAND] + [C]:コピー
  • [COMMAND] + [V]:ペースト
  • [COMMAND] + [Z]:元に戻す
  • [COMMAND] + [S]:保存

HTMLをブラウザに表示するには

index.htmlファイルを、ブラウザのBODY部分(ページが表示されているところ)へドラッグ&ドロップするだけです。

  • アドレスバーに表示されるURLの違い
    • 通常のネット接続の場合: http:// www.sample.com/index.html
    • ファイルを表示した場合: file://・・・・ /index.html

基本のタグ

HTMLは、ページの内容を<>の形のタグで記載していきますが、よく使うものは20個程度。努力して「覚える」必要はありません。自然に慣れます。

  • 見出しは<h1>〜</h1>
  • 段落は<p>〜</p>
  • 改行は<br>
  • 見出しや文章を適当に書き加えて「保存」してみて下さい。
  • ブラウザの「更新」を行うと、変更が反映されることがわかります。
  • 以上。ページを作りは非常にシンプルな作業だということがわかったと思います。特別なソフトは必要ありません。
  • きれいなソースコードを書くために
    • TAB,半角スペースでインデントをとってHTMLを見やすくしましょう。
    • TAB,半角スペースは表示上は無視されます。
    • 要素間の「余白」は後に学習するCSSでコントロールします。全角スペースの利用は様々なトラブルのもとになるので、避けましょう。
  • ATOMでインデントを見やすく > 半角スペースやタブ記号の表示
    ATOM > Preferences > で設定パネルが表示されます。
    • Show Indent Gude にチェック
    • Show Invisibles にチェック
  • ATOMで長い行の折り返し
    • View > Toggle Soft Wrap(自動折り返しの有無を切り替え)

画像の配置

  • 画像 <IMG>
     <img src="images/sample.jpg" width="320">
    属性 src:ソース width: 表示幅
    画像はWebに最適なサイズにリサイズしておきましょう。
    参考記事:WebDesign/Images

様々なコンテンツの埋め込み

  • インラインフレーム <IFRAME>
    <iframe src="http://www.・・・・" width="640"></iframe>
    属性 src:ソース width: 表示幅
    YouTubeが提供する動画の埋め込みコード、またGoogleMapの埋め込みコードには <iframe>が利用されています。
     HTML文書内に別のHTML文書を入れ子で配置することも可能です。ただし、他人のサイトを自分のものであるかのように内包するのはいけません。あくまで「サイト内記事の差し替えに用いる」という活用法にとどめましょう。
  • 補足 
    • YouTube動画の埋め込み:動画下の「共有」>「埋め込む」
    • GoogleMapの埋め込み:左メニュー>「共有」>「埋め込む」
    • その他、Twitterのタイムラインの埋め込みなども試してみて下さい。

サイトの開発とバックアップについて

SiteBackup.png

Webサイトなどのソースコードは、開発の過程で必要の都度バックアップを取るのが普通です。実務では Git 等でバージョン管理を行いますが、大学での実習では、とりあえず、フォルダごとバックアップをとることをお勧めします。

  • フォルダを丸ごとバックアップするには
    • WebSiteフォルダを [Option]+ドラッグ します
    • 「WebSite 2」というフォルダができます
    • 名前を変更 WebSite_201809** ← 前回の日付
    • これはいざというときのための「バックアップ」です。
      日付のついたフォルダは、過去のアーカイブですから、
      それに更新を加えてはいけません。あくまで記録として保管します。
  • WebSiteフォルダ(日付のないもの)をテンポラリフォルダとします
    これは、常時更新され続ける最新のもの・・・という意味です。



第1回

ガイダンス

  • 学習目標
    HTML+CSSによるページ制作の技術を習得するとともに、
    自身の「ギャラリーサイト」を構築します。
  • 成績評価について
  • 演習の進め方について
  • 使用するソフトウエアについて
  • 成果目標 : Web標準技術によるギャラリーサイト

Webの現状と演習内容の位置づけ

ですが・・・

  • この演習では、最も基本的かつ標準的な方法で、サイトを0から作ります。
    Webの本質を理解し、応用するためには、それが必要です。
  • 単なるエンドユーザーではなく、デザイナーとしてサイト構築に携わることを前提に、HTMLとCSSというWeb標準の技術について学びながら、半年の演習を通して「あなた自身のギャラリーサイトの構築」を目指します。

この演習で使用するソフトウエア

特別なソフトは必要ありません*1
ホームページの制作には以下の2つがあれば十分です。

テキストエディタAtomの利用について

個人用のディスク領域にAtomを置いて利用しますが、以下の点に注意して準備して下さい。

  • 個人領域には容量制限があります。そこで・・・
  • まず最初に、ゴミ箱(これは個人領域を圧迫します)を空にして下さい。
  • 個人領域にある不要なファイルをできるだけ、ゴミ箱に入れて、その後もういちどゴミ箱を空にして下さい。
  • ダウンロードしたAtomを個人領域にコピーします(200MBほどあります)。
  • PCを再起動、再ログインすると、日本語化やテーマ(エディタの見た目)の設定は初期化されてしまいますので、必要であれば、授業の開始時に再設定して下さい。
    • Atom > Preferences
    • install 「japanese」で検索して「日本語メニュー」をインストール
    • テーマ で好みのデザインに変更

では、簡単に動作確認してみましょう。

HTMLでページを作成

HTMLとは、ページの内容を記述するためのマークアップ言語です。
詳しくは右のページをご覧下さい。> HTML

  • 以下のソースコードをテキストエディタにコピー&ペーストして、
    index.html という名前で、WebSiteフォルダに保存して下さい。
    <!DOCTYPE html>
    <html lang="ja">
            <head>
                    <meta charset="UTF-8">
                    <title>Sample Page</title>
            </head>
            <body>
                     <h1>見出し</h1>
                     <p >
                               ここに本文
                     </p>
            </body>
    </html>
  • Webページ(HTML)は以下の2つの部分から構成されます。
    • <head> 〜 </head> ページに関する前置き情報
    • <body> 〜 </body> 画面表示される情報

インターネットとWebの歴史について

その他 確認事項

  • テキストエディタを使って、デジタルノートをつけて下さい。
  • Macのスクリーンショット Command + Shift + 4
  • 情報発信に関する留意事項
    • 情報発信する際の基本的なマナーについて
    • 著作権について



(以下、準備中)



*1 一般にWebページを作る際にはDreamweaverやホームページビルダーのようなWebオーサリングツールが必要なのではないか?という印象をお持ちの方も多いかと思いますが、それらは視覚的に組み上げられたページを描画するHTMLとCSSを自動生成するソフトで、結果的に出来上がるのはHTML、CSSなどのテキストファイルに過ぎません。HTMLとCSSの仕組みを理解した上で利用すれば格段に生産効率が上がりますが、基礎が無いとかえって混乱します。はじめのうちはHTMLとCSSを直接テキストエディタでコツコツ手入力することをお勧めします。
添付ファイル: filewebsite.zip 14件 [詳細]
Last-modified: 2020-01-06 (月) 14:17:46