検索
ホームページウェブフロントエンドCSSチュートリアルWordPress 6.0でブロックテーマパターンを作成する方法

WordPress 6.0でブロックテーマパターンを作成する方法

WordPress 5.5は、ユーザーが事前定義されたブロックレイアウトを作成および共有できるブロックモード(一般に「ブロック」とも呼ばれる)を導入します。これらのレイアウトはスキーマディレクトリに保存され、WordPressコミュニティによって設計されたさまざまなスキーマが含まれています。これらのモードは、コーディングの知識なしに単純なコピーパステ形式を使用しているため、ユーザーの時間を大幅に節約できます。

パターンに関する記事はすでにたくさんありますが、最新の機能強化をカバーする包括的で最新のパターン作成記事が不足しています。この記事の目的は、このギャップを埋めることを目的としており、登録なしでパターンを作成するなどの最近の強化を強調し、特にブロックトピックでパターンを作成および使用するための段階的なガイドを新しい経験豊富な著者に提供します。

ブロックテーマでのブロックモードの使用は、WordPress 5.9および222(TT2)のデフォルトテーマのリリース以来急増しています。私は常にブロックパターンの大ファンであり、私のブロックテーマでそれらを作成して使用してきました。

WordPress 6.0は、著者に3つのメインモード機能の拡張機能を提供します。

  • /patternsフォルダー( /パーツ、 /テンプレート、 /スタイルに類似)を介した登録モードを許可します。
  • theme.jsonを使用して、パブリックモードディレクトリからスキーマを登録します。
  • 新しいページを作成するときにユーザーに提供できるパターンを追加します。

入門ビデオ「WordPress 6.0の探索」で、Automattic製品リエゾンAnn McCathyは、新しい拡張モード機能の一部(15:00から始まる)を強調し、セクション要素としてモードを含む将来のモード拡張計画、ページ作成時のモード、統合モードディレクトリ検索などのモードを選択するオプションを含む将来のモード拡張計画について説明しました。

前提条件

この記事は、読者がWordPressサイト全体の編集(FSE)インターフェイスとブロックテーマの基本的な知識を持っていることを前提としています。ブロック編集マニュアルとサイト全体の編集Webサイトは、この記事で説明したブロックトピックやパターンを含むすべてのFSE機能を学習するための最新のチュートリアルガイドを提供します。

セクション1:ブロックパターンを作成するための進化方法

ブロックパターンを作成する最初の方法では、ブロックパターンAPIを使用する必要があります。これは、カスタムプラグインとして使用するか、functions.phpファイルに直接登録してブロックテーマにバンドルできます。新しくリリースされたWordPress 6.0は、 /パターンフォルダー登録モードやページ作成モードモダリティなど、パターンとテーマで使用するためのいくつかの新しい機能を導入します。

背景として、レジスタスキーマAPIを使用して登録なしで直接ロードすることから、スキーマ登録ワークフローがどのように進化したかについての簡単な概要から始めましょう。

ユースケースの例1:211

デフォルトの21のテーマ(TT1)とTT1ブロックテーマ(TT1姉妹テーマ)は、テーマのfunctions.phpでブロックモードを登録する方法を示しています。 TT1ブロックの実験トピックでは、以下に示すように、 8つのブロックパターンを含む単一のブロックパターン.phpファイルがinclusionファイルとしてfunctions.phpに追加されます。

2つのパラメーターを受信するRegister_block_pattern関数を使用してカスタムブロックパターンを登録する必要があります。タイトル(パターンの名前)と属性(パターンプロパティを説明する配列)を受信します。

以下は、テーマシェイパー記事に従って登録されている単純な「Hello World」段落パターンの例です。

 Register_block_pattern(
    「My-Plugin/Hello-World」、
    配列(
        'title' => __( 'hello world'、 'my-plugin')、
        'content' => "\ n<p>こんにちは世界</p>\ n "、
    ))
);

登録後、以下に説明するように、register_block_pattern()関数は、initフックに接続されたハンドラーから呼び出す必要があります。

関数my_plugin_register_my_patterns(){
    Register_block_pattern(...);
}

add_action( 'init'、 'my_plugin_register_my_patterns');

ブロックモードを登録した後、それらはブロックエディターに表示されます。より詳細なドキュメントは、ブロックモードの登録に記載されています。

ブロックモードのプロパティ

必要なタイトルとコンテンツのプロパティに加えて、ブロックエディターマニュアルには、次のオプションモードプロパティもリストされています。

  • タイトル(必須) :パターンの人間読み取り可能なタイトル。
  • コンテンツ(必須) :パターンのHTMLタグをブロックします。
  • 説明(オプション) :インサルターのパターンを説明するために使用される視覚的に隠されたテキスト。説明はオプションですが、タイトルがモードの機能を完全に説明していない場合は、使用することを強くお勧めします。説明は、ユーザーが検索中にパターンを発見するのに役立ちます。
  • カテゴリ(オプション) :ブロックスキーマをグループ化するために使用される登録されたスキーマカテゴリの配列。ブロックモードは、複数のカテゴリに表示できます。ここで使用するには、カテゴリを個別に登録する必要があります。
  • キーワード(オプション) :ユーザーが検索時にそのパターンのエイリアスまたはキーワード配列を発見するのに役立ちます。
  • ViewPortWidth (オプション) :モードの予想幅の整数を指定して、インサルターでモードを比例してプレビューします。
  • BlockTypes (オプション) :パターンが使用すると予想されるブロックタイプの配列。各値は、宣言されたブロックの名前である必要があります。
  • Inserter (オプション) :デフォルトでは、すべてのモードがInserterに表示されます。モードをプログラムで挿入できるように隠すには、InserterをFalseに設定します。

WordPressブログから取得した参照パターンプラグインコードスニペットの例を次に示します。

 /*
プラグイン名:引用パターンの例プラグイン
*/

Register_block_pattern(
    「My-Plugin/My-Quote-Pattern」、
     配列(
      'title' => __(「アバターとの引用」、「my-plugin」)、
      「カテゴリ」=> array( 'text')、
      'description' => _x( 'アバターとの大きな引用 "。'、 'ブロックパターンの説明'、 'my-plugin')、
      'content' => ' <div><div>
<hr>
<div><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174183133237166.jpg?x-oss-process=image/resize,p_40" class="lazy" alt=""    style="max-width:90%"  style="max-width:90%"></div>
<blockquote>
<p> 「貢献することで、私は地球に役立つように感じます。」</p> <cite>- アンナ・ウォン、<em>ボランティア</em></cite>
</blockquote>
<hr>
</div></div>'、
      ))
);

テンプレートファイルでパターンを使用します

パターンを作成した後、次のブロックタグを使用してテーマテンプレートファイルで使用できます。


このGitHubリポジトリの例は、TT2 Gopherブロックテーマで「TT2Gopher」プレフィックスを備えた「フッター付き」パターンスラッグの使用を示しています。

ブロックテーマとグーテンバーグプラグインの早期採用者も、古典的なテーマのパターンを利用しました。デフォルトのTwenty Twentyと私のお気に入りのEksellテーマ(ここにデモサイトがあります)は、スキーマ機能を古典的なテーマに追加する方法を示す良い例です。

ユースケースの例2:222

トピックに少数のパターンのみが含まれている場合、開発とメンテナンスはかなり簡単に管理できます。ただし、ブロックテーマにTT2テーマなどの多くのパターンが含まれている場合、pattern.phpファイルは非常に大きく読みにくくなります。デフォルトのTT2テーマには60を超えるスキーマがバンドルされており、読みやすく維持しやすいリファクタリングされたスキーマ登録ワークフロー構造を示しています。

TT2トピックを例にとると、この簡素化されたワークフローがどのように機能するかを簡単に説明しましょう。

2.1:登録モードカテゴリ

デモンストレーションのために、TT2サブトピックを作成し、仮想コンテンツを使用してローカルテストサイトにセットアップしました。 TT2のメソッドに従って、ブロックパターンのpatterns.phpファイルにフッター付きのフッターを登録し、次のスキーマカテゴリに追加しました。

 /**
*レジスタパターンとカテゴリをブロックします。
*/
関数Twentytwentytwentwo_register_block_patterns(){
    $ block_pattern_categories = array(
        'フッター' => array( 'label' => __( 'footers'、 'twentytwentytwo'))、
        'header' => array( 'label' => __( 'headers'、 'twentytwentytwo'))、
        'pages' => array( 'label' => __( 'pages'、 'twentytwentytwo'))、
                // ...
    );

    /**
     *テーマブロックパターンカテゴリをフィルターします。
     */
    $ block_pattern_categories = apply_filters( 'twentytwentytwo_block_pattern_categories'、$ block_pattern_categories);

    foreach($ block_pattern_categories as $ name => $ properties){
        if(!wp_block_pattern_categories_registry :: get_instance() - > is_registered($ name)){
            Register_block_pattern_category($ name、$ properties);
        }
    }

    $ block_patterns = array(
        「フッターディフォー」、
        「フッターダーク」、
        「バックグラウンドのフッター」、
        // ...
        「ヘッダーディフォー」、
        「ヘッダーとダーク」、
        「ヘッダースモールダーク」、
        'Hidden-404'、
        「隠れた鳥」、
        // ...
    );

    /**
     *テーマブロックパターンをフィルターします。
     */
    $ block_patterns = apply_filters( 'twentytwentytwo_block_patterns'、$ block_patterns);

    foreach($ block_patterns as $ block_patterns){
        $ pattern_file = get_theme_file_path( '/inc/patterns/'。$ block_pattern。 '.php');

        Register_block_pattern(
            'Twentytwentytwo/' $ block_pattern、
            $ pattern_fileが必要です
        );
    }
}
add_action( 'init'、 'twentytwentytwo_register_block_patterns'、9);

このコードの例では、$ block_patterns = array()にリストされている各パターンは、foreach()関数によって呼び出されます。これには、アレイにリストされているスキーマ名を含むスキーマディレクトリファイルが必要であり、次のステップに追加されます。

2.2: /inc /patternsフォルダーにパターンファイルを追加します

次に、$ block_patterns = array()にリストされているすべてのスキーマファイルを使用する必要があります。以下は、バックグラウンド付きのスキーマファイルフッターの例です。

 /**
 *ダークフッターWTIHタイトルと引用
 */
Arrayを返します(
    'title' => __(「バックグラウンド付きフッター」、「Twentytwentytwo」)、
    「カテゴリ」=>配列( 'フッター')、
    'blocktypes' => array( 'core/template-part/footer')、
  'content' => '
      <div style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)">
      <p>'。
      sprintf(
        / *翻訳者:WordPressリンク。
        esc_html __( '誇らしげに%sを搭載している'、 'Twentytwentytwo')、
        「 <a href="'%20.%20esc_url(%20__(%20'https://wordpress.org',%20'twentytwentytwo'%20)%20)%20.%20'" rel="nofollow">WordPress</a> |。
      )。</p>
      </div>
          '、
);

footer.htmlテンプレートパーツのパターンを参照しましょう。


これは、タイトルまたはフッターパーツをテンプレートファイルに追加することに似ています。

同様に、パターンをParts/footer.htmlテンプレートに追加することができます。テーマパターンファイル(フッター付きのフッター)を参照するように変更できます。


これで、ブロックエディターのモードインサルターにアクセスすると、「バックグラウンドを持つフッター」を使用できます。

次のスクリーンショットは、フロントエンドの背景を持つ新しく作成されたフッターパターンを示しています。

パターンがブロックテーマの不可欠な部分になった今、その多くは、Quadrat、Seed、Mayland、Zoologist、Geologistなどのブロックテーマにバンドルされています。これは、ブロックパターン登録ファイルと、return array()関数にコンテンツソースと必要なパターンタイトルを含む一連のファイルを含むQuadrat Theme /Inc /Patternsフォルダーの例です。

セクション2:登録なしでパターンを作成およびロードします

この機能には、サイトにインストールするには、WordPress 6.0またはGutenbergプラグイン13.0以上が必要であることに注意してください。

この新しいWordPress 6.0機能により、標準のファイルおよびフォルダー登録モードが可能になり、 /パーツ、 /テンプレート、 /スタイルに似たコンベンションがもたらされます。

この記事で説明されているように、このプロセスには、次の3つのステップが含まれます。

  • テーマのルートディレクトリにパターンフォルダーを作成します
  • プラグインスタイルのパターンタイトルを追加します
  • モードソースコンテンツ

記事から取得した典型的なパターンのタイトルは次のとおりです。

 

前のセクションで述べたように、タイトルとスラッグフィールドのみが必要であり、他のフィールドはオプションです。

最近公開されたトピックの例を参照して、CSS-Tricksに関する以前の記事で作成されたTT2 GOPHERS DEMOトピックのスキーマ登録をリファクタリングしました。

次の手順では、PHPに登録され、フッター.htmlテンプレートで使用されているフッター付きのフッターwith-background.phpパターンをリファクタリングする方法を調べましょう。

2.1:テーマのルートディレクトリにA /Patternsフォルダーを作成します

最初のステップは、TT2 GOPHERテーマのルートディレクトリにA /Patternsフォルダーを作成し、フッター付きBackground.phpパターンファイルを /パターンフォルダーに移動してリファクタリングすることです。

2.2:スキーマデータをファイルに追加します

次に、次のスキーマタイトル登録フィールドを作成します。

 

スキーマファイルには、PHPコメントとして書かれたトップタイトルフィールドがあります。その後、HTML形式で書かれたブロックコンテンツが続きます。

2.3:ファイルにスキーマコンテンツを追加します

コンテンツの部分については、コードスニペットを単一の引用符(たとえば、 '...')でコピーし、バックグラウンドのフッターのコンテンツ部分から始めて、置き換えます。

    <div style="padding-top:35px;padding-bottom:30px">
    <p>WordPressを搭載しています|</p>
    </div>

パターン/フッター付きのフッターの完全なコードスニペットは、githubで表示できます。

/inc /patternsおよびblock-patterns.phpはエクストラであり、WordPress 6.0では必要ではなく、デモンストレーションのためにのみ含まれていることに注意してください。

2.4:テンプレートの参照パターンスラッグ

上記のリファクタリングされたフッターのフッターのフッター付きのフッターを追加するパターン。

これで、ブロックエディターまたはブラウザのサイトのフッター部分のサイトを表示すると、フッターパーツが表示されます。

パターンカテゴリとタイプ登録(オプション)

ブロックパターンを分類するには、トピックのfunctions.phpファイルにスキーマカテゴリとタイプを登録する必要があります。

TT2 Gopherトピックからブロックパターンカテゴリを登録する例を考えてみましょう。

登録後、モードはコアデフォルトモードとともにモードインサートに表示されます。パターンInserterにトピック固有のカテゴリタグを追加するには、トピック名前スペースを追加して以前のコードスニペットを変更する必要があります。

 /**
*レジスタカテゴリをブロックし、タイプします。
*/

function tt2gopher_register_block_pattern_categories(){

$ block_pattern_categories = array(
  'tt2gopher -header' => array( 'label' => __( 'tt2 gopher -headers'、 'tt2gopher'))、
  'tt2gopher -footer' => array( 'label' => __( 'tt2 gopher -footers'、 'tt2gopher'))、
  'tt2gopher -page' => array( 'label' => __( 'tt2 gopher -page'、 'tt2gopher'))、
  // ...
);

/**
*テーマブロックパターンカテゴリをフィルターします。
*/
$ block_pattern_categories = apply_filters( 'tt2gopher_block_pattern_categories'、$ block_pattern_categories);

foreach($ block_pattern_categories as $ name => $ properties){
  if(!wp_block_pattern_categories_registry :: get_instance() - > is_registered($ name)){
    Register_block_pattern_category($ name、$ properties);
  }
}
add_action( 'init'、 'tt2gopher_register_block_pattern_categories'、9);

フッター付きバックグラウンドモードは、モードInserterを使用してプレビュー(選択した場合)に表示されます。

このプロセスは、ブロックテーマのブロックパターンを作成および表示するプロセスを大幅に簡素化します。 Gutenbergプラグインを必要とせずに、WordPress 6.0で利用できます。

モード登録なしのサンプルトピック

アーリーアダプターは、ブロックテーマでこの機能の使用を開始しました。登録なしでパターンをロードできるトピックディレクトリで提供されるトピック例のいくつかを以下に示します。

  • Archeo - 12モード
  • ペンダント - 13モード
  • リモート - 11モード
  • SkatePark - 10モード
  • スチュワート - 17モード
  • livro - 16モード
  • Avant-Garde - 14モード

セクション3:コードが低いパターンの作成と使用

公式スキーマカタログには、コミュニティが提供する創造的なデザインが含まれており、必要に応じてコンテンツを作成するためにコピーしてカスタマイズできます。ブロックエディターでパターンを使用することはかつてないほど簡単になりました!

成長しているディレクトリのパターンは、単に「コピーして貼り付ける」またはそれらをThemis.jsonファイルに含めるだけでブロックテーマ追加することもできます。次に、非常に限られたコードでこれを簡単に実装する方法を簡単に説明します。

スキーマディレクトリからスキーマを追加およびカスタマイズします

3.1:ディレクトリからページにモードをコピーする

ここでは、SchemaディレクトリのフッターパターンにFirstWebgeekを使用しています。コピーモードボタンを選択してモードをコピーし、新しいページに直接貼り付けます。

3.2:必要なカスタマイズを行います

フォントとボタンの背景の色にいくつかの変更を加えました。次に、コードエディターからクリップボードにコード全体をコピーします。

コードエディターを使用するのが初めての場合は、オプション(3つのドット、右上隅)に移動し、[コードエディター]ボタンをクリックし、ここからコード全体をコピーします。

3.3: /patternsフォルダーに新しいファイルを作成します

まず、new /patterns/footer-pattern-test.phpファイルを作成し、必要なスキーマタイトルセクションを追加しましょう。次に、コード全体を貼り付けます(ステップ3、上)。パターンはフッターエリア(5行目)に分類されており、パターンインサートに新しく追加されたパターンを表示できます。

 <div style="padding-top:100px;padding-right:30px;padding-bottom:70px;padding-left:30px">
<div>
<div>
<h2 id="ロレム">ロレム</h2>



<p style="font-size:16px">Lorem Ipsumを使用することの主な利点の1つは、簡単に生成できることです。また、デザイナーのプレッシャーをかけて、最適なWeb​​サイトデータの作成に焦点を当てることができます。</p>



<ul></ul>
</div>



<div>
<h4 id="お問い合わせ">お問い合わせ</h4>



<p style="font-size:16px;line-height:1.2">123 Bd Lorem、Ipsum<br><br> 123-456-7890</p>



<p style="font-size:16px;line-height:1">[保護された電子メール]</p>



<p style="font-size:16px;line-height:1">営業時間:10:00-18:00</p>
</div>



<div>
<h4 id="ニュースレター">ニュースレター</h4>



<p style="font-size:16px">Lorem Ipsum dolor sit amet、condsetur ut laborer et dolore magna aliqua ipsum dolor sit</p>


</div>
</div>
</div>

3.4:Inserterで新しいモードを表示します

パターンライブラリから新しく追加されたフッターモードを表示するには、任意の投稿またはページに移動し、挿入アイコン(左上隅の青色のサイン)を選択し、TT2 Gopher - フッターカテゴリを選択します。新しく追加されたモードは、左パネルに表示され、他のフッターモードと右側のプレビュー(選択した場合)が表示されます。

Modeをtheme.jsonファイルに直接登録します

WordPress 6.0では、次の構文を使用して、thema.jsonファイルのスキーマディレクトリから必要なスキーマを登録できます。 6.0開発には、「パターンフィールドはスキーマディレクトリの[スキーマスラグ]の配列であることが示されています。パターンスラッグは、スキーマディレクトリの単一のスキーマビューで[URL]から抽出できます。」

 {
    「バージョン」:2、
    「パターン」:[「ショートテキスト」、「パターンスラグ」]
}

この短いWordPress 6.0機能ビデオは、 /パターンフォルダー(3:53)にパターンを登録する方法と、Thema.jsonファイル(3:13)のモードディレクトリにパターンを登録する方法を示しています。

登録モードは、モード挿入検索ボックスで使用でき、テーマバウンドモードライブラリのように使用できます。

 {
  「バージョン」:2、
  「パターン」:["フッター・フロム・ディレクトリ"、「フッターセクション - デザインのwith-3-column-description-social-media-contact-and-newsletter "]]]
}

この例では、前の例からのパターンスラッグフッターセクションデザインの-3-Column-description-description-description-social-media-contactとnewsletterはtheme.jsonを介して登録されています。

ページ作成パターンモデル

Buildを使用してBuildを使用してBuildの一部として、WordPress 6.0は、ページレイアウトモードをブロックするページレイアウトモードを追加するモーダルモーダルオプションをテーマに提供し、ページを作成するときにサイトユーザーがページレイアウトモード(例:ページ、連絡先ページ、チームページなど)を選択できるようにします。開発の指示から取られた例は次のとおりです。

 Register_block_pattern(
    「マイプラギン/ページ」、
    配列(
        'title' => __( 'about page'、 'my-plugin')、
        'BlockTypes' => array( 'Core/Post Content')、
        'content' => '
        <p>ここにページについて書く、どんなブロックでも自由に使用してください</p>
        '、
    ))
);

この機能は現在、ページの投稿タイプに限定されており、「投稿タイプ」には適用されません。

また、すべてのモードのコンテンツ後のブロックタイプを削除することにより、ページ作成モードのモダリティを完全に無効にすることもできます。サンプルサンプルコードはここで提供されています。

GitHubでのディスカッションに従って参加できます。ディスカッションリンクは、以下のリソースセクションにリストされています。

スキーマディレクトリを使用してページを作成します

ページビルダーと同様に、ディレクトリのパターンを使用して、目的の投稿またはページレイアウトを作成することもできます。 Gutenberghubチームは、スキーマディレクトリのスキーマを使用して、実験的なオンラインページビルダーアプリケーション(入門ビデオ)を作成しました。その後、アプリケーションのコードをコピーしてサイトに貼り付けることができます。これにより、コーディングなしで複雑なページレイアウトを構築するプロセスが大幅に簡素化されます。

この短いビデオでは、Jamie Marslandは(1:30で)アプリケーションを使用して、ディレクトリの必要なページセクションを使用して、ページビルダーと同様のページレイアウト全体を作成する方法を示しています。

要約します

モードを使用すると、ユーザーは、一般的に使用されるコンテンツレイアウト(例:ヒーローページ、アクションへの呼び出しなど)を任意のページで再現し、コーディングスキルなしでスタイルコンテンツを提示できないことに対する障壁を減らすことができます。プラグインやテーマディレクトリと同様に、新しいスキーマディレクトリは、ユーザーがスキーマディレクトリからさまざまなスキーマを選択し、スタイルのコンテンツを書き込み、表示するオプションを提供します。

実際、ブロックモードはすべてを変更します。これは間違いなくWordPressテーマフィールドの変革的機能です。 「パターンビルドを使用する」作業の可能性が最大限に利用できる場合、これにより、テーマのブロックを設計する方法が変わり、低コードの知識だけでも美しいコンテンツが作成されます。多くのクリエイティブデザイナーにとって、パターンカタログは、創造性を実証する適切な方法を提供する場合があります。

リソース

WordPress 6.0

  • WordPress 6.0ドメインガイド(WordPressコア)
  • WordPress 6.0を探索:スタイルのバリエーション、ブロックロックUI、書き込み改善 - 22分のビデオ(Anne McCarthy)
  • WordPress 6.0機能4分間の機能(Dave Smith)
  • WordPress 6.0の新規:新しいブロック、スタイルスイッチング、テンプレート編集、WebFonts APIなど(Kinsta)

パターンを作成します

  • ブロックモードの紹介(サイトで編集)
  • ブロックモードの紹介ビデオ、14分(WordPressを学ぶ)
  • ブロックモード(ブロックエディターマニュアル)
  • それで、あなたはブロックパターンを作成したいですか? (WordPressブログ)
  • WordPressで低コードブロックモードを作成して共有する方法(GoDaddy)

モードエンハンスメント(github)

  • パターンビルディング#38529を使用します
  • セクションとしてのパターン#39281
  • 追加:ページ作成時にモードを選択するオプション。 #40034
  • ページ作成に使用されるブロックモード。 #38787
  • 追加:ページ開始オプション(テンプレートとパターン)#39147

ブログ投稿

  • Gutenbergモード:WordPressのページビルディングの未来(Rich Tabor)
  • ブロックモード(GoDaddy)を使用してWordPressサイトビルディングをスピードアップ
  • ブロックモードはすべてを変更します(WP Tavern)

以上がWordPress 6.0でブロックテーマパターンを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
@KeyFrames対CSSトランジション:違いは何ですか?@KeyFrames対CSSトランジション:違いは何ですか?May 14, 2025 am 12:01 AM

@keyframesandcsstransitionsdifferincomplexity:@keyframesallowsfordeTailedAnimationのシーケンス、whilecsstransitionshandlesimplestatechanges.usecsstransitionsは、ButtonColorChanges、および@keyframesforintricateanimationslikerotatingingspinnnersを使用します。

静的サイトコンテンツ管理にページCMSを使用します静的サイトコンテンツ管理にページCMSを使用しますMay 13, 2025 am 09:24 AM

私は知っています、私は知っています:たくさんのコンテンツ管理システムオプションが利用可能であり、私はいくつかテストしましたが、実際にはY&#039;知っているものはありませんでしたか?奇妙な価格設定モデル、困難なカスタマイズ、一部は全体になることさえあります&

HTMLのCSSファイルをリンクするための究極のガイドHTMLのCSSファイルをリンクするための究極のガイドMay 13, 2025 am 12:02 AM

CSSファイルをHTMLにリンクすることは、HTMLの一部で要素を使用することで実現できます。 1)タグを使用して、ローカルCSSファイルをリンクします。 2)複数のタグを追加することにより、複数のCSSファイルを実装できます。 3)外部CSSファイルは、そのような絶対URLリンクを使用します。 4)ファイルパスとCSSファイルの読み込み順序の正しい使用を確認し、パフォーマンスを最適化すると、CSSプリプロセッサを使用してファイルをマージできます。

CSS Flexbox vsグリッド:包括的なレビューCSS Flexbox vsグリッド:包括的なレビューMay 12, 2025 am 12:01 AM

FlexBoxまたはグリッドの選択は、レイアウト要件によって異なります。1)FlexBoxは、ナビゲーションバーなどの1次元レイアウトに適しています。 2)グリッドは、雑誌のレイアウトなどの2次元レイアウトに適しています。この2つは、レイアウト効果を改善するためにプロジェクトで使用できます。

CSSファイルを含める方法:メソッドとベストプラクティスCSSファイルを含める方法:メソッドとベストプラクティスMay 11, 2025 am 12:02 AM

CSSファイルを含める最良の方法は、タグを使用してHTMLパーツに外部CSSファイルを導入することです。 1.タグを使用して、外部CSSファイルを導入します。 2。小さな調整のために、インラインCSSを使用できますが、注意して使用する必要があります。 3.大規模プロジェクトでは、@Importを介して他のCSSファイルをインポートするために、SASS以下などのCSSプリプロセッサを使用できます。 4。パフォーマンスのために、CSSファイルをマージし、CDNを使用し、CSSNANOなどのツールを使用して圧縮する必要があります。

FlexBox対グリッド:両方を学ぶべきですか?FlexBox対グリッド:両方を学ぶべきですか?May 10, 2025 am 12:01 AM

はい、Youはrelearnbothlexboxandgrid.1)FlexBoxisidealforone-Dimensional、FlexiblleayoutslikenavigationMenus.2)Gridexcelsintwo-digsignssuchasmagazinelayouts.3)Bothenhanceslaysutibulivedibulisunivedivition、floctonsulururを

軌道力学(またはCSSキーフレームアニメーションの最適化方法)軌道力学(またはCSSキーフレームアニメーションの最適化方法)May 09, 2025 am 09:57 AM

独自のコードをリファクタリングするのはどのように見えますか?ジョン・レアは、彼が書いた古いCSSアニメーションを選び、それを最適化するという思考プロセスを歩きます。

CSSアニメーション:それらを作成するのは難しいですか?CSSアニメーション:それらを作成するのは難しいですか?May 09, 2025 am 12:03 AM

cssanimationsArenotintinlentyhardbutrepracticeanderstanding ofcsspropertiesandtimingfunctions.1)

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール