ホームページ > 記事 > ウェブフロントエンド > CSS石積みキャットネス
CSS石積みキャットネス
- Mary-Kate Olsenオリジナル
- 2024-11-01 07:09:30475ブラウズ
CSS はテクノロジーにおける他のものと同様、常に変化し、進化しています。この分野で進行中の開発は、CSS グリッド レイアウト モジュール レベル 3、別名 CSS Masonry Layout です。 Theo は、その開発方法と、その実装方法について Apple と Google が行っている議論についてビデオを作成しました。
これらすべてを踏まえて、CSS 石積みを試してみることに興奮しました。 WebKit の写真デモに触発されて、猫の写真を使って同様のビューを作成しました。猫を愛さない人はいないでしょうか?
前提条件
これから構築するものを表示するには、Safari テクノロジー プレビューを使用するか、Firefox で機能フラグlayout.css.grid-template-masonry-value.enabledをtrueにする必要があります。
Firefox の機能フラグにアクセスするには、アドレス バーに「about:config」と入力します。 Enter キーを押すと、グリッドまたは上記の文字列を検索できます。これを true に切り替えると準備完了です!
TypeScript/JavaScript、React、Next に関する基本的な知識。
新しいプロジェクトをセットアップする
ターミナルで新しい Next プロジェクトを作成します。
次のコマンドを実行します: npx create-next-app@latest
その後、次のパッケージをインストールする必要がある場合があります:
create-next-app@15.0.1 Ok to proceed? (y) y
プロジェクトに名前を付けます。私は私の猫の写真を滝と呼んでいます
ターミナルで次のプロジェクトのセットアップを続けます (Tailwind を使用しないようにしてください):
Would you like to use TypeScript? Yes Would you like to use ESLint? Yes Would you like to use Tailwind CSS? No Would you like your code inside a 'src/' directory? No Would you like to use App Router? (recommended) Yes Would you like to use Turbopack for next dev? No Would you like to customize the import alias (@/* by default)? No
プロジェクトのセットアップが完了したら:
ターミナルで次のコマンドを実行して、ディレクトリをプロジェクトに変更します cd your-project-name.
このコマンド コードを実行して、VSCode で開きます。 (まだ設定していない場合は、このコマンドを設定します)
ボイラープレートを取り外します
アプリフォルダー内には、page.tsx というファイルがあります。これには、ボイラープレートでレンダリングされるすべてのコードが含まれています。
そのコードを削除し、今のところ div またはフラグメントを保持します。以下に例を示します:
// app/page.tsx
export default function Home() {
return <div></div>;
}
アプリフォルダー内のページのスタイルシートもあります。これは page.module.css という名前で、これを開いて、その中のスタイルをすべて選択し、削除できます。
メタデータを変更して、アプリの動作をより明確にしてみましょう。次のようにlayout.tsxを更新します:
// app/layout.tsx
import type { Metadata } from "next";
import "./globals.css";
export const metadata: Metadata = {
title: "Cat Pics",
description: "Bringing cats your way with experimental CSS",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
必要に応じて、猫のファビコンも追加してください (ファビコンの追加方法は次へ)!
.envファイルを作成する
プロジェクトのルートに .env ファイルを作成します。ここに、Cat API からの API キーを保存します。
Cat API にサインアップする
The Cat API から無料の API キーにサインアップします。最初のサインアップ後、API キーが記載されたメールが届きます。その API キーをコピーし、.env に新しい変数を作成します。私は自分のキーを CAT_KEY と呼びます。
ローカルの .env は次のようになります: CAT_KEY=your_api_key。これをデプロイする場合は、デプロイ先のどこにでもこれを追加してください。
猫の写真を持ってきてください！
前述の WebKit デモから情報を収集して、猫の写真のページとスタイルを作成します。ここでは API を呼び出し、結果をマッピングして、返された写真をレンダリングします。
create-next-app@15.0.1 Ok to proceed? (y) y
写真のスタイルを整える
写真を持ってきたので、CSS 石積みが実際に動作しているのを見てみましょう! WebKit の本の一部を抜粋すると、page.module.css は次のとおりです。
Would you like to use TypeScript? Yes Would you like to use ESLint? Yes Would you like to use Tailwind CSS? No Would you like your code inside a 'src/' directory? No Would you like to use App Router? (recommended) Yes Would you like to use Turbopack for next dev? No Would you like to customize the import alias (@/* by default)? No
ファイルを保存し、ターミナルで npm run dev を実行すると、次のようなページが表示されます (画像はランダムに選択されます)。
これをさらに発展させる可能性はたくさんあります。画像はその品質を維持しており、メディア クエリなしでもページの応答性は高く感じられます。ここに登場したものを CSS に他の方法で使用することもできます。Theo はビデオでそれらを紹介しており、WebKit と Google のデモでも同様に使用できます。
今、開発者になれるのは素晴らしいことです。多くの素晴らしいツール、機能、ランタイムなどが構築されています。これが CSS にどのように実装されるかは、時間がたてば正確にわかります。どのような決定がなされたとしても、CSS はよりクールになっているということがわかります。
このプロジェクトのために作成したリポジトリをご覧ください。 Vercel にもデプロイしました。前提条件で説明した 2 つのブラウザー設定のいずれかを使用している場合は、ここで確認できます。
猫の写真を表示するページを作成したり、仕事で何かをしたりすることもできます。これらの機能が CSS に導入されることについてどう思いますか?どのように使いますか?
以上がCSS石積みキャットネスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。