クライアントの予算は正直ピンきりなので、予算枠に応じてWEB制作するときのブレイクポイントの基準をメモしておきます。 ブレイクポイント3箇所 区間は以下の通り ・sm：360px ~ 767px ・md：768px ~ 1023px ・lg：1024px ~ 1366px ・xl：1367px ~ 2880px ※360pxより小さい端末についてはviewportで対応（参考記事：TAKさんの俺流レスポンシブコーディング） ※ウルトラワイドまで対応しているとキリがないので最大幅はiMacの2880pxまで。 ※2880pxについては自分のやり方なので、別に1920pxまでにしても良い。 記述方法 style.css /* スマホのCSS記述 */ @media and (min-width: 768px){ /* CSS記述 */ } @media and (min-width: 1024px){ /* CSS記述 */ } @media and (min-width: 1367px){ /* CSS記述 */ } ブレイクポイント1箇所 区間は以下の通り ・sm：360px ~ 767px ・lg：1024px ~ 1366px ※768px ~ 1023pxまではコンテンツ幅767px固定のリキッドデザイン。 ※1367px以降はコンテンツ幅1366pxのリキッドデザイン。 記述方法 style.css .container{ /* スマホのCSS記述 */ max-width:767px; width: 100%; margin: 0 auto; } @media and (min-width: 1024px){ .container{ max-width:1366px; } } それでもブレイクポイントが足りない場合 正直TAKさんも記事に書かれていますが、1024px付近は曲者なのは間違いないです。 規定のブレイクポイントだけでは対応できないときは、ディレクターやデザイナーと相談しながら個別にメディアクエリを追加できないか相談しましょう。 ちなみに自分は「よしなに」のパターンが多いので、半分責了でメディアクエリを追加してます。 本当は都度クライアントなどに確認が取れる環境が望ましいですが、会社によってはデザインを再現できるならOKというところもあるとは思うので、前もって上の者に確認しておきましょう。

数字や※でのリストを作成するときに、上記のように2行目以降は字下げをしてほしいな〜っていうことありますよね… 疑似要素を使用して作成するのがよくあると思いますが、text-indentを使用する方法がすごく簡単だったのでメモ。 index.html <ul class="text-wrap"> <li>1.テキストテキストテキストテキストテキストテキストテキスト</li> <li>2.abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</li> </ul> style.css .text-wrap { width: 300px; border: 1px solid; padding: 12px; } .text-wrap > li { text-indent: -1em; /*ここで字下げ。今回は一文字分なので1em*/ padding-left: 1em; /*text-indentでデザインが崩れるので修正*/ word-break: break-all; /*枠内にテキストを収める*/ } .text-wrap > li + li { margin-top: 24px; } 「text-indent」で任意の文字分（余白文）後ろにずらす。 ↓ デザインが崩れるので、paddingで調整 という考え方です。

この記事の概要 巷で話題のRemixですが、スタイリングに関する記事はあまり見当たりません。 そのため自分で調査してまとめてみました。 まだ変化も大きいと思いますが、直近で導入を考えている人にとって役立てば幸いです。 公式ドキュメントにある情報 主な方法 Remixは<link rel="stylesheet">の形式でスタイルを読み込み、適用するのが基本方針のようです。 以下の2つの方法が示されていますが、自前のスタイルを一切書かなくて済むサイトは少ないでしょう。 というわけで、実質的に2番目の方法は必須だと思われます。 リモートのスタイルシートを用いる 通常のスタイルシートを用いる リモートのスタイルシートを用いる 公式ドキュメントから例を拝借します。 app/root.tsx import type { LinksFunction } from "remix"; export const links: LinksFunction = () => { return [ { rel: "stylesheet", href: "https://unpkg.com/modern-css-reset@1.4.0/dist/reset.min.css" } ]; }; 例が示しているように、実質reset系のCSSやCSSフレームワークなど、サイト全域で使うものを指定することになるんだと思います。 もちろん`root.tsx`以外でもこの書き方自体はできます。 ですが、importするだけして未使用だった場合に警告は出ないなど管理が煩雑になる印象しかありませんでした。 通常のスタイルシートを用いる CSSファイルを作成する 各コンポーネントのファイルでstyleをimport 各コンポーネントのファイルでfunction links()としてexport 各ページのファイルでlinks as XXLinksといった形式でimport 各ページのファイルのlinks()内で、スプレッド構文でXXLinksを展開 結構大変なのですが、イメージがつきづらい気がするので自分で試していたときのコードを載せます。 いくつかのコンポーネントを作り、それらをimportしてページを作る、という至って普通のシーンなのですが……。 コンポーネントのファイル（他にもいくつか存在する） import { ComponentPropsWithRef, forwardRef } from "react"; import styles from "~/styles/footer.css"; type Props = { className?: string; } & ComponentPropsWithRef<"footer">; export const links = () => [{ rel: "stylesheet", href: styles }]; export const Footer = forwardRef<HTMLElement, Props>( ({ className, ...props }, ref) => { return ( // 省略 ); } ); stylesファイルに作成したCSSをimportしつつ、このコンポーネントからもexportしています。 ページのファイル import { Header, links as headerLinks } from "~/components/RegularStylesheets/Header"; import { Navigation, links as navigationLinks } from "~/components/RegularStylesheets/Navigation"; import { FeedItem, links as feedItemLinks } from "~/components/RegularStylesheets/FeedItem"; import { Ranking, links as rankingLinks } from "~/components/RegularStylesheets/Ranking"; import { Footer, links as footerLinks} from "~/components/RegularStylesheets/Footer"; import globalStyles from "~/styles/global.css"; import pageStyles from "~/styles/page.css" export function links() { return [ { rel: "stylesheet", href: globalStyles }, ...headerLinks(), ...navigationLinks(), ...feedItemLinks(), ...rankingLinks(), ...footerLinks(), { rel: "stylesheet", href: pageStyles }, ]; } export default function SomePage() { return ( // 省略 ); } それぞれのコンポーネントで定義したlinksをasを使って別名でimportし、links()の中で展開しています。 コンポーネントが増える度にこちらの指定も増えるので、大した手間では無いものの面倒くさいのは否めません。 あと、これはあくまでimportやexportの仕方であってクラス名の衝突を防ぐのは自分で頑張る必要があります。 この方法のときはRemixが面倒を見てはくれません。 Tailwind CSS 現状ではTailwindで書くのが唯一の方法な印象です。 1番導入が楽で、挙動の怪しい箇所も無さそうでした。 JITモードやapplyを使うかどうかはチームのルール次第なのでここでは触れません。 styled-components 動くと言えば動きますが、全体的に怪しいです。 まず、公式にあるexampleの通りだと読み込み時に一瞬ちらつきが発生します。 styleに埋め込まれるはずの文字列が一瞬画面全体に描画されてしまいました。 リロードを繰り返している様子 色々調べた末、こちらのGistを参考にして書いたら一応チラつきは改善されました。 ですが……PropclassNamedid not match. Server: "foo" Client: "bar"をwarningが出るようになってしまい最終的に解決まで至れませんでした……。 一応、今私が書いたコードを置いておきます。 究明まで至れずすみません。 entry.server.tsx import { renderToString } from "react-dom/server"; import { RemixServer } from "remix"; import type { EntryContext } from "remix"; import { ServerStyleSheet } from "styled-components"; import StylesContext from "./StylesContext"; export default function handleRequest( request: Request, responseStatusCode: number, responseHeaders: Headers, remixContext: EntryContext ) { const sheet = new ServerStyleSheet(); try { let html = renderToString( sheet.collectStyles( <StylesContext.Provider value={null}> <RemixServer context={remixContext} url={request.url} /> </StylesContext.Provider> ) ); const styles = sheet.getStyleTags(); html = html.replace("</head>", `${styles}</head>`); responseHeaders.set("Content-Type", "text/html"); return new Response("<!DOCTYPE html>" + html, { status: responseStatusCode, headers: responseHeaders, }); } catch (error) { console.log(error); } finally { sheet.seal(); } } PostCSS あくまでautoprefixerなどの付与がメインだと思うので今回は検証していません。 挙がっているIssueなど 調査をする中で見つけたIssueを貼っておきます。 styled-componentsでのチラつきの話はRemix側にもstyled-components側にもIssueが立っており、まだ解決できなさそうな雰囲気を感じています。 Remix styled-components vanilla-extract stitches

この記事の概要 巷で話題のRemixですが、スタイリングに関する記事はあまり見当たりません。 そのため自分で調査してまとめてみました。 まだ変化も大きいと思いますが、直近で導入を考えている人にとって役立てば幸いです。 公式ドキュメントにある情報 主な方法 Remixは<link rel="stylesheet">の形式でスタイルを読み込み、適用するのが基本方針のようです。 以下の2つの方法が示されていますが、自前のスタイルを一切書かなくて済むサイトは少ないでしょう。 というわけで、実質的に2番目の方法は必須だと思われます。 リモートのスタイルシートを用いる 通常のスタイルシートを用いる リモートのスタイルシートを用いる 公式ドキュメントから例を拝借します。 app/root.tsx import type { LinksFunction } from "remix"; export const links: LinksFunction = () => { return [ { rel: "stylesheet", href: "https://unpkg.com/modern-css-reset@1.4.0/dist/reset.min.css" } ]; }; 例が示しているように、実質reset系のCSSやCSSフレームワークなど、サイト全域で使うものを指定することになるんだと思います。 もちろん`root.tsx`以外でもこの書き方自体はできます。 ですが、importするだけして未使用だった場合に警告は出ないなど管理が煩雑になる印象しかありませんでした。 通常のスタイルシートを用いる CSSファイルを作成する 各コンポーネントのファイルでstyleをimport 各コンポーネントのファイルでfunction links()としてexport 各ページのファイルでlinks as XXLinksといった形式でimport 各ページのファイルのlinks()内で、スプレッド構文でXXLinksを展開 結構大変なのですが、イメージがつきづらい気がするので自分で試していたときのコードを載せます。 いくつかのコンポーネントを作り、それらをimportしてページを作る、という至って普通のシーンなのですが……。 コンポーネントのファイル（他にもいくつか存在する） import { ComponentPropsWithRef, forwardRef } from "react"; import styles from "~/styles/footer.css"; type Props = { className?: string; } & ComponentPropsWithRef<"footer">; export const links = () => [{ rel: "stylesheet", href: styles }]; export const Footer = forwardRef<HTMLElement, Props>( ({ className, ...props }, ref) => { return ( // 省略 ); } ); stylesファイルに作成したCSSをimportしつつ、このコンポーネントからもexportしています。 ページのファイル import { Header, links as headerLinks } from "~/components/RegularStylesheets/Header"; import { Navigation, links as navigationLinks } from "~/components/RegularStylesheets/Navigation"; import { FeedItem, links as feedItemLinks } from "~/components/RegularStylesheets/FeedItem"; import { Ranking, links as rankingLinks } from "~/components/RegularStylesheets/Ranking"; import { Footer, links as footerLinks} from "~/components/RegularStylesheets/Footer"; import globalStyles from "~/styles/global.css"; import pageStyles from "~/styles/page.css" export function links() { return [ { rel: "stylesheet", href: globalStyles }, ...headerLinks(), ...navigationLinks(), ...feedItemLinks(), ...rankingLinks(), ...footerLinks(), { rel: "stylesheet", href: pageStyles }, ]; } export default function SomePage() { return ( // 省略 ); } それぞれのコンポーネントで定義したlinksをasを使って別名でimportし、links()の中で展開しています。 コンポーネントが増える度にこちらの指定も増えるので、大した手間では無いものの面倒くさいのは否めません。 あと、これはあくまでimportやexportの仕方であってクラス名の衝突を防ぐのは自分で頑張る必要があります。 この方法のときはRemixが面倒を見てはくれません。 Tailwind CSS 現状ではTailwindで書くのが唯一の方法な印象です。 1番導入が楽で、挙動の怪しい箇所も無さそうでした。 JITモードやapplyを使うかどうかはチームのルール次第なのでここでは触れません。 styled-components 動くと言えば動きますが、全体的に怪しいです。 まず、公式にあるexampleの通りだと読み込み時に一瞬ちらつきが発生します。 styleに埋め込まれるはずの文字列が一瞬画面全体に描画されてしまいました。 リロードを繰り返している様子 色々調べた末、こちらのGistを参考にして書いたら一応チラつきは改善されました。 ですが……PropclassNamedid not match. Server: "foo" Client: "bar"をwarningが出るようになってしまい最終的に解決まで至れませんでした……。 一応、今私が書いたコードを置いておきます。 究明まで至れずすみません。 entry.server.tsx import { renderToString } from "react-dom/server"; import { RemixServer } from "remix"; import type { EntryContext } from "remix"; import { ServerStyleSheet } from "styled-components"; import StylesContext from "./StylesContext"; export default function handleRequest( request: Request, responseStatusCode: number, responseHeaders: Headers, remixContext: EntryContext ) { const sheet = new ServerStyleSheet(); try { let html = renderToString( sheet.collectStyles( <StylesContext.Provider value={null}> <RemixServer context={remixContext} url={request.url} /> </StylesContext.Provider> ) ); const styles = sheet.getStyleTags(); html = html.replace("</head>", `${styles}</head>`); responseHeaders.set("Content-Type", "text/html"); return new Response("<!DOCTYPE html>" + html, { status: responseStatusCode, headers: responseHeaders, }); } catch (error) { console.log(error); } finally { sheet.seal(); } } PostCSS あくまでautoprefixerなどの付与がメインだと思うので今回は検証していません。 挙がっているIssueなど 調査をする中で見つけたIssueを貼っておきます。 styled-componentsでのチラつきの話はRemix側にもstyled-components側にもIssueが立っており、まだ解決できなさそうな雰囲気を感じています。 Remix styled-components vanilla-extract stitches