CSS入門講座|外部からCSSを呼び出してみよう

CSS
この記事で学べること
  • CSSファイルの作り方
  • 外部のCSSファイルをHTMLに読み込む
  • ファイルの階層 / 階層別のファイルアクセス

アイカ
アイカ

うーん・・・

ユウキ
ユウキ

どうしたのアイカちゃん

アイカ
アイカ

CSSを勉強したは良いんだけど、

HTMLファイルが長くなっちゃって・・・

なんか長くてわかりにくくなっちゃったの

アイカ
アイカ

もっと短く、わかりやすくならないかなあ・・・?

その願い、叶えてしんぜよう・・・!

ユウキ
ユウキ

うさタブ!

アイカ
アイカ

ウサタブさんっ!!

うさタブ
うさタブ

外部にCSSファイルをつくって

それを呼び出すことでHTMLスッキリさせることができるッピ!

うさタブに任せるッピ! 3分で片付けるッピよ~!

CSSファイルの呼び出しついて学ぼう

元になるコード

<!-- 見えない部分の設定 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

</head>

<!-- 見える部分の内容 -->
<body>
<p>Hello World</p>
</body>
</html>
うさタブ
うさタブ

上のコードを元に学習していくッピ!

メモ帳】にコピーして用意するッピネ!

CSSファイルを作成する

うさタブ
うさタブ

ひとまず、CSSを書いたファイルを別に作成する必要があるッピネ~

うさタブ
うさタブ

まずはメモ帳を用意して

p {
  color: blue;
  font-weight: bold;
}

と入力するッピ!

うさタブ
うさタブ

次にこれを【名前をつけて保存】→【すべてのファイル】→『sample.css』と名付けて保存するッピよ~

アイカ
アイカ

いい感じだね♪

うさタブ
うさタブ

上のようにHTMLファイルとCSSファイルが2つ並んだら、オッケーッピネ!

ユウキ
ユウキ

できたぜ!

サンプルコード

HTML

<!-- 見えない部分の設定 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

</head>

<!-- 見える部分の内容 -->
<body>
<p>Hello World</p>
</body>
</html>

CSS

p {
  color: blue;
  font-weight: bold;
}

CSSファイルを外部から読み込む

うさタブ
うさタブ

準備ができたら、さっそくCSSファイルを呼ぶッピよ~!

うさタブ
うさタブ

<head></head>の間に

<link rel="stylesheet" type="text/css" href="sample.css">

と入力するッピ!

サンプルコード
<!-- 見えない部分の設定 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="sample.css">

</head>

<!-- 見える部分の内容 -->
<body>
<p>Hello World</p>
</body>
</html>

ユウキ
ユウキ

おおおおおっ

アイカ
アイカ

CSSが適応できてるわ!

うさタブ
うさタブ

ふふふふ、これがプログラミングの魔法ッピ!

<link rel=”stylesheet” type=”text/css” href=”ファイル名.css”>

で、外部のCSSファイルを呼び出すことに成功したッピよ~!

全体のコードの確認

HTMLファイル
<!-- 見えない部分の設定 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="sample.css">

</head>

<!-- 見える部分の内容 -->
<body>
<p>Hello World</p>
</body>
</html>
CSSファイル
p {
  color: blue;
  font-weight: bold;
}
うさタブ
うさタブ

次のページでは、

フォルダとファイルの関係・・・【階層】について解説するッピ!

これを覚えていると、ワンランクレベルがアップするッピ。

ぜひ読んで欲しいッピよ~

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

実際の教室で自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えておサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんな、キュレオプログラミング教室を受けて
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

CSSCSS基礎プログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました