はじめに
- この記事は5分あれば読めます
- 1つ目の記事(HTMLについて)はこちら
どんな人に向けた記事?
- CSSという単語の名前は知っているが、具体的に何かは分からない人
この記事で分かること
- CSSが何なのか、ざっくりと理解できる
ここから本編!!
Webサイトの見た目ってどう変えるの?
Webサイトは、大きく分けて3つの要素で構成されています!!
-
HTML: Webサイトの骨組みを作る(例:文章、画像、見出しなど)
- ↑説明した記事はコレ
- CSS: Webサイトの見た目を整える(色、大きさ、配置など)
- JavaScript: Webサイトに動きをつける(アニメーション、クリックすると動くなど)
CSSってどうやって書くの?
今回はHTMLファイルの中に直接書いてみます!
実際に書いてみた!
前回の記事のHTMLコードに、CSSを追加
- 追加内容
-
タグの中にある
から
まで。この
タグの中に、CSSの指示を書きます
-
初めてのWebサイト
h1 {color: blue;}
p {font-size: 20px;color: green;}
はじめてのHTML!
初めて作ったウェブページ!
コードについての補足
- font-size
- 文字の大きさを変える
- color
- 上記のコードであれば…
-
h1 { color: blue; }
-
h1
タグで書かれた文字の色を青にする
-
-
p { font-size: 20px; }
-
p
タグで書かれた文字の大きさを20ピクセルにする
-
-
p { color: green; }
-
p
タグで書かれた文字の色を緑にする
-
-
実際にWebサイトを作ってみよう!
1分でWebサイトを作る!
- 上記の
から
>をコピーする
- パソコンに入っている「メモ帳」アプリを開く
- 1でコピーしたものを貼り付ける
- 「ファイル」→「名前を付けて保存」で保存
- 保存した「index.html」ファイルをダブルクリック
- 下記の画像のように、ブラウザでWebページが表示される
- Webページ完成🎉
最後に
今回の記事では文字の大きさやサイズを変えてみました!
CSSがどのようなものかざっくりと知ってもらえれば幸いです!!
Views: 0