見出し画像

応用情報に駆け込んで　あってるのかどうか怪しいCSS入門編

ぬっこ

はじめに

応用情報技術者試験対策にCSSが出るらしいっていうので追い込まれChatGPTに作ってもらった入門書。
なのでちゃんとWebをやろうって人には役に立たないと思う。
でもって、いかに自分がCSSもHTMLも、そしてこのマークダウン形式ってやつにも慣れてないのかよくわかったヨ…

1. 構文

CSSの基本的な構文はシンプルで、要素にスタイルを適用するために「セレクタ」「プロパティ」「値」を組み合わせます。

セレクタ {
  プロパティ: 値;
}

例：

以下のコードでは、p要素に対してテキストの色を青、フォントサイズを16ピクセルに設定します。

p {
  color: blue;
  font-size: 16px;
}

2. HTMLとCSSの関係

（1）セレクタ

代表的なCSSセレクタには以下のものがあります：

  • 要素セレクタ：特定のHTML要素にスタイルを適用します。

    • 例：h1 { color: red; }

  • クラスセレクタ：同じクラス名を持つ要素にスタイルを適用します。.を使用します。

    • 例：.button { background-color: green; }

  • IDセレクタ：一意のIDを持つ要素にスタイルを適用します。#を使用します。

    • 例：#header { background-color: yellow; }

  • グループセレクタ：複数のセレクタに同じスタイルを適用します。

    • 例：h1, h2, p { color: navy; }

  • 子セレクタ：ある要素の直接の子要素にスタイルを適用します。>を使用します。

    • 例：ul > li { list-style-type: none; }

  • 子孫セレクタ：ある要素内のすべての子孫要素にスタイルを適用します。スペースを使用します。

    • 例：div p { color: gray; }

  • 疑似クラスセレクタ：特定の要素の状態に応じたスタイルを適用します。

    • 例：a:hover { color: orange; }

  • 属性セレクタ：特定の属性を持つ要素にスタイルを適用します。

    • 例：input[type="text"] { border: 1px solid black; }

（2）代表的なHTML要素

HTMLはWebページの構造を定義し、CSSはその見た目をコントロールします。以下は、よく使われる代表的なHTML要素です。

  1. <p>（段落要素）：
    段落を作成するために使います。
    例：<p>This is a paragraph.</p>
    CSSカスタマイズ例：

p { font-size: 14px; line-height: 1.5; }

  1. <h1>〜<h6>（見出し要素）：
    見出しの大きさを定義します。
    例：<h1>Main Title</h1>
    CSSカスタマイズ例：

h1 { color: darkblue; }

  1. <ul>と<li>（リスト要素）：
    順序のないリストとリストアイテムを作成します。
    例：<ul><li>Item 1</li><li>Item 2</li></ul>
    CSSカスタマイズ例：

ul { list-style-type: square; } li { margin-bottom: 10px; }

  1. <a>（アンカー要素）：
    ハイパーリンクを定義します。
    例：<a href="https://example.com">Visit Example</a>
    CSSカスタマイズ例：

a { text-decoration: none; color: blue; }

  1. <div>（区分要素）：
    ページ内のコンテンツをグループ化し、レイアウトを調整します。
    例：<div class="container">Content here</div>
    CSSカスタマイズ例：

.container { width: 100%; padding: 20px; }

  1. <span>（インライン要素）：
    インラインのコンテンツをグループ化するために使用します。
    例：<span class="highlight">Important Text</span>
    CSSカスタマイズ例：

.highlight { background-color: yellow; }

  1. <img>（画像要素）：
    ページに画像を表示します。
    例：<img src="image.jpg" alt="Sample Image">
    CSSカスタマイズ例：

img { max-width: 100%; height: auto; }

  1. <input>（入力要素）：
    フォームにおけるユーザー入力を受け取るための要素です。
    例：<input type="text" name="username">
    CSSカスタマイズ例：

input[type="text"] { border: 1px solid #ccc; padding: 5px; }

  1. <button>（ボタン要素）：
    フォームやインタラクティブな操作を提供します。
    例：<button type="submit">Submit</button>
    CSSカスタマイズ例：

button { background-color: green; color: white; padding: 10px 20px; }

  1. <form>（フォーム要素）：
    ユーザー入力を送信するためのフォームです。
    例：<form action="/submit" method="post"><input type="text" name="name"><button type="submit">Send</button></form>
    CSSカスタマイズ例：

form { margin: 20px 0; }

3. 留意点

  • 表のネスト：複雑なテーブルは、スクリーンリーダーでの読み上げに影響を与えるため、アクセシビリティも考慮する必要があります。

  • インラインスタイルの保守性：HTMLに直接スタイルを指定すると、保守が難しくなります。CSSファイルを使ってスタイルを一元管理しましょう。

  • ブラウザ間の互換性：主要なブラウザ（Chrome、Firefox、Safari、Edge）で表示の違いを確認する必要があります。

  • レスポンシブデザイン：画面サイズやデバイスに応じて表示を変えるため、メディアクエリを使います。

  • ベンダープレフィックス：新しいCSSプロパティには、-webkit-や-moz-などのプレフィックスが必要な場合があります。

  • CSSのカスケードと継承：スタイルの適用順序に注意しましょう。

  • Zインデックスの管理：要素の重なり順を管理するため、z-indexを慎重に設定します。

  • フォントの読み込み：Webフォントの読み込み速度や代替フォントの設定も考慮します。

  • パフォーマンス最適化：不要なスタイルや複雑なセレクタは避けるべきです。

  • アクセシビリティ：色のコントラストやフォーカス表示など、視覚に依存しないデザインを心がけます。

4. 外部参照ファイル

  • PNG：ロスレス圧縮で透明背景をサポート。高解像度向けですが、ファイルサイズが大きくなります。

  • JPEG：写真など色が豊富な画像に適したロスのある圧縮形式。再圧縮で画質が劣化します。

  • SVG：ベクター形式で、拡大縮小しても劣化しません。アイコンやロゴに適しています。

  • GIF：アニメーションをサポートしますが、色数が256色に制限されます。

  • WebP：Googleが開発した形式で、JPEGやPNGよりも高い圧縮率を提供しますが、互換性に注意が必要です。

  • ICO：ファビコンに使用される形式で、複数の解像度を含めることが可能です。

  • TIFF：高品質の画像を保持できる形式ですが、Web向きではありません。

  • BMP：未圧縮の画像形式で非常に高品質ですが、ファイルサイズが大きくなります。

  • アニメーションGIF：軽量でアニメーションをサポートしますが、色数に制限があります。

  • APNG：GIFの代替として使われ、透明背景をサポートしますが、互換性に注意が必要です。


あとがき

生成AIに慌てて作ってもらった結果、どうも抜けが多そうな気がするんだけど、まずはここまでで次行ってみよう。



この記事が気に入ったらサポートをしてみませんか？