どうも、ひろです。
今回は、サイトのメインであるカードを作成をしていきたいと思います。
『AI課題その1』でも作成しましたが、プロフィールカードなのでカードを作らないとプロフィールカードにはなりません。
そのため、まずはカードの大枠を作成していきたいと思います。
始めから中々大変ですが、頑張って作成していきたいと思います。
拙い文章ですが、よろしくお願いします。
CSSの作成
今回AIがくれたものは「HTMLのコード」のみなので、CSSを作成したいと思います。
ただ私は、まだ1から何も見ずにCSSを作ることはできません。
※これからもできる気はしない。
そのため、書けるようになるまでは前回までAIが作成してくれたCSSを見て書こうかと思いまいす。
※AIも、使えるコードがあるなら使うのはプログラマーでも当たり前だといっていました。
ありがたいことに、AIが書いてくれたコードはコードを書く前に「/*カード*/」となんのコードを書いているか分かりやすく作られています。
なんとなくでしか理解できていない私には、とてもありがたいです。
前回の課題とそんなに変わりはない課題なので、前回の課題のカードの/*カード*/と書いてあるコードを探して、私がいま作成しているCSSへ書き写していきます。
CSSに写し実行しました。
CSSが実行され、文字が真ん中に集まりました。
成功です。
ただ、「・」や文字がバラバラで見栄えが悪くプロフィールカードとしては見せられません。
「・」の位置を揃え見栄えを良くする
次に、「・」の位置が不揃いで見栄えを揃えていきます。
しかし、ここからが今回で１番大変でした。
「・」が不揃いなのは「width: center;」が問題だと思うのですが、「centerをpx」に変えたり「スペースキー」間隔を変えたりしました。
ですが、いろいろ試しますが「・」を揃えると他のものが見栄えが悪くなったり、他を気にすると文字数が違うので「・」が揃わなくなったりと中々思うようにはいきません。
粘ってみても解決できなかったので、最終奥義「AIさん」に聞きました。
AIに聞いた結果「center」を「fit-content」に変えると良いとのことでした。
※「fit-content」の説明は後で書こうと思います。
早速、「center」から「fit-content」の変更し実行。
「・」が揃ってくれました。
他の文字の見栄えも良く、私が思った通りのデザインになりました。
今回学んだコード「fit-content」
今回学んだコードは「fit-content」です。
AIに聞いてみたところ、「fit-content」とはCSSのコードの1つで
「中身の大きさに合わせて、要素の幅や高さを調整する」とのことでした。
また、paddingや親要素の幅にも適用するとのことです。
文章だけでは意味がわからないのですが、AIがつけてくれた画像を見てなんとなくレベルで理解できました。ような気がします。
ちなみに、このfit-contentは高さにも適用するとのことです。
しかし、通常は高さが中身に応じて決まるため、height: fit-contentをあえて指定する必要がないケースも多いとAIが言っていました。
使い道としては、
・見出しやラベルの背景色を文字の幅に合わせたい
・ボタンの幅を文字に合わせたい
・内容に応じた小さいカードを作りたい
とのことでした。
※この答えは、AIが私のために出してくれてる答えなので、人によって違う回答をすることがあります。
私なりの解釈になりますが、横幅が文字に合わせて縮んだり伸びたりしてくれるんだろうなという答えに辿り着きました。
ただ、今回は私が横幅を設定しているので「幅に文字が合わせてくれたから「・」が揃えられた」ということだと思います。
今後も「fit-content」を使っていき覚えていきたいと思います。
終わり
今回は、プロフィールカードの土台を作りました。
当たり前ですが、今までAIに作ってもらったコードの一部を変えていただけなので今回のCSS作成は色々考えながら行いました。
新しいコードも教えてもらい勉強にもなりました。
ただ、HTMLやCSSのコードをどのくらい覚えれば良いか分からなくなり不安にもなります。
AIに不安なことを伝えると、覚えることよりも使うときに調べて使うように考えを変えた方が良いと言われました。
少しだけネガティヴな考えが減りました。
次回は、自身のイラスト画像と背景画像をプロフィールカードに貼っていきたいと思います。
