発行
CSSのルールをネストできるCSS Nesting仕様について、基本的な構文を紹介します。また、Sassとの違いについても触れます。
Web APIなどを介したデータ取得だけでなく、非同期の状態全般を管理する強力なライブラリ、TanStack Queryについて解説します。メタフレームワークの非同期のデータ取得機能を利用できない場合には、非常に役立つライブラリです。
編集しながらリアルタイムなプレビューで編集結果を確認できる、Visual Editingを設定します。設定しながら、Visual Editingの仕組みについても解説します。
発行
メニューテキストの文字サイズを親要素の横方向の大きさを基準に変化させる、コンテナクエリーの使い方を解説します。clamp()関数と組み合わせると、文字サイズをうまくコントロールできるようになります。
ヘッダー・フッターなど、全ページで共通する部分を作り、それをコンポーネントとして使い回せるようにします。また、内容が固定されたレイアウト用のコンポーネントも作ります。
CSS Gridの待望の機能、サブグリッドが主要なブラウザでサポートされました。基本的な使い方を見てみましょう。カードレイアウトの例を通じて、その強力なレイアウト能力について理解を深めます。
発行
Jamstackという言葉が使われなくなりつつある現在でも、Vercel、Netlify、Cloudflare Pagesなどのモダンなホスティングサービスは進化し続けています。モダンなホスティングサービスについて、その特徴や利点について考察し、再確認してみましょう。
共通なスタイルをひとつにまとめてCSSのスタイルを整理します。そのあと、a要素の範囲を調整しましょう。a要素は、そのままでは幅や高さを変更できないので、displayプロパティを変更します。
今回はMarkdownファイルで記事を記述している既存のブログに、TinaCMSを導入して使うケースを考えてみましょう。管理するMarkdownファイルの指定や、管理画面の構築はconfig.tsのスキーマを設定することで行えます。
発行
小規模なコーポレートサイトを作るという想定で、AstroとSvelteを使ってWebサイトを作成していきます。まずは環境構築と開発サーバーの確認をします。
CSS Gridによって、レイアウトされているスキル名と、その習熟度を表すグラフのレイアウトを調整します。まず、背景から飛び出してしまっている棒グラフを調整し、さらにFlexboxを使って、狭い幅ではスキル名と習熟度グラフが縦に並ぶようにします。
ノードのテキストをリンクとして機能させたい場合の実装として、aria-owns属性を利用した例紹介します。aria-owns属性を使うと、HTMLだけでは親子関係を表現できないツリービューの構造を支援技術に伝えられます。