今回は下に重なっている要素をぼかす方法を説明します。 例として、モーダルをあげています。モーダルを開く際に、<code>&lt;div id="overlay"&gt;&lt;div&gt;</code>という要素にactiveというクラス名をつけることで表示させており、この要素に<code>backdrop-filter: blur(4px);</code>というCSSをあてることで、この要素の下に重なっているレイヤーがぼやけて見えます。 <code>backdrop-filter</code>プロパティはぼかし以外にも様々なエフェクトをつけることができます。似ているCSS として<code>filter</code>プロパティが挙げられますが、こちらは指定した要素自身にエフェクトをつける場合に用います。 <code>backdrop-filter</code>プロパティの対応状況についてですが、<a href="https://caniuse.com/?search=backdrop-filter" target="_blank" rel="noopener noreferrer">Can I Use</a>によると主要ブラウザの中でFirefoxのみサポートがされていません。 Firefoxの設定を変更することで<code>backdrop-filter</code>プロパティを有効にすることができるようですが、一般ユーザーはそのような設定はしないでしょう。 そのため、Firefoxも対応ブラウザに含まれる場合は、<code>backdrop-filter</code>プロパティがあたっていない状態でも適切に情報がユーザーに伝わるデザインであるかを確認しましょう。 例えば、モーダルの例では、オーバーレイ自体に透明度のある黒を使っているのでぼかしの効果がない場合もデザイン崩れせず、問題なく情報を見ることができます。「ブラー効果をつける」のチェックを外してお確かめください！ 参考： <a href="https://developer.mozilla.org/ja/docs/Web/CSS/backdrop-filter" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/ja/docs/Web/CSS/backdrop-filter</a>

CSSを用いて背景をぼかす方法を説明します。backdrop-filterというCSSのプロパティを利用することで下に重なっている要素をぼかすことができます。例としてモーダルを作成しましたのでぜひお試しください。

背景をぼかす

CSSを用いて文字のクリッピングマスクを作成する方法を紹介します。クリッピングマスクとは、くり抜きたい画像（下のレイヤー）とくり抜かれる画像（上のレイヤー）を重ねて、透過されている部分を非表示にする（＝マスクする）ことを指します。 CSSで文字のクリッピングマスクを行う方法として、以下の２点を挙げました。<ol><li>背景画像を指定し、<code>background-clip: text;</code>を指定する</li><li>canvasでくり抜きたい画像を作成し、<code>mix-blend-mode</code>でブレンドモードを変更する</li></ol>1.の方法は、IEが<code>background-clip</code>と<code>text-fill-color</code>に非対応なため、テキストに<code>color: black;</code>といった文字色を指定しておきましょう。例では、グラデーションのくり抜きと画像のくり抜きを実装しました。画像のくり抜きができているかわかりにくい場合は、codepenの右下の「Rerun」ボタンを何回か押してみてください。 2.の方法は<a href="https://www.apple.com/jp/ipad-pro/" target="_blank" rel="noopener noreferrer">appleの商品紹介ページ</a>で利用されていた方法で、CSSのブレンドモードを用いて文字の部分にだけ画像を表示させるやり方になります。こちらは背景色（例では<code>&lt;div class="gradient-wrapper"&gt;</code>）によって<code>mix-blend-mode</code>で指定する値を変える必要があります。<ul><li>背景色が白（#FFFFFF）：lighten, screen</li><li>背景色が黒（#000000）：darken, multiple</li></ul>今回は背景色を白としたので<code>mix-blend-mode: screen;</code>としました。<code>mix-blend-mode</code>については<a href="https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode" target="_blank" rel="noopener noreferrer">mix-blend-mode - CSS: カスケーディングスタイルシート | MDN</a>をご覧ください。 参考： <a href="https://caniuse.com/?search=background-clip" target="_blank" rel="noopener noreferrer">https://caniuse.com/?search=background-clip</a> <a href="https://caniuse.com/?search=text-fill-color" target="_blank" rel="noopener noreferrer">https://caniuse.com/?search=text-fill-color</a> <a href="https://caniuse.com/?search=mix-blend-mode" target="_blank" rel="noopener noreferrer">https://caniuse.com/?search=mix-blend-mode</a>

CSSを用いて文字のクリッピングマスクを作成する方法を紹介します。クリッピングマスクとは、くり抜きたい画像（下のレイヤー）とくり抜かれる画像（上のレイヤー）を重ねて、透過されている部分を非表示にする（＝マスクする）ことを指します。

文字のクリッピングマスクを作成する

サーバーから取得したデータの改行が<code>\n</code>になっていた場合に、そのままHTMLに埋め込むと半角スペースで表示されてしまいます。 そこで<code>\n</code>の部分を改行させるにはCSSを用います。 例では<code>white-space: pre-wrap;</code>で改行コードの部分を改行させ、<code>word-break: break-all;</code>で、ブロックレベル要素（例でいう<code>p</code>要素）をはみ出さないように改行するようにしています。 <code>white-space</code>プロパティの詳細は<a href="https://developer.mozilla.org/ja/docs/Web/CSS/white-space" target="_blank" rel="noopener noreferrer">こちら</a>を参照ください。

サーバーからデータを取得した際、改行が\nになっていた場合に、\nの部分をCSSを用いて改行させる方法をご紹介します。

'\n'で改行する

ユーザーに文章に注目してもらうための方法として、「文字を太字にする」、「フォントサイズを大きくする」以外に、マーカーのような線を引くというテクニックがあります。 これは、複数行にわたる場合も正しく線を引くことができ、一瞬でユーザーに意味を伝えることができるため、かなり効果的であると思います。 実装方法としては、太字にしたい部分をinline要素で囲み（ユーザーに注目してもらいたい場合は <code>b</code>要素、装飾以外の目的がない場合は<code>span</code>要素）背景色を<code>background</code>プロパティで指定します。今回は単色ですが、グラデーションにしたい場合は以下のように設定すると、上から黄色、赤色のグラデーションにすることが可能です。<pre><code>background: linear-gradient(transparent 50%, yellow 50%, red 100%);</code></pre>

ユーザーに文章に注目してもらうための方法として、「文字を太字にする」、「フォントサイズを大きくする」以外に、マーカーのような線を引くというテクニックがあります。これは、複数行にわたる場合も正しく線を引くことができ、一瞬でユーザーに意味を伝えることができるため、かなり効果的であると思います。

マーカーを引く

レスポンシブデザインを導入して、同じ要素でも並び順を変えたい時はありませんか？ それ、CSSでできちゃいます。メリットとして<ol><li>HTMLのDOM操作が不要</li><li>文脈上おかしな並び順にする必要がないため、ユーザビリティの向上につながる</li></ol>などが挙げられます。

レスポンシブデザインを導入して、同じ要素でも並び順を変えたい時はありませんか？それ、CSSでできちゃいます。メリットとして「HTMLのDOM操作が不要」「文脈上おかしな並び順にする必要がないため、ユーザビリティの向上につながる」などが挙げられます。

要素の並び順の変更

画像の縦横比（アスペクト比）がわからない場合、画像の幅と高さを数値で指定すると画像の全ての領域が表示されない場合があります。 その状態で画像の縦横比に合わせて画像を囲む<code>div</code>タグの大きさを調整する方法を紹介します。 今回の方法では、以下の条件のどちらかを満たす必要があります。<ul><li>幅を固定の数値にして高さを可変にする場合</li><li>高さを固定の数値にして幅を可変にする場合</li></ul>状況により使い分けてください！

画像の縦横比（アスペクト比）に指定がない場合、画像の幅と高さを数値で指定すると画像の全ての領域が表示されない場合があります。
その状態で画像の縦横比に合わせて画像を囲むdivタグの大きさを調整する方法を紹介します。

Latest List