Webサイトの仕事を主に生業として20年ほどになります。その間、いろいろ試行錯誤してきた技術や考え方をまとめるために今回、HTMLとCSSに関する手引き書的なものを書き始めました。途中で投げ出すか、仕上げられるかはわかりませんが、私なりの教材としてBlogにしました。参考になれば幸いです。
HTMLの基本
HTMLやCSSなどのフロントエンドに関する基本的な技術をまとめています。
HTML
HTMLのタグを個別に解説しています。
- 見出しh1〜h6（heading｜ヘディング）
- 段落 p（paragraph｜パラグラフ）
- 箇条書きリスト ul（unorderd list｜アンオーダード・リスト）
- 番号リスト ol（orderd list｜オーダード・リスト）
- リスト項目 li（list item｜リスト・アイテム）
- 定義型リスト dl（definition list｜ディファニッション・リスト）
- 定義型リスト｜用語 dt（definition term｜ディファニッション・ターム）
- 定義型リスト｜説明 dd（definition description｜ディファニッション・ディスクリプション）
- 引用文 blockquote（block-level quotation｜ブロックレベル・コーティション）
- 表組み table（table｜テーブル）とその子要素、孫要素
- 横方向のセルの結合｜tableのセルの連結方法
- 縦方向のセルの結合｜tableのセルの連結方法
CSS
CSSのプロパティや関連の情報を個別に解説しています。
- CSSの詳細度（Specificity）
- CSSの色見本帳
- margin
- padding
- text-shadow プロパティ｜CSSで文字に影をつける
- box-shadow プロパティ｜ボックスに影をつける
- linear-gradient プロパティ｜グラデーション
- CSS Transition 簡単なアニメーション
- CSS transition-property プロパティ
- CSS transition-duration プロパティ
- CSS transition-delay プロパティ
- CSS transition-timing-function プロパティ
- CSS アニメーションの例（opacity編）
- CSS animation-name プロパティ
- CSS animation-duration プロパティ
CSSセレクタの書式
CSSの擬似セレクタなどの書式を紹介します。
- CSSの接頭辞と接尾辞
- CSSの兄弟要素の範囲指定
- CSSの兄弟要素の個数指定
- :not()｜CSSで「〜以外」を指定する擬似クラス
- CSS「:not()」で複数指定の場合
- CSSで「最初の要素以外」と指定する方法
- メディアクエリ（@media）
小技集
HTML & CSSの小技集です。