第4回 CSSでウェブページをカラフルにしよう!

元気100倍( ⚈ ̍̑⚈ ̍̑⚈)৴≡Oアンパーンチ

みなさん、こんにちは!

普段は医療職で働きながら、趣味でプログラミングを始めたズダです!

今回のテーマはCSSです。ウェブページをより魅力的に見せるために、CSS(Cascading Style Sheets)というツールを使ってみましょう。

CSSは、HTMLで作られたウェブページの見た目を変えることができます。色を変えたり、文字の大きさを変えたり、位置を動かしたりできます。さっそくCSSを使ったサイトを見てみましょう!

<WEBサイト>

<HTMLのコード>

htmlCopy code<!DOCTYPE html>
<html>
  <body>
    <h1>こんにちは、世界!</h1>
    <p>これは私の初めてのウェブページです。</p>
  <img src="サイトURL">
  </body>
</html>

※サイトURLとはwww.~~~~です。今回はイラストやさんのAIダンス画像を使っています。画像のURLならなんでもOKです!

<CSSのコード>

<style>
body {
        background-color: lightblue;
      }

      h1 {
        color: white;
        text-align: center;
      }

      p {
        font-family: 'Arial', sans-serif;
        font-size: 20px;
      }
    img {
      width: 200px;
      height: auto;
      border: 3px solid black;
      margin: 20px;
      padding: 10px;
    }
</style>

まず先に、これから要素という言葉が頻発しますので、「要素」についてお伝えします。

「要素」とはHTMLのコードで作られる部品(<>タグ)のことを指します。例えば、レゴのブロックを考えてみてください。一つ一つのレゴブロックがHTMLの「要素」に相当します。レゴブロックは色々な形や色があり、それぞれ単体で一つのブロックですが、これらを組み合わせることで様々な形の建物や乗り物を作ることができます。同じように、HTMLの要素も一つ一つは小さい部品ですが、これらを組み合わせて一つのウェブページを作り上げます。

では、このコードで使っているCSSのプロパティ(コード)について説明します。HTML同様、自分で書けるように覚えるのではなく、ChatGPTが書いたことが理解出来るようになればOKです!

お絵描きの、はじまりはじまり〜〜!!

  1. background-color: これは、自分の部屋の壁に好きな色のペイントを塗るようなものです。この場合、ウェブページの背景色を淡い青色に塗っています。
  2. color: これは、お絵描きするときに使うクレヨンの色を選ぶようなものです。この場合、大きな見出し(h1タグ)の文字色を白色に選んでいます。
  3. text-align: これは、宿題のノートに文字を書くとき、左から始めるか右から始めるか、それとも真ん中から始めるかを選ぶようなものです。この場合、大きな見出し(h1タグ)の文字を真ん中に書いています。
  4. font-family: これは、手紙を書くときにどんな文字(丸文字か角文字か)を使うかを選ぶようなものです。この場合、段落(pタグ)の文字の形をArialに選んでいます。
  5. font-size: これは、大きなポスターを書くときに大きな文字を使ったり、小さなメモを書くときに小さな文字を使ったりするようなものです。この場合、段落(pタグ)の文字の大きさを20ピクセルにしています。
  6. widthheight: これは、自分の絵を描くときにどれくらいの大きさにするかを決めるようなものです。この場合、画像(imgタグ)の幅を200ピクセルに設定しています。高さを自動(auto)にすると、画像がもともと持っている形(長方形や正方形など)を保ったまま幅に合わせて自動的に高さが設定されます。
  7. border: これは、絵や写真をフレームに入れるようなものです。この場合、画像(imgタグ)の周りに幅3ピクセルの黒い枠線をつけています。
  8. margin: これは、自分のデスクの周りに少しスペースを残すようなものです。この場合、画像(imgタグ)の周りに20ピクセルのスペースを残しています。
  9. padding: これは、箱の中に物を入れるときに、箱の壁と物の間にクッションを入れるようなものです。この場合、画像(imgタグ)の内側に10ピクセルのスペースを入れています。

CSSを使うと、HTMLで作ったウェブページが一気に華やかになります。また、CSSはHTMLとは別のファイルに書くこともでき、それをHTMLファイルから読み込むこともできます。(へ〜、くらいでOKです)

他にもたくさんのプロパティがあります。ほんの一部ですが、追加で紹介しますね!

  1. background-image: これは、部屋の壁にポスターを貼るような感じです。ウェブページの背景に好きな画像を設定できます。
  2. border-radius: 角が丸いカードを思い浮かべてください。このプロパティで、ウェブページの要素の角を丸くできます。
  3. box-shadow: 夕方の自分の影を思い出してみてください。このプロパティで、ウェブページの要素に影をつけることができます。
  4. color: これはクレヨンの色を変えるようなものです。テキストの色を変更できます。
  5. display: これは、本を棚に並べる方法を選ぶようなものです。立てて並べるか、横に並べるかを選ぶことができます。
  6. font-weight: これは、鉛筆の芯の硬さを選ぶようなものです。文字の太さを調整できます。
  7. letter-spacing: 文字の間隔は、友だちと遊ぶときの距離のようなものです。近くにいるか、遠くにいるかを調整できます。
  8. line-height: これは、段々と積み重ねられた積み木の間隔のようなものです。行間を調整できます。
  9. opacity: これは、窓ガラスが透明か曇りガラスかを選ぶようなものです。要素がどれだけ見えるかを調整できます。
  10. overflow: これは、バケツに水を入れすぎたときにどうするかを決めるようなものです。はみ出た部分をどう表示するかを決めます。
  11. position: これは、自分のお部屋で家具をどこに置くかを決めるようなものです。
  12. text-decoration: これは、絵に描いた文字に下線を引いたり消したりすることです。
  13. text-transform: これは、手書きの文字をすべて大きな文字(大文字)や小さな文字(小文字)に変えることです。
  14. transition: これは、おもちゃのロボットが別の形に変わるときのアニメーションのようなものです。
  15. z-index: これは、積み木を重ねるとき、どの積み木を一番上に、どの積み木を一番下にするかを決めるようなものです。
  16. flex: これは、ゴムボールのように、要素を伸ばしたり縮めたりすることができます。
  17. grid-template-columnsgrid-template-rows: これは、自分のお部屋の壁に棚を作るとき、棚を何列にするか、何行にするかを決めるようなものです。
  18. justify-contentalign-items: これは、自分のバックパックの中で本やペンケースをどこに置くかを決めるようなものです。
  19. transform: これは、紙飛行機を手で投げて前に進めたり、回転させたり、大きくしたり小さくしたり、傾けたりすることです。
  20. visibility: これは、魔法で物を見えなくするようなものですが、物はまだその場所にあるということです。物はあるけど見えない状態です。

これらのプロパティを使うと、ウェブページの見た目を自由自在に変えることができます。どのプロパティも一度に覚える必要はありません。必要になったときにひとつひとつ調べて覚えていく(もしくはChatGPTに聞く)といいですね。

これらのプロパティを組み合わせることで、ウェブページの見た目を細かく調整することができます。CSSはとても強力なツールで、自由な表現を無限に広げてくれます

少しずつ試しながら学んでいきましょう。そして何よりも、楽しみながらコーディングを進めていきましょう!

それでは、次回はJavascriptについて概要をお伝えします!バイバイキーン!( ⚈ ̍̑⚈ ̍̑⚈)৴≡Oアンパーンチ

コメント

タイトルとURLをコピーしました