メモ

メモを入力してみよう!


Lesson 09「CSSの書き方」

学習概要

CSS言語の書き方を学習していきます。

補足

CSS言語では改行や半角スペース、タブは使えますが、「全角スペース」は使えないので注意しましょう。

CSS言語にはHTMLと同じように「バージョン」があります。
バージョンによって使える命令が増えたり、古い命令が廃止になって使えなくなっています。
最新のバージョンはCSS3と呼ばれるものです。

HTMLと違い、CSSではコードの中でバージョンを指定することができません。
CSSはブラウザソフトの方で使えるバージョンが決まっていて、既にどのブラウザ(InternetExplorerやChrome、Safariなど)もCSS3まで使えるようになっていて、CSS3で使える命令を書くだけで、きちんと実行されて指定した見た目になります。

ブラウザによって、CSS3の中でも「この命令だけは使えない」というものがあり、ブラウザによってバラつきがあります。
ブラウザの対応状況を調べるには「Can I use」が有名です。
Can I use

この練習でわからない所を質問する※部活外の質問はできません

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson 09「CSSの書き方」 の内容※SEO用のため読めません

皆さん初めまして、ウェブカツコーチの斉藤です。これからHTML&CSSについて学んでいきたいと思います。今回学んでいくのはこちら。
CSSの書き方

それでは前回と同じく新しくフォルダを作っていきましょう。フォルダを作成したら最初に作ったhtmlファイルを中にコピーします。コピーしたhtmlファイルを編集していきましょう。まずタグの中をこのように書き換えてみてください。書き換えが終わったら次にヘッダー部内にこちらの1行を書てみてください。書き終わったら保存しましょう。

次にCSSファイルを作成していきます。コマンドとNボタンで新しいファイルを作成してください。新しいウインドウが開いたらこちらのコードを記入してみてください。書き終わったら保存しましょう。新しく作ったフォルダの中にファイルを保存します。名前は適当で構いませんが、今回は[ style ]という名前します拡張子はCSSファイルを示す[ .CSS ]にしてください。保存が終わったら先ほど編集したhtmlファイルをブラウザで開いてみましょう。このような画面が表示されれば完成です。

はいではここからコードの解説をしていきたいと思います。まず今回作成したファイルが2つあります。[ style.css ]というCSSファイルそれと[ index.html ]というHTML、ホームページのファイル、この2つになります。

そのスタイルシートの中身はこういった形で書いてあってどういう意味かと言うと[ p ]と書いてあります。これ

タグの[ p ]ですね。

タグに対して何かしらのスタイルを指定しますという内容になってます。中身を見てみると[ color: ]となってます。[ color ]というのはフォントのカラー、文字色を指定してます。[ blue ]となってるので青色を指定してるというような形の指定方法になっています。

もうちょっと詳しい書き方を見てみるとこちらになります。まずセレクターというものでどれに対してスタイルを指定してるのかというものを指定していきます。{ }(中カッコ)でその中に実際にどういった内容のスタイルにするのかというの指定していきます。

プロパティ名というのがどういったスタイルを指定するのかというものになります。そのプロパティ名に:(コロン)をつけて、実際のスタイルの値を入れていって、;(セミコロン)で閉じる、というような形の書き方になります。今回の場合[ p ]、これがp要素、

タグの要素、どの部分にというところであります。どのスタイルを指定するのかというので今回文字色を指定します。最後どのようになものにするのかというので青色にします、という形でスタイルを指定していくんですね。

次にですねhtmlファイルの方を見ていきたいと思うんですけれども、今回ですねヘッダー部の中に1行新しく追加されているものがあります。タグと呼ばれるもので追加されています。これはスタイルシートを今回新しく作りました。そのスタイルシートをHTMLファイルに読み込むためのものになります。タグの中にはrel属性というものがついてます。[ rel="stylesheet" ]となってます。あと[ type ]というものでtype属性を指定していて[ text.css ]となってます。これ何かというとこなんですけどももうちょっと詳しく話してしまうと分かりにくくなってしまうのでここではこういうものだと思っていただければと思います。
スタイルシートを読み込むためには[ rel="stylesheet" type="text.css" ]というものを指定するんだよ、というものですね。

あとhref属性これで実際のスタイルシートを読み込むスタイルシートの場所パスを指定してあります。今回[ style.css ]なのでhtmlファイルと同じ階層にある[ style.css ]ファイルを読み込みます、という形で指定してあげてます。

このhtmlファイルにスタイルシートが読み込まれて実際そのスタイルシートを見てみると先ほどいいましたけれども、

タグに対しても文字色を青にしますというスタイルが指定されてます。で実際にhtmlファイルの方を見てみるとタグの中には

タグというのが2つ入ってます。なのでこの2つ段落が、文字が青くなる、実際に画面を見てみると青い文字になるよ、ここも青い文字になるよ、と言う段落が文字色が青になって青く表示されているという形になっています。このスタイルシートにはですね複数スタイルを指定することもできます。ちょっとわかりやすいように成形してしまいますけれども半角とかわかりやすく改行とか入れていきます。こういった形であって複数入れたい場合はその下にまた入れていきます。

フォントサイズ、文字のサイズを変えますよ、で20pxというピクセル単位でもあるんですけれども20pxに文字の大きさをしますよ。

で最後に;(セミコロン)で区切ってこれが一つのスタイルの指定だよ、という形にしてあげます。これで保存をして実際にまた画面を見てみると同じ

タグのところに指定した文字が20pxという形で先ほどよりちょっと大きくなります。こういった形で文章に対してスタイルを指定していくことができます。

はい、いかがだったでしょうか。CSSでは文章に対してどの部分にどのスタイルをどのように適用するのかというのを指定してあげるということですね。
ではまたお会いしましょう、さよなら。