実践で学ぶHTML／CSS　－疑似要素について

どうもです。

これまでで基礎編は大体終わりです。これからは実践編に入っていきます。実践編では以前学んだ基礎的な知識を使いつつ、実際に何か作っていきます。なので、もし分からなくなれば巻き戻って復習してみてください。質問等も気軽にくださればお答えします。

ではよろしくお願いします。

▼こちらで全てのレッスンを確認できます。

hiroakies.hatenablog.com

疑似要素について

さて、先日floatを使用した場合の回り込みを解除する方法として、crearfixというテクニックについて紹介しました。crearfixには疑似要素を使用する必要がありました。今回はこの疑似要素について押さえていきます。

▼ポイント

検索エンジンはCSSである疑似要素をコンテンツの中身として見ていません。そのため、SEOを気にせずユーザーのための自由な表現ができます。疑似要素はあくまでもHTMLの要素ではないので、装飾扱いにできます。

　※はてなブログでは、2018.11.26時点でコロンはひとつです。

以下は、aタグに対して疑似要素を用意する場合です。

a	すべてのリンク
a:link	未訪問のリンク
a:hover	リンクにカーソルが重なっている時
a:active	リンクをクリックしている時
a:visited	訪問済みのリンク
a:focus	リンクにフォーカスしている時（tabキーで移動）
a:after	タグの前に疑似要素を用意する
a:before	タグの後ろに疑似要素を用意する
a:first-letter	最初の文字
a:first-line	最初の行

例えば、私のウェブページでは以下の設定を行ってヘッダ部分のボタンを作っています。イメージは次のものです。

f:id:hiroakies4463:20181125010300j:plain

<div class="header-list">
<nav>
<ul>
<li><a href="https://hiroakies.hatenablog.com/about">ホーム</a></li>
<li><a href="https://hiroakies.hatenablog.com/archive/category/HTML%2FCSS">HTML／CSS</a></li>
<li><a href="https://hiroakies.hatenablog.com/archive/category/Python">Python</a></li>
<li><a href="https://hiroakies.hatenablog.com/archive/category/%E8%AA%AD%E6%9B%B8">読書</a></li>
<li><a href="https://hiroakies.hatenablog.com/archive/category/%E6%98%A0%E7%94%BB%EF%BC%88%E5%8B%95%E7%94%BB%EF%BC%89">映画</a></li>
<li><a href="https://hiroakies.hatenablog.com/archive/category/%E8%AA%AD%E6%9B%B8">カフェ</a></li>
<li><a href="https://hiroakies.hatenablog.com/archive/category/%E9%9B%91%E8%A8%98">雑記</a></li>
</ul>
</nav>
</div>

.header-list li,.header-list li a{ list-style: none;
height:50px;
width:120px;
text-align:center;
line-height:2.5em;
float:left;
margin-right:3px;
display:block;
font-color:black;
background-color:#f0f0f0;
text-decoration: none;
transition:all 0.5s;}
.header-list li a:hover{background-color:#fdfdfd;}
.header-list li a:active{position:relative;
top:6px;
box-shadow:none;}