iOSのすりガラスのような効果をWebでデザインで導入したい。そんなときに便利なbackdrop-filterプロパティを知っていますか? ブラウザーの実装はまだイマイチですが、おもしろい使い方ができそうですよ。 W3CのFilter Effects Module Level 2で導入された、CSSのbackdrop-filterプロパティについて解説します。特に構文、ブラウザーの対応、応用方法を…

Loading...

Flexboxを使ったCSSレイアウトが広まった2016年。2017年は一足早く、Grid Layout Moduleを使ったCSSレイアウトにも触れてみませんか? この記事では、グリッドレイアウト(Grid Layout)モジュールを使ってWebページに要素を配置する、7つの方法を紹介します。 SitePointでは以前にも、『Flexboxよりも新しい!CSSレイアウトの最新仕様Grid La…

Loading...

11月1日にW3Cから勧告されたHTML 5.1。およそ2年ぶりのアップデートでどこが変わったのか? 主要な変更点を押さえておきましょう。 HTML 5.1とは 2年ほど前のHTML5スタンダードのリリースは、Web開発界隈における大きな出来事でした。一連のすばらしい新機能が搭載されただけでなく、1999年のHTML 4.01リリース以降初のメジャーアップデートでもあったからです。「モダンな」HT…

Loading...

どんどん進化するCSS。変数や四則演算といった将来使える便利な機能は、ポストプリセッサー「PostCSS-cssnext」を使って効率よくワークフローに取り組んでみては? PostCSS-cssnextについて、7月にCraig Bucklerが『PostCSSならCSSプリプロセッサーをもう乗り換え続けなくて済むかもよ!』という記事を書いています。PostCSS-cssnextは次世代CSSを書…

Loading...

かつて私たちは、画像テキストを表示するために「text-indent: -9999px;」なんてCSSを書いていました。でも、いまならもっといい方法があります。いまどきのベストな方法と、それが使えないときの解決方法を。 以前掲載された『いくつ覚えてる?いつか役に立つかもしれないCSS画像置換の手法と歴史』の中でBaljeet Rathiが紹介しているたくさんの画像置換テクニックは、どれを取っても見…

Loading...

TwitterやGoogle Nowのようなカード型のUIを作れる便利なUIフレームワークの登場です。OS別のスタイルにも対応。デザイナーに頼む予算がなくても、WebアプリのUIをほどよく整えられる優れものです。 Bootcardsは、カード型インターフェイスを作るためのUIフレームワークです。その名が示す通りBootstrapフレームワークで使用し、デスクトップとモバイルの両方に対応できる柔軟性…

Loading...

HTML5の登場で注目されたのが、当時Operaが提案したフォーム関連機能の強化(Web Forms 2.0)でした。あれから数年経ち、ブラウザー実装はどうなったのでしょうか? input要素限定ですが、仕様のあいまいな点を含めて、マニアックに検証しました。 最近、日付フィールドと数値フィールドを必要とするプロジェクトに参加しました。私はある種の肥大化したフォーム用JavaScriptライブラリー…

Loading...

CSSレイアウトが捗るFlexbox、もう使っていますか? ページ全体のレイアウトのような大掛かりなところよりも、今回紹介するフォームのような小さなところから試してみると便利さを実感できるかもしれません。 HTMLフォーム作成はWeb開発において避けては通れないものですが、その作業が楽しいことはまれなことです。幸いなことに、CSSのFlexboxを使えばこれまで困難だったことでも解決できることがあ…

Loading...

斜めのデザイン、流行っていますよね。いろいろな実装方法がありますが、柔軟で使いやすい、疑似要素を使ったSassのコードを考えてみました。 最近、Webサイト制作でデザインガイドラインの一部としてティルト角(tilted angle)を頻繁に使う必要がありました。この記事で「ティルト角」とは、次のように(Webページの)上か下の辺が完全に水平ではなく少し傾斜している部分を指すものとします。 ティルト…

Loading...

次世代のCSSレイアウトとして注目されるのが、Grid Layout Module。実用段階まではまだ時間がかかりそうですが、活発な標準化の動きをチェックしておくとライバルに差を付けられそうです。 柔軟性に優れたCSSのグリッドレイアウト(Grid Layout)の仕様は、モダンなWebデザインにいっそう適した、レイアウト要素における新しい手法です。日進月歩のWeb標準の世界において、Grid L…

Loading...