CSS石積みキャットネス-CSSチュートリアル-php.cn

CSS石積みキャットネス

Mary-Kate Olsen

リリース： 2024-11-01 07:09:30

オリジナル

596 人が閲覧しました

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 Masonry Catness

これをさらに発展させる可能性はたくさんあります。画像はその品質を維持しており、メディアクエリなしでもページの応答性は高く感じられます。ここに登場したものを CSS に他の方法で使用することもできます。Theo はビデオでそれらを紹介しており、WebKit と Google のデモでも同様に使用できます。

今、開発者になれるのは素晴らしいことです。多くの素晴らしいツール、機能、ランタイムなどが構築されています。これが CSS にどのように実装されるかは、時間がたてば正確にわかります。どのような決定がなされたとしても、CSS はよりクールになっているということがわかります。

このプロジェクトのために作成したリポジトリをご覧ください。 Vercel にもデプロイしました。前提条件で説明した 2 つのブラウザー設定のいずれかを使用している場合は、ここで確認できます。

猫の写真を表示するページを作成したり、仕事で何かをしたりすることもできます。これらの機能が CSS に導入されることについてどう思いますか?どのように使いますか?

以上がCSS石積みキャットネスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。