プログラミング学習日記18日目～恐怖が一つ一つ減る実感

できることが毎日着実に増え、充実した日々を送っています。

ここ数日で学んだことから目ウロコなことをまとめます。

headerとfooterは特別

ページを一からデザインする時、最初に<div>でセクション分けをしておくことで、ページデザインの設計図とします。

例えば、

🍏まず、全体をヘッダー、メイン、フッターなら三つに分けよう

🍏メイン部分は、「タイトル」「メニュー」に分けよう

🍏「メニュー」部分は「各メニュー」を横に三つ並べよう。

🍏それぞれの「各メニュー」の中は、「メニュー項目」と「メニューアイコン」と「説明」を三つ縦に並べよう。

このように、まず部分分けをする分けですね。

まずは大きく分けておいて、だんだん入れ子状に中身を分けていく感じ。

本や記事を書く時の章立てや見出し2.見出し3を大まかに作って、その全体像を設計することに似ています。

そのために使うのが<div>で、それぞれclassで、名前付けをしておきます。

　

上みたいな感じです。

だんだんインデントされているのは，入れ子を表しているわけですね。

それで，＜div　メイン>などの，名前付けをこのように書くんでした。

もちろん，</div>という終了タグと対で使います。この終了タグとの間に，さらに入れ子の<div>を配置するわけです。

　

この<div>の名前付けに，classを使うわけですが，headerと，footerとは，特別扱いされています。

<div class=”header”></div>

としなくてもいいようになっているんですね。

つまり

<header></header>

<footer> </footer>

これだけでOKというわけです。

さきほどのDiv分け設計図をもう一度見てみると，こうなります。

　

これでいいわけです。

おもしろいですね。

カーソルが乗ったら，色が変わる

例えば，ボタンの上などにカーソルをもっていくと色が変わるようになっていることがあります。

こういうのは，比較的早くから使っていまして目新しくはないのですが，当然これまではホームページ作成ソフトの中で，「カーソルが乗ったら色を変えるよ」という設定をしていただけで，実際のコードはどうなっているのか知りませんでした。

というより，考えようともしませんでした。

そういうところは，ブラックボックスのままで何にも困らないのです。

　

しかし，コードでページデザインをしようと志している身。

避けて通れません。

いったいどんな複雑な呪文なのでしょうか。

だって，カーソルが乗ったことを検知しなければならないし，色を変えなければならない。

そんなに簡単なことではないはずです。

そのくらいはわかります。

そこで覚悟して勉強に臨みました。

すると・・・・

[st-kaiwa2]あ，hoverってかくだけでいいのよ[/st-kaiwa2]

[st-kaiwa3]ええ～っ！？[/st-kaiwa3]

なんてことでしょう。

hover

それだけでよかったんです。

スタイルシートという，CSSだけを集めてファイルに次のように書き加えるだけ。

たった，これを書き加えるだけ。

divの部分にカーソルがhoverしたら，background-colorを赤に

あんなに，すごい呪文によって成り立っていると思っていたその動作が，実はたったこれだけ。

　

拍子抜けすると同時に，

[st-kaiwa1]「難しくないじゃん！」[/st-kaiwa1]

と改めて思いました。

[st-kaiwa2]・・・・・・・[/st-kaiwa2]

一つ一つ知っていくということは，恐怖がへっていくということでもありますね。