1行ぎょうずつ つくる！
自己紹介じこしょうかいカード 📛

まずは、自己紹介じこしょうかいしたい 内容ないようを 書かこう。
画像がぞう、名前なまえ、紹介しょうかい文ぶん、リンクボタンの 4つだよ。
HTMLエイチティーエムエル の なかに、下したのコードを 追加ついかしてね。

    <div class="card">
        <!-- アイコン画像 -->
        <img src="https://petitacode.web2050.jp/img/manga/neko1.png" alt="自分のアイコン">
        
        <!-- 名前 -->
        <h1>プチタ 太郎たろう</h1>
        
        <!-- 紹介文 -->
        <p>こんにちは！プログラミングと焼肉やきにくが大好だいすきな小学生しょうがくせいです。<br>
        ただいまCSSシーエスエスを勉強べんきょう中ちゅう！</p>
        
        <!-- ボタン -->
        <a href="#">もっと詳くわしく見みる</a>
    </div>

.card という箱はこを デザインして、カードっぽくしよう。
CSSシーエスエス の なかに、下したのコードを 追加ついかしてね。

        .card {
            width: 300px;       /* 幅を決める */
            border: 3px solid #ff7043; /* オレンジの枠線 */
            border-radius: 20px;  /* 角を丸くする */
            padding: 30px;        /* 内側の余白 */
            text-align: center;   /* 中身を全部 真ん中寄せ！ */
            background-color: #fff;
            margin: 50px auto;    /* 画面の真ん中に置く */
        }

四角しかくい画像がぞうを、アイコンっぽく 丸まるく切きり抜ぬこう！
CSSシーエスエスの いちばん下したに 追加ついかしてね。

        img {
            width: 150px;
            border-radius: 75px;  /* 幅の半分にすると まんまる になる！ */
            border: 4px solid #ffebee; /* 写真の周りに うすい枠をつける */
        }

名前なまえの色いろを変かえて、ちょっと おしゃれにしよう。
CSSシーエスエスの いちばん下したに 追加ついかしてね。

        h1 {
            color: #f4511e;
            font-size: 24px;
        }

さいごの仕上しあげ！ ただの 青あおい文字もじのリンクを、押おしたくなるボタンにしよう。
CSSシーエスエスの いちばん下したに 追加ついかしてね。

        a {
            text-decoration: none;  /* 下線を消す */
            background-color: #42a5f5; /* 背景を青に */
            color: white;           /* 文字を白に */
            padding: 10px 20px;     /* ボタンの大きさ（余白）を作る */
            border-radius: 30px;    /* ボタンの角を丸くする */
            font-weight: bold;      /* 文字を太く */
        }