CSSで切り抜きと固定をする

background-clipプロパティ
position: sticky プロパティ

Web制作では最新のCSSやJavaScriptの機能が使えるようになりました。ブラウザ(Chrome、Firefox、Safari、Edge)で使えるCSSの中でも特に表現の幅が広がり、便利な使い方ができる2つの新機能を紹介します。

background-clipプロパティ 背景をテキストの形で切り抜く

まずは、文字の形で画像の切り抜きができる「background-clip: text」というプロパティです。

background-clipプロパティは、背景の描画 エリアを指定するものです。新しく「text」値を指定できるようになりました。「text」値を指定すると背景画像をテキストの形に切り抜くことができます。こうした画像は従来、手作業で加工して作る必要がありましたが、CSSだけで表現できるようになったのです。また、テキストを変えるたびに画像を作り直さなくてよいので、デザインする時間を軽減できます。

「NEW  DAY」というテキストに対して背景画像の柄をつける表現してみます。

これまで画像の柄がついたテキストを扱う場合は、画像編集ソフトでテキストにマスクをかけて画像として作る必要がありました。「background-clip: text」を使った新しいコードの書き方を解説します。

HTML側

<!DOCTYPE html><html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>new</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<p class=”logo”>
NEW DAY
</p>
</body>
</html>

CSS側

.logo{
width: 600px;
height: 600px;
padding-top: 20px;
background-image:url(new.jpg);
color:transparent;
-webkit-background-clip:text;
background-clip:text;
font-size:60px;
font-weight: 900;
}

HTMLでは、テキスト「NEW DAY」のクラス名を「logo」に指定します。CSS側は、.logo要素に対してbackgroundプロ パティで背景画像を設定します。colorプロパティではテキストの色を指定します。colorプロパティにtransparent値(透明)の指定をしないと、テキストの色が残ってしまって背景画像が見えなくなってしまうことに注意してください。 background-clip: textを指定するとHTMLのテキスト「NEW DAY」の形で背景画像が切り抜きされます。

Chrome, Edge, Safari では background-clip プロパティにベンダープレフィックス「-webkit-」を付与しないと動作しません。Firefoxではベンダープレフィックスは不要です。すべてのブラウザで動作させるために、「-webkit-background-clip」と「background-clip」を両方指定しておきます。

position: sticky  上部に要素を粘着する

Webページを下方へスクロールして閲覧すると、スクロールしてきた目次やナビゲーションが画面上部に固定されるようなデザインがあります。このような表現のことを、要素の「粘着」(sticky)といいます。要素を粘着させることのできる「position: sticky」を紹介します。

従来、この表現をするにはJavaScriptを使って煩雑なコードを記述する必要がありました。

従来の方法 JavaScript側

// ヘッダー要素
const headerElement = document.querySelector(“.header”);
// ヘッダーの位置(y座標)
let headeroffset = headerElement.offsetTop;
const mainElement = document.querySelector (“main”);
// スクロール時の処理
window.addEventListener(“scroll”, () => {
// スクロール位置がヘッダーの位置(y座標)を超えた場合
if (window.scrolly >= headeroffset) {
headerElement.style. position = “fixed”;
headerElement.style.top=”0″;
headerElement.style.marginTop = “0”;
mainElement.style.marginTop = “calc(50vh + 80px)”;
return;
}
// スクロール位置がヘッダーの位置(y座標)を超えていない場合
headerElement.style. position = “relative”;
headerElement.style.top=
“auto”;
headerElement.style.marginTop = “50vh”;
mainElement.style.marginTop = “0”;
});
//画面リサイズ時の処理
window.addEventListener(“resize”, () => {
// ヘッダーの位置(y座標)を更新する
headeroffset = headerElement.offsetTop;
});

新しく使えるようになった「position: sticky」を使えば、複雑なJavaScriptコードを書かずともCSSだけで表現できます。

ウインドウをスクロールするとナビゲーションが画面上部に固定されるような表現です。

position: sticky

要素を指定箇所に粘着させる

上のように、スクロールするたびにJavaScripでスクロール位置を取し、スクロール位置が指定の値になったら要素を画面上部に固定するという煩雑なコードを記述する必要がありました。「position: sticky」を使えるようになった前と後で、コードの書き方がどのように変わったか見てみます。「position: sticky」を使わずJavaScriptで実現するためのコードは上のとおりです。ナビゲーションがヘッダー要素であるとします。スクロールしたときにスクロール位置がヘッダーの位置(y座標)を超えた場合はヘッダーを画面上部に固定し、スクロール位置がヘッダーの位置(y座標)を超えていない場合はそのままの配置にします。画面のサイズが変わったときはヘッダーの位置(y座標)変わるので、新しくヘッダーのy座標を取得すうようにしています。

いよいよ「position: sticy」を使ったコードを見てみます。HTMLではヘッダー要素のクラス名を「header」に指定します。あとはCSS側のコードを記述するだけです。CSS側では、.header要素は親要素の上部に固定されます。

html側

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<header class=’header’>
<a herf=’#’>HOME</a>
<a herf=’#’>PROFILE</a>
<a herf=’#’>BLOG</a>
</header>  
<main>
<h1>Hello World</h1>
<p>要素を粘着させるコード</p>
<img src=’########.png’height=’400’width=’600′>
<img src=’########.png’height=’400’width=’600′>
</main>
</body>
</html>

CSS側

.header{
position:sticky;
top:0;
font-size: 70px;
background-color: black;
color: chartreuse;
}

このように簡単に表現することができます。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

前の記事

PostPrime new SNS

次の記事

foreach文