こんにちは、Eristarです。
３回にわたってホームページを簡単に作る方法を紹介していく記事の最終回である３回目。
今回は、「夏休みの自由研究に！パソコン1つで学べるホームページづくり（CSS編）」です。
前回までの導入編とHTML編はこちらをご覧ください↓
前回はHTMLで文字を表示したり、タイトルをつけたり、写真を入れたりリストを作ったりしました。HTMLだけでも表示はできますが、見た目を整えるにはCSS（スタイルシート）を使います。
では、CSSを使っていきましょう。
CSSってなに？
CSSは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略で、HTMLで作ったページのデザインを変えるために使います。
文字の色・大きさ・文字の形・背景色・余白などを自由に変えられるとっても便利な言語です。
CSSの書き方
CSSは、{ }（かっこ）を使って書きます。
h1 {
color: blue;
}
上のコードだと、「h1（いちばん大きな見出し）の色を青にします」となります。
CSSは、HTMLファイルの<head>タグ内に、<style>タグを入れてCSSを書くことができます。
<head>
<meta charset="UTF-8">
<title>プロフィール</title>
h1 {
color: blue;
}
</style>
</head>
しかし、分かりづらいので、今回は事前に別ファイルを用意しました。
「デザイン.txt」にCSSを記載していきます。
コードを書いてみよう
前回はHTMLのタグのルールを説明をしてから実際にコードを書きましたが、今回はCSSを書いてから説明をしていきます。
まずは、実際にCSSを書いてみます。「自由研究」フォルダの中の「デザイン.txt」を開いてください。
開けたらそこに下記のコードを入力してみましょう。
メモ帳の画面だとこのようになっていればOKです。
全部書けたら、ファイルタブをクリックして保存をかけてください。
CSSのスタイルのルールを知ろう
では、先ほど書いたCSSについて解説していきます。
body {
→ ホームページ全体の見た目をここで決めます。
（"body" は、ページの中身すべてのことになります）
background-color: lightblue;
→ うしろの色を「うすい青」にします。
font-family: sans-serif;
→ 文字の形を、ゴシック体のようなすっきりした文字にします。
（「明朝体」ではなく、「丸ゴシック」みたいな感じ）
text-align: center;
→ ページの中の文字や写真を真ん中にそろえます。
padding: 30px;
→ ページのはしから30ピクセルだけ中身を内側にずらします。
（ふちにすきまができて、見た目がきれいになる）
}
→ body { で始まったかたちの終わり。
（この中カッコ {} は「この中のルールをまとめますよ」という意味です）
h1 {
→ いちばん大きな見出し（<h1>）の見た目を変えます。
color: blue;
→ 文字の色を青にします。
}
→ h1 のルールおわり。
h2 {
→ 見出しの2番目（<h2>）のデザインを変えます。
color: navy;
→ 色をネイビーにします。
}
→ h2 のルールおわり。
p, li {
→ 段落（<p>）とリストの項目（<li>）に同じルールをつけます。
font-size: 18px;
→ 文字の大きさを18ピクセルにします。
}
→ p, li のルールおわり。
ul {
→ リスト全体（<ul>）の見た目を変えます。
display: inline-block;
→ 箱のようにあつかって、中央にそろえやすくします。
text-align: left;
→ リストの中の文字を左よせにします。
（中央そろえよりも、リストはこの方が見やすい）
border-radius: 8px;
→ リストの箱のすみを丸くします。
（カドがとがってなくてやさしい見た目）
}
→ ul のルールおわり。
/* ★ ここで「名前」と「画像」を横にならべる！ */
→ これはコメントといって、プログラムには影響しません。
「ここは名前と写真を横にならべる場所だよ」と書いているメモです。
h2 + p {
→ 「見出し <h2> のすぐ下にある <p>」だけにスタイルをつけます。
つまり「名前の部分」です。
display: inline-block;
→ この段落を横に並べられる形にします。
vertical-align: middle;
→ 写真と高さをそろえて、上下が真ん中にそろうようにします。
margin: 0;
→ 上下のすきまをなくして、ぴたっとそろえるようにします。
}
→ h2 + p のルールおわり。
h2 + p + img {
→ 「見出しのあとにある段落のあとにある画像（<img>）」にだけルールをつけます。
→ この画像が「自分の写真」になります！
display: inline-block;
→ 写真も横に並べられる形にします。
vertical-align: middle;
→ 名前と高さをそろえて、上下がそろうようにします。
margin-left: 20px;
→ 写真の左に20ピクセルのすきまを作って、名前とのあいだに余白をつけます。
border-radius: 8px;
→ 写真のカドを丸くします。
width: 150px;
→ 写真のよこ幅を150ピクセルにします。
（ちょっと小さめでバランスがよくなる）
}
→ h2 + p + img のルールおわり。
ホームページを表示させてみよう
HTMLのときと同じように、「デザイン.txt」のファイル名を「デザイン.css」に変更して「自由研究.html」をダブルクリックして開きます。
「デザイン.txt」のファイル名を「デザイン.css」に変更するやり方はこちら↓
下の画像のように表示されれば大成功です！
夏休みの自由研究としてのまとめ
最後に、夏休みの自由研究としてまとめるには以下のことをまとめるとよいでしょう。
-
作成のきっかけ
-
HTMLの仕組み（調べたこと）
-
苦労した点・工夫した点
-
完成したページのスクリーンショット
-
実際のコード（印刷）と、表示結果を並べて貼る
最後に
もちろん今回使ったHTMLやCSSは基本中の基本でほんの一例にすぎません。
インターネットや本などでホームページ作りについて調べてみるといろんな面白さに気づくことができると思います。
ぜひ、子供の方から大人の方まで誰でも、興味を持った方は一度ホームページ作りに挑戦してみてください。
皆様のクリック感謝しておりますm(__)m
