昨今のフロントエンドのCSS開発においては、タスクランナーやフレームワークの活用により煩雑なベンダープレフィックスの付与を意識する必要がありませんし、IE11のサポート終了により実戦に投入できるCSSプロパティも格段に増えました。 たった数行の記述で複雑な機能が実装可能だったり、再現が難しかったデザインへも対応できるようになったことは喜ばしいことです。 そこで今回は有名サイトで実装されているそんな最新のCSSテクニックをあらためて確認してみたいと思います。
コンポーネントを作るときや開発チーム、クライアントと話をするときに名称が一致していないと何の話をしているんだか、、？となってしまします。 忘れっぽい自分は毎回名前をうろ覚えでつけてしまっていますが、戒めとして記事を書くことでしっかり覚えていきたいと思います。 ※色んなところから引っ張ってきているので正式名称ではない（複数呼び名がある）ものがあるかもしれませんが、ご了承ください。 UIパーツ見づらくてすみませんが、エクセルのシートを画像にしたものを貼り付けていきます Onscreen keyboards画面上にキーボードの図形や文字を表示し、マウスあるいはペンなどのポインティングデバイスや、指先によるタッチ、あるいは十字キーなどで各キーを指定して文字入力を行うもの Onscreen keyboards (iOS) SegmentedControliOS独自のUIで水平方向に配置された複数のボ
clamp(下限, デザインファイル上のサイズ / アートボードの横幅 * 100vw, 上限); 例） 横幅375pxのアートボード上で30pxの文字 font-size: clamp(24px, 30 / 375 * 100vw, 30px) 例） 横幅1440pxのアートボード上で650pxの画像 width: clamp(0px, 650 / 1440 * 100vw, 650px) clampという見慣れない関数を使っています。後ほど詳しく説明します。 デモ このデモでは文字と画像部分に上記のサイズ調整を施しています。 解説 上記の計算式でやろうとしているのは、どの画面幅になっても比率を維持することです。比率が維持できているのなら画面幅が大きかろうが小さかろうが絶対に崩れません。 そこで比率が維持される計算式を考えます。画面幅に対してどのくらいか、が計算できれば良いですね。 よっ
モダンCSSで実装する、ボーダーをアニメーションさせるテクニックを紹介します。矩形のHTMLはdiv要素1つだけ、ボーダーがどのようにアニメーション化されているのか、その仕組みが視覚的に分かるデモもあります。 CSS border animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもとづいて翻訳しています。 はじめに CSSにおけるボーダーの設定 ボックスモデルの保持 ボーナスコンテンツ: border-image 終わりに はじめに ボーダーをアニメーションさせるCSSのテクニックを紹介します。 ボーダーをアニメーションさせる仕組み CSSにおけるボーダーの設定 CSSで要素にボーダーを実装するには、border, outline, box-shadowの3つのプロパティがあります。Modern CSS Solutionsで詳しく説
こんにちは、UXライターのkunyです。3月にスケボーを始めて、最近チックタックができるようになりました。 さてSmartHRでは、textlintに独自のルールプリセットを追加して利用しています。ルールプリセットはオープンソースで公開しており、継続的にルールを追加しています。 さて、そのルール追加の際に正規表現の知識が必要なのですが、「正規表現、マジ難しい...」と感じています。「う〜ん」と唸りながらルールを追加することも多いです。 そこで自分の勉強も兼ねて、textlintへのルール追加の際に必要な「基本的な正規表現」を、実例とセットでまとめてみました。「ブログ書くぞ〜」と宣言したところ、少数ながらも「いいね」をいただき、需要あるかも？と思っています。感想やフィードバックを、Twitterでつぶやいていただけると嬉しいです。 textlintのルール作りに必要な正規表現、というタイトル
この記事では、比較的新しいCSSプロパティやCSSの機能を画像で分かりやすく解説しています。 2021年にTwitterで「1枚の画像で新しいCSSがわかる」という連載をしていて、2023年に新しいブラウザーにあわせて再度連載していたのですが、その投稿内容をまとめて解説文などをブラッシュアップしたものです。 IE11のサポートが終了したことで、ほとんどのCSSプロパティやCSSの機能が利用可能になったので、ぜひ試してみてください。 画像・CODEPEN作成協力: emiさん backdrop-filter:blur() を使ったぼかし表現 backdrop-filter:blur()の中の数値を大きくするほど、強いぼかしをかけることができます。 以下のCODEPEN内の［CSS］をクリックすると、CSSを確認できます。 背景に写真を指定した .box 要素内に .blur を配置し、bac
これを待ち望んでいた人も多いと思います。 ついに、メディアクエリで比較演算子（>=, <=）を使用できるようになります！ 幅が400px以上の場合、@media (min-width: 400px){}と定義していましたが、@media (width >= 400px){}と記述できます。 比較演算子だと、400pxを含む「以上」というのも分かりやすいですね。 New syntax for range media queries in Chrome 104 by Rachel Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスに基づいて翻訳しています。 Chrome 104 メディアクエリの範囲指定の新しい構文 メディアクエリの範囲指定で、比較演算子を使用できる Chrome 104 メディアクエリの範囲指定の新しい構文 メディアクエリはレ
CSSの単位px、em、remは、どれをどこで使用するのがよいか。 font-sizeの値にはどの単位を使用していますか？ ほかにもメディアクエリを定義する時、マージンを定義する時、widthやheightを定義する時、使用する単位はアクセシビリティに配慮する必要があります。 The Surprising Truth About Pixels and Accessibility by Josh W. Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSでpxとemとemの各単位がどのように機能するか アクセシビリティに関する考慮事項 どの単位をどこで使用すればよいのか どの単位がベストなのかが明らかでない場合 簡単にできる小技とメンタルモデル ボーナス: remを使用すると便利なテクニック はじめに C
1行で alt属性は、「全ての 画像をそのalt属性のテキストに置き換えたときにページの意味が変わらない 」ようにつける。 （HTMLの標準規格書より） マジでこれに尽きる。 具体例 例１：ロゴ ❌ 間違ったマークアップ
2022年3月14日にmacOS Monterey 12.3およびiPadOS・iOS 15.4がリリースされ、同時にSafariが新しいバージョン「15.4」にアップデートされました。Google ChromeやFirefoxに先行搭載されている多数の機能が追加されたほか、動的に変化するビューポートのサイズに応じて要素の高さを決める「dvh」という新たな指定方法などの機能が他のブラウザに先駆けて搭載されました。 New WebKit Features in Safari 15.4 | WebKit https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/ ◆img要素にlazy loading機能が搭載へ img要素に「loading="lazy"」属性を付与することで、「付近にスクロールするまで画像を読み込まない
CSS設計で本当に難しいのは「ルールを理解すること」ではなく「ルール通りに自分でコードを書くこと」だと思います。 実際にコードを書いていると「あれ、ここってどうすればいいんだろう？」「こういう場合はどうすべき？」といったことが頻発し、結局よくわからないまま勘でゴリ押すということがよくあります。 本書はそんな人へ向けて、FLOCSSをベースにしつつオリジナル要素を加えてより体系的にまとめた設計「PDFLOCSS（ピーディーフロックス、Page Divided FLOCSS）」を紹介します。 「CSS設計のルールはなんとなくわかるけど、いざ自分でコードを書こうとすると手が止まってしまう」という人に読んでもらいたい一冊です。 （追記：おかげさまでCSS設計のドキュメントとして採用している制作会社様も増えているみたいです！ありがとうございます🙏）
JavaScriptとマニュアルを同梱。PC版・スマートフォン版のWebサイトに対応する。文章や色は変更可能で、同意を取り消したいユーザー向けの取り消しボタンも用意した。 サードパーティーCookieの利用を巡っては、プライバシー保護の観点から国内外で規制が広がっており、特に欧州では「一般データ保護規則」（GDPR）により、Cookieを使った情報取得の基準が厳格化されている。グローバル展開を前提とする場合は特にCookie利用の同意バナーの設置が重要となる。 ユーザーローカルは「同意バナーを開発してWebサイトに実装するには、工数や費用がかかる問題がある」としてツールの無償配布を決めたとしている。なお、同ツールがユーザーローカルと通信することはないとしている。 関連記事 Yahoo! JAPAN、欧州からの接続遮断へ 「法令順守の対応コスト面からサービス継続不能」 ヤフーが、欧州経済領域
Google検索で情報を探そうとして、検索結果に並ぶページのタイトルが不自然な途切れ方をしていたり、省略されて内容がよく分からなくなったりしているのを目にしたことがある人は多いはず。Googleはよくページのタイトルを勝手に書き換えるので、コンテンツの制作者が意図したものとは違ったタイトルが検索結果に表示されることがしばしば発生します。そんなGoogleによるタイトルの書き換え対策について、検索エンジン最適化(SEO)対策ソフトウェアを手がけるZyppyのサイラス・シェパードCEOが解説しました。 We Studied 81,000 Page Titles - Google Rewrote 61% Of Them https://zyppy.com/blog/google-search-title-rewrite-study/ ページのタイトルは、Google検索をしたユーザーの目に最初に
WebページやUIコンポーネントのレイアウトの崩れ、おかしな挙動にあらかじめ対応しておくためのCSSのテクニックを紹介します。 FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問題を解決する実践的なテクニックが満載です。 Defensive CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Flexboxでの折り返し スペースの確保 テキストが長いコンテンツ 画像の伸縮を防止する スクロールが連鎖するのを回避 CSS変数のフォールバック 固定の幅・固定の高さによるレイアウトの崩れ 忘れがちな背景の繰り返し 垂直のメディアクエリ justif
こんにちは、森田です。 2022年初記事です。明けましておめでとうございます。 本年も Gaji-Labo よろしくお願いいたします。 さて、年も変わったことですし今年から新しいことを始めたいと思います。 今年はまず疑似クラス :is() を使っていきたいと思います。 疑似クラス :is() とは /* 今まで */ section h1, article h1, aside h1, nav h1 { font-size: 25px; } /* 疑似クラス :is() を使うと */ :is(section, article, aside, nav) h1 { font-size: 25px; } :is() は、複数のセレクタを1つにまとめて指定できる疑似クラスです。 上記のように、今までカンマで子孫セレクタまで何度も書かなければいけなかったものを1つにスッキリした記述にすることができま
QRコードリーダーの開発などを手掛けるメディアシークは1月11日、アクセス先Webサイトの引っ越しなどでドメインが変わっても常に目的のページに誘導できるQRコード生成サービスを開発したと発表した。このサービスで生成したQRコードであれば、パンフレットやポスターなどに印刷され古くなったQRコードからでも正しいWebサイトにアクセスさせられる。 サービスの管理画面であらかじめ指定した情報やWebサイトを表示できる。情報やドメインの変更時に登録情報を更新することで、同じQRコードでも常に最新の情報に案内できる。QRコードの読み取りに専用の機器やアプリは不要。 自治体や企業がWebサイトを引っ越す際に、悪意のある第三者に引っ越し前のドメインを取得され、詐欺サイトなどに作り替えられるケースもある。古いQRコードを放置していると、ユーザーが知らずに詐欺サイトにアクセスし、被害に遭ってしまう。正しい遷移
2021年のミニマリズムを中心としたトレンドが注目されていましたが、2022年は鮮やかで、奇抜で、記憶に強く残るようなデザインを中心としたトレンドが注目されています。 今回は、2022年に流行するWebデザインの10個の最新トレンド予測をご紹介したいと思います。1つ1つのトレンドごとに実際のWebサイトの事例を掲載しているので、ぜひご自身で体験してみてください。 1. 3Dイラスト 3Dのイラストを使ったデザインは、2021年の大きなトレンドの1つとなりましたが、2022年はさらに注目すべきトレンドの1つとなるでしょう。特に2Dのフラットなイラストを3Dに変化させたような、2Dと3Dを組み合わせたスタイルは要チェックです。 リアルで魅力的な楽しいイラストに、柔らかなキャンディーカラーと組み合わせたようなスタイルは、特にアプリのデザインなどでトップトレンドになると考えています。 Dribbb
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く