HTML サンプル
JavaScript の話は JavaScript 目次 へ。
最近の更新・
サイトマップ
- 04/13 a タグ: ページ内へのリンク
- 04/01 要素の大きさ
- 04/01 要素の余白
- 04/01 要素の大きさを画面に合わせて変える
- 04/01 CSS resize: 要素の大きさを手動操作で変更する
- 03/15 HTML をワープロ代わりに使う
HTML のサンプル
HTML はじめの一歩
- HTML はじめの一歩
- HTML のひな形
- HTML の用語 - タグ、要素など
- HTML を編集してシミュレーション
- 文章レイアウトとフォント
- 箇条書き、目次、表など
- HTML をワープロ代わりに使う
- テキストと画像を並べる
- ページのレイアウト
- 要素の配置,左右中央,上下中央
- HTML をドローソフト代わりに使う
HTML 次の一歩
HTML タグ (基本的)
- a タグ - リンク
a タグ: ページ内へのリンク - span タグ
汎用のインライン要素 - p タグ - 段落
- img タグ (1) - 画像の表示
img タグ (2) - 画像を並べる
img タグ JavaScript - figure タグ
キャプション付きの図 - div タグ - 汎用のブロック要素
div タグ JavaScript - ul タグ, ol タグ, li タグ
リスト、箇条書き
ul, ol, li タグ: JavaScript - dl タグ, dt タグ, dd タグ
用語と説明 - table タグ (1) - テーブル、表
table タグ (2)
table タグ JavaScript - fieldset タグ
要素のグループ化 - details タグ, summary タグ
詳細説明の表示・非表示 - iframe タグ
内部フレーム
HTML タグ (応用)
- JavaScript: HTML タグと CSS
button, input, select, textarea, dialog, svg, canvas など。 - その他のタグ
- table と div を組み合わせる
- ユーザー定義の要素を使う
CSS のサンプル
基本的な話
- display: inline, block など
インライン要素、ブロック要素などの話
要素の大きさ
- 要素の大きさ - width, height
- 要素の余白 - padding, margin
- 要素の大きさを画面に合わせて変える
- 要素の大きさを手動操作で変更する
resize など - スクロール
要素の表示・非表示
要素の配置方法
- 要素の配置: ブロック要素
- 要素の配置: 左右中央,上下中央
- vertical-align
テキストや img の縦位置の微調整。 - flex
ブロック要素の段組など。 - float
ブロック要素を左右に並べて配置。 - position
- position: absolute; (1)
座標を指定して配置する。 - position: absolute; (2) 画像を重ねる
- position: fixed;
スクロールに関係なく要素の表示位置を固定する。 - position: sticky;
要素の表示位置を一時的に固定する。
枠線
- border - 枠線
色
効果など
- CSS 効果 (1)
影やグラデーションを付ける。 - background - 背景
- gradation - グラデーション
- filter - フィルター
画像にフィルター効果をかける。 - transform - トランスフォーム
画像や要素の変形や回転など。
CSS その他
- content - ::after, ::beforeなど
- var 変数、calc() 関数
- :target 擬似クラス
- !important
- CSS: JavaScript 処理
- CSS いろいろ
いろいろ
細かい話など
- Edge で HTML サンプルを眺めるときの注意点
- HTML を作成するときの細かい注意点
- Windows のメモ帳で HTML を utf-8 で保存する方法
- HTML: 改行を表す文字コード
- HTML も XML 形式で書いておくと便利かも
- XML/XHTMLチェックツール - DTD を用いてチェックします。
- Windows コマンドプロンプトの使い方
- 画像ファイルのフォーマット - png, JPEG など
- 大きな画面サイズの Web ページを画像ファイルに保存する
- ディスプレイいろいろ