LogoMark.png

WebDesign/速習入門講座

Webデザイン入門

HTML+CSS の速習講座

html_css.png

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


↑

CONTENTS



　

↑

はじめに


↑

開発環境の準備

↑

サイトフォルダの準備

folder.jpg

注）フォルダ名、ファイル名は必ず半角英数で
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をブラウザで表示確認

↑

HTMLタグの基本

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

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

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

↑

参考

↑

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="任意の名称" など、開発者が任意の名前を与えて、その名前を使って制御する・・という方法を採ります。

↑

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

html_css.png

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

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

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




boxModel.png
↑

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

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

↑

ユニバーサルセレクタ

ユニバーサルセレクタ（ * ）を使うと、すべての要素に一斉制御が可能です。
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; と書くと、子要素は横に並びます。
以下、メニューを横に並べる事例です。

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



↑

floatを用いたレイアウト

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

↑

positionを用いたレイアウト

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

↑

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

html_css_2.png

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

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


↑

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

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

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



↑

最後に


PAGES

↑

GUIDE

↑

DATA

*1 補足：Dreamweaverやホームページビルダーの利用について
一般にWebページを作る際にはDreamweaverやホームページビルダーのようなWebオーサリングツールが必要なのではないか？という印象をお持ちの方も多いかと思いますが、HTMLもCSSもJavaScriptもすべてテキストファイルなので、テキストエディタさえあれば他には何もいりません。
これらはワープロ感覚で組み上げたページから自動的にHTMLとCSSを書き出すソフトで、HTMLとCSSの仕組みを理解した上で利用すれば格段に生産効率が上がりますが、はじめのうちはHTMLとCSSを直接テキストエディタでコツコツ手入力することをお勧めします。
*2 FileZiilaはドラッグ＆ドロップにも対応しているので、フォルダを掴んで、ターゲットディレクトリにドラッグ＆ドロップするだけで完了します。
Last-modified: 2022-11-25 (金) 10:50:34