0ぷろ!

PCに対しての知識が0の人間が半年でどこまで成長するかを自分で記録するブログ

七日目!

やっと一週間ですね...

なんだかめちゃくちゃ長く感じます。

すでに一ヶ月くらいやってる気がします。 

 

はい。それでは今日の進捗です。

今日は

スタイルシートを使ってデザイン付け

スタイルシートのclass属性とid属性の使い分け

をやっていました。

javascriptは少ししか出来なかったので後日再度リベンジします...

 

 

ではまずは、スタイルシートを使ってデザイン付けです。

 

 

 

昨日UPしたHTML.ファイルに色や文字の大きさの指定

それからソースを見やすいように修正(見やすくなっているのかな...という一抹の疑問)

など、昨日よりも深い所までやっていました。

まだやりたいことがあって、今画像貼っている部分を自分でテーブル作成したいですね。

明日から休日なのでそれもやろうと思っています。

それで初めて完成、という形になります。

 

 

続いて、スタイルシートのclass属性とid属性の使い分けについて

スタイルシートのclassとidの使い分け

 

*class と id 属性について

(CSS)作成時にある要素の一部だけを装飾したい場合に使う2つの要素。

それぞれ違い、役割がある。

 

class属性を使う場合。

           HTML

<p class=“○○○”>クラスを使った例</p>

           スタイルシート

p.○○○{color:red;}

要素名とclass名の間に「.」を記述する。

 

id属性を使う場合。

           HTML

<p id=“△△△”>アイディーを使った例</p>

           スタイルシート

p#△△△{color:red;}

要素名とid名の間に「#」を入れる。

 

 

どちらもブラウザ上では対象の文字が赤くなるだけ。

では何が違うのか。

 

*それぞれの役割の違い

・class

「種類名を割り当てる」

同じclass名を、1ページ中に何度でも使える。

 

・id

「固有の名前を割り当てる」

同じidは、1ページ中に一度しか使えない。

 

 

無理にid属性を使う必要は無く、全てに対してclass属性を使っても良いが

特に(デザイン的に)強調したい場合にはidを使ってもいい。

ソースを見た時に一目で強調したい場所がわかる。

だが、id > classの優先度のため、複数のページでclassとidを併用する場合は

優先度を自分で見分けにくくなる可能性もある。

 

 

*id属性とdiv(仮)要素を組み合わせることでページ内リンクが作れる。 

 

タイピング結果へ

 

 

<a href=“#□□□”>ページ末尾へ</a>

これは「ページ内リンク」を作るためのソースで、このようにスタイルシート内記述すると

□□□という名称のアンカーポイントにリンクさせる事が出来る。

アンカーポイントというのは□□□という名前が付けられた位置のこと。

 

 

<div id=“□□□”>

:

:

</div>

 これをHTMLファイル内に示しておくと、「ページ内リンク」をクリックした時に、

上記のid属性が付加されたdiv要素のある位置に飛ぶ。

 

 

本日の参考URLです。

万能タグdivタグは「class属性」で使いこなそう--人気ホームページが作れる簡単作成講座

初心者のスタイルシート (CSS)

スタイルシートの class と id の使い分け [ホームページ作成] All About

HTMLファイル用カラーID一覧

http://members2.jcom.home.ne.jp/sakura77/color.html

 

 

本日のタイピング結果です。

 

f:id:ysm_0pro:20160318190900p:plain

だいぶ速さを保ちつつミスを減らせるようになってきました。

あと最近はブラインドタッチもしっかりやるようにしてます。

正直自信はあんまりないので...

 

以上が今日の進捗です。