HTML&CSSでできること

MTECH

2024年12月27日 15:51

HTMLとCSSでできること

1. ウェブページの構造設計

• 見出し、段落、リスト、リンク、テーブルなどで情報を整理。
• 意味を持つセマンティックなタグでページの階層や意図を明確化。

2. ウェブページのデザインとスタイリング

• 文字の色やサイズ、フォントなどの装飾。
• 背景色、グラデーション、画像を活用したデザイン。
• 余白や枠線、シャドウを使った要素の強調。

3. レイアウトの構築

• FlexboxやGridで要素を柔軟に配置。
• ヘッダー、フッター、サイドバーなどのレイアウトを作成。
• レスポンシブデザインでデバイスごとの最適化。

4. メディアの埋め込みと制御

• 画像、動画、音声をページに組み込む。
• アイコンフォントやSVGを使った視覚的な要素の追加。

5. 動的でインタラクティブな見た目

• トランジションやアニメーションで要素を動かす。
• ボタンやリンクのホバーエフェクトを設定。

6. ユーザーインターフェースの作成

• ナビゲーションバー、カード、フォームなどのデザイン。
• カスタムチェックボックスやラジオボタンのスタイリング。

7. アクセス性とSEOの向上

• 意味を持つタグや代替テキストでアクセシビリティ対応。
• メタ情報やセマンティックな構造でSEOを強化。

8. 小規模なインタラクション

• CSSを活用したハンバーガーメニューやタブ切り替えの実装（HTMLとCSSのみで動作）。

各言語のできることの範囲

HTMLは「情報の構造を定義」し、CSSは「見た目をデザイン」する役割です。この2つを組み合わせることで、静的なウェブサイトの構築が可能になります。

更に詳しくHTMLについて

1. コンテンツの構造を定義する

・見出し (<h1> ～ <h6>)
ページやセクションのタイトルを表現します。SEOにも重要。
例:

<h1>メインタイトル</h1>

• 段落 (<p>)
テキストを段落ごとに分けて表示。
例:

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

• リスト (<ul>, <ol>, <li>)
順序付きリストや順序なしリストを作成。
例:

<ul>
  <li>アイテム1</li>
  <li>アイテム2</li>
</ul>

• テーブル (<table>)
データを行と列に整理。
例:

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>太郎</td>
    <td>25</td>
  </tr>
</table>

2. メディアの埋め込み

• 画像 (<img>)
ウェブページに画像を表示。
例:

<img src="image.jpg" alt="説明文">

• 動画 (<video>), 音声 (<audio>)
動画や音声ファイルを埋め込む。
例:

<video controls>
  <source src="movie.mp4" type="video/mp4">
</video>

3. ユーザー入力の収集

• フォーム (<form>, <input>, <textarea>, <button>)
ユーザーからデータを取得する。
例:

<form action="/submit" method="post">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name">
  <button type="submit">送信</button>
</form>

4. ハイパーリンクの作成

• リンク (<a>)
他のページや外部リソースにリンクを作成。
例:

<a href="https://example.com">こちらをクリック</a>

5. セマンティックなタグを利用

• 意味を持つタグを使用して構造を明確化

<header>, <footer>, <article>, <nav>

更に詳しくCSSについて

1. 見た目のスタイル設定

• 色の設定
背景色や文字色を指定。
例:

body {
  background-color: #f0f0f0;
  color: #333;
}

• フォントの設定
フォントファミリーやサイズを変更。
例:

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

• 余白と間隔の調整 (margin, padding)
例:

div {
  margin: 20px;
  padding: 10px;
}

2. レイアウトの制御

• Flexbox
要素を柔軟に並べる。
例:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

• Grid
複雑なレイアウトを定義。
例:

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}

3. アニメーションとトランジション

• 要素を動かすことで動的な見た目を実現。
例:

div {
  transition: all 0.5s;
}
div:hover {
  transform: scale(1.2);
}

4. メディアクエリによるレスポンシブデザイン

• 画面サイズに応じたスタイルの変更。
例:

@media (max-width: 768px) {
  body {
    background-color: #ccc;
  }
}

5. ユーザーインターフェースの強化

• カスタムボタンやリンクのスタイル設定。
例:

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
}

6. 背景のデザイン

• グラデーションや画像を背景に設定。
例:

body {
  background: linear-gradient(to right, red, blue);
}

7. レイヤー効果

• 要素の重なり順 (z-index) の制御や透明度 (opacity) の設定。
例:

div {
  position: absolute;
  z-index: 10;
  opacity: 0.8;
}

HTMLとCSSを組み合わせた活用例

1. ナビゲーションバー

<nav class="navbar">
  <ul>
    <li><a href="#home">ホーム</a></li>
    <li><a href="#about">紹介</a></li>
    <li><a href="#contact">お問い合わせ</a></li>
  </ul>
</nav>

<style>
  .navbar {
    background-color: #333;
    color: white;
    padding: 10px;
  }
  .navbar ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
  }
  .navbar a {
    color: white;
    text-decoration: none;
  }
</style>

2. カード型デザイン

<div class="card">
  <h2>タイトル</h2>
  <p>ここに説明文が入ります。</p>
</div>

<style>
  .card {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    background-color: #f9f9f9;
    max-width: 300px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
</style>