LogoMark.png

Webデザイン基礎B/2019

WhiteBoard

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

第15回

参考


成果発表

第13 - 14回 制作期間

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

サイト名の投稿について

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

動作確認について

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

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

画像の扱いについて

Webフォントについて

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


CSSに関する補足

これまでの内容


第12回 12/14 13:00-

はじめに

JavaScript入門 2

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


休講のお知らせ


第11回

JavaScript入門

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


第10回

設計期間の留意事項




第9回

Webサイトの構築準備

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

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

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


今後の日程

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

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


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

記事の分類方法.png

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

要確認


第8回

はじめに

CSSによるレイアウトIII

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

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


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

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

#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回

はじめに

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

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

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

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

sample_01, sample_02, sample_03・・・・


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

CSSを書く順序

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

第6回

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

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

以下、標準的な構造です。はじめに新規のフォルダを作って、以下のソースを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 に書いて保存してください。

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


レイアウトに使える単位

ボックスモデルについて

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

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

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

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



第5回

CSSの利用

CSSの基本的な書き方

文字色と背景色

補足


注意

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

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




第4回

はじめに

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

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

補足


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

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




第3回

事務連絡

はじめに

リンク|<A>

前回は1つのページ(index.html)のみで表示を確認しましたが、今回は、他のWebサイトへのジャンプ、また、サイト内の別のページへのジャンプなどをアンカータグ(<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>


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




第2回

前回の確認

サイトフォルダの準備

around

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

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

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

エディタの操作について

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

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

基本のタグ

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

画像の配置

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

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

SiteBackup.png

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

第1回

ガイダンス

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

ですが・・・

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

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

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

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

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

HTMLでページを作成

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

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

その他 確認事項

(以下、準備中)


PAGES

GUIDE

DATA


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