「疑似セレクタ」
:hover マウスが上に乗っているとき
:active クリックしている間
:focus Tabキーなどでフォーカスされている時
:visited 訪れたことのあるリンクのスタイル
transform
:translate
Y(値);→要素をY方向(縦)に値分動かす
X(値);→要素をY方向(縦)に値分動かす
使用例：
:active {
border-bottom: none;
transform: translateY(4px);
}
ボタンをクリックしたときに、凹んだようにみせる。
「疑似要素」HTMLにない要素を疑似的に作る
::before
::after
vertical-align: ;
行中のテキストや画像などの内容の垂直方向の揃え位置を指定するプロパティ。
インライン要素とテーブルセルにのみ適用することができる
:first-of-type 最初のタグにだけスタイルを適用
:last-of-type 最後のタグにだけスタイルを適用
:nth-of-type(値) カッコ内の数字の番だけスタイルを変更
※()内を2nにすると偶数、2n+1にすると奇数番に適用される
transparent 透明
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta name="description" content="ページの説明文">
<link rel="stylesheet" href="css/style.css">
<script src="#"></script>
</head>
<body>
<h2>こんなお悩みありませんか？</h2>
<ul>
<li>肩こりや頭痛がひどい</li>
<li>手足が氷の様に冷える</li>
<li>寝ても疲れが取れない</li>
</ul>
<h2>ご旅行の申し込みから出発まで</h2>
<ol>
<li>Webで簡単申し込み</li>
<li>期限までにお支払い</li>
<li>約1週間前に航空チケットのお届け(代表者住所に全員分が届きます)</li>
<li>ご出発</li>
</ol>
</body>
</html>
@charset "utf-8";
ul {
border: 10px solid #aae5e7;
padding: 1em 1em 0;
list-style: none;
}
ul li {
border-bottom: 4px dotted #6baeb3;
margin-bottom: 1em;
}
ul li::before {
content:url(../img/check.png);
margin-right: 4px;
vertical-align: middle;
}
ol {
border: 10px solid #ffc43d;
padding: 20px 40px 20px;
}
ol li {
padding-bottom: 20px;
margin-bottom: 20px;
background: url(../img/arrow.png) left bottom no-repeat;
}
ol li:last-of-type {
padding-bottom: 0;
margin-bottom: 0;
background: transparent;
}
< li>タグをdisplay:inline-block;すると・・・
< li>タグには、デフォルトでdisplay:list-itemというスタイルが適用されている。
のでリスト項目と認識され、マーカーが表示されるが
display:inline-block;などでスタイル形式を変更すると
マーカーがつかなくなる。list-itemの扱いでは無くなるため。
なので、list-style:none;を書く必要がない。
::first-line ブロックレベルの要素の最初の行のスタイルに適用するために疑似要素。
「text-align」
text-alignは、inline用の指定。block要素には効かない。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta name="description" content="ページの説明文">
<link rel="stylesheet" href="css/style.css">
<script src="#"></script>
</head>
<body>
<nav>
<ul class="gnav-list-1">
<li><a href="#">TOP<br>トップ</a></li>
<li><a href="#">NEWS<br>お知らせ</a></li>
<li><a href="#">ABOUT<br>当店について</a></li>
<li><a href="#">RECRUIT<br>採用情報</a></li>
</ul>
</nav>
<nav>
<ul class="gnav-list-2">
<li><a href="#"><img src="img/icon-top.svg" alt="">トップ</a></li>
<li><a href="#"><img src="img/icon-about.svg" alt="">診療科目</a></li>
<li><a href="#"><img src="img/icon-checkup.svg" alt="">人間ドック</a></li>
<li><a href="#"><img src="img/icon-schedule.svg" alt="">診療時間</a></li>
<li><a href="#"><img src="img/icon-consultation.svg" alt="">相談窓口</a></li>
</ul>
</nav>
</body>
</html>
@charset "utf-8";
* {
box-sizing: border-box;
}
ul.gnav-list-1 {
background: #1b9aaa;
padding: 0;
text-align: center;
}
ul.gnav-list-1 li {
display: inline-block;
}
ul.gnav-list-1 li a {
display: block;
padding: 1em;
color: #fff;
font-size: 12px;
text-decoration: none;
}
ul.gnav-list-1 li a::first-line {
font-size: 16px;
font-weight: bold;
}
ul.gnav-list-1 li a:hover {
background: #14727e;
}
ul.gnav-list-2 {
background: #f0dcd4;
padding: 0;
text-align: center;
}
ul.gnav-list-2 li {
display: inline-block;
}
ul.gnav-list-2 li a {
display: block;
padding: 20px 20px 10px;
color: #7b645d;
font-size: 14px;
text-decoration: none;
}
ul.gnav-list-2 li a:hover {
padding-bottom: 4px;
border-bottom: 6px solid #7b645d;
}
ul.gnav-list-2 li a img {
display: block;
margin: 0 auto 1rem;
height: 24px;
}
< table>タグでborderの調整
< table>タグでテーブルを作成し、borderを各table,th,tdに適用した場合
2重線の様になる。セル同士の隙間がある為。
それを解消するには
border-spacing: 0;→tableにおける隣り合うセルの境界同士の間隔を定める。
border-collapse: collapse; tableの中のセルが境界を共有するか分離するかを設定する。
collapse:隣接するセルで境界線を共有
separate:隣接するセルが個別に境界線を持つ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta name="description" content="ページの説明文">
<link rel="stylesheet" href="css/style.css">
<script src="#"></script>
</head>
<body>
<table>
<caption>手ぶらでBBQ料金比較</caption>
<tr>
<th class="col-1"> </th>
<th class="col-2">コスパパック</th>
<th class="col-3">ボリュームパック</th>
</tr>
<tr>
<th>金額</th>
<td>3,000円 / 人</td>
<td>5,000円 / 人</td>
</tr>
<tr>
<th>食材</th>
<td>無し (持ち込み) </td>
<td>肉 200g+野菜</td>
</tr>
<tr>
<th>機材</th>
<td>コンロ一式</td>
<td>コンロ一式+テントセット</td>
</tr>
</table>
</body>
</html>
@charset "utf-8";
table {
border-collapse: collapse;
width: 100%;
}
table,th,td {
border: 1px solid #ccc;
padding: 0.5em;
}
table caption {
font-size: 0.8em;
color: #666;
}
.col-1 { width: 20%; }
.col-2 { width: 40%; }
.col-3 { width: 40%; }
th {
background: #a50;
color: #fff;
}