CSSのdisplayプロパティはよく使用すると思います。値にflex, gridを設定したり、ブロックやインラインにしたい時にblock, inlineを設定します。 そんなdisplayプロパティで2つのキーワードを値として設定できる2値構文がサポートされます。すでにSafariとFirefoxにサポートされており、ChromeとEdgeは7月リリース予定の115でサポートされます。
![CSSの「display: block;」が「display: block flow;」になる、displayプロパティで2値構文がサポートされます](https://cdn-ak-scissors.b.st-hatena.com/image/square/b7f6e31f2fd13a453a9c5e4bcaebc0324ec9f0f9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202302%2F2023060501%402x.png)
CSSのスクロールスナップが登場して早4年、現在ではほぼすべてのブラウザにサポートされ、採用しているWebサイトやスマホアプリも増えてきました。 CSSのスクロールスナップについて、基礎知識をはじめ、各プロパティの機能や使い方、スクロールスナップの実際の使用例、実装の注意点などを紹介します。 CSS Scroll Snap by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのスクロールスナップを使う理由 スクロールコンテナの基本 スクロール コンテナの注意点 CSSのスクロールスナップとは scroll-snap-stopの使い方 scroll-paddingの使い方 scroll-marginの使い方 CSSのスクロールスナップの使用例 block値とinline値について アク
Chromeに新しく実装された「CSS Overview」が非常に便利なので、紹介します。 表示しているページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの検証やスタイルガイドとしても役立ちます。 Chromeの新機能「CSS Overview」 Fyi: New in Chrome: CSS Overview Chromeの新機能「CSS Overview」の準備 Chromeの新機能「CSS Overview」の使い方 Chromeの新機能「CSS Overview」の準備 まずは、Chrome デベロッパーツールを開き、右上の歯車アイコン(Settings)をクリックします。
用意するのはHTMLだけ、一行加えるだけでスマホ対応のクリーンなデザインのWebページができてしまう超軽量スタイルシートを紹介します。ダークモードにも対応しています。HTMLにclassを加えるなど、CSSの知識は必要ありません。 また、それをベースにして再利用可能なコンポーネント、CSSリセットの拡張版としても利用できます。 MVP.css MVP.css -GitHub MVP.cssの特徴 MVP.cssのデモ MVP.cssの使い方 MVP.cssの特徴 MVP.cssはHTMLのさまざまな要素にすぐに使えるスタイルのコレクションで、外部スタイルシートとして利用するだけで簡単にページを作成できます。クリーンなデザインで、再利用可能なコンポーネントとして利用できます。class名などをHTMLに加える必要もありません。 用意するのは、HTMLだけ MVP.cssはHTMLの各要素にス
WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか? この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visually distorted - when symmetrical UI looks all wrong by Gil Bouhnick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ボタンと同じ色だとテキストは明るく見える 02. 同じフォントでも小さいサイズだと細く見える 03. 背景画像の上のテキストは読みにくい 04. 行間が間違っているテキスト 形の扱い方 05. 整列されたのに揃っているように見えない
PurgeCSSを使用して、CSSファイルからWebページやアプリで未使用のスタイルを削除する方法を紹介します。 特にCSSフレームワークやライブラリを使用している時は、すべてのスタイルを使うことはないと思うので、劇的な効果があります。 How to Remove Unused CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに PurgeCSSとは ビルドツール JavaScriptフレームワーク PurgeCSSの使い方 PurgeCSSをgulpで実装する方法 PurgeCSSをNuxt.jsで実装する方法 はじめに PurgeCSSを使用すると、制作のワークフローに取り入れてCSSファイルを60%以上削減できます。 未使用のCSSを削減しよう 私はしばらくの間、CSSファイ
テクスチャ素材はどれだけあっても困りません。しかし、Webで無料ダウンロードできるものは、サイズが小さかったり、商用不可だったり、で探す手間だけが消費されます。 高解像度で商用利用可、40万円分の高品質なテクスチャやパターン素材が99%オフ、約3,200円で購入できる特大セールが開催です! 期間は、4月16日21時までとなっています。 テクスチャやパターン素材はWebデザイン、アプリ、動画、紙のデザインなどに利用でき、クライアントのプロジェクトでも販売する同人誌に使用してもOK。 The Exceptional Textures And Patterns Bundle 英語サイトなので、購入方法を日本語で分かりやすく解説しました。 セットに含まれてるテクスチャやパターン素材 Design Cutsでの購入方法 Design Cutsのライセンス セットに含まれてるテクスチャやパターン素材
当ブログでもCSSのさまざまなテクニックについて記事にしていますが、今回は表面的なものではなく、CSSの本質的なパフォーマンスに関することを紹介します。 パフォーマンスを意識すると、実装も変わってくると思います。 Things nobody ever taught me about CSS. by Charlie Gerard 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの用語 CSSのパフォーマンス CSSの記述の順番 リソース はじめに この記事は私がこれまで一緒に働いたことのある人を批判するものではありません。個人的にCSSについて調べて、学んだことのリストです。 多くのデベロッパーがCSSについてあまり気にかけていないという事実は目新しいことではありません。ネット上や、友人・同僚と話すことでそのことに
CSSファイルを軽量化するには、最適化・軽量化などの便利ツールがありますが、未使用のCSSを掃除することも重要です。HTMLとCSSのファイルを解析し、未使用のCSS(CSS4までサポート)を掃除してくれるツールを紹介します。 DropCSS -GitHub DropCSSの特徴 DropCSSの使い方 DropCSSのパフォーマンス DropCSSの特徴 DropCSSは未使用のCSSを掃除してくれる、わずか60行のスクリプトです。 HTMLとCSSを入力として受け取り、使用されたCSSのみを出力として返します。 対象となるセレクタはcss-selectのおかげで、実質的に考えられるすべてのセレクタの削除が達成されます。 参考: サポートされているセレクタ CSSTreeを使用すると、特別な処理を行わなくても、メディアクエリを他のすべてのブロックと同じように透過的に処理および削除できます
Futuraの新しい14スタイルをはじめ、先日当ブログで好評だった水彩テクスチャで塗られたSVGフォントなど、高品質なプロ仕様の有料フォント約25万円分が約3,100円で購入できる期間限定セールを紹介します。 販売期間は6月26日12時まで。 2週間ほどなので、お見逃しないように! フォントはWebデザイン、アプリ、動画、ゲーム、紙のデザインなどに利用でき、クライアントのプロジェクトでも販売する同人誌に使用してもOK。 The Professional, Dynamic Font Library 英語サイトなので、購入方法を日本語で分かりやすく解説しました。 セットに含まれてるフォント Design Cutsでの購入方法 Design Cutsのライセンス セットに含まれてるフォント セットに含まれているフォントの総額は$2,342(約256,000円)、それらが今だけ$29(約3,100
コンソール まずは、JavaScriptのコンソールを使用して、「Hello World!」を表示します。 コンソールの表示方法 Edge F12 Chrome command+option+J (win: ctrl+shift+J) Firefox command+option+K (win: ctrl+shift+K) Safari command+option+C Safariの場合はショートカットが他のアプリ(Alfred)に使用されている場合があるので、環境設定から「メニューバーに開発メニューを表示」をチェックすると、メニューバーからコンソールを表示できます。
結果ページ どのリンクをいつクリックしたのか、いつホバーしたのか、指定エリアでどのくらいマウスを動かしたのか、フォームに特定の文言を入力したのか、チェックボックスをクリックしたのか、ブラウザは何か、解像度はいくつか、ディスプレイの向きはどっちなのか、などの情報が表示されました。 ※出力する際には、PHPが使用されています。 Crooked Style Sheetsの仕組み Crooked Style Sheetsは、外部CSS一つを加えるだけで、Webページのユーザーに関するさまざまな情報を取得できます。 基本的な仕組み CSSではurl()関数を使用して、外部リソースを追加できます。url()関数の値は呼び出された時のみロードされるため、これをリンクがクリックされた時に利用します。 リンクを記述するHTMLは、要素を特定できるようにidを与えます。
商用でも安心して利用できる、さまざまなデザインのプロジェクトにぴったりなテクスチャ、パターンと背景素材$2070(約235,000円)分が、99%オフの$29(約3,000円)で購入できる特大セールを紹介します。 期間は11月21日12時まで(UK時間)、日本時間だと21日20時でしょうか。 テクスチャやパターン素材は無料のものも数多くありますが、有料ならではの高品質なものが揃っており、デザインのアイデアも膨らむと思います。 The Vibrant Textures, Patterns and Backgrounds Bundle セットに含まれるテクスチャ、パターンと背景素材 Design Cutsでの購入方法 Design Cutsのライセンス セットに含まれるテクスチャ、パターンと背景素材 まずは、セットに含まれる素材全部を見てみましょう。 紙や布といったテクスチャをはじめ、インク、
CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。 How the minmax() Function Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 minmax()の基本的な使い方 minmax()を使うと、Media Queries無しでレスポンシブデザインができる サポートブラウザ minmax()の基本的な使い方
個人でも商用でも無料、マンガや同人誌で使える集中線や効果線を簡単に描くことができるPhotoshopのブラシと高解像のJPEG素材を紹介します。
個人・商用で無料で利用できる、日本語のフリーフォント219種類を紹介します。前回は164種類だったので、大幅に増えています! 記事公開後も増えています(201→207→211→219)。 年賀状の宛名にも使える縦書き対応のフォント、かわいい手書きフォント、読みやすいゴシックなどが揃っています。 毎年まとめていますが、初紹介のものから既存のものまで改めてリンク・ライセンスを確認しています(※情報はこの記事の執筆時のもの)。 ライセンスはサイトだけでなく、同人誌や印刷物などでの利用も明記。 最新版を公開!フォントの数が大幅に増えています。 2020年用、日本語のフリーフォント 417種類のまとめ フォント紹介の前に各フォント制作者からのお願いごと。 フォントを利用の際には、利用条件やライセンスを必ず確認して守ってください。 Kazesawa フォント 個人・商用サイトで無料利用可。同人誌や各種
テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換:-9999px 改善したテクニック 画像置換:-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。 #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く