PAST EVENT

#朝までマークアップ 2（CSS編）

2025年1月31日開催

2023年11月に開催した#朝までマークアップ、今回はCSS特集で開催します。

セッション内容

AIでCSSを自動生成！　bolt.newとCursorで実現するAIコーディング

今や、AIとコーディングは切っても切り離せない関係になりつつあります。AIチャットへの相談や、エディタのコード補完、自動生成など「自分の手を動かさない」CSSコーディングが実現しつつあります。このセッションでは、AIエディタの「Cursor」と、AI生成ツールの「bolt.new」を利用したAIコーディングの今をご紹介します。

初心者が挑戦！CSSを使ってStudioでループアニメーションを実装してみよう！

もち

Studioのデフォルト機能ではできないループアニメーションを、CSSの@keyframesを使って実装する方法を解説します。
CSS初心者の私が、同じ初心者でも真似しやすいポイントを押さえてお伝えします！StudioとCSSを使った新しい表現に挑戦したい方はぜひご参加ください。

CSSでリッチなインタラクションを作ってみよう

長谷川巧

@propertyによるカスタム変数の定義と、sin, cosなどの数学関数、transformプロパティを駆使して、CSSだけでリッチなインタラクションを実現できます。少しの数学の知識があれば、WebGLのライブラリを使用せずとも、CSSのみで簡単な3D表現が可能であることを実践してみたいと思います。

使って得するTailwind CSSの書き方

佐藤あゆみ

近年人気を集めているTailwind CSSの魅力と活用法をご紹介します。Tailwind CSSは、2019年のv1.0の登場から進化を続け、Arbitrary Properties/Variantsなど柔軟な機能や書き方が増えており、利便性も上がっています。「ユーティリティファーストって、余白やフォントサイズを指定できるくらいでしょ？」という方、そしてまだ触ったことがない方に向けて、「Tailwind CSSって、こんな風に書けるんだ！」をご紹介します。

CSSのゲームチェンジャー:has()の活用事例

鹿野壮

2023年末に遂に全ブラウザ対応し、対応ブラウザも普及したCSSの:has()。:has()を使うと、これまでJavaScriptを使わないと難したかった表現がCSSだけでできるようになったり、冗長なCSSのコードを短く安全に記述できるようになります。本セッションでは、単なる:has()の使い方にとどまらず、開発現場で:has()をどのように活用できるのか実践的な実例を紹介します。

CSS実装から始めるアクセシビリティ〜実務で役立つ4つの達成基準と実装テクニック〜

いつか、森川結子

受託制作プロジェクトにおいて、アクセシビリティへの対応要件が増えています。本セッションでは、Webアクセシビリティガイドライン（WCAG）2.2のうち、CSSに関連する実装について解説します。レベルAAまでの達成基準から、実装頻度の高い要件に焦点を当て、現場で活用できる知見を共有します。さらに、アクセシビリティのチェックツールの活用方法を紹介しながら、ツールだけでは発見できない課題への対処方法についても説明します。

CSSの変態直伝！ハイセンスCSSテクニック「CSSだけで実装するパララックススクロール」

あしざわ

近年のWebサイト表現は自由が度高くバリエーションも豊富ですが、それに比例して実装難易度も昔にくらべ高くなっています。今回は、Webサイト制作初心者の方でも比較的扱いやすい「CSSだけで実装するパララックス（視差効果）」のテクニックをご紹介します。CSSが秘める無限の可能性を感じワクワクしながら楽しく学びましょう！

font-feature-settingsで操るタイポグラフィの世界

みらる

なにげなく使っているフォントには、数多くの秘められた機能が存在しています。
それらの機能はデザインツールからだけでなく、CSSからも操れることをご存じですか？
フォントとCSSの関係性を知ることで、Web上のタイポグラフィの可能性が広がります。
本セッションでは、文字の振る舞いをCSSで変更する方法や、Figma上での文字設定をGoogle FontsのCDNでどこまで再現できるのかを、デモを交えてご紹介します。

突撃！隣のスタイルシート

沖良矢

スタイルシートを書くとき、他の人がどのように書いているのか気になったことはありませんか？

例えばfont-familyの指定はどのようにしているのか、よく使われている単位は？など、実際のウェブサイトの傾向について知りたいと思ったことがあるはずです。

そこで本セッションでは、多くのエンジニアが一度は悩んだであろうこれらのポイントについて、東証プライム上場（旧・東証一部上場）企業約1,600社のウェブサイトを対象に調査した結果をご紹介します。

現場で役立つ失敗しないレイアウト作り！vw/vhの実践テクニック

浅井泰名

CSSレイアウトでよく使われるvwやvh。便利だけれど、「横スクロールが出る」「高さがズレる」といった問題で悩んだことはありませんか？
本セッションでは、初心者がつまづきやすいvw/vhの落とし穴をデモで解説しつつ、CSS変数とJSを活用した実践的な解決方法をご紹介します。
日々の制作現場で直面しやすい課題を解決するヒントがきっと見つかるはずです。
現場で役立つCSSの基本と応用を、この機会に学んでみませんか？

CSS変数を利用して、ブロックエディタCMSの運用体験を1つ上に引き上げました

半田惇志

「ブロックをページ内の好きな所に配置できる」ブロックエディタを搭載したCMSが登場したことで、ウェブサイトの運用は格段にラクに、かつ自由度が高くなりました。しかし、実はきちんと考えられた作成されたブロックでないと、「ブロックをどこでも好きな所に使う」ことはできません。「ブロックをきちんと作る」ためにCSS変数を活用した例と、そこに至るまでに経た思考プロセスも併せてご紹介します。

セレクタと詳細度、見直すなら今！:where()が変えるCSS管理

長谷川広武（ハム）

大きく話題になることは少ないですが、2024年にリリースされたWordPressではCSSの詳細度が再検討され、テーマ管理を容易にするためにセレクタの詳細度を下げる方針が取り入れられました。CSSの詳細度を抑えることは、普段のお仕事で書いているスタイルにも応用できる大切な考え方です。本セッションでは、詳細度が高いと起こりがちな問題点を整理しながら、:where()などの擬似クラスを活用して保守性と柔軟性を高める具体的な方法を紹介します。

10分でわかる！進化するWordPressサイト制作と便利プラグイン＆パターン活用

くーつ

WordPressのブロックエディターやブロックテーマの登場により、サイト制作の手法が大きく変化しています。本セッションでは、初心者の方にも分かりやすく、最近のアップデートで追加されたCSS関連機能、ブロックパターンの活用などを10分で簡潔に解説します。さらに、ブロックエディターをより活用するための便利なプラグイン紹介や、WordPress制作の新しい手法が学べる書籍、最新情報をスピーディーにキャッチアップする方法もあわせてご紹介します。短い時間でポイントをしっかり押さえられる内容となっていますので、WordPressでのサイト制作を学習中の方も、既に実務で取り組んでいる方もぜひお気軽にご参加ください。

スクリーンリーダー最適化のためのCSS

倉科宏行

「スクリーンリーダー（画面読み上げツール）にCSSは影響します！」と言われても、ピンとこない方は多いのではないでしょうか。
実は、CSSの書き方一つで読み上げに影響を与えることがあります。視覚的には問題なくても、音声として読み上げた場合にユーザー体験を損なうケースは少なくありません。
また、スクリーンリーダー対応を含むウェブアクセシビリティの確保は、視覚に頼らないユーザーだけでなく、すべてのユーザーが快適に利用できるウェブサイトを作る上で欠かせない要素です。
今回のセッションでは、スクリーンリーダーのデモを交えながら、CSSがどのように読み上げに影響を与えるのかを解説します。

相対カラー構文とcolor-mix()関数で差をつける、2025年の色指定のテクニック

TAK

日々進化が止まらないモダンCSSですが、特に色指定に纏わるCSSはこの数年で革命が起こりました。
Oklchなどの新しく登場した色空間にも触れつつ、僕が昨年のCSSのコーディングでお世話になった「相対カラー構文」と「color-mix()関数」について便利なテクニックとそれぞれの使い分けについて解説します。

CSS関数や変数とFigmaを連携！コーダーをダメにするデザインデータの作り方

せきゆおう

Figmaの開発モードを活用するだけでもコーディングの工数は削減できますが、効率化をさらに進めてみませんか？
ローカルバリアブルの数値をCSS変数と統一し、「あるCSS関数」を取り入れることで、Figmaの開発モードで出力されるスタイルがより実用的に仕上がります。また、メディアクエリの数も減らせるので、コーディング工数もさらに削減でき、より運用しやすいコードを実現できます。FigmaのデザインデータとCSS関数を組み合わせ、多くのスタイルをコピペで効率的に構築できる「コーダーをダメにするFigmaデザインデータの作り方」をご紹介します！

古くて新しいzoomプロパティー

小山田晃浩

CSSのzoomプロパティーはSafariとChromeでは古くからサポートされており、2024年にFirefoxでもサポートされました。これによりzoomプロパティーは実務でも気軽に使えるプロパティーになりました。
zoomプロパティーはレスポンシブ対応においてとても有用なプロパティーです。このセッションでは、zoomプロパティーの特徴と、どんなときに役に立つかの具体例を紹介します。

今すぐ使おうコンテナクエリ！

草野あけみ

CSSがどんどん進化して新しい機能も続々登場していますが、
実際のところ実務でどのくらい使い道があるのか正直よくわからず利用をためらっている人も結構いるのではないでしょうか？
このセッションでは数あるモダンCSSの中でも昨年実際に使ってみて特に「これはイイ！」と思ったコンテナクエリに注目して、どのようなケースで利用すると威力を発揮するのか、従来のメディアクエリと比較しながら具体的に紹介していきたいと思います。

あぶないCSS〜「CSSだけで作る◯◯」の危険性〜

伊原力也

CSSの進化に伴い「CSSだけで作る◯◯」という実験的なコードを見かける機会が増えました。ドロップダウンメニュー、ハンバーガーメニュー、アコーディオン、ツールチップ、タブ、カルーセル、そしてモーダルダイアログ。確かに、これらがCSSだけで作れたら便利です。しかしコードを見てみると、操作不可能な状態を生み出してしまう「あぶない」ものが多いようです。本セッションでは、こうしたCSSの問題点と解決方法を考えてみます。

Webページ表示速度やアクセシビリティを検証できる！Lighthouseの使いかた

相原典佳

Googleが提供している、Webページの表示速度やアクセシビリティについての状態を検証できるツール、Lighthouseを紹介します。
このセッションでは、Lighthouseを用いて検証結果のよいWebページと悪い結果のWebページをそれぞれ検証し、どの点を改善すると「よりよいWebページになるのか」を解説します。Lighthouseを使ったことがない人でも、どの箇所を直せばよいのかの「勘どころ」がわかるようになる、初心者向けの内容です。

アニメーションの12の原則をCSSで表現するには…？

長谷川喜洋

CSSアニメーションを実装しているとき、「なんだか動きが直線的」「無機質」と感じることはありませんか？
1981年に出版された『ディズニーアニメーション The Illusion of Life ― 生命を吹き込む魔法 ― 』で紹介されたアニメーションの12の原則から、CSSアニメーションに取り込むコツをご紹介します。
コピペで使えるイージングから、@propertyを用いたアニメーション調整まで、今までCSSアニメーションが苦手だった方も、この機会にぜひチャレンジしてみてください。

サンプルで学ぶCSSアニメーションの実践テクニック

タムショー（田村章吾）

このセッションでは、CSSアニメーションの実践テクニックとして、「ループする横スクロールアニメーション」と「スクロールで動画を再生するようなアニメーション」の2つを取り上げます。
いずれもJavaScriptを使用せずに実装する方法を解説し、実際の動きを確認しながらサンプルコードを通して学べるため、部分的な箇所からでもクライアントワークに応用できる内容となっています。
また、アクセシビリティを意識した作りについても紹介しますので、動きと使いやすさを両立しやすくなるはずです。
ぜひ本セッションを活用して、より魅力的なページ作りにお役立てください。

Tailwind CSSに「インラインスタイルで十分」と言う人、こうなるけど大丈夫ですか？

綿貫佳祐

Tailwind CSSは世の中にだいぶ浸透してきました。
しかし、Tailwindの話になると絶対にこうやって言う人が出ます。
「これを使うくらいならインラインスタイルで十分。」

本当にそうなのでしょうか？
実際にインライン記述だけでスタイルを完結させようとするとどうなるのでしょうか？
十分と思っている人は現実的な問題を認識する機会に、考えたこともなかった人は技術選定の1つの要素にしてみてください。

講演者プロフィール

TAK

1993年群馬県生まれ。大学を卒業後、紆余曲折を経てWeb制作に携わる。Web制作会社や東証プライム上場企業にてマークアップ・フロントエンド業務を経験した後、フリーランスとして独立。

自身の経験を活かし、主にCSS関連の技術発信を行う。備忘録や知識のアウトプットの場として運営しているブログ「TAKLOG」を運営。

2025年にCSSに関する書籍を出版予定。