Webデザイン入門
HTML+CSS の速習講座
Webの技術は、対外向けの情報発信のみならず、組織内部の情報共有、個人的なノートとして、さらにプレゼンテーションツールとしても活用できます。
ここでは、Web標準技術としてのHTMLとCSSを用いたWebページの制作体験を行います。制作からアップロードまで、すべてオープンソースのフリーソフトウエア( Win / Mac 対応 )を利用しますので、経費の負担なく、各自の研究室のPCで学習を継続することができます。
CONTENTS
はじめに
開発環境の準備
- 作るソフト 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> © 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は2つの部分から構成されます。
- ページに関する前置き情報:<head> 〜 </head>
- ブラウザの主画面に表示される情報:<body> 〜 </body>
- セクション ※紙面を構成する大きな枠組みを定義するのに用います。
- 汎用区画:div, article, aside, section
- ヘッダー:header
- フッター:footer
- ナビ:nav
- 見出し:h1 ※ h1 から h6 まで6段階あります
- 文章段落:p
- リンク:a ※以下の2種類の使い方があります。
- 内部リンク(サイト内にある別のhtmlファイルへのリンク)
<a href="gallery.html">(リンク文字、画像)</a>
- 外部リンク(外部サイトへのリンク)
<a href="http://www.abc.com">(リンク文字、画像)</a>
- 内部リンク(サイト内にある別のhtmlファイルへのリンク)
- 箇条書き: <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>
- 画像の配置:img
- その他
- 強制改行: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のタイムラインの埋め込みなども試してみて下さい。
- YouTube動画の埋め込み <IFRAME>
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>内に、以下の1行を追記して下さい。
<link rel="stylesheet" type="text/css" href="style.css">
これで、CSSに書かれた内容が、ページのスタイルに反映します。
注)CSSを記述する方法は3つあります。
・ HTMLファイルに書かれた各タグの中に直接書く
・ HTMLファイルのヘッダー部分にまとめて書く
・ HTMLファイルとは独立した別のファイルに書く( 拡張子は .CSS )
で、結論から言うと、3つめを採用するのがWeb標準で、ここではそれにしたがって、style.css を別ファイルとして独立させています。
最初の index.html と この style.css を組み合わせた結果 → DEMO
CSSの記法
CSSではどの部分の・何を・どうするかを記述します。
記述の基本ルールは以下のとおりです。
セレクタ(どの部分の) { プロパティー(何を) : 値(どうする) ; プロパティー(何を) : 値(どうする) ; : }
HTML内の特定の要素をセレクタで把握し、その要素をどう表示したいか、指示を列挙する・・というのがCSSの基本的な書き方です。
セレクタとしては、タグ名を使うのが最もシンプルですが、特定の1要素のみに適用したい場合は、id="任意の名称"、いくつかの要素にまとめて適用したい場合は、class="任意の名称" など、開発者が任意の名前を与えて、その名前を使って制御する・・という方法を採ります。
- セレクタが既存のタグの場合
<body>や<h1>など、タグ要素に対してスタイルを定義する場合article { background-color : gray; }
タグ要素の中のタグ要素にスタイルを定義する場合article p { line-height : 180%; }
- セレクタが ID 要素(ページ内に1つ)の場合( 例:<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、パスワード の3つを入力して接続
- 一般的にはウインドウの左側があなたのPC(ローカルマシン)、右側が接続先サーバー(リモートサーバー)です。
- 左のウインドウから右のウインドウへ「アップロード」します*2。
- アップロードの仕方とアクセス方法は以下ような関係があります。
- ドキュメントルート直下の index.html(トップページ) を閲覧する場合
http://xxxxxxxx.com/
- ドキュメントルート直下の test.html を閲覧する場合
http://xxxxxxxx.com/test.html
- ドキュメントルート直下にsampleフォルダ(中にindex.html)がある場合
http://xxxxxxxx.com/sample/
- ドキュメントルート直下の index.html(トップページ) を閲覧する場合
つまり、サーバー(ディレクトリ)がひとつあれば、フォルダの数の分だけ複数のWebサイトを持つことができる…ということになります。
最後に
- Webサイトはオープンなソースコードでできているので、ブラウザ上で
右クリック > ページのソースを表示
とすると、そのページのHTMLソースを見ることができます。また、ヘッダー部分にあるCSSファイルへのリンク辿ればCSSのソースを見ることもできます。あらゆるサイトをページ作りのお手本として参考にすることができるので、是非ブラウザを活用してみてください。
- 本講習では、HTML+CSS のみでWebページをつくる演習を行いましたが、さらにインタラクティブなWebページをつくるには、JavaScript、PHPといった言語を使用することになります。以下のページに関連する言語等についての各種概説へのリンクがありますのでご参考下さい。> WebDesign