見出し画像

初めてでも挫折しない！CSSが「できる！」基礎知識編

Tomo8er

こんにちは！Tomo8erです。今回は「HTML&CSSが『できる！』」シリーズ第二回目です。前回はHTMLについて学びましたが、今回はCSSについて学びます！CSSを使うことで、WEBページの見た目を整えたり、デザインを加えたりできます。それでは、Let’s Go！

前回のページ：


目次


CSSとは？

CSSとは「Cascading Style Sheets」の略で、HTMLで作成したWEBページの見た目を装飾するためのスタイルシート言語です。CSSを使うことで、文字の色やサイズ、背景色、レイアウトなどを指定できます。HTMLがWEBページの骨組みを作るのに対し、CSSはその骨組みにデザインを加える役割を果たします。

CSSの書き方

CSSの書き方にはいくつかの方法がありますが、主に以下の3つです。

  1. インラインスタイル

  2. 内部スタイルシート

  3. 外部スタイルシート

1. インラインスタイル

HTMLタグの中に直接CSSを記述する方法です。

<p style="color: red;">これは赤い文字の段落です。</p>

2. 内部スタイルシート

HTMLファイルの<head>タグ内に<style>タグを使って記述する方法です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>内部スタイルシートの例</title>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>これは青い文字の段落です。</p>
</body>
</html>

3. 外部スタイルシート

CSSを別ファイルに記述し、HTMLファイルからリンクする方法です。

HTMLファイル：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>外部スタイルシートの例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>これは緑の文字の段落です。</p>
</body>
</html>

CSSファイル（styles.css）：

p { 
color: green;
 }

セレクタとプロパティ

CSSでは、スタイルを適用したいHTML要素を指定するために「セレクタ」を使います。セレクタにはいくつかの種類がありますが、代表的なものを紹介します。

タグセレクタ

HTMLタグ名を指定します。

p {
    color: black;
}

クラスセレクタ

HTML要素にクラスを指定し、そのクラス名をセレクタとして使用します。クラス名の前には「.」（ドット）を付けます。

HTMLファイル：

<p class="highlight">これはハイライトされた段落です。</p>

CSSファイル：

.highlight {
background-color: yellow;
}

IDセレクタ

HTML要素にIDを指定し、そのID名をセレクタとして使用します。ID名の前には「#」（ハッシュ）を付けます。

HTMLファイル：

<p id="special">これは特別な段落です。</p>

CSSファイル：

#special {
font-weight: bold;
}

基本的なCSSプロパティ

CSSには多くのプロパティがありますが、基本的なものをいくつか紹介します。

色の指定

文字の色を指定するには”color”プロパティを使用します。

p {
    color: red;
}

背景色の指定

要素の背景色を指定するには”background-color”プロパティを使用します。

div {
    background-color: lightblue;
}

フォントサイズの指定

文字のサイズを指定するには”font-size”プロパティを使用します。

h1 {
font-size: 24px;
}

マージンとパディング

要素の外側の余白を指定するには”margin”プロパティを、内側の余白を指定するには”padding”プロパティを使用します。

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

今までやったCSSを書いてみよう！実践例

それでは、基本的なプロパティを使って、実際のCSSを作成してみましょう。

HTMLファイル：（前回のものと同じです。前回のものはこちらから！

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>東京の観光スポット</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>東京の観光スポット</h1>
    <p>東京は多くの観光スポットがある素晴らしい都市です。以下にいくつかの人気スポットを紹介します。</p>

    <h2>観光スポット一覧</h2>
    <ul>
        <li>東京タワー</li>
        <li>浅草寺</li>
        <li>上野動物園</li>
    </ul>

    <h2>観光スポットのリンク</h2>
    <p>以下のリンクからさらに詳しい情報を得ることができます。</p>
    <p><a href="https://example.com/tokyo-tower">東京タワー</a></p>
    <p><a href="https://example.com/sensoji">浅草寺</a></p>
    <p><a href="https://example.com/ueno-zoo">上野動物園</a></p>

    <h2>観光スポットの写真</h2>
    <p>以下は東京タワーの写真です。</p>
    <p><img src="https://example.com/tokyo-tower.jpg" alt="東京タワーの写真"></p>
</body>
</html>

CSSファイル（styles.css）：

/* ボディスタイル */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4 ;
    color: #333 ;
    padding: 20px;
}

/* コンテナ */
.container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff ;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

/* 見出し */
h1, h2 {
    color: #333 ;
}

h1 {
    font-size: 24px;
}

h2 {
    font-size: 20px;
}

/* 段落 */
p {
    margin: 10px 0;
}

/* リンク */
a {
    color: #007BFF ;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* リスト */
ul {
    list-style-type: disc;
    margin: 10px 0;
    padding-left: 20px;
}

ol {
    list-style-type: decimal;
    margin: 10px 0;
    padding-left: 20px;
}

/* 画像 */
img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

完成図：（画像やリンクは例です。）


完成図

終わり！

次は、もっと詳しいCSSのプロパティやレイアウト方法について学びましょう。リクエストなどがあったらそれにしようと思っています。ありがとうございました！

今回の文字数

3600時程度

関連リンク


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