CSS Nite Shift15

CSS Nite @cssnite

【来週末開催】 5つのカテゴリーからウェブ制作シーンを振り返るCSS Nite「Shift」も、今年で15回目。 ・マークアップ ・ウェブマーケティング ・アクセシビリティ ・アドビ ・Webデザイントレンド 12月18日[土]、オンライン開催 cssnite.doorkeeper.jp/events/128431 #cssnite #shift15 pic.twitter.com/rcEIOQh2s2

拡大

名村 晋治@Webディレクター28年目 @yakumo

CSS Nite Shift15用に届いているおハガキの整理をしているなう。 ただいま16通届いていますが、全部は今年も読めないかもしれません。フォローアップはします！ #cssnite

just gen @llgenll

CSS Nite Shift15に申し込みました。cssnite.doorkeeper.jp/events/128431 #cssnite @cssniteより

益子 貴寛（マッシー） @takahiromashiko

今週末12月18日（土）は、CSS Nite Shift 15がオンライン開催。すでに200名以上が申し込み。 私は吉村さんと一緒に、今年のマーケティングトレンドを振り返ります。どんな話題を扱うか、画像でチラ見せ。 まだ申し込み受付中。ぜひご参加ください。 cssnite.doorkeeper.jp/events/128431 #cssnite #shift15 pic.twitter.com/bS8hIyxPSl

拡大

歩くCSS設計完全ガイド / HubSpot Tech Ninja @assialiholic

【wbr要素】 「テキストに折り返しが発生する場合にのみ改行する」という、マルチスクリーン時代にぜひ活用したいやつですね。 （検証情報提供 @tak_dcxi さん。ありがとうございました！） codepen.io/assialiholic/p… 詳細は12/18（土）#cssnite #shift15 にて。 pic.twitter.com/rCtJiKCtF8

拡大

歩くCSS設計完全ガイド / HubSpot Tech Ninja @assialiholic

【minlength属性】 input要素やtextarea要素において、valueの最小値を指定できる属性。条件を満たさない場合は:invalid擬似クラスでスタイリングでき、またフォーム送信時にエラーとなります。 codepen.io/assialiholic/p… 詳細は12/18（土）#cssnite #shift15 にて。 pic.twitter.com/RLaUYVdigT

拡大

歩くCSS設計完全ガイド / HubSpot Tech Ninja @assialiholic

【font-variant-east-asianプロパティ】 OpenTypeフォントの東アジア特有の字形オプションを制御します。デモはプロポーショナルメトリクスに基づいた幅にし、かつ繁体字にするというもの。プロポーショナル斉藤。 codepen.io/assialiholic/p… 詳細は12/18（土）#cssnite #shift15 にて。 pic.twitter.com/svYOcSc3yU

拡大

歩くCSS設計完全ガイド / HubSpot Tech Ninja @assialiholic

【-webkit-line-clampプロパティ】 指定行でテキストの省略を行えます。動作のためには、色々他の宣言が必要。-webkit-ナシのline-clampも策定中です（まだ動かない）。 codepen.io/assialiholic/d… 詳細は12/18（土）#cssnite #shift15 にて。 pic.twitter.com/wgW7NT8e1f

拡大

歩くCSS設計完全ガイド / HubSpot Tech Ninja @assialiholic

【text-decorationに対するスタイリング】 複数の線を付けたり、線のタイプ・色・太さを指定したりと、いろいろいじれるようになりました（IEを無視すれば）。 codepen.io/assialiholic/p… 詳細は12/18（土）#cssnite #shift15 にて。 pic.twitter.com/2Cg0UOYeAO

拡大

kanro | aicocco @kanrame

参加するぞ〜！！☺️✨✨ CSS Nite Shift15に申し込みました! cssnite.doorkeeper.jp/events/128431 #cssnite @cssniteより

CSS Nite @cssnite

【あさって土曜日に開催】 5つのカテゴリーからウェブ制作シーンを振り返るCSS Nite「Shift」も、今年で15回目。 ・マークアップ ・ウェブマーケティング ・アクセシビリティ ・アドビ ・Webデザイントレンド 12月18日[土]、オンライン開催 cssnite.doorkeeper.jp/events/128431 #cssnite #shift15

歩くCSS設計完全ガイド / HubSpot Tech Ninja @assialiholic

【min(), max(), clamp() 関数】 その時々の状況で最小・最大となる引数を採択したり、最小値・最大値の範囲内で値を変動させたり。レスポンシブ時代にすごく便利な関数たちです。 codepen.io/assialiholic/p… 詳細は12/18（土）#cssnite #shift15 にて。 pic.twitter.com/PtBgPN1hyc

拡大

歩くCSS設計完全ガイド / HubSpot Tech Ninja @assialiholic

【::marker擬似要素】 <li>や<summary>のマーカーをある程度スタイリングできます。簡単なやつなら、もう::beforeでいちいち生成する必要がありません……。 codepen.io/assialiholic/p… 詳細は12/18（土）#cssnite #shift15 にて。 pic.twitter.com/58V0OrZeOI

拡大

歩くCSS設計完全ガイド / HubSpot Tech Ninja @assialiholic

【:focus-within】 子要素にフォーカスがあたっているタイミングでスタイリングを行えます。図はinputにフォーカスが当たっている際、親のformに背景色を付けるデモです。 codepen.io/assialiholic/p… 詳細は12/18（土）#cssnite #shift15 にて。 pic.twitter.com/AUp0WV9BgN

拡大

歩くCSS設計完全ガイド / HubSpot Tech Ninja @assialiholic

【:not()】 セレクタに除外条件を設定できる擬似クラス。これはもうアイデア次第で無限に使い道があるやつですね！ codepen.io/assialiholic/p… 詳細は12/18（土）#cssnite #shift15 にて。 pic.twitter.com/rixQIXRHDD

拡大

歩くCSS設計完全ガイド / HubSpot Tech Ninja @assialiholic

【:is(), :where()】 セレクタに一定の法則がある場合にとてもスッキリ書けるようになるやつ。 codepen.io/assialiholic/p… MDNのサンプルがとても秀逸ｗ developer.mozilla.org/ja/docs/Web/CS… 詳細は12/18（土）#cssnite #shift15 にて。 pic.twitter.com/gmJYRhxtsP

拡大

歩くCSS設計完全ガイド / HubSpot Tech Ninja @assialiholic

【@media pointer, hover】 デバイスの主な入力機構とかサポート挙動によって分岐が切れるメディア特性。「ホバーできる環境だけホバースタイル当てる」とかは理にかなってますね。 codepen.io/assialiholic/p… 詳細は12/18（土）#cssnite #shift15 にて。 pic.twitter.com/Uu69VVy3ca

拡大

歩くCSS設計完全ガイド / HubSpot Tech Ninja @assialiholic

【display: contents;】 contentsが当たった要素のボックスは生成されないという、すごいトリッキーなやつ。 codepen.io/assialiholic/p… 実用的な使い方はcolissさんの記事にて紹介があります。 coliss.com/articles/build… 詳細は12/18（土）#cssnite #shift15 にて。 pic.twitter.com/jBcm6l7H53

拡大

歩くCSS設計完全ガイド / HubSpot Tech Ninja @assialiholic

【resizeプロパティ】 その名の通り要素をリサイズさせられるようになるという面白いやつ。データポータル系のUIで使いどころがありそうな気がする。 codepen.io/assialiholic/p… 詳細は12/18（土）#cssnite #shift15 にて。 pic.twitter.com/efM5P5axbp

歩くCSS設計完全ガイド / HubSpot Tech Ninja @assialiholic

【conic-gradient()関数】 扇形グラデーションができるやつです。ますますCSS表現の幅が広がりますね。 codepen.io/assialiholic/p… 詳細は12/18（土）#cssnite #shift15 にて。 pic.twitter.com/r0Ox2tM2hy

拡大

歩くCSS設計完全ガイド / HubSpot Tech Ninja @assialiholic

【CSSマスク&CSSシェイプ（lv1）】 CSSマスクの機能で画像を正円にクリッピングし、CSSシェイプの機能でテキストを画像に沿わせています。これは完全にゲームチェンジャーですね。 codepen.io/assialiholic/p… 詳細は12/18（土）#cssnite #shift15 にて。 pic.twitter.com/AtiUDw9kAb

拡大

名村 晋治@Webディレクター28年目 @yakumo

明日はCSS Nite Shift15ですが、イベント当日に出演者の皆さまへの応援メッセージや、疑問質問をこちらのフォームからも受け付けています。 既にたくさん頂いており、当日読ませていただくものもあります。まだ受け付けていますのでぜひお送りください！ bit.ly/podcat-web-dir… #cssnite

Kazuhiro Hara ᯅ @kara_d

今朝の金朝ツメトギは、途中からずっと話してしまいCSS Nite Shift15の紹介みたいな感じになりました。最後のほうはフロントエンドについての話へ。 [金朝ツメトギ] 2021-12-17 AM 6 金曜朝6時開催のもくもく会 - YouTube youtube.com/watch?v=iR_nFJ…

拡大

くみ@コーダー @kumi_andWeb

ラジオを拝聴させていただいている名村さんが司会、 CSS設計完全ガイドの半田さんがトップバッターとのことで… CSS Nite Shift15に申し込みました! どこまで理解できるかわからないけど😅 ナウな情報に触れておきたい✨ cssnite.doorkeeper.jp/events/128431 #cssnite @cssniteより

Kazuhiro Hara ᯅ @kara_d

早いものでShift15は明日です。今年もWebデザイントレンドチームは一致団結してサイトを丹念に見てきました。スライドもバージョン8を超え、出来ることはやったと思います。今日は今からサービシンクさんにお邪魔して最終セッティングをします。ここまで来ればあとは楽しむのみだと思います。やるぞー