**さぁ、次のステップに進みましょう！**
Webサイトの土台となるHTMLができてきましたね！でも、HTMLだけで作られたものは見た目のバランスも悪いです。
今回のレッスンから、これまで作ったHTMLに**CSS**という言語を使って装飾を加えていきましょう。
 
## CSSとは?

CSS（シーエスエス）とは「Cascading Style Sheets（キャスケーディング・スタイル・シート）」の略で、スタイル言語とも呼ばれます。
文字の大きさや色、画像やボタンの位置や形などを変えることができ、デザインの幅が広がります。

:::: box
::: shadow
![](./html_css.png =400x225)
:::
::::

## CSSの書き方

HTMLで`p`タグで挟まれた要素は、「段落」を表しましたね。



この段落に書かれた文字色をCSSを使って緑色に変えてみます。



このようにCSSでは、装飾したい**要素**に対して、文字の色を変更できます。

![](./css.png =1366x768)

## CSSのきまり

![](./selecter.png =1366x768)

セレクター・プロパティ・値を埋めることによって、「どこの・何を・どのような見た目に変えるのか」を指定することができます。

::: alert
CSSは波かっこ<code>{</code>から始まり、波かっこ<code>}</code>で終わります。
またプロパティ<code>：</code>（コロン）値の後ろには<code>;</code>(セミコロン)を入れる必要があります。必ずそれぞれの後ろにセミコロンを入れておきましょう。
:::

## CSSを読み込もう

CSSファイルは、例えば`style.css`のようにファイル名の末を`.css`にします。

CSSを使うにはまずCSSファイルを読み込む必要があります。`link`タグを使って下のようにCSSを読み込みます。

```html
<link rel="stylesheet" href="CSSのURL">
```

CSSが同じサイト内にある場合は、CSSが設置されている場所に対して**パス**を指定してCSSを読み込むことができます。

```html

<link rel="stylesheet" href="/assets/style.css">
```

about-css

CSSの基本を学ぼう

font

CSSで文字色やサイズを変更してみよう

id-class

CSSで重要なidやclassについて

selector

CSSのセレクターを理解しよう

width-height

要素の高さと幅を設定しよう

text-align

テキストの配置を学ぼう

margin-padding

要素と要素の間に余白をつけよう

box-design

要素に角丸や影をつけてみよう

button

【腕試し】リンクつきボタンを作ろう

HTMLに触れたことない方がまず、HTMLに触れるためのレッスンを用意しています。

setup

Web制作についての基本を知ろう

hello-world

HTMLのタグについて学ぼう

hello-world-p

本文を表示しよう

image

サイトに画像を表示しよう

table

テーブルをマスターしよう

link

リンクタグをマスターしよう

list

リストの使い分けをマスターしよう

anchor

ページ内リンクを作ろう

html-template

HTMLを始める前に定型文を覚えよう

初心者のためのHTML入門

CSSに触れたことがない方がまず、CSSに触れるためのレッスンを用意しています。

初心者のためのCSS入門１

border-outline

要素に枠をつけるborderとoutlineをおさえよう

line-height

行間や文字同士の間隔を調整する

background

背景画像を設定しよう

gradation

背景にグラデーションを適用してみよう

position

ポジションを使った要素の配置をマスターする

pseudo-classes

擬似クラスを使ってスタイリングをしよう

pseudo-element

擬似要素を利用してスタイリングをしよう

nth-child

n番目の要素に対してCSSを適用する

element-css

要素特有のCSSを抑えよう

z-index

z-indexを使って要素の重なり順を指定しよう

初心者のためのCSS入門２

Flexを理解することで、横並びに要素を並べたり要素を中央寄せしたりなど、柔軟なレイアウトを実現できます。Flexを理解してCSSのレベルを1段階アップしましょう！

flex

flexの概念を抑えよう

flex-direction

flex-directionを利用して要素の並び順を変更する

flex-shrink-grow

flexのshrinkやgrowの概念を理解しよう

flex-align

flexの縦方向に対する整列の方法により詳しくなろう！

flex-align-self

flexで個別に配置を上書きしよう

CSS Flex入門

Gridを理解することで、要素を好きな位置に配置したり、全体のレイアウトを決定することができます。Gridを理解して周りと差をつけましょう！

grid-cols-rows

CSS Grid Layoutの概念を抑えよう

card

グリッドを活用して要素を並べよう

grid-template-areas

Grid Template Areasを使ってサイトのレイアウトを作ろう

grid-center

Gridで中央配置を簡単に実現する

CSS Grid入門

メディアクエリを使うことで画面幅に応じてCSSで見た目を最適化するレスポンシブデザインという考え方があります。このメディアクエリを使って、各デバイスに対応したCSSを書けるようになりましょう。

viewport

ビューポートの概念を理解しよう

max-width

要素の最大幅、最小幅を指定する

media-query

メディアクエリーを利用して画面幅に応じてCSSを適用する

mobile-first

モバイルファーストな実装を身につけよう

CSSを利用したレスポンシブウェブデザイン

プログラムを書かなくてもCSSだけで簡単にアニメーションを実装することができます。CSSを使って動きのあるサイトを作りましょう。

transition

トランシジョンをマスターしよう

transform

トランシジョンとトランスフォーム

css-animation

CSSアニメーションを学ぼう

animation-delay

アニメーションのタイミングをずらす

CSSアニメーション入門

CSS変数を使うと、よく使うカラーコードやフォントサイズを管理できます。複数箇所に記述された内容を1箇所に集約できるので、コードの管理が楽になりメンテナンス性が向上します。

css-vars

CSS変数を利用して共通の値を管理しよう

vars-responsive

CSS変数でレスポンシブ対応をより簡単に

darkmode

CSS変数を使ってダークモード対応してみよう

CSS変数入門

セマンティックHTMLとはマークアップで適切なタグや属性を活用して機械などでも読み取りやすいマークアップを意識したHTMLです。セマンティックを意識することで、人間だけでなく、スクリーンリーダーやサービスがそのサイトを理解し、情報を解析する際にも役に立ちます。

semantic

セマンティックなタグでマークアップしよう

セマンティックなHTML入門

お問い合わせフォームなどのフォームには覚えないといけないタグや属性がたくさんあります。これらの知識を吸収して、自信を持ってフォームをマークアップできるようになりましょう。