ウェブサイトを作るのに欠かせない『HTML』『CSS』について学びましょう！
初心者の方でも分かるように初歩的なことから解説していきます。
HTMLとは？
HTML（えいちてぃーえむえる）とは、ウェブページの土台を作るための言語です。
ウェブページに表示したい文章やウェブページの情報を書いていきます。
ほとんどのウェブサイトはこのHTMLを使っています。
今皆さんが見ているこのページにもHTMLが使われているんですよ。
Webサイトを作るためには必須の言語なんだね！
CSSとは？
CSS（しーえすえす）とは、HTMLで作った土台のデザインやレイアウトができる言語です。
HTMLだけでは文字と画像が並んだだけの白黒サイトになってしまいますが、CSSを組み合わせることで背景や文字に色をつけたり、線を引くなど、装飾をつけていくことができます。
HTMLはそのサイトの骨組み、CSSはその肉付けって感じだね！
実際にやってみよう！
大体の役割が理解できたら、あとは実際に触ってみる方が分かりやすいと思います。
コピペして誰でも簡単に体験できるように解説していくので、やってみましょう！
準備するもの
- テキストエディタ（この記事ではmacテキストエディットを使用）
- ブラウザ（この記事ではGoogle Chromeを使用）
テキストエディターを開く
macデフォルトで入っているテキストエディットを開いてください。
Windowsの方はデフォルトで入っているメモ帳でOKです。
サンプルコードをコピー
次に下記のサンプルコードをまるっとコピーしましょう。
<!DOCTYPE html>
<html>
<head>
<title>おコトさん</title>
<meta charset="UTF-8">
</head>
<body>
<h1>初心者からウェブデザイン！</h1>
<p>まずは触ってみよう！！</p>
</body>
</html>テキストエディターに貼り付け
拡張子を.htmlにして保存
ブラウザで表示させる
先ほど保存したファイルをダブルクリック！
次はCSSを書いて色を変えてみましょう！
下記のコードをコピー
<style>
body {
background: beige;
color: gray;
}
</style>先ほど保存したファイルの</head>上にペースト
上書き保存後、ブラウザでチェック
背景色がベージュ、文字色がグレーに変わった！
このようにCSSは自由にサイトを装飾することが可能なんですよ。
他にも文字を中央揃えにしたり、サイズを変えたり… 様々なことができます。
無料で使える勉強サイトを利用しよう！
初心者向けの内容であれば無料で受講できるプランを備えているサイトも少なくありません。
上手に活用して、理解を深めましょう！
