WebDesign/速習入門講座のバックアップ(No.1)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
WebDesign/速習入門講座へ行く。
- 1 (2020-02-02 (日) 18:20:21)

Webデザイン入門

大学院生のための速習講座

Webの技術は、対外向けの情報発信のみならず、組織内部の情報共有、個人的なノートとして、さらにプレゼンテーションツールとしても活用できます。
ここでは、Web標準技術としてのHTMLとCSSを用いたWebページの制作体験を行います。制作からアップロードまで、すべてオープンソースのフリーソフトウエア( Win / Mac 対応 )を利用しますので、経費の負担なく、各自の研究室のPCで学習を継続することができます。

↑

はじめに
- 開発環境の準備
- サイトフォルダの準備
HTML
CSS
ファイルのアップロードについて
最後に

↑

はじめに

↑

開発環境の準備

作るソフト　TextEditor ＞ Atom
ただ単に文字を入力・編集する・・プログラミングに用いる最もシンプルなソフトウエアがテキストエディタです。これで作成した文字が並んだだけのデータファイルを「テキストファイル」といいますが、Webデザインで扱うのは大半がこのテキストファイルなので、特別なソフトは不要です*1。
見るソフト　Browser ＞ Firefox , Chrome
転送するソフト　FTP ＞ FileZilla

↑

サイトフォルダの準備

一般にWebサイトは複数のファイルから構成されます。はじめにWebサイト用のフォルダを作り、関連するファイルを、すべてそのフォルダで管理するようにします。
1ページ = 1ファイル（〜.html）が基本です。
写真やイラストなどの画像は imagesフォルダで管理します。

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

↑

HTML

↑

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をブラウザで表示確認

index.html をブラウザへドラッグ＆ドロップするだけで表示されます。

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

見出しや文章を適当に書き変えて「保存」してみて下さい。ブラウザの「更新」を行うと、変更が反映されることがわかります。

↑

HTMLタグの基本

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

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

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

HTML文書：<html> 〜 </html>
ヘッドとボディー　※HTMLは２つの部分から構成されます。
- ページに関する前置き情報：<head> 〜 </head>
- ブラウザの主画面に表示される情報：<body> 〜 </body>

セクション　※紙面を構成する大きな枠組みを定義するのに用います。
- 汎用区画：div, article, aside, section
- ヘッダー：header
- フッター：footer
- ナビ：nav

見出し：h1　※ h1 から h6 まで６段階あります

文章段落：p

リンク：a　※以下の２種類の使い方があります。
- 内部リンク（サイト内にある別のhtmlファイルへのリンク）
```
<a href="gallery.html">（リンク文字、画像）</a>
```
- 外部リンク（外部サイトへのリンク）
```
<a href="http://www.abc.com">（リンク文字、画像）</a>
```

箇条書き： <ul>と<li>　※以下、サイトナビの書き方の例。

<ul>
      <li><a href="index.html">home</a></li>
      <li><a href="gallery.html">gallery</a></li>
      <li><a href="links.html">links</a></li>
      <li><a href="about.html">about</a></li>
 </ul>

メディア：img, audio, videoなど
- 画像の配置：img
```
 <img src="images/sample.jpg" width="320">
```
  画像はWebに最適なサイズにリサイズ　＞　参考：WebDesign/Images
- 動画の配置：video
```
 <video src="movies/sample.mp4" width="320"></video>
```

その他
- 強制改行：br
- 水平線：hr

↑

参考

HTML5 Semantic の基本形：GoogleImage:HTML5 Semantic

きれいなソースコードを書くために・・・
- TAB,半角スペースでインデントをとってHTMLを見やすくしましょう。
- TAB,半角スペースは表示上は無視されます。
- 要素間の「余白」は後に学習するCSSでコントロールします。
  全角スペースの利用は様々なトラブルのもとになるので、避けましょう。

様々なコンテンツの埋め込み
- YouTube動画の埋め込み　<IFRAME>
  YouTubeのサイトには「共有」>「埋め込みコード」があります。
  それ(以下例)を<body>内にコピー＆ペーストすれば表示されます。
```
<iframe width="420" height="315"
       src="http://www.youtube.com/embed/[動画個別の記号]"
       frameborder="0" allowfullscreen></iframe>
```
- GoogleMapの埋め込み　→　Googleマップ＞リンク＞埋め込みコード
- その他、Twitterのタイムラインの埋め込みなども試してみて下さい。

↑

CSS

↑

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 li {
  margin-right: 2rem;
}

nav a {
  color: white;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

section {
  flex: 3;
  padding: 3rem;
  background: #EEE;
}

article {
  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>内に、以下の１行を追記して下さい。

<link rel="stylesheet" type="text/css"  href="style.css">

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

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

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

↑

CSSの記法

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

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

HTML内の特定の要素をセレクタで把握し、その要素をどう表示したいか、指示を列挙する・・というのがCSSの基本的な書き方です。
　セレクタとしては、タグ名を使うのが最もシンプルですが、特定の１要素のみに適用したい場合は、id="任意の名称"、いくつかの要素にまとめて適用したい場合は、class="任意の名称" など、開発者が任意の名前を与えて、その名前を使って制御する・・という方法を採ります。

セレクタが既存のタグの場合
＜body＞や＜h1＞など、タグ要素に対してスタイルを定義する場合
```
article  {
     background-color : gray;
}
```
タグ要素の中のタグ要素にスタイルを定義する場合
```
article p {
    line-height : 180%;
}
```

セレクタが ID 要素(ページ内に１つ)の場合（例：<div id="sideBar"> ）
```
#sideBar {
     background-color : white;
}
```

セレクタが CLASS 要素(ページ内に複数)の場合（例：<p class="column"> ）
```
.column {
     background-color : gray;
}
```

その他の様々なセレクタの書き方　＞　CSS/Selector

参考：コメントアウトについて
```
/*  color: red;    */
```
のように　/* と */　で一定範囲を囲むと、コメント扱いとなります。
後で使う可能性のある記述を一時機能停止させたい場合にも使えます。

↑

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

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

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

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

↑

ボックスモデルを理解する

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

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

↑

ユニバーサルセレクタ

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

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

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

↑

flexboxを用いたレイアウト

親要素(Flexコンテナ) に display: flex; を設定することで、子要素(Flexアイテム) の並び(縦・横)や順序(上下・左右)を制御する方法です。例えば、親要素に対して、display: flex; flex-direction: row; と書くと、子要素は横に並びます。
以下、メニューを横に並べる事例です。

HTML側の記述

<ul>
  <li><a href="#">about</a></li>
  <li><a href="#">gallery</a></li>
  <li><a href="#">links</a></li> 
</ul>

CSS側の記述

ul {
  display: flex;
  flex-direction: row;
}
li {
  width: 120px;
  margin-right: 20px;
}

詳しくは、CSS/Flexboxをご覧下さい。

↑

floatを用いたレイアウト

上記 flexbox 仕様の登場で、あまり使用されなくなりました。

特定のブロック（箱）のCSSに float を書き加えると、ブロックは左に（右に）回り込みながら、詰め込まれていきます。連続するfloat要素はスペースに余裕のあるかぎり、左（右）へ回り込んで、横に並びます。
```
float : left;　（ float : right; ）
```

ただし、回り込みは一旦定義すると、左右に余白がある限り、その後の要素も自動的に回り込んでしまうので、これ以上は回り込みさせたくない…という次の要素のところで回り込みをストップさせる必要があります。その場合は、回り込み設定の「解除」という意味で、
```
clear : both;　（clear : left; 　clear : right; ）
```
と書きます。

↑

positionを用いたレイアウト

floatを用いた「箱詰め作業」では、スペースに余裕がなければ収まりません。しかし、スペースの有無に関わらず、「絶対的にこの場所に表示したい」というケースもあります。そのような場合に使えるのが、positionというプロパティーです。これを使うと、任意のブロックを基準にして、その左上を原点とした座標で、配置したいブロックの位置を指定することができます。

位置の基準となるブロック（一般的には #container）に
```
position:relative;
```
と書きます。これで基準となるブロックの左上が原点（0,0）となります。

対象となるブロックに
```
position:absolute;
top: Ypx;
left: Xpx;
```
と書きます。これで当該ブロックは（X,Y）の位置に表示されます。

↑

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

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

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

参考：テンプレート　http://www.oswd.org/designs/browse/

↑

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

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

FTPクライアントソフト(FileZilla)を起動。
FTPサーバー（ホスト名）、ユーザID、パスワードの３つを入力して接続
一般的にはウインドウの左側があなたのPC（ローカルマシン）、右側が接続先サーバー（リモートサーバー）です。
左のウインドウから右のウインドウへ「アップロード」します*2。

アップロードの仕方とアクセス方法は以下ような関係があります。
- ドキュメントルート直下の index.html(トップページ) を閲覧する場合
```
http://xxxxxxxx.com/
```
- ドキュメントルート直下の test.html を閲覧する場合
```
http://xxxxxxxx.com/test.html
```
- ドキュメントルート直下にsampleフォルダ(中にindex.html)がある場合
```
http://xxxxxxxx.com/sample/
```

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

↑

最後に

Webサイトはオープンなソースコードでできているので、ブラウザ上で
```
右クリック ＞ ページのソースを表示
```
とすると、そのページのHTMLソースを見ることができます。また、ヘッダー部分にあるCSSファイルへのリンク辿ればCSSのソースを見ることもできます。あらゆるサイトをページ作りのお手本として参考にすることができるので、是非ブラウザを活用してみてください。

本講習では、HTML+CSS のみでWebページをつくる演習を行いましたが、さらにインタラクティブなWebページをつくるには、JavaScript、PHPといった言語を使用することになります。以下のページに関連する言語等についての各種概説へのリンクがありますのでご参考下さい。＞　WebDesign

WebDesign/速習入門講座 のバックアップ(No.1)