SlideShare una empresa de Scribd logo

数が増えてもこわくない！Quantity Queries の紹介

•
•
Kasumi Morita
Kasumi Morita

CSS Talk vol.2 で登壇した内容です。CSSのみを使って動的コンテンツに対応したレイアウトを提供できるQuantity Queriesについてお話ししました。

Internet
1 de 30
Descargar para leer sin conexión



 




 



➤ 




 

セレクタ 意味 ~ （n+3） (-n+3)



 
 
 
 


 








 

数が増えてもこわくない！Quantity Queries の紹介

Recomendados

コンポーネント指向と余白の設計
コンポーネント指向と余白の設計コンポーネント指向と余白の設計
コンポーネント指向と余白の設計Manabu Yasuda
 
エンジニアとデザイナーとの距離
エンジニアとデザイナーとの距離エンジニアとデザイナーとの距離
エンジニアとデザイナーとの距離Manabu Yasuda
 
MA（マーケティングオートメーション）初心者運用のススメ
MA（マーケティングオートメーション）初心者運用のススメMA（マーケティングオートメーション）初心者運用のススメ
MA（マーケティングオートメーション）初心者運用のススメmiyuki yamada
 
実装だって楽したい！〜リアルタイム通信はじめの一歩〜
実装だって楽したい！〜リアルタイム通信はじめの一歩〜実装だって楽したい！〜リアルタイム通信はじめの一歩〜
実装だって楽したい！〜リアルタイム通信はじめの一歩〜Yuka Tokuyama
 
a-blog cms でAMPに対応する
a-blog cms でAMPに対応するa-blog cms でAMPに対応する
a-blog cms でAMPに対応するKasumi Morita
 
CSSできる SVGアニメーション
CSSできる SVGアニメーションCSSできる SVGアニメーション
CSSできる SVGアニメーションKasumi Morita
 
インラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみるインラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみるKohei Kadowaki
 
Web制作の幅が広がる！ プロジェクトの傾向から考える、 ２つ目•３つ目のCMS選び
Web制作の幅が広がる！ プロジェクトの傾向から考える、 ２つ目•３つ目のCMS選びWeb制作の幅が広がる！ プロジェクトの傾向から考える、 ２つ目•３つ目のCMS選び
Web制作の幅が広がる！ プロジェクトの傾向から考える、 ２つ目•３つ目のCMS選びSeiko Kuchida
 

Recomendados

コンポーネント指向と余白の設計
コンポーネント指向と余白の設計コンポーネント指向と余白の設計
コンポーネント指向と余白の設計Manabu Yasuda
 
エンジニアとデザイナーとの距離
エンジニアとデザイナーとの距離エンジニアとデザイナーとの距離
エンジニアとデザイナーとの距離Manabu Yasuda
 
MA（マーケティングオートメーション）初心者運用のススメ
MA（マーケティングオートメーション）初心者運用のススメMA（マーケティングオートメーション）初心者運用のススメ
MA（マーケティングオートメーション）初心者運用のススメmiyuki yamada
 
実装だって楽したい！〜リアルタイム通信はじめの一歩〜
実装だって楽したい！〜リアルタイム通信はじめの一歩〜実装だって楽したい！〜リアルタイム通信はじめの一歩〜
実装だって楽したい！〜リアルタイム通信はじめの一歩〜Yuka Tokuyama
 
a-blog cms でAMPに対応する
a-blog cms でAMPに対応するa-blog cms でAMPに対応する
a-blog cms でAMPに対応するKasumi Morita
 
CSSできる SVGアニメーション
CSSできる SVGアニメーションCSSできる SVGアニメーション
CSSできる SVGアニメーションKasumi Morita
 
インラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみるインラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみるKohei Kadowaki
 
Web制作の幅が広がる！ プロジェクトの傾向から考える、 ２つ目•３つ目のCMS選び
Web制作の幅が広がる！ プロジェクトの傾向から考える、 ２つ目•３つ目のCMS選びWeb制作の幅が広がる！ プロジェクトの傾向から考える、 ２つ目•３つ目のCMS選び
Web制作の幅が広がる！ プロジェクトの傾向から考える、 ２つ目•３つ目のCMS選びSeiko Kuchida
 
マークアップの最適解を
見つけ出す方法
マークアップの最適解を
見つけ出す方法マークアップの最適解を
見つけ出す方法
マークアップの最適解を
見つけ出す方法Kasumi Morita
 
Webのスーパーヒーローになる方法
Webのスーパーヒーローになる方法Webのスーパーヒーローになる方法
Webのスーパーヒーローになる方法Yasuhisa Hasegawa
 
マーケティングオートメーション & Mautic とは
マーケティングオートメーション & Mautic とはマーケティングオートメーション & Mautic とは
マーケティングオートメーション & Mautic とはtakashi ono
 
マーケティング・オートメーションとCMS
マーケティング・オートメーションとCMSマーケティング・オートメーションとCMS
マーケティング・オートメーションとCMSTAM inc.
 
UnityとTVMLはじめました。
UnityとTVMLはじめました。UnityとTVMLはじめました。
UnityとTVMLはじめました。Michiyo Chuman
 
Python&機械学習にHelloWorldして旦那候補を探す
Python&機械学習にHelloWorldして旦那候補を探すPython&機械学習にHelloWorldして旦那候補を探す
Python&機械学習にHelloWorldして旦那候補を探すKiriko Yano
 
CSS設計とデザインとの距離
CSS設計とデザインとの距離CSS設計とデザインとの距離
CSS設計とデザインとの距離Manabu Yasuda
 
アクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザインアクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザインYoshinori OHTA
 
課題を導き出す魔法のシートの作り方
課題を導き出す魔法のシートの作り方課題を導き出す魔法のシートの作り方
課題を導き出す魔法のシートの作り方Yasuhisa Hasegawa
 
[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell
[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell
[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShellAmazon Web Services Japan
 
UIの色のコントラスト比十分ですか？
UIの色のコントラスト比十分ですか？UIの色のコントラスト比十分ですか？
UIの色のコントラスト比十分ですか？Kasumi Morita
 
a-blog cms Training Camp 2019 spring
a-blog cms Training Camp 2019 springa-blog cms Training Camp 2019 spring
a-blog cms Training Camp 2019 springKasumi Morita
 
最近よく聞くブロックタイプエディタを
CMSごとに調べてみた
最近よく聞くブロックタイプエディタを
CMSごとに調べてみた最近よく聞くブロックタイプエディタを
CMSごとに調べてみた
最近よく聞くブロックタイプエディタを
CMSごとに調べてみたKasumi Morita
 
a-blog cms が与える体験
a-blog cms が与える体験a-blog cms が与える体験
a-blog cms が与える体験Kasumi Morita
 
変化し続けるウェブ技術を追うためには
変化し続けるウェブ技術を追うためには変化し続けるウェブ技術を追うためには
変化し続けるウェブ技術を追うためにはKasumi Morita
 
エンジニアがUiデザインにちょっとだけ貢献する
エンジニアがUiデザインにちょっとだけ貢献するエンジニアがUiデザインにちょっとだけ貢献する
エンジニアがUiデザインにちょっとだけ貢献するKasumi Morita
 
a-blog cms 2017年テーマの紹介
a-blog cms 2017年テーマの紹介a-blog cms 2017年テーマの紹介
a-blog cms 2017年テーマの紹介Kasumi Morita
 
コーディングしながらデザインルールをドキュメント化してみた
コーディングしながらデザインルールをドキュメント化してみたコーディングしながらデザインルールをドキュメント化してみた
コーディングしながらデザインルールをドキュメント化してみたKasumi Morita
 
エンジニアのためのプレゼンテクニック
エンジニアのためのプレゼンテクニックエンジニアのためのプレゼンテクニック
エンジニアのためのプレゼンテクニックKasumi Morita
 
とってもシンプルなスライダーのjQueryプラグイン作りました
とってもシンプルなスライダーのjQueryプラグイン作りましたとってもシンプルなスライダーのjQueryプラグイン作りました
とってもシンプルなスライダーのjQueryプラグイン作りましたKasumi Morita
 
1から始めるAMP対応
1から始めるAMP対応1から始めるAMP対応
1から始めるAMP対応Kasumi Morita
 
Sassを使いこなそう
Sassを使いこなそうSassを使いこなそう
Sassを使いこなそうKasumi Morita
 

Más contenido relacionado

Destacado

マークアップの最適解を
見つけ出す方法
マークアップの最適解を
見つけ出す方法マークアップの最適解を
見つけ出す方法
マークアップの最適解を
見つけ出す方法Kasumi Morita
 
Webのスーパーヒーローになる方法
Webのスーパーヒーローになる方法Webのスーパーヒーローになる方法
Webのスーパーヒーローになる方法Yasuhisa Hasegawa
 
マーケティングオートメーション & Mautic とは
マーケティングオートメーション & Mautic とはマーケティングオートメーション & Mautic とは
マーケティングオートメーション & Mautic とはtakashi ono
 
マーケティング・オートメーションとCMS
マーケティング・オートメーションとCMSマーケティング・オートメーションとCMS
マーケティング・オートメーションとCMSTAM inc.
 
UnityとTVMLはじめました。
UnityとTVMLはじめました。UnityとTVMLはじめました。
UnityとTVMLはじめました。Michiyo Chuman
 
Python&機械学習にHelloWorldして旦那候補を探す
Python&機械学習にHelloWorldして旦那候補を探すPython&機械学習にHelloWorldして旦那候補を探す
Python&機械学習にHelloWorldして旦那候補を探すKiriko Yano
 
CSS設計とデザインとの距離
CSS設計とデザインとの距離CSS設計とデザインとの距離
CSS設計とデザインとの距離Manabu Yasuda
 
アクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザインアクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザインYoshinori OHTA
 
課題を導き出す魔法のシートの作り方
課題を導き出す魔法のシートの作り方課題を導き出す魔法のシートの作り方
課題を導き出す魔法のシートの作り方Yasuhisa Hasegawa
 
[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell
[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell
[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShellAmazon Web Services Japan
 

Destacado (10)

マークアップの最適解を
見つけ出す方法
マークアップの最適解を
見つけ出す方法マークアップの最適解を
見つけ出す方法
マークアップの最適解を
見つけ出す方法
 
Webのスーパーヒーローになる方法
Webのスーパーヒーローになる方法Webのスーパーヒーローになる方法
Webのスーパーヒーローになる方法
 
マーケティングオートメーション & Mautic とは
マーケティングオートメーション & Mautic とはマーケティングオートメーション & Mautic とは
マーケティングオートメーション & Mautic とは
 
マーケティング・オートメーションとCMS
マーケティング・オートメーションとCMSマーケティング・オートメーションとCMS
マーケティング・オートメーションとCMS
 
UnityとTVMLはじめました。
UnityとTVMLはじめました。UnityとTVMLはじめました。
UnityとTVMLはじめました。
 
Python&機械学習にHelloWorldして旦那候補を探す
Python&機械学習にHelloWorldして旦那候補を探すPython&機械学習にHelloWorldして旦那候補を探す
Python&機械学習にHelloWorldして旦那候補を探す
 
CSS設計とデザインとの距離
CSS設計とデザインとの距離CSS設計とデザインとの距離
CSS設計とデザインとの距離
 
アクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザインアクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザイン
 
課題を導き出す魔法のシートの作り方
課題を導き出す魔法のシートの作り方課題を導き出す魔法のシートの作り方
課題を導き出す魔法のシートの作り方
 
[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell
[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell
[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell
 

Más de Kasumi Morita

UIの色のコントラスト比十分ですか？
UIの色のコントラスト比十分ですか？UIの色のコントラスト比十分ですか？
UIの色のコントラスト比十分ですか？Kasumi Morita
 
a-blog cms Training Camp 2019 spring
a-blog cms Training Camp 2019 springa-blog cms Training Camp 2019 spring
a-blog cms Training Camp 2019 springKasumi Morita
 
最近よく聞くブロックタイプエディタを
CMSごとに調べてみた
最近よく聞くブロックタイプエディタを
CMSごとに調べてみた最近よく聞くブロックタイプエディタを
CMSごとに調べてみた
最近よく聞くブロックタイプエディタを
CMSごとに調べてみたKasumi Morita
 
a-blog cms が与える体験
a-blog cms が与える体験a-blog cms が与える体験
a-blog cms が与える体験Kasumi Morita
 
変化し続けるウェブ技術を追うためには
変化し続けるウェブ技術を追うためには変化し続けるウェブ技術を追うためには
変化し続けるウェブ技術を追うためにはKasumi Morita
 
エンジニアがUiデザインにちょっとだけ貢献する
エンジニアがUiデザインにちょっとだけ貢献するエンジニアがUiデザインにちょっとだけ貢献する
エンジニアがUiデザインにちょっとだけ貢献するKasumi Morita
 
a-blog cms 2017年テーマの紹介
a-blog cms 2017年テーマの紹介a-blog cms 2017年テーマの紹介
a-blog cms 2017年テーマの紹介Kasumi Morita
 
コーディングしながらデザインルールをドキュメント化してみた
コーディングしながらデザインルールをドキュメント化してみたコーディングしながらデザインルールをドキュメント化してみた
コーディングしながらデザインルールをドキュメント化してみたKasumi Morita
 
エンジニアのためのプレゼンテクニック
エンジニアのためのプレゼンテクニックエンジニアのためのプレゼンテクニック
エンジニアのためのプレゼンテクニックKasumi Morita
 
とってもシンプルなスライダーのjQueryプラグイン作りました
とってもシンプルなスライダーのjQueryプラグイン作りましたとってもシンプルなスライダーのjQueryプラグイン作りました
とってもシンプルなスライダーのjQueryプラグイン作りましたKasumi Morita
 
1から始めるAMP対応
1から始めるAMP対応1から始めるAMP対応
1から始めるAMP対応Kasumi Morita
 
Sassを使いこなそう
Sassを使いこなそうSassを使いこなそう
Sassを使いこなそうKasumi Morita
 
マークアップを体験するためのツールの使い方
マークアップを体験するためのツールの使い方マークアップを体験するためのツールの使い方
マークアップを体験するためのツールの使い方Kasumi Morita
 
マークアップって重要なの？あなたへ伝えたいマークアップの大切さ
マークアップって重要なの？あなたへ伝えたいマークアップの大切さマークアップって重要なの？あなたへ伝えたいマークアップの大切さ
マークアップって重要なの？あなたへ伝えたいマークアップの大切さKasumi Morita
 
もっと使いやすくなる a-blog cms の更新方法カスタマイズ
もっと使いやすくなる a-blog cms の更新方法カスタマイズもっと使いやすくなる a-blog cms の更新方法カスタマイズ
もっと使いやすくなる a-blog cms の更新方法カスタマイズKasumi Morita
 
a-blog cms ってどんなCMS?
a-blog cms ってどんなCMS?a-blog cms ってどんなCMS?
a-blog cms ってどんなCMS?Kasumi Morita
 
絵本を作って感じたSVGの良いところとつまずいたところ
絵本を作って感じたSVGの良いところとつまずいたところ絵本を作って感じたSVGの良いところとつまずいたところ
絵本を作って感じたSVGの良いところとつまずいたところKasumi Morita
 
a-blog cms の2016年版新テーマについて
a-blog cms の2016年版新テーマについてa-blog cms の2016年版新テーマについて
a-blog cms の2016年版新テーマについてKasumi Morita
 
実装のしかたと運用方法から選ぶ a-blog cms の紹介
実装のしかたと運用方法から選ぶ a-blog cms の紹介実装のしかたと運用方法から選ぶ a-blog cms の紹介
実装のしかたと運用方法から選ぶ a-blog cms の紹介Kasumi Morita
 
ユニットリストのおすすめの使い方
ユニットリストのおすすめの使い方ユニットリストのおすすめの使い方
ユニットリストのおすすめの使い方Kasumi Morita
 

Más de Kasumi Morita (20)

UIの色のコントラスト比十分ですか？
UIの色のコントラスト比十分ですか？UIの色のコントラスト比十分ですか？
UIの色のコントラスト比十分ですか？
 
a-blog cms Training Camp 2019 spring
a-blog cms Training Camp 2019 springa-blog cms Training Camp 2019 spring
a-blog cms Training Camp 2019 spring
 
最近よく聞くブロックタイプエディタを
CMSごとに調べてみた
最近よく聞くブロックタイプエディタを
CMSごとに調べてみた最近よく聞くブロックタイプエディタを
CMSごとに調べてみた
最近よく聞くブロックタイプエディタを
CMSごとに調べてみた
 
a-blog cms が与える体験
a-blog cms が与える体験a-blog cms が与える体験
a-blog cms が与える体験
 
変化し続けるウェブ技術を追うためには
変化し続けるウェブ技術を追うためには変化し続けるウェブ技術を追うためには
変化し続けるウェブ技術を追うためには
 
エンジニアがUiデザインにちょっとだけ貢献する
エンジニアがUiデザインにちょっとだけ貢献するエンジニアがUiデザインにちょっとだけ貢献する
エンジニアがUiデザインにちょっとだけ貢献する
 
a-blog cms 2017年テーマの紹介
a-blog cms 2017年テーマの紹介a-blog cms 2017年テーマの紹介
a-blog cms 2017年テーマの紹介
 
コーディングしながらデザインルールをドキュメント化してみた
コーディングしながらデザインルールをドキュメント化してみたコーディングしながらデザインルールをドキュメント化してみた
コーディングしながらデザインルールをドキュメント化してみた
 
エンジニアのためのプレゼンテクニック
エンジニアのためのプレゼンテクニックエンジニアのためのプレゼンテクニック
エンジニアのためのプレゼンテクニック
 
とってもシンプルなスライダーのjQueryプラグイン作りました
とってもシンプルなスライダーのjQueryプラグイン作りましたとってもシンプルなスライダーのjQueryプラグイン作りました
とってもシンプルなスライダーのjQueryプラグイン作りました
 
1から始めるAMP対応
1から始めるAMP対応1から始めるAMP対応
1から始めるAMP対応
 
Sassを使いこなそう
Sassを使いこなそうSassを使いこなそう
Sassを使いこなそう
 
マークアップを体験するためのツールの使い方
マークアップを体験するためのツールの使い方マークアップを体験するためのツールの使い方
マークアップを体験するためのツールの使い方
 
マークアップって重要なの？あなたへ伝えたいマークアップの大切さ
マークアップって重要なの？あなたへ伝えたいマークアップの大切さマークアップって重要なの？あなたへ伝えたいマークアップの大切さ
マークアップって重要なの？あなたへ伝えたいマークアップの大切さ
 
もっと使いやすくなる a-blog cms の更新方法カスタマイズ
もっと使いやすくなる a-blog cms の更新方法カスタマイズもっと使いやすくなる a-blog cms の更新方法カスタマイズ
もっと使いやすくなる a-blog cms の更新方法カスタマイズ
 
a-blog cms ってどんなCMS?
a-blog cms ってどんなCMS?a-blog cms ってどんなCMS?
a-blog cms ってどんなCMS?
 
絵本を作って感じたSVGの良いところとつまずいたところ
絵本を作って感じたSVGの良いところとつまずいたところ絵本を作って感じたSVGの良いところとつまずいたところ
絵本を作って感じたSVGの良いところとつまずいたところ
 
a-blog cms の2016年版新テーマについて
a-blog cms の2016年版新テーマについてa-blog cms の2016年版新テーマについて
a-blog cms の2016年版新テーマについて
 
実装のしかたと運用方法から選ぶ a-blog cms の紹介
実装のしかたと運用方法から選ぶ a-blog cms の紹介実装のしかたと運用方法から選ぶ a-blog cms の紹介
実装のしかたと運用方法から選ぶ a-blog cms の紹介
 
ユニットリストのおすすめの使い方
ユニットリストのおすすめの使い方ユニットリストのおすすめの使い方
ユニットリストのおすすめの使い方
 

数が増えてもこわくない！Quantity Queries の紹介