ページごとに小さな広告を1つ表示するだけです。このメッセージを非表示にすると、二度と表示されません。
はじめに
使用方法
グローバル
要素
コレクション
ビュー
モジュール
ビヘイビア
コンテナは、ユーザーの画面サイズに基づいて、ページ要素を適切な最大幅に制限するように設計された要素です。グリッドやメニューなどの他のUI要素と組み合わせると、表示に適したサイズに幅を制限するのに役立ちます。
コンテナは、表示されている画面のサイズに基づいて、最大幅を動的に調整するように設計されています。
| モバイル | タブレット | 小型モニター | 大型モニター | |
|---|---|---|---|---|
| 幅 | 100% | 723px | 933px | 1127px |
| マージンサイズ | 1em | 流動的 | 流動的 | 流動的 |
| 可変 | $largestMobileScreen |
$mobileBreakpoint |
$smallMonitorBreakpoint |
$largeMonitorBreakpoint |
| デバイス幅 | 768px未満 | 768px～991px | 992px～1200px | 1200px以上 |
Semantic UIのバリエーションはコンポーネントのスコープ内でしか割り当てられないため、「自由に浮動する」レスポンシブなクラス名は存在しませんが、一部のコンポーネントには、レスポンシブデザインを容易にするためのレスポンシブなバリエーションが含まれています。グリッドなどでは、デバイスの種類に基づいてcolumn、rowの表示/非表示を切り替えるレスポンシブなクラスが用意されています。
コンテナは、各デバイスサイズで同じ幅で表示されます。このサイズは、目的の最小マージンサイズを指定して、デバイスブレークポイント内で使用可能な最大デバイス幅をプログラムで決定することによって計算されます。
たとえば、タブレットコンテナのサイズを決定するには、次の式を使用します。
これは768px - (14px * 2) - 17px、つまり723pxと同じです。
site.variablesでサイトのブレークポイントをカスタム値に変更すると、コンテナの幅が自動的に調整されます。
標準コンテナ
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincudnt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
コンテナは、1列のテキストをより自然に表示するために最大幅を狭めることができます。
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincudnt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincudnt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
コンテナでは、テキストの配置を指定できます。
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincudnt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincudnt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
流動的なコンテナには最大幅がありません。
家畜化された犬は、噛み付き抑制など、オオカミの祖先から複雑な行動を継承しました。オオカミは、複雑なボディランゲージを持つ群れで狩りをする動物でした。このような洗練された社会認知とコミュニケーションの形態は、彼らの訓練可能性、遊び心、そして人間の家庭や社会状況に適応する能力を説明するものであり、これらの属性は、犬が今日、地球上で最も成功した種の1つになることを可能にした人間との関係を与えてきました。
初期の人間の狩猟採集者にとって犬の価値は高く、世界中の文化に急速に広まりました。犬は、狩猟、牧畜、荷物の運搬、保護、警察や軍隊への支援、仲間、そして最近では障害者の支援など、人々にとって多くの役割を果たしています。人間の社会へのこの影響は、西洋世界では「人間の親友」というニックネームを与えられています。しかし、一部の文化では、犬は肉源でもあります。
メニュー内にコンテナを使用すると、メニュー項目がページコンテンツとインラインで表示されるようになります。スタッカブルメニューなどのレスポンシブなバリエーションを使用すると、コンテンツをさまざまなデバイスサイズに調整するのに役立ちます。
コンテナはセグメントと組み合わせて使用できます。
家畜化された犬は、噛み付き抑制など、オオカミの祖先から複雑な行動を継承しました。オオカミは、複雑なボディランゲージを持つ群れで狩りをする動物でした。このような洗練された社会認知とコミュニケーションの形態は、彼らの訓練可能性、遊び心、そして人間の家庭や社会状況に適応する能力を説明するものであり、これらの属性は、犬が今日、地球上で最も成功した種の1つになることを可能にした人間との関係を与えてきました。
初期の人間の狩猟採集者にとって犬の価値は高く、世界中の文化に急速に広まりました。犬は、狩猟、牧畜、荷物の運搬、保護、警察や軍隊への支援、仲間、そして最近では障害者の支援など、人々にとって多くの役割を果たしています。人間の社会へのこの影響は、西洋世界では「人間の親友」というニックネームを与えられています。しかし、一部の文化では、犬は肉源でもあります。
Semantic UIの継続的な開発への支援は、コミュニティから直接提供されています。
この翻訳は現在%しか完了していません！
皆様のご協力により、Semanticを母国語を話す方々にもご利用いただけるようにしたいと考えています。
当社の翻訳ツールは使いやすく、サイトを離れることなくテキストを翻訳できます。