大学院生のための速習講座
Webの技術は、対外向けの情報発信のみならず、組織内部の情報共有、個人的なノートとして、さらにプレゼンテーションツールとしても活用できます。
ここでは、Web標準技術としてのHTMLとCSSを用いたWebページの制作体験を行います。制作からアップロードまで、すべてオープンソースのフリーソフトウエア( Win / Mac 対応 )を利用しますので、経費の負担なく、各自の研究室のPCで学習を継続することができます。
注)フォルダ名、ファイル名は必ず半角英数で
images page01.html page-01.html page_01.html logoMark.jpg など、
Webサイトを構成するフォルダやファイルの名称は、すべて英字ではじまる半角英数で命名します。日本語や特殊記号、またスペースも不可です。
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は、情報要素を以下のようなタグでくくる形で記述します。
<◯◯> 〜 </◯◯> ← 前者を開始タグ、後者を終了タグといいます。
以下、基本的なものを列挙します。 > 詳しくはこちら
<a href="gallery.html">(リンク文字、画像)</a>
<a href="http://www.abc.com">(リンク文字、画像)</a>
<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 src="images/sample.jpg" width="320">画像はWebに最適なサイズにリサイズ > 参考:WebDesign/Images
<video src="movies/sample.mp4" width="320"></video>
<iframe width="420" height="315" src="http://www.youtube.com/embed/[動画個別の記号]" frameborder="0" allowfullscreen></iframe>
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; }
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ではどの部分の・何を・どうするかを記述します。
記述の基本ルールは以下のとおりです。
セレクタ(どの部分の) { プロパティー(何を) : 値(どうする) ; プロパティー(何を) : 値(どうする) ; : }
HTML内の特定の要素をセレクタで把握し、その要素をどう表示したいか、指示を列挙する・・というのがCSSの基本的な書き方です。
セレクタとしては、タグ名を使うのが最もシンプルですが、特定の1要素のみに適用したい場合は、id="任意の名称"、いくつかの要素にまとめて適用したい場合は、class="任意の名称" など、開発者が任意の名前を与えて、その名前を使って制御する・・という方法を採ります。
article { background-color : gray; }タグ要素の中のタグ要素にスタイルを定義する場合
article p { line-height : 180%; }
#sideBar { background-color : white; }
.column { background-color : gray; }
/* color: red; */のように /* と */ で一定範囲を囲むと、コメント扱いとなります。
CSSによるレイアウト作業は、大きな箱の中に小さな箱を詰めていく作業と考えるとイメージしやすいでしょう。一般的には、container という外箱の中に、header 、navといった名前の内箱を順に詰め込んでいくことになります。
箱は、入れ子状に詰めるのが基本です。外の箱と中の箱が錯綜するような記述をするとレイアウトは正しく表示されないので、ソースコードを書く際は、きちんとインデントをとってわかりやすく書くことをお勧めします。
参考:ZENGARDEN
ZENGARDENは、すべてまったく同じHTMLに対し、CSSの差し替えのみで様々なビジュアルが実現できることを示す事例集です。
箱組みをする際には、どこにどのような余白をつくるかが非常に重要です。以下のプロパティーについての理解が必要です。
ユニバーサルセレクタ( * )を使うと、すべての要素に一斉制御が可能です。
CSSによる精密なレイアウトコントロールの際は、CSSの先頭で、以下のような「リセット」を行うのが一般的です。
* { margin: 0; padding: 0; line-height: 100%; list-style-type: none; text-decoration: none; }
この例では、すべての要素に対して余白をゼロに、また、余計な装飾を「無し」にリセットしています。
親要素(Flexコンテナ) に display: flex; を設定することで、子要素(Flexアイテム) の並び(縦・横)や順序(上下・左右)を制御する方法です。例えば、親要素に対して、display: flex; flex-direction: row; と書くと、子要素は横に並びます。
以下、メニューを横に並べる事例です。
<ul> <li><a href="#">about</a></li> <li><a href="#">gallery</a></li> <li><a href="#">links</a></li> </ul>
ul { display: flex; flex-direction: row; } li { width: 120px; margin-right: 20px; }
詳しくは、CSS/Flexboxをご覧下さい。
上記 flexbox 仕様の登場で、あまり使用されなくなりました。
float : left; ( float : right; )
clear : both; (clear : left; clear : right; )と書きます。
floatを用いた「箱詰め作業」では、スペースに余裕がなければ収まりません。しかし、スペースの有無に関わらず、「絶対的にこの場所に表示したい」というケースもあります。そのような場合に使えるのが、positionというプロパティーです。これを使うと、任意のブロックを基準にして、その左上を原点とした座標で、配置したいブロックの位置を指定することができます。
position:relative;と書きます。これで基準となるブロックの左上が原点(0,0)となります。
position:absolute; top: Ypx; left: Xpx;と書きます。これで当該ブロックは(X,Y)の位置に表示されます。
index.html と style.css のセットは、いわばページのテンプレート(ひな形)です。実際のWebデザインでは、ここまでの作業に多くの時間をかけます。
gallery.html や links.html など、新しいページは、index.htmlを複製して、主たる記事の部分の部分だけを書き換える・・という単純な作業となります。
作成したファイル(群)は、Webサーバーにアップして「公開」となります。
詳しくはこちら};
http://xxxxxxxx.com/
http://xxxxxxxx.com/test.html
http://xxxxxxxx.com/sample/
つまり、サーバー(ディレクトリ)がひとつあれば、フォルダの数の分だけ複数のWebサイトを持つことができる…ということになります。
右クリック > ページのソースを表示とすると、そのページのHTMLソースを見ることができます。また、ヘッダー部分にあるCSSファイルへのリンク辿ればCSSのソースを見ることもできます。あらゆるサイトをページ作りのお手本として参考にすることができるので、是非ブラウザを活用してみてください。