運用を意識して作るのが大事。ProgateでCSSを無料で学んでみました。

こんにちは。サイドラインズの信夫です。

今回は「Progateでプログラミングを学んで副業で開発をしてみる企画」の4回目です。現在の僕のレベルはこんな感じです。

レベル4。レーダーチャートはhtmlがちょっと上がって角みたいになってる

現在はhtmlのタグのことを少し勉強しまして、レベル4です。今までワードプレスでだましだまし把握してきた部分を改めて仕組みから勉強できており、すこぶるご機嫌です。以下がこれまでのProgateでの学びの記事です。

「学び」をより楽しむためには恐れずに「実践」から入ってみよう

わからないことは実践の数をこなして、後で理解を追いつかせる

文系がProgateでプログラミングを学んで副業で開発をしてみる

今回はいよいよCSSの学びが始まるようです。htmlと違ってこれはもう完全に未経験です。ではいきましょう

ページの色とか大きさとか配置とかをCSSで設定するメリット

CSSっていうのを使うことで、ページ上のhtmlの要素を装飾したり、レイアウトを変更したり出来るんですって。htmlでも文字大きくしたりとかは出来るけど、CSSと分けることでカスタマイズがしやすくなるんでしょうね。

ワードプレスいじっていると、たまに「レイアウトこういう風にしたいな」とか「この見せ方飽きたな」とかあるんですよね。そういう時に、ページの中身をいじることなくCSSをいじることで簡単にレイアウト変えたり表示方法を変えたりできるので、便利なんだと思います。CSSをいじるだけで全く雰囲気の違うデザインにできるんだろうなと。

今日も出ました。まだ理解出来ない記述

CSSっていうのはhtmlの要素に対して、「どこの」「何を」「どうする」を指定できます。そしてその「どこの」の部分を「セレクタ」と言い、「何を」の部分を「プロパティ」というらしいです。今回で言えばh1がセレクタで、colorがプロパティですね。ですが、ですよ。セレクタとプロパティはわかる。けどさ。

この

h1{
    color:red;
}

って

h1{color:red;}

じゃだめなのかなと。

こういうところ気になる。あでもあれか。ちょっと昨日のことを思い出してみたけども、これもあれか、入れ子構造か。例えばh1の他のプロパティも変更したい場合とかは同じ様にインデント入れて縦に並べるのか。そうすると、同じセレクタ内でどのプロパティをいじっているのかがわかりやすくなるのか。そういうこと？

なんとかCSSの一発目の演習もクリア

今回も色々疑問が出てきましたが、今回もなんとか無事に演習をクリアできました。

無事にレベル5達成

そして無事にレベル5も達成。プロパティの末尾はコロン！行末にはセミコロン！そんなんも覚えました。CSSっていじったことなかったので単純に面白かったです。

次は文字の大きさと文字の種類をCSSでいじる

今回は続けてフォントの設定もCSSでいじっていきます。文字の大きさとか、文字の種類？形？をいじっていくようですよ。font-sizeのプロパティで文字の大きさを、font-familyのプロパティではフォントの種類を設定できるとのこと。そしてフォントファミリーの名前の中に半角スペースが入っているものもあって、その時はそのその名前をダブルクォーテーションで囲うそうです。

フォントに関してもさっきやった色の変更と同じで無事にクリアできました。次は「高さ」と「幅」を変更していくようですね。

作って終わりではなく、運用を意識した作りにしないといけない

CSSのさっき自分が感じた疑問は、運用を意識することでスッと腹落ちしました。ウェブサイトって作って終わりじゃないですもんね。作ったらそっから改善がずーっと走ることになるので、いじりやすいように作るっていうのも大事なんだなと。まして企業とかだと運用者がずっと同じなんていうことも無いと思いますし、後から運用を任された人が作りを理解しやすいように綺麗に書くことが大事なんですね。そういう話を現場で聞くことはありましたが、実際に自分がいじってみて、その重要性がわかりました。今回も素敵な学びがありました。

ということで次いってみたいと思います。次の記事はこちら

ProgateでCSSに挑戦中。社会人の学びは定着させるための復習が大事。