ブログ

MAをこれから勉強したい人からカミハヤユーザーまで、
役に立つ情報のご紹介です。

カミハヤMA
2022.09.14

flexboxを用いたレスポンシブ対応LP作成方法

本記事では、カミハヤMAでflexboxを用いたレスポンシブ対応のLP作成方法について説明します。

 

目次
 
 1.はじめに
 2.作成方法について
 3.最後に 

1.はじめに

本記事では、カミハヤMAでランディングページ(以下LP)を製作する際、画面幅によりコンテンツを折り返し表示させるためのレイアウト表示に用いるflexboxを用いた設定例をご紹介します。

2.作成方法について

今回ご紹介する方法は、コードモードを利用するまでもなく、コードスロットをLPに挿入することで実現します。
では、まず完成イメージを確認しましょう。

【完成イメージ】

これを作成するステップは次の通りです。
①LPビルダーを起動します。
②HTMLスロットをLPビルダーの画面へドラッグ&ドロップします。
③HTMLスロットのCONTENT PROPERTIESの部分へ下記コードを挿入します。

【サンプルコード】

以上で完了となります。
サンプルコードをご覧いただくとお分かりようになにか特別なことをするでもなく、コード実装いただくことになります。

最後に実機を用いて検証を行い、微修正が必要な場合はHTMLコード部分に適用してください。

3.最後に

いかがでしたでしょうか。
今回のような例であれば、LPのテーマをいきなりコードモードを利用する必要はありません。
ですが、JavaScriptを用いた動的なLPを製作する場合には、今回のようなHTMLスロットは利用できません。
今回ご紹介したHTMLスロットは、あくまでHTML、CSSでのご利用となります。HTMLスロットにJavaScriptのコードを挿入しても保存する際にスクリプトは自動削除されます。

また、今回作成したコードスロットを適用したROWをテーマとして保存することができますので、再利用することも可能となります。

カミハヤの製品ラインナップ

複数製品を組み合わせてのご利用も可能です。詳細はお気軽にお問い合わせください。

カミハヤCMS

カミハヤCMS

オープンソースCMS Drupalとローコードソリューション“サイトスタジオ”の活用により、工数を抑えて、素早くサイトを立ち上げることができます。

もっと見る
カミハヤMA

カミハヤMA

直感的で使いやすい管理画面、ノーコード。技術者無しでも素早くキャンペーンを始められる、BtoB向けマーケティングオートメーションツールです。

もっと見る
カミハヤSEO

カミハヤSEO

オープンソースCMS Drupalとローコードソリューション“サイトスタジオ”の活用により、工数を抑えて、素早くサイトを立ち上げることができます。

もっと見る
カミハヤMAトライアルキャンペーン実施中! MAトライアルのお申込み
資料ダウンロード
資料ダウンロード
お問い合わせ
お問い合わせ
よくあるご質問
よくあるご質問