関連記事もどうぞ

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

2.HTMLとCSS初級編を学んでの「目からうろこ」的なこと

投稿日:2019年6月3日 更新日:

プログラミング学習。

4日目になり,一応HTMLとCSSの基本的なところは学び終えました。

今,ページの全体構造をつくっているところです。

HTMLやCSSはプログラミング言語ではないのですが,この後,PHPの勉強につながっていく大事な基本なので,ちゃんと学びなおしています。

これまでは,2000年頃「ホームページ」を作っていた時に見よう見まねで本を見ながら「使っていた」だけで,ちゃんと学んだ経験はありません。

今回,初めて「学んでいる」という気がして,なかなか充実しています。

20数年にわたるもやもやが徐々に晴れていっている感覚は,ここ20年の間に置き忘れてきたことを,今回収しているような感じがします。

さて,ここまで学んできての「目からうろこ」的なことを述べてみようと思います。

終了タグ</◯◯>はなくてもよかった(そのかわり後が大変)

いやいや,もちろん終了タグ</◯◯>やいるんですよ。

たとえば,<h2>という見出しタグは,見出しを書いた後に</h2>というような,前に「/」をつけた終了タグをつけないといけないんです。

これ,つけないと,その後が全部見出しになっちゃうというおそろしいことになってしまう。

つけなくてもエラーは出ないけど,そこで終わらずに全部反映されちゃうという意味ですね。

「あ,つけなくてもとりあえず表示された・・・」という驚きがあったものですから目からうろこでした。

絶対 </ >で始まる修了タグは必要だと思ってたので・・・ 

ちなみに,ここの見出しは次のようになってます。

<h2>終了タグ</◯◯>はなくてもよかった(そのかわり後が大変)</h2>

 

<a>はリンクのタグだった(何を今さら)

これまで,見よう見まねで使ってきた中においては,

<a>

というタグの意味が「リンクだよ」という意味だとは知らなかったんですね。

<a href="◯◯">

みたいにつかってたんですね。

今回,<a>を使うとリンクになるということを始めて知りました(今さら)

<a>次のページへ</a>

これで,ブラウザで見ると,「次のページへ」がリンクになっているんです。

これ知らなかったんですね。目からうろこです。

もちろん,どこにリンクするかが書かれてないので,クリックしても次のページ委は飛びませんけど,いちおう下線がついてリンクに見えるようになるということでした。

本当に次のページへのリンクをはるには,

href をくっつけて,リンク先のURLを書きます。

<a href="nestpage.html">次のページ</a>

なるほど,こんな構造になっていたんだと今回初めて学んだ次第です。

これまでの20年間のもやもやが貼れました。

気持ちいい。

 

<ui><li>のリストタグは,実は簡単だった

リストを表すタグの<ul>と<li>

これがもう,「真似して使っていた」時代には,面倒で面倒で。

見るのも嫌で,自分がそれを書くなんて考えられませんでしたね。

<h2>などのタグは手打ちすることもありましたが,

ほぼ,htmlエディタのプレビューモードでは,「リスト」を選べばいいので手打ちなんてしたことがありませんでした。

でも,実際に書いてみると全然難しくなかった。

<ul> と</ul>の間に,

リストいしたい事柄を,それぞれ 

<li> </li>

で囲んで書くだけでした。

いや,それはわかってたろうといわれたらわかってたのですが

絶対自分で書きたくないというブロックが働いてたんですね。

まあ,実際に手を動かしてみると,いとも簡単に20年間のメンタルブロックがはずれたということですね。

手を動かして学ぶということは大切ですね~

「セレクタ」「プロパティ」の言葉が腑に落ちた

装飾を加えていくためのCSSも苦手。

使い続けてましたけど苦手。

実際に,スタイルシートを開いた編集してたけど,「勘」でやってた,というおそろしい時代が20年続いてました。

だって,「セレクタ」とかいかにも一般用語からかけ離れていて「近寄るな」という感じじゃないですか。

できるなら日常生活では使いたくありません。

しかし,当然CSSの入り口では避けて通れない言葉。

まあ,やってみるといとも簡単でした。

「どこの部分を装飾するの?」という「どこ」がセレクタ

という,たったそれだけのことでした。

また,「何をどうするの」というのがプロパティ

「色を赤にして」,という部分ですね。

これも,長年のもやもやが解消された大きな事件です。

Classは,タグにつける名前のことだった

Classとか絶対見たくなかったですね。

コードの中に,Classという言葉見つけると,拒否反応が出て,もう意味わからん!わからんけど,こんなふうじいじればOK?みたいな感じでやってました。

Classは名前

ってわかったら何も怖くなくなった。

たとえば,<li>というリストの色やフォントなどを変えるとき,ひとつのリストだけは赤にしたくても,<li>でくくったリストであれば,全部指定したのと同じ装飾になる。

でも,

Classで名前つけて特別な色の指定をしておけば,それがついたリストだけ色を変えられる,というそういうことなんですね。

何を今さらですね。

それが

<li Class="special">◯◯</li>

とすることで,Specialとう名前の付いた装飾(プロパティ)が適用されるというわけでした。

目からうろこです。

というより,よくこれまで使ってきたな,という感じです。

まとめ

学びなおしによって,20年間のもやもやが次々に解消されてますけど,よく何も知らずにスタイルシートまで開いて編集してきたな,という驚き。

僕は,こんなことが多いです。

知らないけどとにかく始めちゃえということですね。

まあ,それだから20年間やってこれたのかもしれません。

わかってからじゃないとできないことなら,すでに20年前に入り口でやめていたでしょう。

すごい世界です。

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

登録

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

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


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

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

 



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


follow us in feedly

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

にほんブログ村


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

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