どうも、ひろです。
前回「カードの大枠と内容」の作成しました。
今回も、プロフィールカード作成の続きで背景と似顔絵を貼り付けていきたいと思います。
貼る予定の画像は、前に自分用意していたと思うので、見つけて貼っていきたいと思います。
ちなみにですが、私のブログはAIを活用してwebサイトを作ったりプログラミングをしたりするブログなので、今回使う予定の画像は全てAIに作ってもらっています。
※画像を探す手間も省けるし、著作権もそんなに気にしなくて良いので一石二鳥です。
また、今回、画像を貼って色々微調整したら「AIからの課題その2」は完成となる予定です。
拙い文章ですが、よろしくお願いします。
今回使用する画像
今回使う予定の画像は2枚です。
まずは、似顔絵です。
私のブログで使わせてもらっている似顔絵を使いたいと思います。
次に背景画像です。
背景画像として使おうと思っています。
ただ、パソコンをメインに使いたいのですが、この画像はパソコンよりパソコンを含めた風景をメインにしているように感じます。
可能であれば、CSSでコードを書いてパソコンをメインにできるようにしたいです。
不可能であれば、新しくAIに描いてもらおうかと考えています。
画像貼り
まず、似顔絵の画像を貼っていきたいと思います。
私の認識では、画像＝HTMLで貼る。
というイメージがあるので、HTML内で「img」「src」が書いてあるコードを探しファイル名を書いて実行します。
成功しました。
私のブログで使われている似顔絵を、今回作成しているプロフィールカードに載せることができました。
次に、背景画像を貼っていきたいと思います。
また、HTML内で「img」「src」が書いてあるコードを探します。
しかし、ここで問題が出てきました。
HTML内でいくら「img」「src」が書いてあるコードを探しても見つかりません。
何回も探しても見つからず、諦めてAIに聞こうかと考えていましたが最後にダメもとでCSSを探したら、なんとCSS内にbackground-imageというコードがありました。
試しに、ここにファイル名を書き実行。
成功しました。
まさかのHTMLではなく、CSSでも画像を貼ることにびっくりしました。
HTML上ではclassで設定し、CSS上でclassセレクタ内で画像を貼っていました。
どうやら、CSS内で画像の配置や大きさなどを決めてるみたいです。
中々、背景画像を貼るのが大変でした。
しかし、良かったのが思っていたよりパソコンの位置が合っていたため、メインになっているのが幸いです。
位置調整する必要がなくて良かった。
ただ、背景の画像が強く、私のプロフィールより目立ってしまっています。
ここで、最近勉強している「Canva」という画像を編集したりするサイトを使い、背景画像を透明化していきます。
※「Canva」は無料でも使えるサイトで、動画作成やポスターなど色々作成できる素晴らしいサイトです。
※本当は、Canva内での画像をスクリーンショットしてブログに貼ろうと思いましたが、問題あるかどうか分からないので、すでに薄くした背景画像を貼りました。
この薄くしたパソコンのファイルを背景画像に変更し実行します。
成功しました。
完成したプロフィールカードはこうなります。
無事、プロフィールカードが完成しました。
正直、まだまだ見栄えは悪いなと思いますが、今の私にはこれが限界です。
いずれは、他のプログラミングの他に、もっと見栄え良く作ることも目標に頑張りたいと思います。
今回学んだコード
「alt」です。
altとは、トラブルか何かでサイトに貼っていた画像やイラストがうまく反映されなかった時に、本来使われているはずの画像の内容が書かれているそうです。
※もしかしたらもっと上手な説明があると思いますが、私的にこの説明が最もしっくりきました。
時々、⬜︎の中に×が入っている絵や、写真のようなアイコンが書かれている絵がはられているとサイトがあります。
あの絵が貼られている横に、本来どのような画像が貼られていたかを教えてくれるための属性だそうです。
「alt」がないと、画像が反映されていない時になんの画像が貼られていたか分からなく、見ている方の想像にお任せの状態になってしまい、モヤモヤしてしまうなんてことが起こります。
地味に必要な属性だと思いました。
終わり
今回はAIがHTMLコードのみ書いてくれ、CSSは自力で調べて書いてプロフィールカードを作成しました。
ただ、ここはどんなコードを書けば良いとかの理解はしていなく、調べながらコードを書きました。
まだまだ、どんな時にどんなコード書いて良いかの理解はしていませんが、AIが書いてくれたコードを調べながら書き直すことは少しずつできるようにはなってきました。
自分で、少しでもできたことを褒めて楽しく覚えていきたいと思います。
次回は、AIにクライアント役になってもらい、架空サイト依頼を受けお仕事の真似事をしていきたいと思います。
ご視聴ありがとうございました。
