<強い色:#e77600!重要; font-size:18px; ">注意: このガイドは、2020年8月18日より前に購入されたレガシーInstantSiteを対象としています。新しいInstantSiteをお持ちの場合は、こちらにある新しいビルダーに固有のガイドをご覧ください。
InstantSiteは、Bootstrapフレームワークを使用して設計されています。これにより、サイトはさまざまな画面サイズとデバイスに対応できます。 InstantSiteの行と列の違いと、デスクトップおよびモバイル環境でサイトが正しく表示されるようにするためにこれらがどのように使用されるかを理解することが重要です。
ブートストラップグリッドシステム。
Bootstrapのグリッドシステムでは、ページの各行に最大12列を追加できます。 12列すべてを個別に使用したくない場合は、列のコレクションを一緒に使用できます。以下は、使用できる列のグループの例です。
スパン1 | スパン1 | スパン1 | スパン1 | スパン1 | スパン1 | スパン1 | スパン1 | スパン1 | スパン1 | スパン1 | スパン1 |
スパン4 | スパン4 | スパン4 | |||||||||
スパン4 | スパン8 | ||||||||||
スパン6 | スパン6 | ||||||||||
スパン12 |
InstantSiteに新しい要素を追加すると、コンテナ、行、列が自動的に作成されます。
- コンテナは、単に行を保持するボックスです。
- 行は、上記のように12列のブートストラップグリッドです。
- 列は、ページに追加した要素を保持するものです。
列は、12列のブートストラップグリッドで許可されている1〜12のスペースのどこにでもまたがることができます。次に、要素のサイズをこの列内で全幅または使用可能な12列の一部にすることができます。
列と行が重要である理由
Webサイトを作成するときは、コンテンツのレイアウトをどのデバイスでもプロフェッショナルに見せたいと考えています。モバイルでほとんど使用できない場合、デスクトップでWebサイトを美しく見せることはほとんど意味がありません。
Bootstrapを使用すると、表示されているデバイスに関係なく、Webサイトのデザインが応答しやすくなります。これは、上記の12列のブートストラップグリッドシステムを使用して行われます。ブートストラップグリッドがコンテンツの応答性を高めるためにどのように機能するかについての詳細は、getbootstrap.comにアクセスしてください