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

投稿日:

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

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

headerとfooterは特別

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

例えば、

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

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

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

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

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

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

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

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

<div>で大まかに設計する

<div ヘッダー>

<div メイン>

 <div タイトル>

 <div メニュー>

  <div 各メニュー>

   <div メニュー項目>

   <div アイコン>

   <div 説明>

<div フッター>

 

上みたいな感じです。

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

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

<div>の名前づけ

<div class="メイン">

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

 

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

<div class="header"></div>

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

つまり

<header></header>

<footer> </footer>

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

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

<div>で大まかに設計する

<header>

<div メイン>

 <div タイトル>

 <div メニュー>

  <div 各メニュー>

   <div メニュー項目>

   <div アイコン>

   <div 説明>

<footer>

 

これでいいわけです。

おもしろいですね。

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

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

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

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

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

 

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

避けて通れません。

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

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

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

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

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

すると・・・・

lala
あ,hoverってかくだけでいいのよ
Lyustyle2
ええ~っ!?

なんてことでしょう。

hover

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

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

カーソルが乗ったら色を赤に

div:hover{
  background^color: red;
}

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

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

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

 

拍子抜けすると同時に,

lyustyle
「難しくないじゃん!」

と改めて思いました。

lala
・・・・・・・

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

関連記事もどうぞ

メルマガ講座「10年ブログによるブランディング講座」

登録

10年ブログによるブランディング講座は30通のメールによる講座です。
また,2018年7月現在,週1回金曜日に「Lyustyleの読書」をはじめとする「知的迷走通信」を配信しています。
皆さんと一緒に楽しく成長できたらと思っています。

lyustyle
無料です。解除も自由です。下のリンクよりご登録ください。Lyustyleの設置した安全なページです。


登録するとすぐに第1回目のメールが届き,その後,30通のメール講座が始まります。

Lyustyleメルマガ「知的迷走通信」

 



よろしければ、購読の登録をしていただければ幸いです。


follow us in feedly

にほんブログ村 PC家電ブログ デジモノ・ガジェットへ

にほんブログ村

-125 プログラミング学習日記

Copyright© 知的生活ネットワーク , 2019 All Rights Reserved.