HTML / CSSの使い方

ウェブサイト作成の基本はHTMLとCSS（とJavaScript）です。 HTML（Hyper Text Markup Language）はサイトの骨組み、CSS（Cascading Style Sheets）はサイトに服を着せる言語です。

ウェブ技術に関することなので、ウェブ検索するとさまざまな情報がヒットします。 中にはすでに古い情報もあります。 最新の機能や仕様に関することはMDNのドキュメントを調べるとよいです。

また、現在のウェブ標準はWHATWGが決めたHTML Living Standardです。 Can I Useでブラウザごとの対応状況を調べることができます。

セマンティクスしたい

• セマンティクスしたい（semantics）
• アクセシビリティしたい（a11y）
• ヘッダーしたい（header）
• ナビゲーションしたい（nav）
• メインコンテンツしたい（main）
• 記事したい（article）
• セクションしたい（section）
• 補足したい（aside）
• 検索したい（search）
• 見出しと副題したい（hgroup）
• フッターしたい（footer）

HTMLしたい

• HTMLしたい（doctype）
• ルート要素したい（html）
• ヘッド情報したい（head）
• 本文したい（body）
• メタ情報したい（meta）
• OGPしたい（og:*）
• 段落したい（p）
• 画像したい（img）
• 画像したい（picture）
• 画像したい（figure）
• ハイパーリンクしたい（a）
• 構造化データしたい（JSON-LD）
• アクセス制御したい（.htaccess）

CSSしたい

• カスケードしたい
• セレクターしたい
• インポートしたい（@import）
• レイヤーしたい（@layer）
• CSS変数したい
• 色したい（color）
• フォントしたい（font-family）
• ボックスモデルしたい（box-sizing）
• 枠線したい（border）
• 余白したい（margin）
• 余白したい（padding）
• 表示スタイルしたい（display）
• フレックスボックスしたい（display: block flex）
• グリッドしたい（display: block grid）
• レスポンシブしたい
• メディアクエリしたい（@media）
• コンテナクエリしたい（@container）
• ネストしたい
• ページ設定したい（@page）

ウェブフォントしたい

• FontAwesome

フレームワークしたい

CSSフレームワークを使うと、比較的簡単にウェブをデザイン／レイアウトできます。 そこそこの見た目をさくっと作りたい場合に便利です。 たいていの場合、CDNを経由して読み込ませるのでよいと思います。

以下は、僕がこれまで使ったことがある順番に並べてみました。

• KaTeXしたい（katex）
• MathJaxしたい（MathJax）
• Gutenbergしたい（gutenberg-css）

• Materialize

• Bootstrap

• MDB - Material Design for Bootstrap v5 & v4

• TailwindCSS

• Tailwind Components

• PicoCSS

• Sakura

• MVP.CSS

SSGしたい

• Sphinxの使い方

• Hugoの使い方

• MySTの使い方

サーバーしたい

• ウェブサーバーしたい（httpd）
• ウェブサーバーしたい（nginx）

未分類

• RSSしたい（Atom）
• ブラウザ対応を確認したい