Webサイト作成道場① 〜Webサイトってどうやってできてる？〜
Webサイトってどんな風に表示されている？
今からプログラミングについて学んでいこう！と意気込んでいるあなたも見ているこのサイトも、前回のコラムで紹介したフロントエンド言語とバックエンド言語を組み合わせて書かれています。
フロントエンドとバックエンドについてはこちら🔽
よく使われているフロントエンド言語としては、【html/css】があげられます。
html/cssってどんな言語？
html/cssで実際にどんな風に書かれているのか、そもそもhtml/cssってなんなのかをお話ししていきます。
以下は一例ですが、左側の枠に書かれている文字がweb上では右側の枠のように表示されています。
※基本的にPCで見ることを前提として記載しています！
See the Pen Untitled by まあ (@rfqphgmt-the-bashful) on CodePen.
「HTML」というタグに書かれているのが【html】という、文字や画像、動画などを出力させるための言語です。
このhtmlという言語だけで記載されたサイトは、文字や画像がただただ並んだだけになってしまうので、かなり見づらいサイトになってしまいます。
そこで少しでも見やすいサイトにするための言語が【css】です。
「CSS」というタグに書かれているのは、htmlで出力した文字や画像の色やサイズなどを整えるための記述がされています。
今回はcssで「今日はいい天気！」の文章の文字サイズを大きくし、文字色を青にする記述がされています。
POINT
- htmlは文字・画像・動画などを出力させる言語
- cssはhtmlで出力させた文字や画像などのサイズや色、並び方などを調整し、見た目を整えるための言語
htmlをいじってみよう！
では、実際に少し触ってみましょう！
以下の左側の部分の3行目、 【<h1></h1>】というもので挟んでありますね！
この【h1】はタグと呼ばれるもので、見出しを書く時に使うことが多いです。
デフォルトで太字になっていたり、文字サイズが大きくなっている場合があります。
See the Pen Untitled by まあ (@rfqphgmt-the-bashful) on CodePen.
Challenge
<h1></h1>の中の「今日はいい天気！」を「今日は曇り」に書き替えてみよう！
右側の枠の2行目の表示は「今日は曇り」に変わりましたか？
次はタグの種類を変えてみましょう。
先程の<h1>タグは見出しでしたが、今度は通常の文字列（段落）に表記を変えてみます。
Challenge
<h1></h1>の部分を<p></p>に書き替えてみよう！
タグを書き替えると、文字サイズが小さくなり、細字に変わったでしょうか？
タグごとにデフォルトの設定があり、それにより字の太さや大きさなどが異なっています。
今度はこのデフォルト設定をcssを上書きして変更していきましょう！
cssをいじってみよう！
cssはこの{ }の中の設定を書き替えることで、自由に表示を修正することができます。
様々なカスタマイズが可能です。
See the Pen Untitled by まあ (@rfqphgmt-the-bashful) on CodePen.
{ }の中の記述をプロパティと呼びますが、font-sizeは文字サイズを変更できます。
まずは文字サイズを変更してみましょう！
Challenge
{ }の中の「font-size: 48px;」となっている部分を「font-size: 24px;」に変更しよう！
右側の枠をスクロールすると、下の方の「今日はいい天気！」の文字サイズが小さくなっていますか？
今度は文字の色を変更してみましょう！
Challenge
{ }の中の「color: blue;」となっている部分を「color: red;」に変更しよう！
これで文字の色が赤色になりましたか？
実際に触ってみるほうが身に付くと思うので、お試しで他の色（green、pink、greyなど）に変えて遊んでみてください！