LikePay Academyが「スーパーサイトAcademy」に変わりました。詳しくはこちらです。

コードの書き出し

Webflow サイトの HTML、CSS、JavaScript、アセットをエクスポートします。

この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。引用元はこちらです。

ワークスペース有料プランでは、Webflow Designer 内からサイトの HTML、CSS、JavaScript、アセットをエクスポートできます。これにより、コードをバックアップし、クライアントから要求があった場合に提供することができます。また、エクスポートしたコードを使用して、好きな場所でホスティングすることもできます。

このレッスンでは、次のことを学びます:

コードのエクスポート方法

  1. Designerでサイトを開きます。
  2. Exportボタンをクリックします。
  3. Prepare ZIPをクリックします。
  4. ZIPファイルをダウンロードします。
重要: CMS、User Accounts、およびEcommerceコンテンツ(データベース)およびLogic flowsはエクスポートされたコードに含まれません。エクスポートされたサイトでは、コレクションリストは空の状態を表示し、コレクションページにはコレクションフィールドにバインドされたコンテンツが表示されません。サイト内のパスワード保護ページは、コードのエクスポート後に保護されなくなります。さらに、サイト内の検索とフォーム(ファイルのアップロードおよびreCAPTCHAを含む)は、GDPRに準拠するため、エクスポートされたサイトでは機能しません。

minified HTMLのエクスポート方法

HTMLを最小化することで、ページの読み込み時間を短縮し、ブラウザがページを読み込むために必要のないスペース、コメント、および他のコード要素を削除することができます。HTMLを最小化してエクスポートするには:

  1. Designerの上部にあるExportボタンをクリックします。
  2. キーボードでControl + Oを押します。
  3. エクスポートウィンドウに表示されるMinify HTMLチェックボックスをオンにします。
  4. Prepare ZIPをクリックします。
  5. ZIPファイルをダウンロードします。

エクスポートされたファイルに含まれる内容

ダウンロードしたZIPファイルには、サイトのすべてのページ、スタイル、スクリプト、および画像が含まれています:

  1. CSSフォルダ:3つの.cs*ファイルにすべてのサイトのスタイルが含まれています。
  2. CSSファイル(例:your-site-name.css):サイトのすべてのカスタムスタイルが含まれています。
  3. webflow.css:Webflowレイアウトシステムの共通の基本スタイルと、ナビゲーションバー、スライダー、タブなどのすべてのコンポーネントが含まれています。
  4. normalize.css:ブラウザがすべての要素をより一貫して、現代の標準に合わせてレンダリングするようにするスタイルです。これは正規化が必要なスタイルのみを正確に対象としています。
  5. JSフォルダWebflow.jsファイルを含むフォルダです。このファイルには、ページの対話型要素が正しく機能するために必要なすべてのJavaScriptが含まれています。フォーム、ナビゲーションバー、スライダー、タブ、インタラクションなどの要素は、webflow.jsに依存しています。このファイルを削除すると、ページは見た目は正しく表示されますが、期待どおりに動作しません。
  6. 画像フォルダ:サイトのアセットマネージャーにアップロードされたすべての画像が含まれています。
  7. すべてのサイトページの.htmlファイル(コンテンツのないコレクションテンプレートページも含む)
重要: CMS、User Accounts、およびEcommerceのコンテンツ(データベース)およびLogic flowsはエクスポートされたコードに含まれません。エクスポートされたサイトでは、コレクションリストは空の状態を表示し、コレクションページにはコレクションフィールドにバインドされたコンテンツが表示されません。サイト内のパスワード保護ページは、コードのエクスポート後に保護されなくなります。さらに、GDPRに準拠するため、エクスポートされたサイトではサイト内検索とフォーム(ファイルのアップロードとreCAPTCHAを含む)は機能しません。

エクスポートされたファイルに含まれない内容

以下の機能とコンテンツはエクスポートされたコードに含まれず、エクスポートされたウェブサイトで期待どおりに機能しません:

  • CMSのコンテンツと機能(コレクションアイテムおよびコレクションリストを含む)
  • ユーザーアカウントのコンテンツと機能(ユーザーとアクセスグループを含む)
  • Ecommerceのコンテンツと機能(製品とチェックアウトを含む)
  • サイトおよび/またはページのパスワード保護
  • フォームの送信処理
  • 事前に存在するフォームの送信(別途エクスポート可能)
  • フォーム内のreCAPTCHA要素
  • サイト内検索
  • ロジックフロー
お知らせ: CMS、User Accounts、およびEcommerceコレクションは、コレクションアイテム、ユーザーアカウント、および製品のバックアップを保存したい場合、CSV形式で個別にエクスポートできます。

FAQとトラブルシューティングのヒント

なぜクラス名の前に「w-」接頭辞が付いていますか?

Webflowは、コンポーネント固有のクラスに「w-」接頭辞を付けて、他のコードフレームワークとの競合を避けています。

サイトのコードの一部だけをエクスポートすることはできますか?

現時点では、エクスポートする内容を選択することはできません。サイトのすべてのエクスポート可能な部分は、すべてのエクスポートに含まれます。

エクスポート後にコードを編集できますか?

エクスポート後にコードを編集することはできます。ただし、エクスポートされたファイルへの手動の変更は、一部のWebflowコンポーネントを壊す可能性があることに注意してください。

エクスポートしたページのURLから.html拡張子を削除できますか?

エクスポートしたページから.html拡張子を削除したい場合は、.htaccessファイルを使用して削除することができます。

外部サーバーでサイトをホストする場合、Webflowに帰属情報を提供する必要がありますか?

エクスポート後、外部サーバーでサイトをホストするために、Webflowに帰属情報を提供する必要はありませんし、エクスポートされたサイトを動作させるためにWebflowのプランを維持する必要もありません。

エクスポートされたコードにはCMS、メンバーシップ、およびEcommerceのコンテンツが含まれていますか?

CMS、User Accounts、およびEcommerceのコンテンツ(データベース)はエクスポートされたコードに含まれません。エクスポートされたサイトでは、コレクションリストは空の状態を表示し、コレクションページにはコレクションフィールドにバインドされたコンテンツが表示されません。

コードをエクスポートした後、パスワード保護されたページは引き続き保護されますか?

いいえ。サイト内のパスワード保護されたページは、コードのエクスポート後には保護されません。パスワード保護が期待どおりに機能するためには、サイトはWebflowでホストされている必要があります。プロジェクトとページのパスワードについて詳しく学びます

コードを他の場所でホストする場合、サイトのすべての要素は機能しますか?

CMS、User Accounts、およびEcommerceのコンテンツ(データベース)と機能、Logic flows、サイト内検索、フォーム(ファイルのアップロードとreCAPTCHAを含む)はエクスポートされたコードに含まれません。これらの機能は、正常に機能するためにホスティングが必要です。エクスポートされたサイトでは、コレクションリストは空の状態を表示し、コレクションページにはコレクションフィールドにバインドされたコンテンツが表示されません。サイト内のパスワード保護ページも、コードのエクスポート後には保護されなくなります。

さらに、GDPRに準拠するため、エクスポートされたサイトではサイト内検索とフォーム(ファイルのアップロードとreCAPTCHAを含む)は機能しません。フォームの送信を受けるには、サードパーティのツールを使用するか、サードパーティのフォームインテグレーションを埋め込む必要があります

サイトをローカルでロードすると、Lottieアニメーションがローカルで動作しないのはなぜですか?

セキュリティの理由から、Lottie JSONファイルはローカルファイルシステムから読み込まれないため、サイトをローカルでロードする際にLottieアニメーションが表示されません。Lottieアニメーションが正常に動作するには、ウェブサーバーが必要です。

目次

あなたもNoCodeのプロに

充実したサポートであなたも、最短3ヶ月間でノーコードWeb制作のプロになれます。

  • 300以上のノーコード動画教材

  • チャットサポート

  • 個別ビデオ通話相談