HTMLとCSSで勉強すべきことがしっかりまとめられている、アクセシビリティやパフォーマンスを考慮した実装を学べる良書 -モダンHTML＆CSS 現場の新標準ガイド
※本ページは、アフィリエイト広告を利用しています。 最新のHTMLとCSSをしっかり学びたい人にお勧めの解説書を紹介します。 HTMLとCSSの最新の仕様に基づき、必要な知識を身につけ、アクセシビリティやパフォーマンスに考慮した実践的なテクニックをしっかり学べます。Web制作者が持っておいて間違いのない一冊です。 HTMLとCSSは機能が増えて自由度が高くなった分、複雑化しています。またアクセシビリティについての需要もかなり高まっています。 著者はHTMLやCSSをはじめ、JavaScriptの解説書などWeb制作系の解説書で、はずれ無しのエビスコム様。ていねいで詳しい解説は分かりやすく、実践的なサンプルもたくさんあるので、かなり役立つと思います。 本書は最新のHTMLとCSSの仕様に基づいて、アクセシビリティやパフォーマンスにも注目したセマンティックな実装をていねいに詳しく解説した解説書
shadcn/uiの新機能Themesがリリース！テーマカラーが簡単に変更可能に！✨
はじめに 先日の 8 月 8 日に shadcn/ui でテーマカラーを変更できる Themes がリリースされました。Themes を利用することで、コピペで全体の Themes を即座に変更できます。 shadcn/uiのThemes の使い方を紹介します。 結論（Themeの使い方） shadcn/ui Themes を開きます お好みのテーマを選択します。 「Customize」をクリックします。 「Style, Color, Radius, Mode」を選択します。 「Copy code」をクリックします。 CSS ファイルにコピペする設定が表示されるので、「Copy」をクリックします。 globals.css を開き、@layer base と .dark を置換すれば完了です。 ... @layer base { :root { --background: 0 0% 100%
CSS Stock｜Web制作を楽にするCSSコピペサイト
HTML・CSSの知識は不要。全222種類のパーツから お好みのものをご自身のサイトに取り入れることができます。 CSS Stockは「Web制作を楽にする」をテーマに、HTML・CSSのデザインやパーツをご紹介するサイトです。 お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。新しいスニペットも順次追加しており、色々なパーツを網羅できるよう日々尽力しています。 掲載しているコードについて 当サイトに掲載しているソースコードは全て自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。 ただし別媒体でソースコード自体を掲載される場合は該当ページへのリンクを記載の上、参照元が当サイトであることを明記してください。 また掲載している
カスタマイズ性と生産性を両立する、React向けのUIライブラリ「Chakra UI」の魅力的な部品【中編】
対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Big Sur 11.5.2 Node.js 16.11.1／npm 8.0.0 React 17.0.2 react-scripts 4.0.3 @chakra-ui/react 1.6.10 Webアプリ制作時に嬉しいコンポーネントとHooks 前回に引き続き、今回もChakra UIについて解説します。Chakra UIは、React向けのUIライブラリとしては後発の部類ですが、Webアプリケーション制作で必要となるコンポーネントを多く備えていることからか、たくさんの採用事例が現れました。最近だとメルカリShopsのフロントエンド実装で採用されたのが記憶に新しいですね。 どんなコンポーネントやHoo
フレックスボックスの基本概念 - CSS: カスケーディングスタイルシート | MDN
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 �ER ��View in English 0�� ��Always switch to English フレックスボックスレイアウト（通常フレックスボックスと呼ばれる）は、アイテム間の余白を分配するための一次元レイアウトモデルで、数多くの配置機能を含んでいます。この記事ではフレックスボックスの主な機能の概要を説明し、このガイドの残りの部分でさらに詳しく説明します。 フレックスボックスが一次元であることは、フレックスボックスが一つの次元、つまり行か列のいずれかの方向にしかレイアウトしないことを述べています。これは CSS グリッドレイアウトが行と列の二次元を同時に制御するモデルであることと対照的です。 フレックスボックス 2 つの軸 フレックスボ
CSS セレクター - CSS | MDN
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 View in English @~ ��Always switch to English CSS セレクターモジュールは、要素を選択するパターンを定義し、一連の CSS ルールをその詳細度とともに適用します。 CSS セレクターモジュールには、 60 以上のセレクターと 5 つの結合子が用意されています。他のモジュールは、さらに擬似クラスセレクターと擬似要素が提供されています。 CSS では、セレクターはスタイルを設定したい要素と照合、または選択するために使用されるパターンです。セレクターは JavaScript でも使用され、 NodeList として返すDOMノードを選択することができます。 セレクターは、 CSS でも JavaScri
コンテナクエリ @container が全ブラウザ対応。新時代のレスポンシブ対応を完全理解する
本日（2023/2/14）、ついに Firefox でコンテナクエリ（container query）に対応しました。Chrome・Edge・Safari はすでに現行ブラウザで対応済みのため、全ブラウザにてコンテナクエリが使えることになります💐 従来、レスポンシブ対応でレイアウトを変えるには @media を使ってウインドウサイズを基準にするかありませんでした。コンテナクエリ @containerを使うと任意の要素を基準にできるので、「A要素の横幅が 500px 以下のとき、子要素のレイアウトを変える」などが手軽に実現できます。 とくにコンポーネントベース開発が主流の現在においては、コンテナクエリをマスターすることで、より柔軟でラクなレスポンシブ対応が可能になります。 本記事では、コンテナクエリの基本、メリット、デモまでをできるだけ詳しく解説し、コンテナクエリを理解することを目標としま
主軸方向のフレックスアイテムの比率の制御 - CSS | MDN
このガイドでは、主軸に沿ってアイテムの寸法と自由度を制御することができる 3 つのプロパティ、 flex-grow, flex-shrink, flex-basis を見ていきます。これらのプロパティがどのようにフレックスアイテムを伸縮させるかについて完全に理解することが、 CSS フレックスボックスをマスターするための鍵です。 最初に見てみる 3 つのプロパティは、フレックスアイテムの自由度を以下の観点から制御します。 flex-grow: このアイテムが得る正の余白はどれくらいか。 flex-shrink: このアイテムから縮小できる負の余白はどれくらいか。 flex-basis: 伸長や縮小が発生する前のアイテムの寸法はいくつか。 プロパティは通常、一括指定の flex プロパティを使用して表します。以下のコードは flex-grow プロパティを 2 に、 flex-shrink
デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる
デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca
CSS Flexbox Layout Guide | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart. Brought to you by DigitalOcean DigitalOcean has the cloud computing services you need to su
Understanding Z-Index in CSS
@shadeed9 Understanding Z-Index in CSS A visual guide on how z-index and stacking contexts work in CSS. What is Z-Index?The z-index property defines the order of the elements on the z-axis. Basically, it works on elements with a position value other than static. The duck and the ring are within the same parent (the water). Can you guess which will come in front of the other? <div class="water"> <d
CSS 入門 | MDN
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 p\��View in English `P3Always switch to English 次のページ CSS （カスケーディングスタイルシート）は、ウェブページのスタイルやレイアウトに使用されます。例えば、コンテンツのフォント、色、サイズ、文字間隔を変更したり、コンテンツを複数の段に分割したり、アニメーションや装飾機能を追加したりすることができます。このモジュールでは、構文、機能、テクニックなど、これで必要な CSS の基本すべてを提供します。 ガイド CSS とは何か CSS を使用すると、見栄えの良いウェブページを作成することができますが、その裏側ではどのように動作しているのでしょうか？この記事では、 CSS とは何か、基本的な構文はど
CSS のレイアウト - ウェブ開発の学習 | MDN
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 P0��View in English Ps]�Always switch to English 次のページ 前回までのモジュールでは、コンテンツが収まるボックスのスタイルや操作方法について見てきました。 今回は、ボックスを互いに関連づけ、ブラウザーのビューポートに合わせて正しくレイアウトする方法について見ていきます。 このモジュールでは、浮動ボックス、位置指定、その他の最新のレイアウトツール、さまざまな端末、画面サイズ、解像度に適応するレスポンシブデザインの構築について見ていきます。 チュートリアルと課題 CSS レイアウト入門 この記事では、以前のモジュールで既に触れた CSS レイアウト機能のいくつか（さまざまな display の値など）
Bootstrapなどのフレームワークは使用せずに、Webサイトを実装した際に学んだCSSの4つのテクニック
新しいプロジェクトをゼロから始めることは、どれくらい経験豊かであっても、新しいことが学べる素晴らしいチャンスです。Bootstrapなどの完成されたフレームワークは使用せずに、Webサイトを実装した際に学んだCSSのテクニックを紹介します。 4 CSS tricks I've learnt the hard way 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 borderの注意点、box-shadowまたはbox-sizingで 要素にユーザーの注意を引き付ける 要素を水平および垂直の中央に配置する 要素を親要素に対して相対的に配置する borderの注意点、box-shadowまたはbox-sizingで 今までに、borderを使用したことがきっとあるでしょう。borderについて知っておきたいことがあります。 bord
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Foundation for your Design System - shadcn/ui
Headless UI
@fortawesome/react-fontawesome
Applying color to HTML elements using CSS
TailwindCSS入門 ~ Utility First + デザインシステムの構築 ~ - Qiita
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
