ウェブページ作成 もくじ

左側がテキスト、右側が参考資料です。
インターネットエクスプローラではスタイルシートの解釈が正しくないのでレイアウトが乱たり表示されないものがあったりします。特にこのページはひどいです。Firefoxでご覧になることをお勧めします。Firefoxではこのように見えるもご覧ください。

このテキストの改訂版があります。2008年度版

基本

1.準備

2.とりあえず作る

3.使ったタグの解説

4.文字で構成する

5.せめて色をつけよう

6.色指定のしかた

a.ウェブページ/ホームページ

b.K2Editorの保存の仕方

c.タグと全体の構造

d.既出タグ一覧

e.薄い色と灰色のカラーコード

f.色の見本表

1.ページを公開する

2.リンク

a.よくある間違い

スタイル

1.ブロックと余白

2.段落の整形

3.一部の強調

4.クラス属性

5.SPANを駆使する

6.リンクに加える

a.スタイルの一覧

画像

1.画像のあるページ

2.絵を公開する

3.小さな画像

4.pngに変換する

5.小さな画像を使う課題

6.jpg と png と gif

7.透過画像

8.文章中の画像

a.img タグに大きさも記入しよう

b.htmlファイルと画像ファイルの関係

c.jpg にするか png にするか

d.小画像と文字の縦位置を合わせる

e.透過画像の周りが白い?

f.αチャンネル(不透明度)による透過

g.float画像と文字の間に隙間がほしい

リンク2

1.リンクの文字色

2.リンクに画像

a.リンクの設計

b.少々複雑なリンク

文書型宣言など

1.文書型宣言

2.文字符号化方法

a.拡張機能インストール

背景・ブロックの背景・枠

1.背景に画像

2.背景のテクニック

3.ブロックの背景

4.ブロックの枠

a.背景画像の配置

リストとテーブル

1.リスト

2.テーブル

3.テーブルヘッダ

4.複数の表に別々の見栄え

5.幅の指定

6.高さの指定

7.配置

8.スタイルシートで整形

a.ulやolはmarginとpaddingをセットで

b.表の枠のいろいろ

c.table tr のプロパティ

メッセージ

1.読者からメッセージを

2.選択してもらう

a.メールとmailto:

レイアウト

1.スタイルシートでレイアウト

2.レイアウト例

3.レイアウトのための元データ

4.レイアウト解説

a.widthとmargin

著作権など

1.こんなのは困る?

2.みんなの考え

3.著作権

a.こんなときは?

総合演習と動きのあるページ

0.総合演習

1.別のウインドウに

2.自動的に移動

3.動きのあるページ

4.クリックで切替

5.マウスが来たら

6.アニメーション

a.スムーズに動かす

b.アニメーション応用


聖愛高等学校
http://www.seiai.ed.jp/