ファドこんにちは！
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です！
この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です！
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です。
では、改めてコードの解説をしていきます。
まずは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つから構成されています。
左上のセレクタには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 コメントアウト
次の教材
次の教材は下記から簡単に飛ぶことができます！
引き続きプログラミングを楽しんでいきましょう！
プログラミング学習サポートについて
「独学で挫折した。。。」
「一人でのプログラミング学習がしんどい。。。」
「未経験からエンジニア転職をしたいけど何をしたら良いかわからない。。。」
このような悩みをお持ちの方向けに、本教材作成者のファドがMENTAという学習サイトにてあなたのプログラミング学習とエンジニア転職を徹底サポートいたします！
サポート価格はなんと1日あたりたったの約300円！
教材で分からない箇所のサポートはもちろんのこと、本サイトで公開しているすべての課題の解答も公開しております。
また、MENTAで学習を終わらせていただいた方限定で懇意にしていただいている企業さんを紹介することもあります！
なお、サポート内容の詳細は下記の通りです。
- 目標設定
- マインドセット
- オリジナル教材見放題
- オリジナル課題見放題
- オリジナル課題の解答見放題
- 課題コードレビュー
- 教材への無制限質問
- 課題への無制限質問
- ポートフォリオ作成アドバイス
- 褒めのコーチング
いくつかのプランを用意させていただいておりますので、下記より一度ご覧ください！
コメント