ページの特定の場所にリンクする
<a>タグのリンクは、移動先のHTMLファイルだけでなく、そのHTML内の特定の場所を指定することもできます。リンク先に指定できるのは、リンク先のHTML内にあるid属性が付いたタグです。<a>タグのhref属性には、パスに続けて「シャープ記号(#)+id属性の値」という内容で記述します。
CSS、主なセレクタと書き方
セレクタの種類
タイプセレクタ
HTML内の、同じタグ名の要素をすべて選択する。
P {スタイル}
全称セレクタ
全ての要素を選択してスタイルを適用する。ページ全体のおおまかな設定をするのに使われます。
*{スタイル｝
classセレクタ
「クラス名」と同じclass属性を持つ要素をすべて選択します。
.forever {スタイル}
<p class=”forever”>永遠に</p>
idセレクタ
セレクタで指定した「id名」と同じid属性を持つ要素を選択します。id属性に付けるid名は１つのHTML内で一度しか使えないことから、結果的にid
セレクタで選択できる要素は1つだけになります。
#running {スタイル}
<h1 id=”running”>ウオーキング</h1>
疑似クラス
ある要素が特定の状態にあるときだけ選択する特殊なセレクタです。たとえばリンクの<a>要素には、そのリンクにマウスポインタが「乗っている状態」、マウスポインタが「押された状態」などがあります。疑似クラスを使うと、ある要素がこうした特定の状態のときだけ、スタイルを適用することができるようになります。
マウスポインタが載っているときだけスタイルを適用。
a:hover {スタイル}
マウスボタンが押されているときだけ
a:active {スタイル}
子孫セレクタ
特定の親要素に含まれる子要素、および子孫要素を選択するのが子孫セレクタです。複数のセレクタを組み合わせて、１つの子孫セレクタを作ります。組み合わせる個々のセレクタとセレクタの間は半角スペースで区切ります。
.nav li {スタイル}
<nav class=”nav”>
<ul>
<li>パソコン</li>
<li>テレビ</li>
<li>音楽</li>
</ul>
</nav>
一つ一つのセレクタをカンマ(,)で区切ります。
th, td {スタイル}
<table>
<tr>
<th>項目</th>
<th>内容</th>
</tr>
</table>
この本を参考に学びました。HTML,CSSの基本を学びながらサイトを作っていきます。
この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが500円程ならコスパよく、買っておいてよかったと満足してます。
レベルアップにプロからの学びを。
オンラインで受講ができるスクールですので、全国どこからでも。
