よく使うタグ・プロパティ・構文の早見表です。
💡 Ctrl+P（Mac: Cmd+P）で印刷して手元に置いておくと便利です。
| タグ | 用途 | 例 |
|---|
<!DOCTYPE html> | HTML5宣言（1行目に書く） | <!DOCTYPE html> |
<html> | HTML全体の入れ物 | <html lang="ja"> |
<head> | 設定情報（画面に表示されない） | <head><title>...</title></head> |
<body> | 画面に表示する内容 | <body>...</body> |
<h1>〜<h6> | 見出し（h1が最大） | <h1>タイトル</h1> |
<p> | 段落 | <p>文章</p> |
<a> | リンク | <a href="URL">テキスト</a> |
<img> | 画像（終了タグ不要） | <img src="photo.jpg" alt="説明"> |
<ul> / <ol> / <li> | リスト（ul=箇条書き、ol=番号付き） | <ul><li>項目</li></ul> |
<table> / <tr> / <td> | 表（tr=行、td=セル、th=見出しセル） | <table><tr><td>データ</td></tr></table> |
<form> | フォームの入れ物 | <form>...</form> |
<input> | 入力欄（終了タグ不要） | <input type="text" id="name"> |
<button> | ボタン | <button type="submit">送信</button> |
<div> | ブロック要素の入れ物 | <div class="card">...</div> |
<span> | インライン要素の入れ物 | <span class="red">赤い文字</span> |
| プロパティ | 用途 | 値の例 |
|---|
color | 文字色 | color: #3a86ff; |
font-size | 文字サイズ | font-size: 16px; |
font-weight | 文字の太さ | font-weight: bold; |
background-color | 背景色 | background-color: #f0f4ff; |
border | 枠線（太さ・種類・色） | border: 2px solid #ccc; |
border-radius | 角丸 | border-radius: 8px; |
margin | 外側の余白 | margin: 16px auto; |
padding | 内側の余白 | padding: 24px; |
display | 表示方法 | display: flex; |
justify-content | Flex横方向の揃え | justify-content: center; |
align-items | Flex縦方向の揃え | align-items: center; |
flex-direction | Flex並ぶ方向 | flex-direction: column; |
width / height | 幅 / 高さ | width: 300px; |
@media | メディアクエリ（レスポンシブ） | @media (min-width: 768px) {} |
box-sizing | 幅の計算方法 | box-sizing: border-box; |
⚡ JavaScript構文一覧 詳しく見る →
| 構文 | 用途 | 例 |
|---|
let / const | 変数宣言（let=変更可、const=変更不可） | const name = "田中"; |
if / else | 条件分岐 | if (x > 0) { } else { } |
for | 繰り返し | for (let i = 0; i < 5; i++) { } |
while | 条件付き繰り返し | while (条件) { } |
function | 関数定義 | function greet(name) { return "Hello " + name; } |
=> | アロー関数 | const add = (a, b) => a + b; |
console.log() | コンソールに出力 | console.log("hello"); |
getElementById() | idで要素を取得 | document.getElementById("title") |
querySelector() | CSSセレクタで要素を取得 | document.querySelector(".btn") |
textContent | テキストを変更 | el.textContent = "新しいテキスト"; |
addEventListener() | イベント登録 | btn.addEventListener("click", fn) |
createElement() | 新しい要素を作る | document.createElement("li") |
appendChild() | 子要素を追加 | ul.appendChild(li) |
Math.random() | 0〜1のランダムな数 | Math.floor(Math.random() * 10) |
localStorage | ブラウザにデータを保存 | localStorage.setItem("key", "value") |
📦 Gitコマンド一覧
| コマンド | 説明 | 例 |
|---|
git init | リポジトリを作成 | git init |
git add | ステージに追加 | git add . |
git commit | 変更を記録 | git commit -m "メッセージ" |
git status | 状態を確認 | git status |
git log | 履歴を確認 | git log --oneline |
git push | リモートに送信 | git push origin main |
git pull | リモートから取得 | git pull origin main |
git branch | ブランチ一覧 | git branch |
git checkout -b | ブランチ作成＆切替 | git checkout -b feature |
git merge | ブランチを統合 | git merge feature |