インラインブロック要素に続いて、「Font Awesome」と「position」を学びました。アイコンの使用や要素の配置など、実践的なテクニックです。
Font Awesomeとは
Font Awesomeは、アイコンが用意されているサイトです。様々なアイコンを簡単にWebページに追加できます。
<!-- Font Awesomeの読み込み -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- アイコンの使用 -->
<i class="fa fa-home"></i>
<i class="fa fa-user"></i>
<i class="fa fa-envelope"></i>
透明度の指定
opacity：中身を全て透明化
opacity は、中身を全て透明化します（0〜1の値）。
.box {
opacity: 0.5; /* 50%透明 */
}
opacity: 0→ 完全に透明opacity: 0.5→ 半透明opacity: 1→ 不透明（デフォルト）
rgba：背景のみ透過
rgba は、背景のみ透過できます。4つ目の値で透過度を指定します。
.box {
background-color: rgba(0, 0, 0, 0.7); /* 黒70%透明 */
}
構文: rgba(赤, 緑, 青, 透過度)
- 最初の3つの値: 0〜255の数値（色指定）
- 4つ目の値: 0〜1の数値（透過度）
rgb：3つの値で色を指定
rgb は、3つの値で色を指定します（透過なし）。
.box {
background-color: rgb(255, 0, 0); /* 赤色 */
color: rgb(0, 0, 255); /* 青色 */
}
opacityとrgbaの違い
/* opacity：要素全体が透明になる（テキストも透明） */
.box {
background-color: black;
opacity: 0.5;
}
/* rgba：背景だけが透明（テキストは不透明のまま） */
.box {
background-color: rgba(0, 0, 0, 0.5);
}
transition：滑らかな変化
transition は、「変化の対象」「変化の時間」などを指定します。
.btn {
background-color: blue;
transition: 0.3s; /* 0.3秒かけて変化 */
}
.btn:hover {
background-color: red; /* ホバー時に赤に変化 */
}
滑らかに色が変わります。
line-height：行の高さ
line-height は、行の高さを指定します。
p {
line-height: 1.6; /* フォントサイズの1.6倍 */
}
行間を広げることで、読みやすくなります。
<a>要素のクリック範囲を広げる
<a> 要素はインライン要素のため、テキスト部分しかクリックできません。
<a href="#">リンク</a>
ブロック要素にすることで、クリック範囲を広げることができます。
a {
display: block; /* ブロック要素に変更 */
padding: 20px; /* 余白を追加してクリック範囲を広げる */
}
%指定：親要素に対する相対サイズ
ボックスのwidthやheightを「%」で指定すると、親要素に対して表示されます。
<div class="parent">
<div class="child"></div>
</div>
.parent {
width: 800px;
}
.child {
width: 50%; /* 親要素の50% = 400px */
}
position：要素の配置を制御
position: absolute – 要素同士を重ねる
position: absolute は、要素同士を重ねることができます。
.box {
position: absolute;
top: 50px;
left: 100px;
}
サイト全体の左上部分を基準として、top、left、bottom、right を用いて位置を指定します。
position: relative – 基準位置の変更
position: relative は、その要素の左上が基準位置になります。
.parent {
position: relative; /* 親要素を基準にする */
}
.child {
position: absolute; /* 親要素の左上が基準になる */
top: 20px;
right: 20px;
}
実用例：バッジの配置
<div class="icon-container">
<i class="fa fa-bell"></i>
<span class="badge">3</span>
</div>
.icon-container {
position: relative; /* 基準 */
display: inline-block;
}
.badge {
position: absolute; /* 絶対配置 */
top: -5px;
right: -5px;
background-color: red;
color: white;
border-radius: 50%;
padding: 2px 6px;
font-size: 12px;
}
:active 疑似クラス
:active は、要素がクリックされているときのスタイルを指定します。
.btn:active {
transform: scale(0.95); /* クリック時に少し小さくなる */
}
z-index：重なりの順序
z-index は、重なりの順序を指定します（整数が大きいほど上になる）。
.box1 {
position: absolute;
z-index: 1;
}
.box2 {
position: absolute;
z-index: 2; /* box1より上に表示される */
}
重要: z-index は、position プロパティと併用が必要です。
今日の学びのポイント
- Font Awesome: アイコンサイト
- opacity: 中身を全て透明化（0〜1）
- rgba: 背景のみ透過（4つ目の値で透過度）
- rgb: 3つの値で色を指定
- transition: 変化の時間を指定
- line-height: 行の高さ
<a>のブロック化: クリック範囲を広げる- %指定: 親要素に対する相対サイズ
- position: absolute: 要素を重ねる（サイト全体の左上が基準）
- position: relative: その要素の左上が基準
- :active: クリックされているとき
- z-index: 重なりの順序（positionと併用必須）
これらのテクニックを組み合わせることで、より高度なデザインが可能になります。
カテゴリ: Progate, HTML/CSS
タグ:
スラッグ:
コメント