七日目!
やっと一週間ですね...
なんだかめちゃくちゃ長く感じます。
すでに一ヶ月くらいやってる気がします。
はい。それでは今日の進捗です。
今日は
・スタイルシートを使ってデザイン付け
・スタイルシートの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属性」で使いこなそう--人気ホームページが作れる簡単作成講座
スタイルシートの class と id の使い分け [ホームページ作成] All About
HTMLファイル用カラーID一覧
http://members2.jcom.home.ne.jp/sakura77/color.html
本日のタイピング結果です。
だいぶ速さを保ちつつミスを減らせるようになってきました。
あと最近はブラインドタッチもしっかりやるようにしてます。
正直自信はあんまりないので...
以上が今日の進捗です。