![](https://fadotech.com/wp-content/uploads/2023/09/8089632155b841624bc729387bef24dc-150x150.png)
こんにちは!
PHPのLaravelやJavaScriptでWeb開発をしているフリラーンスエンジニアのファドと申します!
こちらの記事はCSS教材の第1回目の記事になります。
その他のCSS教材を学習したい方は下記リンクから直接教材へ飛ぶことができます。
CSSとは
CSSとは「Cascading Style Sheets(カスケーディング・スタイル・シート)」の頭文字をとったもので、スタイルシートとも呼ばれています。
HTMLは、見出しやヘッダー情報など「Webページの表示や文書構造を形作るための言語」なのに対して、CSSは、「HTMLで作られた文書構造にデザインを加えて見栄えを整える役割」を担っています。
CSSを簡単に説明すると、「見た目をよくするための言語」と言うことができます。
そのため、現在のほとんどのWebページでは、HTMLとCSSが組み合わさって作られています。
HTMLでも、属性をうまく活用すれば大きさや色などのデザイン面をある程度操ることができます。
しかし、 HTMLは構造を定義するための言語であるため、Webページのデザインを整えるためにHTMLを用いるべきではありません。
なぜなら、HTMLの要素をどのように表示するかは、Webページを表示するブラウザによって異なる場合があるからです。
例えば 同じWebページを「Chrome」と「Safari」で表示した場合、HTMLでデザインをすると、見た目が崩れてしまうことがあるということです。
以上のことから、Web開発においてHTMLが学習必須ということをお伝えしましたが、CSSも同じく学習必須ということです。
★検索ワード
・CSSとは
・HTMLとCSS
CSS教材学習用フォルダ作成
フォルダ名:「make_folder」
CSSの学習を始める前に、教材学習用のCSSフォルダを作成します。
VSCodeでProgramming
フォルダを開きましょう。
そして、texts
フォルダをクリックして、フォルダ作成マーク
をクリックし、新しいフォルダを作成して、CSS
と名前を付けましょう。
これでCSS教材学習用のフォルダが完成しました。
CSSのレクチャーでは、今回作成したCSS
フォルダの下に、HTML教材と同じようにレクチャーごとのフォルダの作成とindex.html
の作成、さらにstyle.css
というCSSファイルを作成してください。
ファイル構成は、各レクチャーのフォルダ下(今回だとmake_folder
)にindex.html
とstyle.css
があるようにしてください。style.css
の.css
はもちろんCSSファイルを明示するための拡張子です。
以降のレクチャーでは、このCSSフォルダ配下に各レクチャーごとのフォルダとそのフォルダの中にindex.html
、style.css
を作成して下さい。
★検索ワード
・VSCode フォルダ 開き方
・VSCode フォルダ作成方法
・VSCode ファイル作成方法
CSSを適用させる
フォルダ名:「html_css」
まずは、texts
フォルダ下のCSS
フォルダ内にレクチャー用のフォルダhtml_css
を作成して下さい。
次に、作成したhtml_css
フォルダ内にindex.html
とstyle.css
を作成して下さい。
それでは本題に入ります。
まず、CSSをHTMLに反映させるためにはいくつかの方法があります。
今回のレクチャーでは、それらについて学習していきます。
CSSを適用させる3つの方法
CSSをHTMLへ適用させる方法は大きく分けて3つあります。
・HTMLファイル内にまとめて記述する方法
・HTMLタグに直接記述する方法
・外部ファイルで読み込む方法
それぞれに応じて、書く場所も変わってきますので、順番に見ていきましょう。
HTMLファイル内にまとめて記述する方法
まず1つ目は、HTMLファイル内のhead要素
にstyleタグ
を記述して、CSSを適用させる方法です。
さっそくコードを使って確認していきましょう。
index.html
を下記の通り編集してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSの学習</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>文字色:赤</h1>
</body>
</html>
HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです!
![](https://fadotech.com/wp-content/uploads/2023/06/bfdshttfjtyufi.png)
![](https://fadotech.com/wp-content/uploads/2023/06/bfdshttfjtyufi.png)
このstyleタグ
の中に書いてあるh1 {color: red;}
がCSSと呼ばれるものです。
通常h1タグ
で記述したテキストのデフォルト文字色は黒色
ですが、h1 {color: red;}
とCSSを記述することで、赤色にすることができます。
このようにstyleタグ
を使用してHTMLにCSSを直接記述し、CSSを適用させる方法が1つ目の方法です。
HTMLタグに直接記述する方法
次に、HTMLの各タグに直接CSSを記述する方法について説明していきます。
今回もさっそくコードを使って確認していきましょう。
index.html
を下記の通り編集してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSの学習</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>文字色:赤</h1>
<!-- ここから追加 -->
<h2 style="color: blue;">文字色:青</h2>
<!-- ここまで追加 -->
</body>
</html>
HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです!
![](https://fadotech.com/wp-content/uploads/2023/06/gfdsawserthgrefs.png)
![](https://fadotech.com/wp-content/uploads/2023/06/gfdsawserthgrefs.png)
HTMLの各タグ内でCSSを記述するためにはstyle属性
を使用します。style属性
でCSSを記述する場合は、divタグ
やpタグ
といったHTMLファイルで使用するタグの中に、stye=""
を記述し""
ダブルクォーテーションの間にCSSを記述します。
今回はh2要素
に対してstyle="color: blue;"
を指定しているので、h2要素
の文字が青色
に変化します。
このようにstyle属性
を使用してHTMLにCSSを直接記述し、CSSを適用させる方法が2つ目の方法です。
外部ファイルで読み込む方法
最後に、HTMLファイルへCSSを直に書くのではなく、CSSファイルを別で準備し、そちらにCSSを記述する方法を説明します。
では、まずは手を動かして、実際に動きを確認していきましょう。
index.html
を下記の通り編集してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSの学習</title>
<style>
h1 {
color: red;
}
</style>
<!-- ここから追加 -->
<link rel="stylesheet" href="style.css">
<!-- ここまで追加 -->
</head>
<body>
<h1>文字色:赤</h1>
<h2 style="color: blue;">文字色:青</h2>
<!-- ここから追加 -->
<p>文字色:緑</p>
<!-- ここまで追加 -->
</body>
</html>
今回はHTMLファイルに2行追加しました。
これをブラウザに反映させると、文字色:緑
というテキストが黒色
で新たに表示されるようになります。
次にCSSを編集していきますが、先ほど作成していただいた今回のレクチャー用フォルダhtml_css
の中に、style.css
があることを確認してください。
無い方は上記style.css
ファイルを作成してください。
作成したstyle.css
を下記の通り編集してください。
p {
color: green;
}
上記のコードはCSSファイルを別に用意し、その中にコードを記述しただけなので、CSSの書き方自体は前の2つと同じです。
つまり、文字色を変えるためのCSSを記述したということです。
それでは、改めてindex.html
をブラウザで読み込んでみましょう。
すでにindex.html
をブラウザに表示させている場合は、Command + R
(Windowsの方はCtrl + R
)でページを更新すれば、変更内容がブラウザに反映されます。
※ページの再読み込み(更新)のことをリロード
とも言います。
下記画像のように、文字色:緑
というテキストが緑色で表示されていればOKです。
![](https://fadotech.com/wp-content/uploads/2023/06/bngfdfyjtyikt-1024x229.png)
![](https://fadotech.com/wp-content/uploads/2023/06/bngfdfyjtyikt-1024x229.png)
では、改めてコードの解説をしていきます。
まずはindex.html
に追加したコードから見てみましょう。
<link rel="stylesheet" href="style.css">
CSSをHTMLへ適用させるためには、linkタグ
を使用します。
linkタグ
でCSSを適用させる場合は、以下のように記述します。<link rel="stylesheet" href="CSSファイルパス">
rel属性
には、HTMLとの関係を記述するので、今回はCSSを反映させるために、stylesheet
と記述します。
これは、CSSを適用させる場合はこのように設定するのだなと覚えてしまってOKです。
そして、index.html
とstyle.css
の両ファイルが同じディレクトリ内にあるので、href属性
の属性値には、style.css
を記述するだけで反映することができました。
また、linkタグ
は、ファイルの設定を記述することができるhead要素
内に記述して下さい。
もし、CSSが適用されていない場合は、CSSのパスが合っているかを確認してみましょう。
※パスがどのようなものか思い出せなければ、HTMLの教材に戻って確認しても大丈夫ですし、Chromeなどで検索してもOKです。
<p>文字色:緑</p>
こちらはpタグ
を使用して、文字色を変えるためのテキストを記述してあります。
では、次にstyle.css
に追加したコードを見てみましょう。
p {
color: green;
}
こちらのコードは今までと同じように、指定したタグの文字色を変えるCSSです。
今回はpタグ
のテキストを緑色に変える記述になっています。
以上で、CSSをHTMLへ適用させる3つの方法の説明は終わりです。
この中で1番良く使う方法は、3つ目に紹介した外部ファイルで読み込む方法
ということも覚えておきましょう!
課題を行う際は3つ目に紹介した外部ファイルで読み込む方法
を使用して実装してください!
★検索ワード
・HTML CSS 適用方法
CSSの書き方
フォルダ名:「how_to」
まずは、texts
フォルダ下のCSS
フォルダ内にレクチャー用のフォルダhow_to
を作成して下さい。
次に、作成したhow_to
フォルダ内にindex.html
とstyle.css
を作成して下さい。
ここから先のレクチャーでは、フォルダ作成&ファイル作成指示は省略させていただきますので、皆さん自身で作成して下さい。
それでは、本格的にCSSの書き方を説明していきます。
CSSの基本
まずは、CSSがどのようになっているのかを一つひとつ分解しながら解説していきたいと思います。
CSSは下記画像のように、セレクタ
とプロパティ
、値
の3つから構成されています。
![](https://fadotech.com/wp-content/uploads/2023/06/bsdfkjykmturtrtyrt.png)
![](https://fadotech.com/wp-content/uploads/2023/06/bsdfkjykmturtrtyrt.png)
左上のセレクタにはp
と記述してあります。
これはHTMLのp要素
のp
です。
ここをp
ではなく、h1
にすればh1要素
が青文字に変わります。
つまり「セレクタ」とは「セレクトする」というそのままの意味で、HTMLの中のどの要素を操作するか
を選ぶものです。
次に、プロパティにはcolor
を指定しています。
プロパティは、HTML要素で言うと「属性」のイメージです。
つまり、オプション
ですね。
colorの意味は、英訳のまま「色」です。
また、値にはblue
を指定しています。
blueの意味は、英訳のまま「青」です。
つまり、このコードを日本語にすると、p要素の色を青色にする
という意味のコードになります。
CSSは、何をどのように変えるかを順に記述していくような感覚です。
書き方のポイントは、以下の4つです。
・セレクタを書いて{ }
波カッコでくくる
・プロパティ名の後ろに:
(コロン)を記述
・:
(コロン)の後ろに設定したい値
を記述
・最後に;
(セミコロン)を記述
複数のプロパティを指定した場合
先ほどまでは、1つのセレクタに対して、1つのプロパティを設定した例を解説しましたが、1つのセレクタに対して、複数のプロパティを設定することもできます。
その場合の例を簡単に見ていきましょう。index.html
を下記の通り編集してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSの学習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>背景:青、文字色:白</p>
</body>
</html>
style.css
を下記の通り編集してください。
p {
background-color: blue;
color: white;
}
background-color: blue;
とすることで、p要素
の背景色
を青
に変えることができます。color: white;
とすることで、p要素
の文字色
を白
に変えることができます。
また、CSSはp{color: red;}
のように、1行で書いてしまっても問題ありませんが、プロパティを複数指定する場合も多く、行を分けて書く書き方が一般的なので、例のように改行する書き方に慣れていきましょう。
また、CSSでは、同じセレクタに対して、同じプロパティを設定する記述を書いた場合、下に書いた記述が反映されます。
p {
color: red;
background-color: blue;
background-color: red;
}
p {
color: blue;
}
このようなコードの場合は、p要素
は背景が赤で、文字の色は青になります。
なぜ下に書いたコードが上に書いたコードより優先されるのかというと、コードは上から下に向かって読み込まれるためです。
「下に記述したものが前の記述を上書きする」そのようなイメージで覚えておくといいでしょう!
★検索ワード
・CSS 書き方
インデントとは
HTML教材でも説明しましたが、インデントとは文章の行頭に空白を挿入して、先頭の文字を右に押しやることです。
もちろんCSSでもインデントがあります。
p {
color: red;
}
color: red;
の前にスペースが4つありますよね?
これがCSSのインデントです。
セレクタの後の{ }
内のプロパティ前には、基本インデントをさせましょう。
これだけでとても見やすくなるので、今からなるべく意識してみるといいです。
インデントのショートカットはTabキー
です。
★検索ワード
・CSS インデント
コメントアウト
フォルダ名:「comment_out」
HTMLと同じく、CSSのコードにもコメントを記述することができます。
コメントとして記述した文字などは、ブラウザに表示されることはありません。
コメントであれば、見た目に影響なく「文字」や「文章」を書き残すことができます。
ちなみに、コメントすることをコメントアウト
と呼ぶことも思い出してくださいね!
コメントのやり方は、HTMLと同じです。
コメントしたい行やテキストなどを選択して、Command
+ /
(Windowsの方はCtrl
+ /
)
/* これはコメント */
また、複数行コメントアウトしたい場合は、下記のようにしてください。
/*
コメント1行目
コメント2行目
コメント3行目
*/
★検索ワード
・CSS コメントアウト
次の教材
次の教材は下記から簡単に飛ぶことができます!
引き続きプログラミングを楽しんでいきましょう!
![](https://fadotech.com/wp-content/uploads/2023/06/6-300x188.png)
![](https://fadotech.com/wp-content/uploads/2023/06/6-300x188.png)
プログラミング学習サポートについて
![](https://fadotech.com/wp-content/uploads/2023/09/476beef438ec06ee03da974ab6f0d367-1024x576.png)
![](https://fadotech.com/wp-content/uploads/2023/09/476beef438ec06ee03da974ab6f0d367-1024x576.png)
「独学で挫折した。。。」
「一人でのプログラミング学習がしんどい。。。」
「未経験からエンジニア転職をしたいけど何をしたら良いかわからない。。。」
このような悩みをお持ちの方向けに、本教材作成者のファドがMENTAという学習サイトにてあなたのプログラミング学習とエンジニア転職を徹底サポートいたします!
サポート価格はなんと1日あたりたったの約300円!
教材で分からない箇所のサポートはもちろんのこと、本サイトで公開しているすべての課題の解答も公開しております。
また、MENTAで学習を終わらせていただいた方限定で懇意にしていただいている企業さんを紹介することもあります!
なお、サポート内容の詳細は下記の通りです。
- 目標設定
- マインドセット
- オリジナル教材見放題
- オリジナル課題見放題
- オリジナル課題の解答見放題
- 課題コードレビュー
- 教材への無制限質問
- 課題への無制限質問
- ポートフォリオ作成アドバイス
- 褒めのコーチング
いくつかのプランを用意させていただいておりますので、下記より一度ご覧ください!
![](https://img.menta.work/1600/plan/main_image/639b424672396.png)
![](https://img.menta.work/1600/plan/main_image/639b424672396.png)
コメント