HTML/CSS クイックリファレンス

Webページ作成の基本要素とスタイリング

HTML/CSSとは？

HTMLはWebページの構造を定義するマークアップ言語、CSSは見た目を整えるスタイルシート言語です。この2つを組み合わせて、美しく機能的なWebサイトを作成できます。

マークアップ スタイリング レスポンシブデザイン

基本的なHTML構造

すべてのHTMLファイルは、この基本構造から始まります 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページタイトル</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- コンテンツをここに配置 -->
</body>
</html>

テキスト要素

<!-- 見出し -->
<h1>最重要見出し</h1>
<h2>主要見出し</h2>
<h3>サブ見出し</h3>

<!-- 段落 -->
<p>これは段落です。</p>

<!-- 強調 -->
<strong>太字で重要</strong>
<em>斜体で強調</em>

<!-- 改行 -->
<br>

● h1は1ページに1つのみ推奨

● 見出しは階層構造を守る（h1→h2→h3）

リンクと画像

<!-- リンク -->
<a href="https://example.com">外部リンク</a>
<a href="page.html">内部リンク</a>
<a href="#section1">ページ内リンク</a>
<a href="mailto:info@example.com">メール</a>

<!-- 画像 -->
<img src="image.jpg" alt="画像の説明">
<img src="logo.png" alt="ロゴ" width="200">

● alt属性は必須（アクセシビリティ）

● 画像サイズはCSSで指定が推奨

リスト

<!-- 順序なしリスト -->
<ul>
    <li>項目1</li>
    <li>項目2</li>
</ul>

<!-- 順序付きリスト -->
<ol>
    <li>ステップ1</li>
    <li>ステップ2</li>
</ol>

テーブル

<table>
    <thead>
        <tr>
            <th>ヘッダー1</th>
            <th>ヘッダー2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>データ1</td>
            <td>データ2</td>
        </tr>
    </tbody>
</table>

● レイアウトにtableを使わない

● 表形式データのみに使用

フォーム要素

<form action="/submit" method="post">
    <!-- テキスト入力 -->
    <input type="text" name="username" placeholder="ユーザー名">

    <!-- メール -->
    <input type="email" name="email" required>

    <!-- パスワード -->
    <input type="password" name="password">

    <!-- チェックボックス -->
    <input type="checkbox" name="agree" id="agree">
    <label for="agree">同意する</label>

    <!-- セレクトボックス -->
    <select name="country">
        <option value="jp">日本</option>
        <option value="us">アメリカ</option>
    </select>

    <!-- テキストエリア -->
    <textarea name="message" rows="5"></textarea>

    <!-- ボタン -->
    <button type="submit">送信</button>
</form>

セマンティック要素

<header>ヘッダー</header>
<nav>ナビゲーション</nav>
<main>
    <article>記事</article>
    <section>セクション</section>
    <aside>サイドバー</aside>
</main>
<footer>フッター</footer>

● SEOとアクセシビリティ向上

● divの代わりに意味のある要素を使用

CSSの基本構文

セレクタの種類 

/* 要素セレクタ */
p { color: blue; }

/* クラスセレクタ */
.container { width: 100%; }

/* IDセレクタ */
#header { height: 60px; }

/* 子孫セレクタ */
div p { margin: 10px; }

/* 子セレクタ */
div > p { padding: 5px; }

/* 擬似クラス */
a:hover { color: red; }

CSSの適用方法 

<!-- 外部スタイルシート（推奨） -->
<link rel="stylesheet" href="style.css">

<!-- 内部スタイルシート -->
<style>
    p { color: blue; }
</style>

<!-- インラインスタイル -->
<p style="color: blue;">テキスト</p>
優先順位: インライン > 内部 > 外部

よく使うCSSプロパティ

テキスト 

color: #333;
font-size: 16px;
font-weight: bold;
font-family: Arial, sans-serif;
text-align: center;
text-decoration: underline;
line-height: 1.5;

ボックス 

width: 100%;
height: 300px;
margin: 10px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);

背景・配置 

background-color: #f0f0f0;
background-image: url('bg.jpg');
background-size: cover;
display: block;
position: relative;
top: 10px;
left: 20px;
z-index: 10;

レイアウト: Flexbox と Grid

Flexbox（1次元レイアウト）

/* コンテナ */
.container {
    display: flex;
    flex-direction: row; /* row | column */
    justify-content: center; /* 主軸の配置 */
    align-items: center; /* 交差軸の配置 */
    gap: 10px;
}

/* アイテム */
.item {
    flex: 1; /* 伸縮率 */
    flex-grow: 1;
    flex-shrink: 1;
}

Grid（2次元レイアウト）

/* コンテナ */
.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto;
    gap: 20px;
}

/* アイテム */
.item {
    grid-column: 1 / 3; /* 開始 / 終了 */
    grid-row: 1 / 2;
}

レスポンシブデザイン

メディアクエリ

/* モバイルファースト */
.container {
    width: 100%;
}

/* タブレット以上 */
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

/* PC */
@media (min-width: 1024px) {
    .container {
        width: 1000px;
    }
}

モバイル

max-width: 767px

タブレット

768px - 1023px

デスクトップ

min-width: 1024px

アニメーション

Transition（簡易アニメ）

.button {
    background: blue;
    transition: all 0.3s ease;
}

.button:hover {
    background: red;
    transform: scale(1.1);
}

Animation（詳細制御）

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.box {
    animation: fadeIn 1s ease-in;
}

実務で役立つTips

アクセシビリティ

alt属性、labelタグ、セマンティックHTMLを使い、すべてのユーザーが使いやすいサイトを作成

SEO対策

適切な見出し構造、メタタグ、意味のあるHTML要素でSEOを強化

パフォーマンス

画像最適化、CSS最小化、不要なコードの削除でページ読み込み速度を改善

クロスブラウザ

主要ブラウザ（Chrome、Firefox、Safari、Edge）で動作確認を実施

色の指定方法

カラーネーム

color: red;

HEX（16進数）

color: #ff0000;

RGB

color: rgb(255,0,0);

RGBA（透明度）

rgba(255,0,0,0.5);

よく使うパターン

中央配置

/* Flexboxで中央配置 */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* マージン自動で横中央 */
.horizontal-center {
    margin: 0 auto;
}

カードデザイン

.card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 20px;
    transition: all 0.3s;
}

.card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}

グラデーション

/* 線形グラデーション */
.gradient {
    background: linear-gradient(
        to right,
        #667eea,
        #764ba2
    );
}

テキスト切り詰め

/* 1行で切り詰め */
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}