どうも、ひろです。
今回も、前回に引き続きAIから課題をもらいクリアしていこうと思います。
前回はクリアした課題は、AIが書いてくれたコードを書き換えるだけでした。
見ていない方はぜひ、
【AIからの課題に挑戦！ webデザイナー編】第1回 AIが作成したサイトを変える
を見てください。
しかし、今回の課題は前回とは比べるとレベルが大きく上がりました。（私的には）
なんと、
「最低限しか書かれていないHTMLと、白紙のCSS」を用いてAIが提示したレイアウトに仕上げ、プロフィールカードの作成をする。
という課題を出されました。
AIからの注意点として、分からないところは調べて書いて良いとのことです。
正直、書き始めの文章すら分かりませんので、自分のブログを見直したり、AIに聞いたりしながら作成していこうと思います。
自分で書くことで、覚えていけると信じて頑張っていこうと思います。
今回は、AIから出された課題で思ったことや難しそうだなと思ったことを書いていこうと思っているので、作成自体は次の記事から行なっていこうと思います。
拙い文章ですが、よろしくお願いします。
今回、AIが作成してくれたHTML
今回、渡されたコードをサイトに移したものです。
ここから、AIに出された課題をこなしていきレイアウトを作成、プロフィールカードを完成させていきます。
ちなみに、出された課題は
プロフィールカード
- カードの横幅を 300px
- カードを画面中央に配置
- 枠線を付ける
- 角を丸くする
- 影を付ける
- 内側に余白を付ける
画像
- 横幅 120px
- 高さ 120px
- 丸い画像にする
名前
- 中央揃え
- 文字を少し大きくする
自己紹介
- 文字を読みやすい大きさにする
スキル
- 箇条書きとして表示
- ただし、デフォルトの余白などを調整して見やすくする
ボタン
- ボタンらしい背景
- 白い文字
- 角を丸くする
- 下線を消す
- 中央に配置
が、今回出された課題です。
なんだか、出された課題を見たら頭がクラクラしてきました。
そして、課題を出されて思ったことが、やっぱりコードが書けないなでした。
最近、コードを見れば「これはあれのコードかな？」くらいの認識はつくようにはなってきたのですが、書くのはまだできません。
字は読めるけど、書けない現象です。
ただ、AIも調べて書いても良いという事なので、まず私のブログ内からコードを探し作っていこうと思います。
どんなプロフィールカードにするか
※イメージ画像です。
前回は、書いた記事が夏ということもあり夏を意識したプロフィールカードにしました。
今回は『勉強しているスキル』に私が今取り組んでいる『HTML、CSS、Javascript』と書かれているので、パソコン系の背景や画像素材を使っていけたらと思います。
色も、機械系な色にしてみようかなと思いますが、見栄えが悪い場合や文字、画像が見づらい時はやめようと思います。
正直、AIに課題をもらってクリアしてくので、そんなに大きく変わるプロフィールサイトにはならないと思います。
ですが、AIにもいろいろ変えてみた方が良いとのことなので、変えられるところは変えていきたいと思っています。
コードも書けるよう学ぶ（コピーアンドペーストを使わない）
先ほども書きましたが、意味はなんとなく理解できるようになはってきてはいますが、コードを書いてと言われると書けません。
なので、調べてきたコードは自分で書いていこうと思います。
「何を当たり前のことを」と思う方もいると思いますが、私は今までコピーアンドペーストという文字をコピーできるコマンドで書かずにコピーアンドペーストしていました。
便利なコマンドなのですが、このコマンドを多用しすぎると書けないという弊害が生まれました。
なので、今回からできる限りコピーアンドペーストは使わず、自分でコードを書いていこうと思います。
と言っても、私は「Visual Studio Code」というコードエディタを使っています。
Visual Studio Codeとは、少し文字を書いただけでタグやセレクタの予測変換がリストアップされます。
しかも、その後に使うかもしれないコードも予測で出してくれる優れものです。
なので、結局1から全て書く事はないですが、コピーアンドペーストに頼るよりかは覚えられると思います。
ただ、自分のコード選びが間違っていて何回書き直してもうまくいかない場合や、色のコードは特例としてコピーアンドペーストを使わせてもらおうかなと考えています。
（あくまで、練習だしやる気がなくなるのは嫌なので）
終わり
今回は、AIに出された課題を確認したりどういうプロフィールカードを作りたいかなど書かせてもらいました。
おそらく、見た目は前回と大きく変わるところがないと思います。
しかし、今回から私がメインでHTMLやCSSを書いていくので、作業スピードはゆっくりになると思います。
いつか、どんなサイトを制作して欲しいと言われてもササッと書けるようになりたいので頑張ろうと思います。
とりあえず、次回はプロフィールカードの制作から初めていきたいと思います。
ご視聴ありがとうございます。
