HTML学習②(ドットインストール)

【HTMLを学ぶ目的】

Wordpressを用いてブログをどんどんカスタマイズできるようになりたい。

・HPの構造を理解したい。

・教材 「ドットインストール:https://dotinstall.com/

 ・なお、本ブログは非商用であり、ドットインストール公式のブログではない。

 

◆ styleタグ

文書の見た目を規定するためのCSSを書くことができるタグ

CSSはHTMLを一通り学んだ後にやるつもりなので、サラッと
【例1】

 <head> 
    <style>
      body { background: skyblue;} _webページの背景色を変えることができる
    </style>
 <head>

s://dotinstall.com/:引用

 

styleをドンドン書いていくとクッソ長くなるので別ファイルから呼び出すことができる
【例2】

 <head> 
   <link rel="stylesheet" href="mystyles.css">
 <head>

s://dotinstall.com/:引用

_例1のstyleコードをmystyles.cssで保存。

_hrefの後は別途コードを保存したファイル名を記述。

 

いらなくなったコードをコメント化させて無効化することができる。

<!-- -->でコメント化
【例3】
<!-- コメント ↓のコードが無効化  -->

 

◆ id、class、style属性を使う

タグに付けられる属性にはそのタグ特有のものもあれば、

全てのタグに付けられるものもある。
後者を「グローバル属性」と呼ぶ。
多用されるグローバル属性を3つ↓

 

「id」ページ内に1つしかない要素に使う <!-- ↓でいう要素はp=段落のこと -->
【例】
<p id="message">こんにちは</p> 
<!-- pしかid="message"の属性を持てなくなる
ページ内でのジャンプ、p要素をスタイリングする時に使える -->

《観察》
要素に対して固有の識別名をつけることができるということだろうか。
そして、属性messageは要素p以外に持たせる(?)ことはできない。

 

「class」ページ内に複数ある要素に使われる
【例】
<p class="message">ハロー</p> <!-- ダブっててもok -->
<p class="message">ハロー</p> 
<p class="message active">ハロー</p> <!-- 異なるclassを持ちたいときはスペースで区切ってあげる -->

 

ちょっとわからない。後ほど。 

とりあえず全部わかろうとはしないで、先に進む。