HTML/CSS入門向けチートシート

HTMLの基本構造

            <!DOCTYPE html>

            <html lang="ja">

            <head>

              <meta charset="UTF-8">

              <title>ページタイトル</title>

            </head>

            <body>

              コンテンツはここに

            </body>

            </html>

<!DOCTYPE html>：HTML5宣言

<html>：ルート要素

<head>：メタ情報

<body>：表示コンテンツ

よく使うHTMLタグ

<h1>〜<h6>：見出し要素

<p>：段落

<a href="URL">：リンク

<img src="画像URL" alt="代替テキスト">：画像

<ul><li>：箇条書きリスト

<div>：ブロック要素（区切り）

<span>：インライン要素

セマンティックタグを使おう！
<header>, <nav>, <main>, <section>, <article>, <footer>

フォーム要素

            <form action="/submit" method="post">

              <label for="name">名前:</label>

              <input type="text" id="name" name="name">

              <input type="submit" value="送信">

            </form>

type="text"

type="email"

type="password"

type="checkbox"

type="radio"

type="file"

type="submit"

CSSの基本

            /* スタイルシートの例 */

            セレクタ {

              プロパティ: 値;

              プロパティ: 値;

            }

🎯セレクタ：スタイルを適用する要素を選択

🔧プロパティ：変更したい要素の特性

✨値：プロパティに設定する内容

セレクタの種類

要素セレクタ：p {} - すべての段落要素

IDセレクタ：#header {} - id="header"の要素

クラスセレクタ：.btn {} - class="btn"の要素

子孫セレクタ：nav a {} - nav内のすべてのリンク

直接の子セレクタ：ul > li {} - ulの直接の子li

擬似クラス：a:hover {} - ホバー時のリンク

よく使うCSSプロパティ

文字スタイル：font-family, font-size, color, text-align

ボックス：width, height, margin, padding, border

背景：background-color, background-image

位置：position, display, float

            .box {

              width: 200px;

              padding: 20px;

              border: 1px solid #333;

              margin: 10px;

              background-color: #f5f5f5;

            }

ボックスモデル：要素の実際の幅 = width + padding + border

レイアウト方法

Flexbox：一次元レイアウトおすすめ

            .container {

              display: flex;

              justify-content: space-between;

              align-items: center;

            }

Grid：二次元レイアウトパワフル

            .container {

              display: grid;

              grid-template-columns: 1fr 2fr 1fr;

              gap: 20px;

            }

Position：要素の配置制御

static

relative

absolute

fixed

sticky

レスポンシブデザイン

            /* モバイルファースト */

            @media (min-width: 768px) {

              /* タブレット以上の画面サイズ */

            }

            @media (min-width: 1024px) {

              /* デスクトップサイズ */

            }

ビューポートの設定を忘れずに：
<meta name="viewport" content="width=device-width, initial-scale=1.0">

フレキシブルな単位を使おう：
%, em, rem, vw, vh