どうも、ひろです。
前回、私の自己紹介のサイトをAIに作ってもらってから課題をもらったので、今回はその課題に取り組んでいきたいと思います。
今回、取り組む課題は「文章の色や文字の変更」です。
始めの課題なので、AIさんも簡単なものから課題を出してくれたのかもしれないです。
しかし、復習という意味でも大事だなと思う課題なので、舐めてかからず全力で取り組みます。
文字の色を変える
早速、文字の色を変えようと思います。
前回、AIが作ってくれたサイトがこれです。
自己紹介の「ひろ」の文字の色がピンクになっていますが、青に変えようと思います。
確か、文字を書いたりするのはHTMLだったと思います。
探してみると、
<h1>ひろ</h1>
のタグコードがありました。
しかし、ここでは色を変える事はできません。
何故なら、今回のサイト作成では色やサイズを細かく変えるところがCSSだからです。
そこで、CSSでそれらしいコードを探してみます。
見つけたのが、
h1{
color:#e36a92;
font-size:36px;
}
でした。
今回は、color:#e36a92;→color:#00b7ff;に変更しました。
※color:#e36a92;に関する説明は、３学んだや難しかった事ことに書いてあります。（下にスクロールしていけばあります）
結果、
このように、「ひろ」の名前の部分がピンクから青に変わりました。
色は、目を惹きつける力があります。
背景が、暖色なら寒色が良いなど。
名前は、覚えてもらいたいので、１番目立つ色にしたいですね。
文章を変える（さらに、項目をもう1個増やす）
次は文章を変えていきたい、さらに項目を増やしたいと思います。
同じく、HTMLで「web製作勉強中、HTML /CSS学習中」の文章を探していきます。
<p>web製作勉強中</p>
<p>HTML /CSS学習中</p>
と書いていあるコードを見つけました。
このコードを
<p>プログラミング(Python.HTML.CSS.JavaScriptなど)</p>
<p>読書(ビジネス書、マンガ)</p>
<p>小説(書く方)</p>
と、直してもう1つ項目を増やしました。
結果、
私の考えた文章に変わりました。
また、項目も1つ増やす事もできました。
これで、今回の課題はクリアできました。
サイトの見栄えが少し良くないですが、今回は文章を変えることがメインなので次回以降に持ち越したいと思います。
今回は<p></p>のみを使っていますが、<br>(改行)のタグもあるので、用途によって使い分けていくと良いと思います。
例
<p>読書(ビジネス書、マンガ)</p>を<p>読書<br>(ビジネス書、マンガ)</p>にすると、
読書(ビジネス書、マンガ)
↓
読書
(ビジネス書、マンガ)
になります。
見栄えを気にしたい時とか、区切りをつけたい時、読みやすくしたい時におすすめなタグです。
学んだこと、難しかったこと
今回の学びは、色の指定です。
webデザインで色を付ける時は、色の名前（スペルで書く）の他に「#e36a92」（ピンク）とのように変な文字でも色が変わるということです。
ネットで調べたところ、この訳の分からないスペルと数字はカラーコードと言って、パソコンが色を判別すための暗号なんだそうです。
もちろん、色をスペルで書いてもパソコンは判別してくれます。
私の体感では、色をスペルで書くよりカラーコードで書く方が細かな色指定ができるんじゃないかと思いました。
ただ、やはり色の指定をカラーコード書く場合は、ネットを見ながらではないと無理だと思いました。
難しかった点は、文章です。
始めは、何も考えず文章だけを書きましたが、それだと文章が長すぎたりして見栄えが悪かったり読みずらかったりと考えさせられました。
また、文字の大きさも重要で、今回は<h1>タグが仕事をしてくれたので良かったですが、文字の大きさも変えると見栄えが変わってきます。
今回、私のサイトのCSSには
p{
color:#666;
font-size:18;
}
と書かれているコードがありました。
HTMLで、<p>タグ内の文字を色やサイズを変えるためのコードです。
ここの、font-size:18;の18の数字を大きくしたり小さくしたりで、文字の大きさは変わります。
自分のサイトに見合った、色や文字の大きさを見つけていけたらと思います。
終わり
今回は、文字の色と文章を変え（項目を1つ増やした）ました。
３.学んだことや難しかったことでも言いましたが、
文字の色や大きさ１つでも、サイトの見た目は大きく変わったり文章次第でも読んでくれるかどうかが変わってきます。
見た目が綺麗なものはみんな大好きだと思います。
意外にここを変えるだけでも、見てくれる人は増えると思うので今回は覚えておいて損はないと思う記事の1つだと思っています。
次回は、背景色の変更をしたいと思います。
ご覧くださりありがとうございました。
