HTML＆CSS書籍｜メモ｜targetとinheritとfirst-child
作りながら学ぶHTML/CSSデザインの教科書
6章、リンク設定に関しての諸々。
リンクの設定自体と言うより、いろんなナビゲーションの作り方・考え方について。
大切なのは閲覧者がいかに見やすく、使いやすいデザインであるか。と、言う事。
カッコイイ！素敵！！ってなるのはもちろん大切だけど
操作しづらいと疲れちゃうもんね。
閲覧者がいつでも簡単に
- ページ内の現在地を把握できる
- 希望のページにたどり着ける
とても大切。
target
a要素に合わせてどこにリンクを表示させるか指定するやつですね。
色々あるけど特に覚えておこうと思ったものや、大事だなって思った事など。
target=”_blank”
リンクをクリックすると常に新しいタブでページを開く。
自分のサイトから他のサイトへリンクさせる時、
今開いているタブにそのまま他のサイトが表示されちゃうと
閲覧者がそのまま戻ってこれなくなりがちなので
自分のサイトが表示されているウィンドウはそのままに
新しいタブを開いてリンク先を表示させる。
target=”_blank”使用時の注意
閲覧者は自分で新しいタブを開いてリンクを表示させることが出来る
（Winなら右クリック→リンクを新しいタブで開く）
ページの閲覧は閲覧者自身の意志で動きをコントロールできることが望ましいので
_brankを不用意に使用しすぎない方が良い
意に反してタブがどんどん増えるのは良くないと言う事。
target=”_new”
新しいタブを一つだけ開く
常にそのタブにリンク先を表示する
上記を考えるとこっちを使うようにした方が良さそう。
あと、「ページの閲覧は閲覧者自身の意志で動きをコントロールできることが望ましい」っていうのは目からうろこで
リンクの挙動にかかわらず、常に意識しないとですね。
昔も強制MIDIウゼェとか言ったもんね。
inherit
親要素のプロパティを強制的に引き継ぐ（すべてのプロパティに使える）
ちょっと「これは便利！」っていう状況をパッと思いつかないんだけど
これは絶対便利な状況があるはず！って思う。
<header>
<h1>〇〇〇</h1>
</header>
<div class=”main”>
<h1>×××</h1>
<p>□□□</p>
</div>
h1 {color: red;}
.main {color: green;}
〇〇〇
×××
□□□
h1 {color: red;}
.main {color: green;}
.main h1 {color: inherit;} （親要素.mainのcolorを引き継ぐ）
〇〇〇
×××
□□□
:first-child
ある要素の中の任意の要素に対してのみcssを指定できる
文字だけだと🤔ってなるけど、用例見たら🤩ってなった。
これは便利そう！と思ったのでぜひともしっかり覚えたい！！
:first-child ある要素の中の最初の要素
:last-child ある要素の中の最後の要素
:nth-child(ever) ある要素の中の偶数番目の要素
:nth-child(odd) ある要素の中の期数番目の要素
:nth-child(n) ある要素の中の最初から（ｎ）番目の要素
:nth-last-child(n) ある要素の中の最後から（ｎ）番目の要素
※:nth-child(2n)で偶数、:nth-child(2n-1)で奇数の指定もできる
<ul>
<li>〇〇〇</li>
<li>〇〇〇</li>
<li>〇〇〇</li>
<li>〇〇〇</li>
<li>〇〇〇</li>
</ul>
li:first-child {color: red;}
li:nth-child(3) {color: green;}
li:last-child {coror: blue;}
・〇〇〇
・〇〇〇
・〇〇〇
・〇〇〇
・〇〇〇
背景色が交互にピンクと黄色になるリストとか
:nth-child(ever) {background-color: pink;}
:nth-child(odd) {background-color: yellow;}
超便利そう。