- All HTML Tags（ALLタグ）とは
- All HTML Tags（ALLタグ）とは、Webflowで同じ要素すべてに共通の基礎値を設定できるタグです。CSSのクラス指定で行う基礎値の設定に相当し、通常のクラス（青いタグ）で上書きできます。
こんにちはWebflow専門家のマサトです。今回はWebflowの操作に関する基礎知識について紹介します。主な内容は以下の通り。
- Webflow操作の基礎①｜HTMLの場所
- Webflow操作の基礎②｜CSSの場所
- Webflow操作の基礎③｜ALLタグの存在
- Webflow操作の基礎④｜CSSパネルの色の意味
結論：Webflowの使い方は、上記4つ（HTMLの場所・CSSの場所・ALLタグ・CSSパネルの色の意味）を最初に知るだけで操作が10倍早くなります。逆に知らないまま進むと、どこを編集すればいいのかわからないサイトになっていきます。
※2026年追記: 本記事のスクリーンショットは撮影当時のものです。WebflowはUIの更新が続いているため、現行UIでは名称や配置が変わっている場合があります。ただしALLタグとCSSパネルの色分けという考え方自体は変わっていません。
ALLタグ、CSSパネルの色の意味を知らないでWebflowを触っている方が多くいるのでしっかりと確認していきましょう。
僕はWebflow学習者への直接指導やアドバイスなどを定期的に行っています。その中で特に問題に挙げられる「Linkの色が変わらない」「どこを変更すればいいかわからない」などの質問は今回の記事で全て解決できます。知らないことがありそうであれば、このまま読み進めていきましょう。
Youtubeを始めようと思い動画を撮りました。撮り慣れていない＋撮影初心者なので見にくいかもしれませんが、お許しください。「いつか撮影も上手くなればいいな」という気持ちのスモールスタートです。
Webflowの使い方の大前提｜アイテムの名前を知る意味
Webflowは実際にHTML、CSS、JavaScriptのコードと同じ名前を採用してUIに表示しています。例えば、Div block、heading、margin、padding、などHTML、CSSの基礎を学んだことがある人であればよく聞く単語です。
他にもたくさんのアイテム（Elements）がそのままの名前で使われています。これはコード出力時のコードをイメージしやすく、役立ちます。さらに既存のWebデベロッパーにも親切な設計です。
ではなぜ、Webflowのアイテムの名前を知ることが重要なのか。その理由は自分でググれるようになるからです。
例えばWebflowでサイト作成をしているときに「margin、paddingの違いがわからない」となった場合にWebflowのことだしWebflowに詳しい人に聞こう↓
でもWebflowに詳しく気軽に聞ける人がいないな↓
Webflow公式サイトで調べよう↓
英文でよくわからず沈没
のように挫折していきます。
「blending」の使い方、「position:sticky」の使い方などわからないという方はよくいます。しかしこれらは「CSS blending 使い方」「CSS position:sticky 使い方」と検索することでどのような条件で動くのかググることができます。
HTML、CSSの動きを知ることでWebflowに落とし込んで動作させることができます。そのため、Webflowでわからないことがあれば、そのアイテムの名前をそのままググりましょう。そうすることでHTML、CSSに関する大体の基礎動作は自分で解決できます。
Webflow操作の基礎｜HTMLの場所、CSSの場所
HTMLの場所
さてここからはググってもWebflow公式にしか載っていないWebflowのUIのお話です。まずはどこがHTMLでどこがCSSか知っておきましょう。
まずは左上のAdd Elements「＋」をクリック。そうするとHTMLのアイテム（Elements）が現れます。
これが基本的にHTMLです。2024年初期あたりにアプデされた「V Flex 」「H Flex」などはWebflowのオリジナルです。ググるとWebflowの記事がたくさん出るのでそこで判断できます。
正直、僕はこのアイテムはほとんど使っていないです。これは好みによると思うのですが、個人的には初期スタイルが何もないDiv Blockの方が楽。と思ってます。
他のアイテムに関してはわからない場合は都度調べましょう。しかし基本的に直感でわかります。実は僕も最初の頃はHTML、CSSを軽く学習し、簡単なサイト一個作れる程度までしか勉強していません。しかし他のアイテムは直感でわかり、あとはググってたらなんとかなったので同じ方法で独学、無料で進んでいけます。
CSSの場所
次にCSSの場所です。これはとても簡単。画面右側がほとんどCSSです。
CSSも名前がほぼそのままですので、「なんだこれ？」って機能は全てググれば出てきます。今ならGPTでも答えられると思います。こんな感じに↓
思いの外しっかりでました。もう解説とかいらなそうですね。
Webflow操作の基礎｜ALLタグの存在
「ALLタグ」僕はピンクタグなんて呼んでいますが、正式には「All HTML Tags」と呼びます。これはCSSのクラス指定の箇所で行う各要素の基礎値を設定する行為と等しいと考えています。
ALLタグは例えば「H1」のアイテムを選択した状態でCSSパネルの上部「Style Selector」を空の状態にしてクリックすることで見つけることができます。
ALLタグは全ての同じ要素に同じ影響を与えることができますがその階層は一番下に位置されます。（コード上では一番上、コードでは基本後に書かれたコードで上書きができる）
そのためピンクタグの内容は青いタグにて上書きが可能です。青いタグは通常のCSSのクラスと同義です。
例えばサイト全体でフォントを変更したい場合はALLタグの「body」を選択し、サイト全体のフォントを選択します。これが仮に通常クラス（青いタグ）のBodyで作成されていると他のページを作成した際に反映されず、何度も青いタグのBodyを貼り付けることになります。
ALLタグ、青いタグの違いを理解していただけたでしょうか。ここで僕が一番いただく質問を載せておきます。
【質問数No.1】Q. WebflowでLinkの色が変わりません。
A. ALLタグLinkを指定して変更しましょう。
WebflowはなぜかLinkタグは色が初期で指定されていないことになっています。しかし挿入したリンクは最初から青色。これはHTMLに装備されているものでCSSには関係ないということかもしれませんが、それなら他の要素はどうなんだいって話ですよね。
H1、H2なども初期からフォントサイズは変わっていて、WebflowのCSSパネルに反映されています。しかしLinkは色のみそれが反映されていません。そのため見つけるのはかなり困難。
しかし通常のコードと違って親要素に色を入れても反映されないのでLinkに直接色を入れる必要があります。毎回色を入れるのは面倒なのでALL Linkのタグを利用して色入れ、アンダーバーの削除など行いましょう。
ALLタグを知らないと絶対に迷う項目ランキング第一でした。
Webflow操作の基礎｜CSSパネルの色の意味
上部の画像で言うとフォント青くなっています。太さ、サイズはオレンジ。アップしてみましょう。
この画像では
- H1のクラスにフォントがDroid Serifが指定されている。
- Weight,Size,Heightなどは他の要素から影響を受けている
と言うことがわかります。
青い「font」の文字がそのクラスに直接CSSの数値が指定されているという意味です。
ちなみにオレンジをクリックすると、その数値はどこから影響を受けているかを知ることができます。例えばですが、今後テンプレートを使用してサイト作成するなどの際は以下のように全て畳んで見ることで数値を見やすくできます。
Typographyにオレンジと青い点がありますね。これはここに数値があることを示しています。テンプレートを操作して変更するときは「青い点」に注目して探していくとすぐに数値の元を探せて削除や変更ができます。
余計な青は全て削除するように注意しましょう。思わぬところで影響が出る可能性があります。特にWebflowはレスポンシブデザインまで気を配る必要があるので意味の無い数値がスマホサイトを崩している原因になるなんてこともあります。
まとめ
絶対に知っておくべき基礎知識はこんなところでしょうか。
HTMLの場所、CSSの場所、ALLタグの存在、CSSパネルの色の意味。
これらを知らないでWebflowを触っていくとグチャグチャなサイトになり、どこを編集すればいいのかわからないまま進んでいくことになります。
まずはALLタグに基礎の数値を入れ、その上でできるだけ少なくCSSを記入していきましょう。そうすることでデザインに一貫性を保ち、より管理しやすく崩れにくいサイトへと近づきます。Webflowの学習やコミュニティーをお求めの方は僕の管理する無料のWebflowコミュニティーへお越しください。特に盛り上がってませんがWebflowの仲間が見つかります。どこかでまたお会いしましょう。またね。
（2026年追記: 現在、最新情報のお知らせはメルマガに一本化しています）
次の一歩｜Webflowの使い方をさらに学ぶ
基礎の4項目を押さえたら、次は目的別に進みましょう。項目別の索引「Webflowの使い方まとめ」と、日本語で学ぶ全体ルートを示した「Webflow日本語学習の最短ルート（2026年版）」から、作りたいものに合わせて選べます。
よくある質問
WebflowでLinkの色が変わらないときはどうすればいいですか？
ALLタグのLinkを指定して変更しましょう。Webflowでは親要素に色を入れてもリンクには反映されないため、ALL Linkのタグを利用して色入れやアンダーバーの削除を行うのが確実です。
WebflowのALLタグはどこで見つけられますか？
例えばH1のアイテムを選択した状態で、CSSパネル上部の「Style Selector」を空の状態にしてクリックすると見つけられます。ALLタグの内容は青いタグ（通常のクラス）で上書きが可能です。
Webflowでサイト全体のフォントを変更するにはどうすればいいですか？
ALLタグの「body」を選択してサイト全体のフォントを指定します。通常クラス（青いタグ）のBodyで設定すると、他のページを作成した際に反映されず、何度も貼り付けることになります。
WebflowのCSSパネルの青とオレンジの色は何を意味しますか？
青はそのクラスに直接CSSの数値が指定されていること、オレンジは他の要素から影響を受けていることを意味します。オレンジをクリックすると、その数値がどこから影響を受けているかを確認できます。
Webflowの使い方を最短で覚えるコツはありますか？
UIのアイテム名がHTML・CSSと同じ名前だと知ることです。わからない項目は「CSS ○○ 使い方」で検索するかAIに質問すればほぼ解決できます。その前提として、4つの基礎（HTML・CSSの場所・ALLタグ・CSSパネルの色の意味）を先に押さえると操作が10倍早くなります。
2026年の現行UIでも本記事の内容は使えますか？
使えます。スクリーンショットは撮影当時のもので、現行UIでは名称や配置が変わっている場合がありますが、ALLタグとCSSパネルの色分け（青＝直接指定・オレンジ＝継承）という考え方自体は変わっていません。
