LogoMark.png

Webデザイン/2019

Whiteboard

Webデザイン|造形短期大学部 2年次| 火曜3限 デジタルアトリエ2
Webデザイン/受講生2019


成績評価について

FTP接続情報

第15回


第14回

サイト制作

各自、サイトの制作を行ってください。個別に質問に対応します。

次回、成果発表について

成績評価は前期末試験期間中に行います


掲載画像について

ギャラリーサイトに「重い」画像を置くと通信負荷が大きくなります。以下のページを再度ご確認ください。この点への配慮は重要です。

FontAwasomeの活用について

Googleフォームの利用

Googleアカウントの利用後は、ログアウトをお忘れなく。


第13回

サイト制作に関わる前提の確認


テンプレート(index.html + style.css)の作成について

レンタルサーバーについて


オーサリングツールについて

テンプレート制作までは、テキストエディタでソースコードを丁寧に書くことが大切ですが、その後の展開で個別のページ記事を作成する作業レベルでは、WYSIWYGで制作ができるオーサリングツールを利用することで効率をあげることができます。




第12回

はじめに

今回から最終回までを各自のサイト制作の設計期間とします。
随時サーバーにアップして動作確認しながら進めて下さい。

サイトの制作にあたって

はじめに、Web制作のワークフローをご覧下さい。
以下の流れに沿って作業を進めます

第11回

jQueryプラグイン

jQueryプラグインとは、jQueryの拡張機能のことで、例えば、複数の画像をスライドさせるカルーセル、クリックで拡大するLIghtBoxなど、様々なものがあります。Webからダウンロードして組み込むだけで導入が可能です。以下、各種プラグインを紹介しています。

事例紹介 BxSlider DEMO

公式サイト:http://bxslider.com/

第10回

はじめに

第9回 JavaScript / jQuery入門

JavaScriptは、数あるプログラミング言語の中で注目度の高い存在です。
参考:The RedMonk Programming Language Rankings

はじめに

JavaScriptの文法を理解した上でサイトの動的な演出を実現するには多くの学習時間を要します。そこでこの授業では JavaScript についての概説のみ行い、実際の作業には、それを簡単な記述で実現できる jQueryを用います。

jQueryとは

jQueryは事実上標準の JavaScriptライブラリーです。ライブラリ(Library)とは、汎用性の高い複数のプログラムを、再利用可能な形でひとまとまりにしたもので、ライブラリーを活用すると、シンプルな記述で高度な機能を使うことができるようになります。ここでは、HTMLやCSSの動的な変更、イベント処理等について概説します。

第8回

レスポンシブデザイン

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

別ページで解説していますので、以下を御覧ください。
ResponsiveDesign

Webフォントについて

第7回

様々なレイアウトの手法

補足解説:positionを使ったレイアウト

position を用ると、より自由度の高いレイアウトが可能になります。

ロゴマークなどの特殊な要素を、ページ上の特定の座標に固定したい場合、
positionプロパティーを用います。これを使ってレイアウトを行うには、
1)座標の基準を決める。という作業と、2)その基準を原点とした配置座標を決める。という2つの作業が必要になります。以下、例です。




第6回

様々なレイアウトパターン

HTMLのワイヤーフレームには様々なパターンがあり、どのようなパターンであれ、CSSによって事後にレイアウトを変更することは可能ですが、構築の順序としては、HTMLの構造をまず先に決めてから、後にCSSでビジュアルをデザインするのが一般的です。
 作り込みはじめる前に、ポートフォリオサイトの最終形をイメージして、最も適したパターンを選ぶようにして下さい。

レイアウト作業における注意点

第5回

CSSによるレイアウト

html_css.png

CSSによるレイアウト作業は、大きな箱の中に小さな箱を詰めていく作業と考えるとイメージしやすいでしょう。一般的には、container という大きな箱の中に、header や nav、main、section、aside といった名前の箱を、さらにその中に li や p といったBOX要素を順につめていくことになります。箱は、入れ子状に詰めるのが基本です。外の箱と中の箱が錯綜するような記述をするとレイアウトは正しく表示させないので、ソースコードを書く際は、きちんとインデントをとってわかりやすく書くことが必要です。


ブロックとインライン

boxModel.png

ボックスモデルを理解する(重要)

箱組みをする際には、どこにどのような
余白をつくるかが非常に重要です。
以下のプロパティーについては
確実に理解して使いましょう。

ユニバーサルセレクタ  *(アスタリスク)

ユニバーサルセレクタを使うと、すべての要素に一斉制御が可能です。
CSSによる精密なレイアウトコントロールの際は、CSSの先頭で、以下のような「リセット」を行うのが一般的です。

* {
    margin: 0;
    padding: 0;
    line-height: 100%;
    list-style-type: none;
    text-decoration: none;
}

この例では、すべての要素に対して余白をゼロに、また
余計な装飾を「無し」にリセットしています。

サイズの単位について

Webサイト上の大きさを指定するには、画面サイズに対して最も直接的な pxの他に、%、em、rem といった単位が存在します。




第4回

CSSの利用

CSS(Cascading Style Sheets)とは、HTMLで記述された文書内の各要素のビジュアルに関する仕様(書)を意味します。CSSを記述することにより、ページのレイアウト(各要素の配置)、文字の種類・サイズ・色、また背景色・背景画像といった、ビジュアルに関する細かな設定が可能になります。

スタイルシートファイルの作成

ページのビジュアルデザインに関する情報、つまりレイアウトや文字のサイズ・色・背景といった情報は、スタイルシートに記述します。

body {
    background-color: silver;
}
h1 {
    background-color: black;
    color: silver;
}
a {
    color: red;
    text-decoration: none;
}

 

CSSの基本的な書き方

セレクタ、プロパティ、値 ・・・ルールは以下のとおり。
コロン(:)とセミコロン(;)を間違えないようにご注意下さい。

セレクタ {
   プロパティー : 値 ;
          :
}


色・背景を変えてみる

タグを利用したデザイン定義

<body>や<h1>など、タグ要素に対してスタイルを定義する場合

h1 {
     background-color : gray;
}


タグ内のタグに対する定義

例えば、<article>の内部にある<h1>タグにスタイルを定義する場合など、以下のように、半角スペースでつなぐことで相手を特定できます。
HTML側の記述

<article>
       <h1> ・・・ </h1>
       <p> ・・・・</p>
</article>

CSS側の記述

article h1{
       font-size: 20px;
}


ID と CLASS を利用したデザイン定義

HTMLには、書類上の場所を特定するために、IDとCLASSを自由に命名して記載することができます。これらを利用すると、任意の場所に対してデザインの定義が可能になります。

今後に向けて

第3回

FTPによるサイトのアップロードと公開

現状の website を学園サーバーにアップして動作確認を行います。
学生個々人にメールアドレスとホームページ作成用のエリアがすでに用意されています。外部への公開には申請が必要ですが、学内のネットワークからは、

http://www.kyusan-u.ac.jp/~ (あなたのユーザID)

というアドレスで閲覧可能です。

演習:ファイルのダウンロードリンク

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

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




第2回

はじめに

HTMLの基本構造

文書情報は一般に、ヘッダー、ナビゲーション、主たる記事、関連情報、フッターの順に整理されます。以下はその例です。参考

MY GALLERY ← ページタイトル|ヘッダー
・HOME ← ナビゲーション
・ABOUT
・GALLERY
・LINKS
お知らせ ← 主たる記事
 2019.04.26
  香椎浜の朝は・・・
 2019.04.19
  天神3丁目の交差点・・・
 2019.04.12
  香椎駅には・・・・
 :
おすすめサイト ← 関連情報
・Aさんのギャラリー
・Bさんのギャラリー
・Cさんの技法
(c) Zokei Hanako 2019 ← 署名|フッター


HTMLの基本構造 サンプル

上の情報をページの内容と想定して、これをタグで囲んでみたのが以下。

   <!DOCTYPE html>
   <html lang="ja">
       <head>
           <meta charset="UTF-8">
           <title>Sample Page</title>
       </head>
       <body>
           <header>
               <h1>MY GALLERY</h1>
               <nav>
                   ・HOME
                   ・ABOUT
                   ・GALLERY
                   ・LINKS
               </nav>
           </header>
           <main>
               <section>
                 <h1>お知らせ</h1>
                 <article>
                   <h1>2019.04.26</h1>
                   <p>香椎浜の朝は・・・</p>
                 </article>
                 <article>
                   <h1>2019.04.19</h1>
                   <p>天神3丁目の交差点・・・</p>
                 </article>
                 <article>
                   <h1>2019.04.12</h1>
                   <p>香椎駅には・・・・</p>
                 </article>
             </section>
             <aside>
               <h1>おすすめサイト</h1>
               <nav>
                   ・Aさんのギャラリー
                   ・Bさんのギャラリー
                   ・Cさんの技法
               </nav>
             </aside>
           </main>
           <footer>
               (c) Zokei Hanako 2019
           </footer>
       </body>
   </html>


セクションを意識したページづくり

Webページを作る際は、構成要素の内容を意味の単位に区切り、文書の骨格構造をしっかりと整理することが推奨されています。
 その際用いるのが、以下にあるセクションタグです。<a>タグのような特定の機能をもつわけではないので、見た目は変わらないのですが、CSSによるビジュアルの制御、また、他のアプリケーションが要素の内容を推理して活用するのに使われるなど、重要な役割を担っています。

画像や動画の配置

<A>タグによる様々なリンク

第1回

ガイダンス

情報公開の様々なかたち

学習のキーワード

開発環境の準備

サイトフォルダの準備

folder.jpg

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

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


はじめの1ページ

基本のタグについて

ソースコードの書き方について

文字化け対策

ソースコード内の悪者「全角スペース」を見つけるには

その他


以下、準備中

その他

HTML+CSS 制作中の確認事項

一般のWebサイト vs シングルページ

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

記事の分類方法.png

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

Webデザインの参考

以下、ほんの一例ですが・・・

twitterタイムラインの埋め込み

以下のページに解説されています。
https://dev.twitter.com/ja/web/embedded-timelines

Facebookタイムラインの埋め込み

画像データに含まれるExif情報 (個人情報が含まれる) について

こちらのページに記載しています。


補足:画像を使ったリンク

<map name="sample">
    <area shape="rect" coords="20,10,120,80" href="01.html">
    <area shape="circle" coords="200,100,40" href="02.html">
    <area shape="poly" coords="400,100,500,100,500,200,400,100" href="03.html" >
    <area shape="default" href="00.html">
</map>


CSSフレームワーク・テンプレート等について

CSS/Frameworkとは、HTMLソースにクラスを適用するなどの操作で、簡単に美麗なWebサイトを作れるようにしたもので、CSSやJSのファイルセットとして各公式サイトから配布されています。

以下、最近よく話題となるフレームワークを紹介します。

ガイドラインについて

その他

授業中によくある質問については、その都度以下のページに記載しています。







jQueryの導入で変更を要する点

現状では、style.css を index.html と同じ場所に置いていますが、各種プラグインの組み込みをする際は、それに合わせるかたちで、サイトフォルダ直下に [css] と [js] の2つのフォルダをつくって、それぞれに関連ファイルを整理することをお勧めします。その場合、<head>の記述は、以下のようになります。

<link rel="stylesheet" href="css/style.css">
<script src="js/sample.js"></script>


スタイルシートを CSSフォルダへ移動すると・・・

スタイルシートの位置を移動した場合、CSSファイルの中にも変更が必要な箇所がでてきます。典型が背景画像の相対アドレスの変更です。例えば以下のような階層構造の場合、style.css の位置からは images が見えないので、一旦上の階層に出てから images>back.gif と辿る必要があります。

で、CSSの記述を以下のように変更する必要があります。../という表記は「現在の場所からひとつ上の階層へ上がる」ことを意味します。

background-image: url(images/back.gif);
           ↓変更
background-image: url(../images/back.gif);


補足:ファイルへのパスについて

ディレクトリ階層を下ってフォルダの中へ入るには

 /

ディレクトリ階層を上がってフォルダの外へ出るには

 ../

例えば、Webサイトフォルダの中に css , images フォルダがそれぞれあって、cssフォルダの中の style.css が imagesフォルダの back.gif を参照する場合、style.cssの中では、

background-image : url(../images/back.gif);

などと書きます。
 これは、style.css から見て、一旦上のディレクトリに上がって、そこで見えるimagesフォルダの中の back.gif へアクセスする…という意味です。
 これまでの説明では、style.css はindex.htmlと同じ位置にありました。
その場合、imagesフォルダの中の back.gif を背景に指定するには

background-image : url(images/back.gif);

と書けばよかったのですが、style.css がcssフォルダに入っている場合は

background-image : url(../images/back.gif);

と書く必要があります。



PAGES

GUIDE

DATA


*1 以前はHTML要素自体にブロックレベル要素とインライン要素の区別がありましたが、HTML5では、この発想はなくなり、「デフォルトスタイルとしてのブロックとインラインがある」という考え方に変わりました。
*2 一般にWebページを作る際にはDreamweaverやホームページビルダーのようなWebオーサリングツールが必要なのではないか?という印象をお持ちの方も多いかと思いますが、それらは視覚的に組み上げられたページを描画するHTMLとCSSを自動生成するソフトで、結果的に出来上がるのはHTML、CSSなどのテキストファイルに過ぎません。HTMLとCSSの仕組みを理解した上で利用すれば格段に生産効率が上がりますが、基礎が無いとかえって混乱します。はじめのうちはHTMLとCSSを直接テキストエディタでコツコツ手入力することをお勧めします。
Last-modified: 2020-02-02 (日) 18:02:47