CSSの疑似要素だけでマークをつくる
これをつくるのにめちゃくちゃ時間がかかったので記録。
ブロック要素とインライン要素を理解してなかったのがハマった原因。
手順
スタート
スタート時のHTMLとCSSと表示結果はこんな感じ。
- 表示
- HTML
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="stylesheets/application.css">
<title>CSSの練習</title>
</head>
<body>
<div>
<header>
<h1>見出し</h1>
</header>
</div>
</body>
</html>
div {
background-color: red;
padding: 24px;
width: 480px;
margin-top: 12px;
margin-right: auto;
margin-left: auto;
}
header {
background-color: yellow;
}
h1 {
font-size: 24px;
font-weight: bold;
position:relative;
padding:16px;
}
これを最終的にこうしたい。
疑似要素（before、after）を使う
疑似要素というのを使うと、HTMLを触らずに要素もどきを追加できるらしい。
CSSの疑似要素とは？beforeとafterの使い方まとめ
やってみた。
h1::before {
content:"前←";
}
h1::after {
content:"→後";
}
追加された。
「content」プロパティに空文字を指定する
実際には文字を指定して図を作るわけではないので、content: "";に変更する。
あれ？消えてしまった。 これだと疑似要素を使うにはcontentに文字を指定しないとならないことになってしまう。
～ここから数時間ハマるが省略～
「display: block」を指定していなかった
疑似要素のcontentをcontent:"";にすると表示されなくなってしまったのは、contentに指定した""(空文字)が「文字」、つまりインライン要素だったのが原因だった。
display: block;で疑似要素の表示形式をブロック要素として指定すれば、content:"";のように空文字を指定しても領域が確保できた。
h1::before {
content:"";
display: block;
width: 12px;
height: 12px;
background-color: green;
}
この調子でh1::after {}も同様にdisplay: block;を追加し、■が表示された。ブロック要素なので縦にならんでいる。
ブロック要素とインライン要素
CSSではブロック要素とインライン要素の違いをしっかり理解しておかないと、今回のようにハマることになりそうなので、ブロック要素とインライン要素の違いについて理解する。
ブロック要素は必ず横いっぱいに広がって、次の要素がブロック要素の下に位置される。 中に書いている文字や図形が小さくても、領域的には横いっぱいを保持しているイメージ。
一方インライン要素は、インラインという名前の通り要素(行)の途中に差し込むことができるので、横に配置される。 その要素の分の領域しか領域を確保していなくて、伸び縮みするようなイメージ。
ブロックは要素の前後に改行が入るため縦に並び、インラインは要素の前後に改行がはいらないため横に並ぶということをしっかり理解しておくこと。
ブロック要素とインライン要素をイメージしやすいサイト
【CSS】displayの使い方を総まとめ！inlineやblockの違いは？
CSSの display: inline、display: block、display: inline-block をマスターしよう！
「border-right」プロパティを指定する
疑似要素で指定したブロック要素を線で囲む。が、今回は囲む必要はなく右線だけがでればいいのでborder-rightプロパティを指定する。
border-right: solid 12px blue;
ブロック要素の横幅と高さ、右線の横幅を全て12pxで揃えているので正方形が２つ並んでいるように見える（beforeとafterの両方に指定）。
疑似要素を配置する基準を変更する
■は「見出し」というの文字の横にもってきたいので、<h1>を基準とした絶対位置に変更する。
基準とする<h1>のCSSh1{}には、position:relative;、h1::before{}とh1::after{}にはposition: absolute;とtop,left,bottomの値を指定する。
- h1のCSS
h1 {
font-size: 24px;
font-weight: bold;
padding:16px;
position:relative;
}
- h1::before{} とh1::after {}のCSS
h1::before {
content:"";
display: block;
width: 12px;
height: 12px;
background-color: green;
border-right: solid 12px blue;
position: absolute;
left: 0;
top: 0;
}
h1::after {
content:"";
display: block;
width: 12px;
height: 12px;
background-color: pink;
border-right: solid 12px orange;
position: absolute;
left: 0;
bottom: 0;
}
h1{}のpadding:16px;があるせいで"見出し"の文字の隣にいってくれないので、paddingを削除。
文字とかぶってしまったので、paddingは左だけ残すことにした。最後に背景色を黄色に統一して完成。
最終コード
div {
background-color: yellow;
padding: 24px;
width: 480px;
margin-top: 12px;
margin-right: auto;
margin-left: auto;
}
header {
background-color: yellow;
}
h1 {
font-size: 24px;
font-weight: bold;
position:relative;
padding-left:30px;
}
h1::before {
content:"";
display: block;
width: 12px;
height: 12px;
background-color: green;
border-right: solid 12px blue;
position: absolute;
left: 0;
top: 0;
}
h1::after {
content:"";
display: block;
width: 12px;
height: 12px;
background-color: pink;
border-right: solid 12px orange;
position: absolute;
left: 0;
bottom: 0;
}
この課題でブロック要素＆インライン要素の理解と、絶対位置＆相対位置の理解を深めることができたけど、けっこうたいへんだった！
