CSS入門講座（初心者向け） HTMLを装飾しよう

CSSでWebサイトのデザインを行なっていくには、セレクタやプロパティに関する知識が必要となります。このセレクタやプロパティには非常に多くの種類が存在するので、全てを覚えることは難しいかもしれませんが、1つでも多く知っていればデザインの幅は格段に広がっていきます。

まずはセレクタとは何を指すのか、プロパティとは何なのかを理解していきましょう。
基礎知識が身についたらページ下部の入門者向けの問題に挑戦してみましょう。

CSSとは
【入門講座】CSSの開発環境を整えよう
【入門講座】CSSでできる事
【入門講座】CSSの基本構造
【入門講座】CSSの書き方
CSS入門講座（18問）
まとめ

CSSとは

CSSとは、Cascading Style Sheets、カスケーティング・スタイル・シートのことでWebページのスタイルを指定するための言語です。「シーエスエス」や「スタイルシート」などと呼ばれています。あなたが今まさに見ているこのWebサイトの見た目も、主にCSSで作成されています。正確にはCSSはプログラミング言語ではなく、スタイルシート言語というものになります。スタイルシートとは、構造化された文書の表示形式を制御するための仕組みを指します。つまりCSSは構造化されたHTMLの表示形式を指定する言語ということです。

また、カスケーティングとは、ある要素のプロパティに対する宣言が複数あった時に宣言の優先順位をつけて、うち1つの宣言だけが有効になるようにする仕組みのことを指します。CSSの技術を身に着けることで幅広いWebサイトを作れるようになります。HTMLが各要素の構造を定義することに対して、CSSはそれらの要素をどのように装飾するのかを決定する言語です。文字の大きさや文字の色、背景、余白の調整、レイアウトの指定、アニメーションなど他にも様々な部分に対してスタイルを指定することができます。CSSの記述方法は複数存在するので、そちらに関してもしっかり覚えていきましょう。

CSSの特徴

HTMLは

<title>

のように「タグ」で要素を囲んでページの構造を作ります。CSSでは、その「タグ」を使ってデザインを適用したり、特定の条件で新しいスタイルを作成します。CSSでデザインの対象を指定する際には「セレクタ」という仕組みを使用します。そして、セレクタによって、どの要素にどのスタイルを適用するかを定義し、条件に合ったスタイルが反映されます。

HTMLの基礎を学びたい方は、忍者コードのHTML入門講座をご覧ください！

レスポンシブに対応できる

今の時代PCだけではなく、スマホやタブレットで表示したときの適切なレイアウトを設定しておくことが必須です。デバイスによって画面幅が異なる為、ブラウザの見え方は異なります。そのような場合のレイアウト構造もCSSを使って指定しておくことが大事です。CSSでレスポンシブに対応させる場合は、メディアクエリというものを設定していきます。

＼CSSについてもっと詳しく知りたい方必見！／

これからWEB制作を学ぶ方には、Web制作コースの独学プランがおすすめです!

WEB制作コースの詳細はこちら

【入門講座】CSSの開発環境を整えよう

CSSの開発環境整備では、適切なテキストエディタとブラウザの選択が重要です。

テキストエディタ

CSSもHTML同様、Windowsに入っている「メモ帳」や、Macに最初から入ってる「テキストエディット」でも開発は可能ですが、CSSを作るのに特化したソフトでは無いので、コードを書くことに特化した「テキストエディタ」をインストールし使用しましょう。

マイクロソフトが提供する無料の高機能テキストエディタ「Visual Studio Code（VS Code）」は、豊富な拡張機能やカスタマイズ性が特徴で、開発者が効率的にコードを書くための機能を備えています。また、ファイルのオープンや保存、拡張機能の追加などが簡単に行えるうえ、コマンドパレットを利用することで、さまざまな操作を素早く実行することができます。 VS Codeは、Web開発やアプリケーション開発など、さまざまなプロジェクトに適しています。

Visual Studio Codeダウロードページ

ブラウザ

ブラウザは、ウェブページを閲覧するためのソフトウェアです。Windowsでは初めから「Edge」、Macでは初めから「Safari」がインストールされていますが、他にもよく使われているブラウザがあります。おすすめのブラウザとして、Googleが提供している「Google Chrome」があります。Google Chromeは、機能の拡張や高いセキュリティ性で業界で広く利用されています。Google ChromeはGoogleのダウンロードページから入手できます。また、Mozira社が提供している「Firefox」も人気のブラウザです。Firefoxも機能の拡張が可能であり、業界でも広く利用されています。

【入門講座】CSSでできる事

CSSはウェブサイトやウェブアプリケーションの外観やレイアウトをカスタマイズするための言語です。CSSを使用すると、テキストのスタイルや背景、ボーダー、レイアウト、アニメーションなど、さまざまな要素を操作できます。

ウェブサイトの装飾やカスタマイズ

テキストスタイルの変更

CSSを使用すると、テキストのフォント、サイズ、色、装飾などを自由に変更することができます。これにより、ウェブサイトのテキストをより魅力的に見せることができます。

背景の設定

背景色や背景画像を指定することで、ウェブページ全体や特定の要素の背景をカスタマイズすることができます。また、背景の位置やサイズ、繰り返しの設定も可能です。

ボーダーと枠線の追加

要素にボーダーを追加することで、枠線を表示することができます。ボーダーのスタイルや太さ、色を指定して、要素の見栄えを改善することができます。

レイアウトの調整

CSSを使用して、ウェブページのレイアウトを調整することができます。フロートやポジションを使って要素の配置を変更したり、グリッドやフレックスボックスを使用してレスポンシブなレイアウトを作成することができます。

アニメーションとトランジションの追加

CSSを使用して、要素のアニメーションやトランジションを追加することができます。これにより、ウェブサイトに動きを加えて、ユーザー体験を向上させることができます。

リンクのスタイリング

リンクの色や下線、ホバー時の挙動などを指定することで、リンクの見た目をカスタマイズすることができます。これにより、ユーザーにとってクリック可能な要素が明確になります。

以上が、CSSでできる主なことです。これらの機能を組み合わせて、魅力的で使いやすいウェブサイトを作成することができます。

CSSについてもっと詳しく知りたい方は、無料問題集をご覧ください！

CSSアニメーションの作成

CSSアニメーションは、ウェブサイトやウェブアプリケーションで要素に動きを付けるための素晴らしい手段です。入門者に向けて、CSSアニメーションの基本的な作成方法を解説します。

基本構文

CSSアニメーションを作成するには、`@keyframes`ルールを使用します。`@keyframes`ルールは、アニメーションのキーフレーム（開始点や終了点）を定義します。

@keyframes  animationName {

               from {

               /* 開始時のスタイル */

               }

               to {

               /* 終了時のスタイル */

               }

              }

要素にアニメーションを適用

アニメーションを適用したい要素に対して、`animation`プロパティを使用します。このプロパティには、アニメーション名、実行時間、タイミング関数、反復回数などを指定します。

.element {

               animation-name: animationName;

               animation-duration: 3s;

               animation-timing-function: ease;

               animation-iteration-count: infinite;

              }

具体的な例

以下は、要素が左から右に移動するシンプルなアニメーションの例です。

@keyframes  slideIn {

               from {

                transform: translateX(-100%);

               }

               to {

                transform: translateX(0);

               }

              }

              .element {

                animation-name: slideIn;

                animation-duration: 1s;

              }

注意点

- アニメーションを適用する要素に、`position`プロパティが必要です。通常、`position: relative;`または`position: absolute;`を使用します。
- アニメーションが終了すると、要素は元の状態に戻ります。そのため、アニメーションを維持したい場合は、`animation-fill-mode: forwards;`を使用します。

CSSアニメーションを作成する際は、簡単なものから始めて徐々に複雑なものに挑戦し、ブラウザのデベロッパーツールを活用してデバッグしましょう。

＼CSSについてもっと詳しく知りたい方必見！／

これからWEB制作を学ぶ方には、Web制作コースの独学プランがおすすめです!

WEB制作コースの詳細はこちら

【入門講座】CSSの基本構造

セレクタ

セレクタはCSSを適用させる対象を指定する役割を持ちます。セレクタを記述することでどの部分にスタイルを適用させるかを決めることが可能です。セレクタは「Select(選択する)」を意味しており、h1やp、bodyなどのタグを指定したり、idやclassという属性で指定することができます。

プロパティ

プロパティはCSSに関するスタイルの種類を決める役割を持ちます。つまり「何を変化させたいのか」を決めるものになります。例えば「文字色を赤色」にする場合だとプロパティには「文字色」を指定します。後述する値の部分に「赤色」を指定します。プロパティの記述はセレクタの後の波括弧内に書きます。CSSには数100種類のプロパティが用意されているので、用途に合わせて使い分けれるようになりましょう。

値

値はプロパティで指定したものをどのように変化させるのかを決める役割を持ちます。もし背景色を指定するプロパティを記述したなら、何色なのかを値に記述します。文字サイズを指定するプロパティであれば文字の大きさを値に記述します。このように値にはプロパティによって書き方が異なるので、注意しましょう。

【入門講座】CSSの書き方

CSSはHTMLとセットで使用する言語なので、単体で使うことはありません。その為まずはHTMLファイルの作成が必要となるので準備をしておきましょう。CSSはHTMLに直接書き込む方法や、外部シートに書き込む方法などがあります。主に3つの方法が存在するので、以下で解説していきます。

HTMLの基礎を学びたい方は、忍者コードのHTML入門講座をご覧ください！

インラインで書き込む

インラインとはHTMLタグに直接CSSを書き込んでいく方法を指します。例えば

<p style="color: red;">

というようにstyle属性を使用して指定することができます。直感的で理解しやすいコードではありますが、追加や修正があった場合に手間がかかってしまうところが欠点です。

headタグ内に記述する

headタグ内にもCSSを書き込むことができます。書き込む際は

<style>

タグを使用します。

CSSの書き方は通常の指定方法（セレクタ、プロパティ、値）で書くことができます。ただheadタグ内に記述する場合、書き込む対象のファイル内でしかスタイルが適用されないので注意しましょう。こちらもコードの修正に手間がかかってしまうので、外部ファイルに記述する方法と組み合わせて、特定のページだけにスタイル適用させる場合などに使用するといいでしょう。

外部ファイルに記述する

CSSを外部ファイルで作成し記述する方法になります。一般的にはこの方法を使ってCSSを書くことが多いです。コードの修正や追加を行なう場合はリンクしている全てのページに反映することができるため、手間なく更新することができます。複数のHTMLで同じデザインにする時などは、1つのCSSファイルを共有して適用させることのできるコチラの方法が便利です。

文字の色を変える「color」プロパティ

CSSでブラウザに表示される文字の色を変えるには、「color」プロパティを使います。色を指定するには、値に色の名前を指定することで変更することができます。デフォルトでは黒色で表示されます。色の名前を指定する際は、キーワード（blue、redなど）、16進数カラーコード（#ffcc00など）、RGB（rgb( 255, 40, 51);など）、HSL（hsl( 0, 80%, 80%);など）の4種類のいずれかを使います。

<h1 class="test">
  こんにちは。
</h1>

.test {
  Color: red;
}

背景の色を変える「back-ground」プロパティ

CSSで背景の色を変更するには「back-groundプロパティ」を使用します。色の指定方法は、「color」プロパティと同様になります。細かい色の表現をする場合は、RGBもしくは16進数カラーコードを使用します。

<p class="backcolor">
  こんにちは。
</p>

.backcolor {
  back-ground: #ffcc00;
}

文字の大きさを変える「font-size」プロパティ

CSSで文字の大きさを変更したい場合は、「font-size」プロパティを使用します。指定する値には固定値「px」や可変値「rem」という単位を使って記述します。多くのブラウザのデフォルト値は「16px」となっています。

<p class="size-small">
  小さい忍者
</p>

.size-small {
  font-size: 12px;
}

要素の大きさを変える「width」プロパティ

CSSで横幅を調整するには「width」プロパティを使用します。値には「200px」や「80%」などのように指定して、大きさを変更します。画像の大きさも変更することが可能です。

<img class="adjust-width" src="ninja.png" alt="忍者">

.adjust-width {
 width: 80%;
}

要素の高さを変える「height」プロパティ

CSSで要素の高さを変更する場合は「height」プロパティを使用します。「width」と同様に、単位には「px」や「%」を使って高さを指定します。

枠線を作成する「border」プロパティ

枠線を作りたい場合には、「border」プロパティを使用します。また、枠線だけではなく文章を強調するための下線も作成することができます。HTMLでは、

<p>こんにちは</p>

のようにタグで囲ったときブラウザに4つの領域（margin、border、padding、contents）が生成されます。

“こんにちは"という文字列は「contents」に該当し、一番内側の領域となります。外から順番にmargin、border、padding、contentsという領域になっています。この4つをまとめて要素と言います。「border」プロパティはこの外から2つ目の領域を境目に線を表示することができます。