どうも、ひろです。
今回は、HTMLに彩りを飾るための「CSS」をご紹介します。
本当は、HTMLみたいにCSSのみでサイトを作りたかったんですが、HTMLを使わずCSSだけではサイトは作れないため、CSSをメインにご紹介する流れになります。
前回にご紹介した『【初心者必見】HTMLとは Webデザイナーへの一歩』を見るとわかりやすいと思います。
サイトを作るための第二歩です。
CSSを初めて触る方やおさらいをしたい方は、参考にしていただければと思います。
拙い文章ですが、温かい目で見てください。
CSSとは何か
CSSとは、HTMLをより良いデザインにするための言語です。
始めに言っておくことは、『【初心者必見】HTMLとは Webデザイナーへの一歩』でも書きましたが、HTMLのみでCSSを使わなくてもサイトは作れます。
ですが、サイトのデザインはとても大事で、どんなに有益なサイトや良い記事を書いていても目に留まらなければ意味ありません。
CSSはそのデザインを変えるための言語です。
CSSができる様になれば、可愛いサイトや格好良いサイトが作れる様になります。
CSSを触ったことがない方でも、少し習えば次のようなデザインが簡単にできる様になります。
↑の画像がHTMLのみで作ったサイトです。
↓少しCSSを使うだけでこのように変わります。
※1
コードはどんな文字を使う？
CSSのコードは、HTMLと違います。
※私的には、似ていると思っていますがHTMLの上位互換がCSSに見えます。
多分ですが、CSSの分構成も<タグ>を使っています。
※細かくいうとそれも違うらしいのですが、今の私には同じ様に見えるので今のところそう書かせてもらいます。
ただ、HTMLと内容は一緒でも使い方が少し違います。
例：
h1(タイトルなどに使う文字の大きさが変わるタグ)ですが
HTML
<h1>こんにちは</h1>
CSS
h1{color: pink;text-align: center;}
HTMLはタグを/で締めるのに対し、CSSは{}で締めています。
注意：間違えると実行できなので気をつけましょう。
次に、AIに始めに何を覚えた方が良いかを聞いたところ、まずは以下のコードを始めに覚えておくとサイトが作りやすくなり良いとのことです。
・color
・background-color
・font-size
・margin
・padding
・border-radius
1つずつ説明していきます。
color
色を変えます。
p{color: green;}
pは文字を書く時に用いられるので、このコードを書くと文字の色が緑になるということです。
background-color
背景の色を変えます。
body{background-color:pink}
bodyはサイトに映し出したい時に用いられるので、このコードを書くと背景の色がピンクになるということです。
font-size
文字のサイズを変えます。
h1{font-size: 40px;}
h1はタイトルの時に用いられる、文字が大きくなるタグです。
これにCSSのコードを用いると、h1の文字の大きさも微調整できて好きな文字の大きさに変えることができます。
margin
外枠のスペース
.card{margin: 20px;}
お弁当が2つある場合、お弁当とお弁当の距離がmargin
※.cardとは、学校でいうクラスを分ける時に使う組みたいなものです。
今後、書いていきたいと思っているセレクタです。
padding
内枠のスペース
.card{padding: 20px;}
お弁当で例えると、お弁当箱の中の食べ物の隙間がpadding
※.cardとは、学校でいうクラスを分ける時に使う組みたいなものです。
私の感覚では、家と庭のスペースがmarginで、家の中の壁と家具のスペースがpaddingです。
border-radius
角を丸くする。
簡単にいうと、長方形の角が丸みを帯びる様になります。
.card{border-radius: 20px;}
※.cardとは、学校でいうクラスを分ける時に使う組みたいなものです。
今回書いたコードを覚えると
.card{
background-color: white;
color: #333;
font-size: 20px;margin: 20px;
padding: 20px;border-radius: 15px;
}
背景ができ、その中に色と大きさがを変えた文字が書かれ、外枠と内枠が設定された丸みを帯びた枠ができます。
基本中の基本なので、この段階ですとHTMLでも全く同じ様なサイトは作れます。
しかし、CSSはここからさらに素敵なデザインにできるので、今回は基本中の基本を覚え知識が付いてきたらコードを付け足していける様になります。
AIに上級者のサイトを作ってもらう
最後に、HTMLにCSSを用いた上級者のサイトをAIに作ってもらいました。
以前AIに、シンプルで宇宙っぽいサイト作成を頼んだので、名残で暗めのサイトになってしまいましたが、これがHTMLとCSSのみでAIが作成したサイトになります。
文字は青く光っている様に見え、上のバーにはメニューが追加されています。
サイトの真ん中にある「START NOW」の文字にカーソルを合わせると青く光ます。
Screenshot
上のメニューにもカーソルを合わせると、文字の色が白から青に変わります。
今回は、画像を載せたりは頼んではいなかったので、デザインだけでAIに頑張ってもらいました。
ただ、コードを見た限りですが、コード内容は基本的なものの組み合わせで作っているように見えました。
もしかしたら「avascript」を使わなければこのくらいならすぐに出来るんじゃないかな？と、思えました。
頑張ってスキルを上げたいと思います。
終わり
今回は、AIに頼んで極力CSSのみでサイトを作り勉強しました。
先ほども書きましたが、HTMLとCSSならすぐにとは行かなくても上達できるんじゃないかなと思えるような内容に思えました。
しかし、サイト制作をAIに頼んでいる最中、何回も「Javascript」の使用も求められました。
つまりは、これから先Webデザイナーを目指すのであれば「HTML、CSS、Javascript」は必須だということです。
ちなみにAIに聞いたところ、私がwebデザイナーで食べていける様になるには最低でも約1年かかるそうです。
※AIを活用すればこう少し短くなるそうです。
長いのか短いのかは人それぞれですが、今の仕事を頑張りながら副業をする時代がもう見えています。
今現在、私は色々AIに頼んで学んでいますが、いずれは一本化して初心者を脱出していければなと思いました。
次回は、今回のスキルを用いてLP（ランディングページ）というものを作成していきたいと思います。
LP（ランディングページ）ってなに？
と、思う方もいらっしゃると思うのでLP（ランディングページ）とは？も込みでご紹介できたらと思います。
ご覧くださりありがとうございました。
