2020年ウェブサイト作成講習会
topへ
> テキスト
教材に「ぼくらのホームページ作成ノート」を使って勉強しています。
HTML5を使ったホームページ作成入門
ホームページに関する基礎知識
ホームページとは
Webブラウザとは
HTMLとは
スタイルシート(CSS)とは
ブログとは
文字コードと文字化けとは
ホームページの作り方
フォルダの作成とテキストエディタ
テキストで文章を入力
タグと要素
HTML文書の基本構造を設定
タイトルの設定
見出しの設定
段落の設定
DOCTYPE宣言とHTML構文のチェック
コメントの記述
特別な文字の記述(文字実体参照と数値文字参照)
要素の種類
ブロックレベル要素とインライン要素
種類毎の要素一覧
文章の作成
段落と改行
空白や改行をそのまま表示
他の文章を引用
強調表示
上付文字と下付文字
略語の表示
追加と削除の修正履歴
リンクの設定
a要素の使い方
同じ階層のページへリンク
下の階層のページへリンク
上の階層のページへリンク
他サイトへリンク
画像へのリンク設定
文書の中の特定の場所へリンク
画像の表示
img要素の使い方
画像の幅と高さ
画像と文字の位置関係
画像に対する文字の回りこみ
枠線の設定
イメージマップの使い方
イメージマップの作成
エリアの設定
エリアの記述順序と優先順位
リンクしないエリアの設定
リスト形式の表示
番号無しのリスト(ul要素とli要素)
番号付きのリスト(ol要素とli要素)
リスト項目に他のリスト
項目のマークや番号の種類を変更
定義リスト(dl要素とdt要素とdd要素)
テーブルを使った表の表示
table要素によるテーブル作成
テーブルにおける行(tr)とセル(td, th)
テーブルの幅の設定
セルの幅と高さの設定
セルの結合
ヘッダ(thead)/フッタ(tfoot)/本体(tbody)で行をグループ化
列をグループ化
複数の列をまとめて設定
セル内のデータ表示位置
テーブルの見出しと概要
フォームの使い方
フレームの利用
汎用要素と汎用属性
div要素
span要素
id属性とclass属性
HTML/XHTMLにおけるDOCTYPE宣言と表示モード
DTDの種類
DTD別のDOCTYPE宣言
Faviconの設定
Faviconで使用するアイコンの作成
HTML文書の設定
基本構造に関するタグ
ルート要素: <html>
文書の作成に関するタグ
見出し: <h1> ~<h6>
段落: <p>
整形済みテキスト: <pre>
スタイルシート入門
スタイルシートの基本
スタイルシートを使わなかった頃の方法
スタイルシートで見た目を記述
スタイルシート言語の指定
外部スタイルシートとして記述
style要素にスタイルシートを記述
style属性にスタイルシートを記述
CSSの基本書式(セレクタの指定方法)
基本書式
セレクタのグループ化
タイプセレクタ
子孫セレクタ
子供セレクタ
隣接兄弟セレクタ
クラスセレクタ
IDセレクタ
属性セレクタ
ユニバーサルセレクタ
擬似クラスと擬似要素
:link、:visited、:hover、:active擬似クラス
:focus擬似クラス
:first-child擬似クラス
:lang擬似クラス
:first-line、:first-letter擬似要素
::before、:after擬似要素
スタイルの継承
スタイルの継承
inheritによるプロパティの継承
スタイルシートの優先順位
ユーザースタイルシート
スタイルシートの優先順位
!importantによる優先度の変更
セレクタの記述方法による優先度
値の単位と記述方法
色の指定
キーワードを使った色の指定
標準16色とWebセーフカラー216色
CSSでの数値と単位
em単位
%単位
px単位
URIの指定
テキストプロパティ
文字の色の指定
文字の装飾
空白や改行の取り扱い
行揃えの指定(text-align)
文字間隔の指定(letter-spacing)
インデントの設定(text-indent)
行の高さの設定(line-height)
フォントプロパティ
フォントの種類(font-family)
フォントのサイズ(font-size)
フォントの太さ(font-weight)
ボックスプロパティ
内部領域の幅と高さの設定
パディングの設定(padding)
枠線の太さの設定(border-width)
枠線の色の設定(border-color)
枠線の種類の設定(border-style)
枠線の設定(border)
マージンの設定(margin)
背景プロパティ
背景色の設定(background-color)
背景画像の設定(background-image)
背景画像の繰り返しの設定(background-repeat)
背景画像の表示方式の設定(background-attachement)
背景画像の位置の設定(background-position)
背景の設定(background)
リストプロパティ
リストのマークの種類
リストのマークに画像を使用(list-style-image)
リストのマークの位置(list-style-position)
リストのマークの設定(list-style)
マークに画像を使用する際の別の方法
表現方法プロパティ
表示形式の変更
表示・非表示の指定(visibility)
ボックス内に表示できない場合の処理(overflow)
回り込みの設定(float)
回り込みの解除(clear)
戻る