CSSを読み込んでみよう!

はじめに

皆様、お疲れ様です。
プログラミングスクールADVANCEの福島です。

Scratchが小学校の授業にも導入されるようになり、Scratchでのゲームクリエイターが増えてきました。
そして、来年以降は中学校・高等学校でもプログラミングの授業を追加することが予定されています。

ということで、僕の担当回ではScratchより難しい、文字で作成する本格派プログラミングを担当させていただきますので、よろしくお願いしますね♪

※当校の授業・ブログでは「VSCode」を使った説明をさせていただくことになりますので、インストールをお勧めします。
インストール手順はこちらをご覧ください。

※当ページに関係のある過去記事は以下の通りですので、先にご覧いただくことをお勧めします。
HTMLの基礎  ショートカットキー

今回の内容

今回は、CSSがどのようなものかということと使い方を学んでいきましょう。

CSSとは

※HTMLとの関係については、文字を表示してみよう!をご覧ください。

さて、以前にも名前だけ登場したCSSですが、その時に「文字の色を変えたり太くしたりするのがCSSです」と説明したと思います。また、「CSSを後回しにする理由もおいおいわかる」とも言いましたね。
ここまで毎回HTML解説記事をみてくださっている方なら、その理由ももうお分かりでしょう。

そう、このCSSとはHTMLで行ったstyle属性を用いたレイアウトの変更を、まとめて行うための別ファイルなのです。
ただし、別ファイルなのでまずは読み込まなければいけません。

というわけで今回は、CSSの読み込み方について解説します。

実際にコーディング!

CSSを読み込むには、<link>タグを使用します。
実際の動作は以下の動画をご覧ください。

以下のコードをコピペしてもOKです♪

<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <title>《style.css》を読み込んでみよう!</title>
  </head>
  <body>
    <p>CSSが読み込めたら、この文章は大きさ20pxで赤色になります。</p>
  </body>
</html>

以下のzipファイルにhtmlファイルや解説等の必要データをまとめていますので、ダウンロードして同じ様に動かしてみましょう。

今回は《CSSを読み込んでみよう!.html》というファイルを用意していますので、動画と同じ様に動かしていただければ大丈夫です。
※動画内ではショートカットキーを使用しています。ショートカットキーについてはこちらをご覧ください。

手順は「記述→保存→表示の確認」となります。
表示の確認は『文字を表示してみよう!』の記事をご覧ください。

ちなみに、CSSの中身はこのようにしています。

p {
  font-size: 20px;
  color: red;
}

これは皆さんご存知の、文字サイズと文字色変更のコードです。
これが、pタグで囲った文章全てに反映されます。

あまり多くのことを説明すると覚えるのが大変だと思うので、今回はこの辺りで終了しておきます。

さいごに

今回は文字色の変更についてお話をさせていただきました。
次回以降はCSSの中身について解説していきますので、読み込み方はしっかり覚えておきましょう♪

それでは、ご覧いただきありがとうございました!

ADVANCEでは

ゲーム制作をメインとして小学生・中学生・高校生に向けてのプログラミング教室を運営しております。

無料のイベント(アクティビティ)も開催しているのでご覧くださいね☆

↓↓↓

アクティビティ詳細

また、解説ブログは随時更新!
更新日時は公式ホームページでご確認ください☆