見出し画像

初心者からのプログラミング講座4

優れるなことなれ

おはようございます
本日もプログラミング講座を開始します
今日は先日少し記事を書いたＣＳＳについてです
講座1.2で説明したＨＴＭＬのみで書くと
少し殺風景な感じになりますよね

画像1

そこで使うのがＣＳＳです
たとえばこの画像の角を丸めて表示したい
コードはこのように書きます

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Site</title>
  <style>
    img{
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <img src="icon.png" alt="太郎のアイコン画像です">
  <h1>山田太郎</h1>
  <p>UI/UXデザイナー見習いです。日々の勉強、がんばっています。</p>
</body>
</html>

styleの中に書いていき
これを実行するとこのような表示になります

画像2

ちょっとおしゃれなデザインになりましたよね
次回は線枠について説明します。
今日も頑張っていきましょう
それでは、いってらっしゃい

いいなと思ったら応援しよう！