Webflow(ウェブフロー)の隠れた便利機能

本記事では、Webflowをさらに効果的に活用するための裏技的な機能をご紹介します。

バックティック

HTTPリンクを回避して特定のアクションを設定する

Webflowでリンクを設定する際、webflowによって頭にhttp://が自動的に追加されます。

ブラウザの「戻る」ボタンのような特殊なリンクアクションを設定したい場合には、そのままではうまく機能しないため、リンクの前に「バックティック」(`)を追加することで、HTTPリンクが自動で追加されるのを防ぎ、カスタムコードを活用できます。

`history.go(-1)`

このように設定することで、リンクがクリックされた際にブラウザの履歴を一つ前に戻すことができます。

 活用例：新しいリンクタイプへの対応

Webflowは、HTTPリンクやメールリンク、電話番号リンクなどをサポートしていますが、将来的に新しいリンクタイプが登場した場合にも、この「バックティック」を活用して対応することができます。

スムーズスクロールでセクションを中央に表示する

通常、アンカーリンクをクリックすると、対象のセクションがページの上部に表示されます。

セクションを画面の中央に表示したい場合は、カスタム属性を追加します。スクロール対象の要素に「data-scroll」というカスタム属性を設定し、その値を「mid」にします。

設定して確認するとセクションの中心に遷移するようになりました。 

※デザイナープレビュー モードでは、再読み込みする必要がある場合があります。

なお、設定した対象の高さがビューポートよりも高い場合は、この属性は無視され、代わりにセクションはビューポートの上部までスクロールされてしまいます。

デザイナーのプレビューモードで新しいタブを開く

Webflowのプレビューモードでは、リンクをクリックしても通常は新しいタブが開かれません。

「data-force-open: '1'」というカスタム属性をリンクに追加することで、プレビューモードでも新しいタブでリンクを開くことができます。

 スムーズスクロールのスピードを調整する

デフォルトのスクロールスピード

通常、アンカーリンクをクリックすると、ページは1000ms（1秒）かけてスムーズスクロールします。実はこのスクロール時間はwebflowの設定から変更することが可能です。スクロール時間を調整するには、カスタム属性「data-scroll-time」を使用します。

‍

スクロールスピードのカスタマイズ

このカスタム属性は、スクロールのスピードを自由に調整できます。例えば、「data-scroll-time = 0.75」と設定すれば、750msでスクロールするようになります。

• data-scroll-time = 0: 即座にスクロール
• data-scroll-time = 0.75: 通常の1/4の速度（750ms）
• data-scroll-time = 1: デフォルト（1000ms）
• data-scroll-time = 2: 通常の2倍の速度

 < body > タグにdata-scroll-timeを設定すれば、ページ上のすべてのスクロール操作に設定することが出来ます。

また、 < body > タグに設定したスクロール速度は、個々のリンクの設定で上書きすることもできるため要件によってスクロール速度を細かく設定するとより良いと思います。

Webflow内での計算を効率化

Webflowの数値入力フィールドでは、簡単な計算式を入力することが可能です。

例えば、要素の幅を3分の1に設定する場合、100/3(100÷3)と入力すると、

「33.3333%」と自動計算されます。

この機能を活用することで、電卓などを開く必要がなくなりデザイン作業がよりスムーズに進められると思います。

同じクラスの要素を一括でアウトライン表示する

Webflowでは、選択している要素と同じクラスを持つ他の要素を確認できる機能があります。

セレクターの下に同じクラスを使った要素の数が記載されています。

それをクリックすると同じクラスを持つ要素がピンク色でアウトライン表示されます。

この機能を利用することで、誤って複数の要素に影響を与えるスタイリングミスを防ぎやすくなります。

以上、Webflowを使いこなすための便利機能をご紹介しました。これらのテクニックで効率的にWebflowを活用していただけたら嬉しいです。

‍