product icon
ドキュメント
言語を選択
EnglishEspañolPortuguês do BrasilDeutschFrançaisעִבְרִית日本語ItalianoNederlandsРусскийTürkçeBahasa Indonesia简体中文繁體中文한국어العربيةSvenska

レイアウトの基本

Last updated on 10/29/2024@mrbirddev

sliddeウェブページの構造

Slidde.coはシンプルな4層構造を使用しています：

  • userCompName.Page (グローバルスタイル)
  • userCompName.Slide (コンテンツのセグメンテーション)
  • userCompName.Container (レスポンシブ幅、複数のカラム)
  • インライン要素 (特定のコンテンツ)

userCompName.Page

userCompName.Page レイヤーは最上位にあり、フォント、色、リンクスタイルなどのグローバルスタイルを設定するために使用されます。CSSプロパティは継承可能です。

テンプレートをよりユーザーフレンドリーにするために、CSS変数を使用することもできます。

userCompName.Page 要素を直接選択できない場合は、ツールバーの userCompOption.Select page オプションを使用してください。 userCompOption.hashSection 機能は、マルチページウェブサイトをシミュレートできます。このデモをチェックしてください：[デモリンク](https://demo-76e69f00.slidde.co/)

userCompName.Slide

userCompName.Slide は、userCompName.Page の下の第一レベル要素で、コンテンツをセグメント化するために使用されます。
  • 「リンクインバイオ」ページのようなシンプルなページは、スライドが1つだけの場合があります。
  • 複雑なランディングページには、#header、#hero、#works、#contact、#footerのような複数のセクションが含まれることがあります。
userCompOption.htmlId は基本的にHTML IDです。userCompName.Slide 内のコンテンツに基づいて名前を付け、「#ID」のようなリンクを使用して簡単にナビゲートできるようにします。[スキップリンクについてもっと学ぶ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#skip_links)。

最終的なウェブサイトからuserCompName.Slide を非表示にしつつ保存しておきたい場合は、userCompOption.hidden 属性を確認してください。これはPowerPointの隠しスライドに似ており、チュートリアルにも使用できます。

userCompOption.sticky 機能は、フローティングナビゲーションバーやその他の要素に使用されます。こちらで例を参照してください: [Sticky Demo](https://demo-09963200.slidde.co/)

userCompName.Container

userCompName.Container は、レスポンシブ幅とマルチカラム表示を管理します。
  • モバイルとデスクトップの幅は通常異なります。userCompName.Container で userCompOption.width 属性を使用して、デバイスに応じた幅を設定します。
  • カラムはコンテナ内のカラム数を定義します。幅を x/12 のように設定できます（例: 6/12 のカラムを2つでそれぞれ50%の幅）。

各カラムには、水平および垂直の配置設定も可能です。

その他

その他の要素はインライン要素であり、コンテナ内に配置することができます。

この構造化されたアプローチに従うことで、Slidde.co を使用して視覚的に魅力的でレスポンシブなウェブページを簡単に作成できます。

Loading...