CSS 基礎の確立

このレッスンは以下のようなサイト作りを目的としてCSS基礎の確立を目指します。
・WebCreator（KiCode）

このレッスンでは、CSSの基本的な概念と使い方について学びます。
レッスン内では、「HTML編集エリア」、「CSS編集エリア」、そして実際の「プレビュー画面」を使用して、コードの記述とその結果を即座に確認することができます。

レッスンの特徴：
インタラクティブな学習:
実際にコードを書きながら、HTMLとCSSの動作をリアルタイムでテストすることが可能です。

フレキシブルな編集:
提供されたコードエリアに自由に変更を加え、さまざまなコードの書き方を試すことができます。
これにより、理解がより深まります。

サポート体制:(有料会員のみ)
不明点はいつでもSlackで講師に気軽に質問してください。

※PC以外からは「編集エリア」を使用できない場合があります。ご了承ください。

CSSとは？

CSS（Cascading Style Sheets）は、HTMLで作成されたウェブページの要素に対してスタイルを適用するための言語です。
これにより、文字の色や大きさ、要素の配置などを指定し、ページ全体のデザインを整えることができます。

HTMLのみの場合:
要素が基本的な形で羅列されており、視覚的な装飾や整理はされていません。
テキストと画像がただ並べられているだけで、見た目が単調です。

CSSを使用した場合:
HTMLの構造にスタイルを加え、レイアウトを整えることができます。
これにより、テキストには色を加え、要素間のスペースを調整し、画像を適切な位置に配置するなど、より魅力的で読みやすいページを作成することが可能です。

CSSの導入により、ウェブページはただの情報の羅列から、効果的に情報を伝える洗練されたデザインへと変化します。
このプロセスは、ウェブデザインの視覚的な側面を強化し、最終的なユーザー体験を大きく向上させます。

<body>
    <header>
        <div class="logo">KiCode</div>
        <nav>
            <ul>
                <li><a href="#programming">プログラミングとは</a></li>
                <li><a href="#materials">教材紹介</a></li>
                <li><a href="#contact">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>Hello World.</h1>
        <h2>KiCodeへようこそ</h2>
        <section id="materials">
            <h3>教材紹介</h3>
            <div class="items">
                <div class="item">
                    <img src="https://kicode.s3.ap-northeast-1.amazonaws.com/Top/HTML-CSS.png" alt="HTML&CSSの画像">
                    <p>Webサイト作成</p>
                </div>
                <div class="item">
                    <img src="https://kicode.s3.ap-northeast-1.amazonaws.com/Top/Java.png" alt="JavaScriptの画像">
                    <p>プログラミング言語</p>
                </div>
                <div class="item">
                    <img src="https://kicode.s3.ap-northeast-1.amazonaws.com/Top/SQL.png" alt="Pythonの画像">
                    <p>データベース操作言語</p>
                </div>
                <div class="item">
                    <img src="https://kicode.s3.ap-northeast-1.amazonaws.com/Top/SpringBoot.png" alt="Javaの画像">
                    <p>Webアプリケーション開発</p>
                </div>
            </div>
        </section>
    </main>
</body>

body {
    font-family: 'Arial', sans-serif; /* フォントファミリーの指定方法を統一 */
    margin: 0;
    padding: 0;
    background-color: #f4f4f4; /* 背景色をより柔らかい色に */
    color: #333; /* 文字色を標準的な暗めのグレーに */
}

header {
    background-color: #0056b3;
    color: white;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

nav ul {
    list-style-type: none; /* リストのスタイルをなしに */
    display: flex; /* ナビゲーションを横並びに表示 */
}

nav ul li {
    margin-left: 20px; /* リスト項目間のマージン */
}

nav ul li a {
    color: white;
    text-decoration: none; /* 下線を消去 */
    font-size: 16px; /* フォントサイズの指定 */
}

h1, h2, h3 {
    text-align: center; /* 見出しを中央揃えに */
    color: #024e76; /* 見出しの色を統一感のある青に */
}

img {
    width: 100%; /* 画像をコンテナの100%の幅に */
    height: auto; /* 高さは自動で調整 */
    border-radius: 8px; /* 画像の角を丸く */
}

.items {
    display: flex;
    flex-wrap: wrap; /* アイテムが多い場合に折り返し */
    justify-content: space-evenly; /* アイテム間の距離を均等に */
    padding: 20px; /* 内側の余白 */
}

.item {
    margin: 10px; /* アイテム間の外側余白 */
    flex-basis: 20%; /* 各アイテムの基本的な占める幅 */
}

section#materials {
    background-color: white;
    padding: 20px;
    margin-top: 20px;
}

上記のCSSをすべて削除してHTMLのみを使用した場合と、CSSを適用した場合のレイアウトを比較してみましょう。
この比較を通じて、CSSがウェブページの視覚的スタイルにどのように影響を与えるかを視覚的に理解することができます。

CSSを使ってみよう

HTMLで構造化された要素に対して、CSSを使ってスタイリングを加えます。
具体的には、「どの要素に」「どのようなスタイルを」「適用するか」を指定します。
例えば、h1タグのテキスト色を赤に変更する場合は、CSSファイルに h1 { color: red; } と記述します。

セレクタ:
スタイルを適用するHTMLの要素を指定します（ここではh1）。

プロパティ:
変更を加えるスタイルの種類を指定します（ここではcolor）。

値:
プロパティに設定する値です（ここではredまたは#ff0000）。

プロパティの値には、色名（例：red）や16進数のカラーコード（例：#ff0000）を使用できます。
カラーコードは多くの色を精密に指定するために用いられますが、基本的な色は色名で指定することも可能です。
興味があれば、カラーコードの詳細について調べてみると良いでしょう。

カラーコード一覧：
WEB色見本原色大辞典 - HTMLカラーコード

CSSの記述方法と注意点

CSSを書く際は、コードの可読性を高めるためにインデント（字下げ）を利用します。
各プロパティの末尾にはコロン（:）を置き、値の後にはセミコロン（;）を付けることが必須です。
これにより、プロパティと値が明確に区切られ、エラーの発生を防ぎます。

CSSを書く際は、正確な構文を保持し、インデントを適切に使用することが重要です。
これにより、コードの可読性が向上し、後からの修正や他の開発者によるコードの理解が容易になります。
セレクタごとに改行を入れ、プロパティごとに新しい行を使用し、コロンとセミコロンを正しく配置しましょう。

CSSのコメントの書き方

CSSファイルにコメントを追加することもできます。
CSSでは、コメントを /* と */ で囲むことで表現します。
この方法でコメントアウトされた部分は、ウェブページに影響を与えずに無視されます。

コメントにより、CSSコードの読みやすさが向上し、後でコードを見返した時に変更点や意図が明確になります。

文字の大きさの設定方法

文字の大きさを変更するには、font-size プロパティを使用します。
このプロパティには、px（ピクセル）という単位を用いて大きさを指定します。
px を指定することを忘れないようにしましょう。

文字の種類を指定する方法

フォントの種類を変更するには、font-familyプロパティを使用します。
このプロパティでフォントファミリーを指定し、要素に適用することができます。
フォント名がスペースを含む場合は、ダブルクォーテーション(" ")で囲む必要があります。

font-familyでは複数のフォントをカンマで区切って指定することが可能です。
ブラウザが最初のフォントを読み込めない場合は、次に指定されたフォントが使用されます。
font-family には「明朝体」や「ゴシック体」など、様々なフォントを指定することができますが、フォントの名前をすべて覚える必要はありません。
使用するフォントの選択は、ウェブページの目的やデザインに合わせて適宜行います。

フォントファミリー一覧：
総称ファミリ名分類のフォント名一覧

背景色の設定方法

背景色を変更するには、background-color プロパティを使用します。
このプロパティで色を指定する方法は、文字色を指定する color プロパティと同じです。
色はカラーコード（例: #dddddd）で指定可能で、簡単なパターンのカラーコード（例: 同じ値が連続する場合）は省略形（例: #ddd）も使用できます。

要素の横幅と高さの設定方法

要素の横幅と高さを設定するには、width と height プロパティを使用します。
これらのプロパティには、px（ピクセル）単位で値を指定します。
値の後に px を付け忘れないように注意してください。

特定の要素にCSSを適用する方法

複数の <li>要素がある場合に、特定の一つだけにスタイルを適用するには、class 属性を使用してその要素を特定します。
class を使用することで、同じタグ名でも異なるスタイルを個別に設定できます。

具体的な手順:
class 属性の追加: 対象の要素に class 属性を追加し、任意の名前を設定します（例: class="highlight"）。
CSS の指定: CSSでそのクラス名を指定する際は、ドット（.）を名前の前に付けます（例: .highlight）。

複数の要素へのCSSの適用
同じ class 属性を複数の要素に設定した場合、それら全ての要素に同じCSSスタイルが適用されます。
これにより、一貫したデザインを異なる要素に簡単に適用することができます。

CSSをクラスに適用する際の注意点

CSSをHTMLのクラスに適用する場合、クラス名の前にドット（.）をつけることが必須です。
ドットを忘れると、スタイルは適用されません。
一方、HTMLタグに直接スタイルを適用する場合は、タグ名の前にドットは不要です。

このように、クラスにスタイルを適用する際は、セレクタ名の初めにドットを付けてその後にクラス名を記述します。
タグにスタイルを適用する際は、タグ名だけを記述します。
これを覚えておくと、CSSの適用ミスを避けることができます。

補足
スタイルが重複した場合、クラスセレクタのスタイルがタグセレクタのスタイルよりも優先されます。
このカスケーディングのルールを理解しておくと、意図した通りのスタイリングを効率的に実現できます。