LogoMark.png

実技講習｜HTML＋CSS のバックアップ(No.1)

HTML + CSS

はじめてのWebデザイン

html_css.png

Webの技術は対外向けの情報発信のみならず、組織内の情報共有、個人の情報管理ツールとして、さらにオフィス、グラフィック、音楽、ゲームなど様々なアプリケーションの開発にも応用できます。
　Webを支える技術には、HTML, CSS, JavaScript, PHP といった代表的な言語が存在しますが、本講習では、Web標準技術としてのHTMLとCSSを用いたWebページの制作体験を行います。

↑

CONTENTS




↑

はじめに

↑

機器操作について

Macの実習室での作業となります。基本的な操作について確認します。
WebDesign/BasicOperations

↑

前提の理解


↑

開発環境の準備

Webデザインには以下の３種類のソフトウエアが必要です。いずれもオープンソースのフリーソフトウエアなので、金銭的な負担は一切ありません。PCが一台あれば、誰でもすぐにはじめることができます。


↑

サイトフォルダの準備

folder.jpg

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




↑

HTML

↑

HTMLとは

HTML（HyperText Markup Language）とは、ページの内容を記述するためのマークアップ言語です。文章や画像はもちろん、リスト表記や表組み、他のドキュメントへのハイパーリンクも設定できます。
　HTMLファイルは、ごく普通のテキストファイル（文字が並んだだけのもの）なので、テキストエディタ（メモ帳のようなもの）で書いて、保存するだけで完成します。

↑

HTMLファイルの作成

以下を index.html という名前で、作業用フォルダに保存して下さい。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Sample Site</title>
</head>

<body>

  <div id="container">

    <header>
      <h1>Sample Page</h1>
    </header>
 
    <nav>
      <ul>
        <li><a href="index.html">home</a></li>
        <li><a href="about.html">about</a></li>
        <li><a href="gallery.html">gallery</a></li>
        <li><a href="links.html">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ファイル（index.html）は、ブラウザのウインドウにドラッグ＆ドロップするだけで表示されるので、記述に間違いがないかを簡単に確認できます。


↑

HTMLタグの基本

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

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

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


↑

参考

↑

CSS

↑

CSSとは

CSS（Cascading Style Sheets）は、表示された要素のビジュアルを定義するためのものです。文書というものは、タイトル、見出し、本文、箇条書きなど、いくつかの要素に分けることができますが、その場しのぎにフォントや文字サイズを変更していたのでは、まとまりのない書類になってしまいます。そこで、「見出しは12ptでゴシック体」、「本文は10.5ポイントで明朝体」などとルールを決めて、文書全体を通じて共通にルールを適用させるというのが賢いやりかたです。このルール決めのことを「スタイル定義」といいます。

↑

３種類の記述方法

↑

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-direction: row;
}
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>内に、以下の１行を追記して下さい。

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

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

↑

CSSの記法

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

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

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

付記：親要素 / 子孫要素
階層構造をもつ文書において対象を特定する際に頻出するキーワードです。外側の要素を親要素、中に囲まれている要素を子要素といいます。

<div>　← 親要素
  <p> ・・・ </p>　← 子要素
  <p>　← 子要素
      <span>・・・</span> 　← 孫要素
  </p>
  <p> ・・・ </p>　← 子要素
</div>


↑

CSSセレクタ

セレクタには、タグ名、ID名、CLASS名 などが使えます。タグ名を使ってスタイルを適用する、つまり「同じタグ名の要素は、すべて同じスタイルになる」というのが最もシンプルですが、同一のタグであっても、それが置かれた場所によってスタイルを区別したい・・ということが当然あります。その場合は、開発者が要素に任意の名前を与えて、その名前を使ってスタイルを制御します。ページ内に１つだけ存在する特定の要素にのみデザインを適用したい場合は、ID名 を利用し、ページ内に複数存在する要素に一括して同じデザインを適用したい場合は、CLASS名 を利用します。
　以下、対象を特定するための代表的な方法を紹介します。

↑

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

html_css.png

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

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


↑

ワイヤーフレームを描く

ワイヤーフレームとは、HTMLの枠組み構造を図解した「サイト設計図」です。HTML+CSSを効率よくコーディングするには、まずはじめにワイヤーフレームを描いて、header, nav, main {section+aside} , footer などの位置関係を明確にしましょう。詳細な領域区分をする場合、各要素 ID名を付ける場合は、この段階で明確にします。
GoogleImage:Web ワイヤーフレーム


boxModel.png
↑

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

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

参考:CSS/BoxModel


↑

ユニバーサルセレクタによる余白のリセット

ブラウザにはデフォルトCSSというものがあって、特に指定のない要素には自動的に margin, padding また line-height が適用されます。これは、デザイナーが精密な位置調整を行う場合に邪魔になるので、すべての要素に対して「余白のリセット」を行った上で、後に各々に余白の定義をするのが一般的です。
　ユニバーサルセレクタ（ * ）を使うと、すべての要素に一斉制御が可能になります。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; と書くと、子要素は横に並びます。
以下、メニューを横に並べる事例です。

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


↑

positionを用いたレイアウト

通常の「箱詰め作業」では、要素同士が重なるような配置はできません。しかし、「絶対的にこの場所に表示したい」というケースもあります。そのような場合に使えるのが、positionというプロパティーです。これを使うと、任意のブロックを基準にして、その左上を原点とした座標で、配置したいブロックの位置を指定することができます。


↑

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

html_css_2.png

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

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




↑

演習

サンプルのHTML構造を変えて（ワイヤーフレーム構造を変えて）様々なパターンサンプルを作ってみましょう。

↑

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

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

↑

FTPクライアント

ファイルをサーバーにアップロードするにはFTPクライアント（ソフト）が必要です。各オーサリングソフトにもサイトマネージャがありますが、サイトまるごとアップという場合は、やはり専用のFTPクライアントがいいでしょう。

FileZilla.png
↑

大学のサーバーにアップロード

学生個々人にメールアドレスとホームページ作成用のエリアがすでに用意されています。外部への公開には申請が必要ですが、学内のネットワークからは、以下のアドレスで閲覧可能です。

http://www.kyusan-u.ac.jp/~k19asXXX