【日本語版Webflow University】 コラム

この投稿はWebflow社が提供する「Columns」の内容を元に作成しています。

引用元：https://university.webflow.com/lesson/columns

日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。

‍

コラムを使用することで、コンテンツを横に並べて配置できます。Webflowでは、コラムを追加したり、コラムのレイアウトを変更したり、レスポンシブレイアウトを作成したりできます。

コラムは、コンテンツを横に並べて配置できます。コラムは横1行にコンテンツをいれられるブロックを並べます。

コラムの追加

エレメント追加パネルからコラム要素をドラッグ＆ドロップします。

レイアウトの選択

コラムはデフォルトでは2列で設定されています。

コラムの設定から、レイアウトオプションを選択すると、メインキャンバス上でレイアウトが変更されます。また同時に、列幅も指定することができます。

この設定は、右パネルの要素設定パネルからも設定できます。

カスタマイズでは手動でコラムの幅を調整することができます。数字は横比を表しており、足し合わせると常に 12 になります。これによってコラムの列幅を思い通りに調整することができます。

コンテンツの追加

新規または既存のコンテンツをコラムのそれぞれの列内に直接ドラッグ＆ドロップすることで、コンテンツをコラムに追加できます。

デフォルトでは、コラムの内側に左右10ピクセルのパディングが設定されています。この幅はスタイルパネルで調整できます。1つの列でパディングを変更した場合、クラスをダブルクリックして名前を変更し、他の列で設定を再利用できます。

列を選択し、設定したクラスを再度適用します。そうすると、変更後のパディングが表示されます。同じクラスのパディングは、その内の1つの設定を変更すると、そのクラスを使用するすべてのコラムの設定が更新されます。

コラムのレイアウトを変更する

コラムの要素設定パネルおでは、列のサイズを変更たり、列を追加または削除したりすることもできます。要素を選択してEnterキーを押すことで、コラムの要素設定を開くこともできます。

コラムのレスポンシブ対応

要素設定パネル ＞ コラムオプションで、さまざまなブレークポイントでのコラムの表示方法を設定することができます。

このオプションを使用することで、カラムのレイアウトをカスタマイズして、さまざまな画面に適応できるようになります。

一言メモ

コンテナの同様にコラムもあらかじめ簡単にレイアウトが綺麗になる様に、デフォルトで設定がされています。なので、シンプルなサイトであれば、使い勝手もいいのですが、逆に複雑なデザインや、レスポンシブを細かくこだわりたい、となると、デフォルトの設定やそのための仕様制限が邪魔になる場合があります。

従って、より本格的なサイトを構築する場合は、ディブブロックやグリッドを使ってレイアウトすることをおすすめします。

‍

まとめ

いかがでしょうか。

当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。

以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。

ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。

Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。

今後とも宜しくお願い致します。

‍

Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。

‍Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。

Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。

‍

‍