HTML/CSSTwitterFacebookはてブPocketモダンなシングルページレイアウトのウェブサイトで、背景画像をすりガラスのようにぼかしてタイトルを強調させるデザインをよく見る。多くの場合は画像自体にあらかじめフィルタをかけているのだが、CSS3を使うとfilterプロパティを使うだけでblur効果をかけられる。面倒だったので方法をまとめておく。backgroundプロパティについて最初に背景画像を指定するため、backgroundプロパティについて学んだ。backgroundプロパティは、背景関連の値を一度に指定できるショートハンドプロパティだ。(marginやborderなんかと同じ)基本的にはショートハンドプロパティを使うのだが、せっかくなのでbackgroundプロパティについて掘り下げる。local);といろんなプロパティがあるのだが、以下のようなデフォルト値が設定されている。そのため、必要に応じで変更を加えたいプロパティを指定する。scroll;今回は画面いっぱいに背景画像を表示したいので、以下のようなCSSになる。画像の読み込みが失敗したときのため、デフォルトの背景色を変更しておく。cover;}filterプロパティについて次に、画像にフィルタをかけるためにfilterプロパティについて学んだ。CSS3で新たに追加されたプロパティなのだが、まだドラフト段階なのでモダンブラウザでのみ利用できる。簡単に画像にフィルタをかけられるので、画像編集ソフトが苦手な人でも使える。(そもそもfilterプロパティが使えるなら、だいたいの人は画像編集ソフトで加工できる気がするけど...)filterプロパティには、以下の値(フィルタ機能)を指定できる。brightness(150%)」のように複数のフィルタを組み合わせることもできる。今回は背景画像にぼかしをかけたいので、以下のようなCSSになる。blur(5px);}背景画像だけをぼかす前提知識を学んだところで、ようやく本題に。3つのステップを踏んで、背景画像だけをぼかすCSSを書く。画面いっぱいに背景画像を表示するまずはフィルタのかかっていない背景画像を、画面いっぱいに表示する。60px);}背景画像を画面いっぱいに表示したかったので、.containerにwidth:100vw、height:100vhを指定している。1vwや1vhは、ViewPort(画面の大きさ)を1/100した値なので、100vw/100vhで画面いっぱいになる。ここで気になるのが、width:100%やheight:100%でもいいんじゃないか?という疑問。「画面いっぱいに表示する」という用途ではvwやvhを使うのがオススメ。background-sizeプロパティには、背景画像を画面いっぱいに表示したかったのでcoverを指定している。他にも、以下の値が設定できる。パーセンテージ背景の領域を長さ(10pxとか)やパーセンテージ(50%とか)で指定するauto自動的に表示領域内に収まるように表示されるcoverアスペクト比を保持したまま、背景領域を完全に覆う最小サイズになるように拡大縮小する縦長、横長の画像でも空白なく表示できるcontainアスペクト比を保持したまま、背景領域に収まる最大サイズになるように拡大縮小する画像すべてが表示されるように調整するので、横長なら上下に、縦長なら左右に空白がうまれることがある背景をぼかす次に背景画像をぼかす。省略*/}フィルタをかけるために、.containerの疑似要素(::before)を使っている。.containerのbackgroundの設定を継承(inherit)し、それに対してフィルタをかけている。疑似要素を使う理由は、.containerに対してフィルタをかけてしまうと含まれるすべての要素に対して同じフィルタがかかってしまうためだ。(上図のように.titleまでぼけてしまう。)全部にフィルタをかけないために擬似要素を使っているのに、上図は.titleまでぼけてるじゃないか!と思われるかもしれない。これの原因と対策については、次のステップで説明する。ネガティブマージンを使って疑似要素の範囲を広げる理由は、画像の隅にぼかしによる余白ができてしまうためだ。blurで指定したピクセル分、範囲を広げている。Colorさんの説明がわかりやすい。「背景をぼかす」のステップで.titleまでフィルタがかかっていた。absoluteを使ったため、フィルタが最前面にでてきてしまったからだ。そのため、背景画像だけにフィルタがかかるように最背面に移動させる。absoluteで最前面にでてきたフィルタをz-indexで最背面に移動させて完成!ついでに、.titleをより浮かび上がらせるために、text-shadowプロパティを使ってドロップシャドウ効果で影を落としている。Serverでの開発を行った時にハマったのが、Nullと空文字("")の扱いの違いだった。結論から言うと、以下のようになっている。...【C#】いろんなパディング(空白埋めやゼロ埋め)固定長IFファイルの作成では必要不可欠な処理、パディング。文字長を一定にしたり、ブラの隙間に夢を詰めたりいろんな使い方がされる。このエントリでは以下の3種類の方法を紹介する。2)」とかいたらコンパイラさんに怒られてしまった。LEFT関数は特に問題ないが、可変長データ...Excelで「データを貼り付けできません。」というエラーが出た時の対処法Excelでなぜか図形が挿入できない。オブジェクトを貼り付けることができない。こんなしょうもないことで、10分を無駄にしてしまった。その対処法をまとめる。Google先生に聞いたところ、以下の対処法があったが、どれもよくわからなかった。結論から言うと、VBAにはTry-Catch-Finallyが存在しない。Errorステートメントとラベルを使う。簡単な例外処理(エラーハンドリング)は以下のとおり。」というエラーになる。ToStringプログラミングを行ううえで使う頻度が高いのが型変換(キャスト)。基本的なキャストには以下のようなものがある。どれも型変換に使うメソッドだが...position:stickyでスクロール可能なテーブルの行・列ヘッダを固定するテーブルに表示する情報が多いとき、行ヘッダや列ヘッダを固定して表示したいときがある。使うと簡単に実装できる。IEは対応していないため、ポリフィルが必要となる。完成予想イメージは以下のとおり。昼食を完全食COMPにかえて1ヶ月たったので、経緯や感想を綴ろうと思う。Standard.、SAVASホエイプロテインとの組み合わせについても書く。時間ではなく、技術を売る技術者になることを目標にブログやってます!ご用の方は、ページ右の問い合わせフォーム(※PC用ページのみ)、またはTwitterまでご連絡ください。当ブログの利用するにあたり、何らかのトラブルや損害などが生じても当ブログ管理人は一切責任を負いません。許諾や有無など、その内容については一切の保証を致しかねます。