どうも、ひろです。
前回の記事では、文字の色と文章を変えました。
今回は、自己紹介カードの部分の背景色を変えます。
ただ、それだけだと味気ないので、自己紹介カードの部分の背景色を変えたサイトと、AIの力を借りながら背景色を画像に変えたサイトの２パターン作ろうと思います。
私の場合、画像が別フォルダに入っているので、同じフォルダ内にある時のコードの書き方に少し付け加えないといけません。
微妙に覚えていないので、AIの力も借りて課題をクリアしたいと思います。
背景色を変える
AIのサイトの自己紹介カードの部分の背景色はピンクです。
今回は、このピンクの背景色を青（見方によっては水色に近い色）にしようと考えています。
文字を変えるわけではなく、背景色を変えるという事なのでHTMLではなくCSSの方のコードを変えていきます。
CSSを見ていくと、
bodyの{}内にbackground-color:#fff7fa;のコードがありました。
この中にある「background-color:#fff7fa;」を取り敢えずbackground-color:#00eaff;
ボタンの色が少し気になりますが、取り敢えず今回の目標は達成できたので良しとします。
背景色から背景画像に変更する
次は、背景の色を画像に変えたいと思います。
先ほど自己紹介カードの部分の背景色を「.card」の中にあったbackgroundで色を変え成功しました。
という事は、ここのcolor（色）をimage（画像）のコードに書き換えることで変わると思います。
今現在、私のサイトではbackground-color:#00eaff;です。
このコードを、
background-imageに書き換えたいと思います。
ただ、そこまでしか分からないので、以前書いた記事
「【初心者でもできる】AIと自分でホームページ作成（テスト版）」
で画像が使用されていたのを思い出したので、そのCSSで探してみます。
ありました。
background-image:url(“../フォルダ名/フォルダ名/フォルダ名/ファイル名.png”);
です。
このコードをパクり、フォルダ名とファイル名だけを変えます。
結果、
無事、カードの中のみ桜の背景に変わりました。
成功です。
しかし、やはり背景を変えると、文字の色が合わないですね……。
学んだこと、難しかったこと
今回、学べたところは、画像ファイルをサイトに取り込みたい時は、一旦今のデスクトップに戻る、置いてある別フォルダに入る、ファイル名をコードに直さないと画像は取り込めないことだと思います。
※多分、試した事はないですが同じフォルダ内に画像がある場合は「../も/」も要らなかったと思います。
つまり、
../←デスクトップに戻る
/フォルダ名←指定したフォルダの中に入る
最後にファイル名
これを学べました。
これを知っておけば、画像がどのフォルダに入っていてもサイトに取り込むことができます。
次に、難しかったところは、やはり始めにやった背景色を変えるのを間違えたところでしょうか。
AIが作ってくれたサイトのCSSには、分かりやすくこのコードは何のコードか書いてはあります。
しかし、コード1文１文に何のコードかは書いてはいません。
なので、どこを変えるとどう変わるのかは、やはり自分の知識を高めて活かさないと無理だと思いました。
終わり
今回は、カード何の背景色を変えたり、画像を取り込んだりしました。
記事にも書きましたが、背景色や画像を変えると他の文字の色やフォントも変えないと見栄えが悪いことが改めて分かりました。
トップページも大事ですが、何のサイトにするかでも背景や文字の変化は必須です。
後々、自分のサイトを作る時がきたら細部までこだわって作りたいと思いました。
次回は、🌸を🌻に交換したいと思います。
ですが、多分あっさり終わってしまうと思うので、余裕があったら最後の課題のボタンの色も変えたいと思います。
ご覧くださりありがとうございました。
