Smart Tiles はじめに
Smart Tiles のパネルは、固定されたグリッドではありません。タイルは、単語が行に流れ込むように行へ配置されます。各タイルは サイズ に応じて行の一定の割合を要求し、行は左から右へ埋められ、収まらないものは次の行から始まります。この仕組みを理解することで、たまたま 1 つの画面で見栄えがするパネルではなく、どの画面でも意図したとおりに見えるパネルを作成できます。この記事では、タイルのサイズ、インデント、高さについて説明し、いくつかのレイアウト例を紹介します。
6 つのサイズ
タイルのサイズとは、行に対する割合で表したタイルの幅のことです。タイルのコンテキスト メニューで選択します。… ボタンをクリックして サイズ をポイントし、6 つの項目のいずれかを選択します。現在のサイズにはチェック マークが付きます。
| サイズ | 行に対する基本の割合 | 1 行あたりのタイル数 (同じサイズの場合) |
|---|---|---|
| 極小 | 15 % | 6 |
| 小 | 30 % | 3 |
| 中 | 45 % | 2 |
| 大 | 65 % | 1 (横に 小 または 極小 のタイルを置く余地あり) |
| 特大 | 80 % | 1 (横に 極小 のタイルを置く余地あり) |
| 全幅 | 100 % | 1 |
新しいタイルは 小 になります。
行の埋まり方
全体像を把握するために、次の 2 つのルールがあります。
- タイルは行を埋めるように拡大されます。 表の割合は最小値です。行に空きがある場合 (たとえば、行に 小 タイルが 2 つだけの場合)、タイルは空きを埋めるように拡大し、大きいサイズほど速く拡大します。そのため、行は常に埋まり、右端がそろわないことはありません。
- 収まらないタイルは次の行に移動します。 小 タイル 3 つで 1 行が埋まり、4 つ目は新しい行から始まります。小 タイル 2 つの後の 中 タイルは、残りの 40 % に収まらないため新しい行から始まり、後に続くタイルがなければ全幅に拡大されます。
驚くのは 2 つ目のルールです。パネルの最後にある 1 つだけの 小 タイルは、全幅 タイルに拡大されます。各行の割合を数えて、合計が約 90～100 % になるようにするか、行をちょうど埋めるタイルでパネルを終えてください。
📝 注
表と以下の例の個数は、外側の間隔を確保できることが前提です。間隔はパーセント指定の幅に加算されるため、Web パーツが狭い場合や間隔が大きい場合は、タイルが次の行に移ります。スマートフォンでも幅の割合は同じですが、1 行のタイル数は変わることがあります。
高さ
タイルの高さは直接設定しません。高さは、コンテンツ (アイコンのサイズ のアイコン、フォント サイズ のタイトル、表示している場合は説明) と、コンテンツの上下の 内側のインデント の合計です。1 行内のすべてのタイルは、最も高いタイルと同じ高さになります。
アイコンやテキストを大きくせずにタイルを高くするには、内側のインデント を大きくします。正方形に近づけるには、大きな 内側のインデント と 小 または 極小 のタイルを組み合わせます。
3 つのインデント
プロパティ ペインの 表示 (外観) グループには、0 から 30 ピクセルまでの 3 つの間隔設定があります。
| 設定 | 間隔を設定する対象 |
|---|---|
| 内側のインデント | タイルのコンテンツの上下の間隔 (「パディング」)。タイルの高さを決定します。 |
| アイコンのインデント | アイコンとタイトルの間の間隔。 |
| 外側のインデント | 隣り合うタイルの間の、水平方向と垂直方向の間隔 (「ギャップ」)。0 ではタイルが接し、パネルは一体のモザイクになります。10～16 では、タイルは個別のカードのように見えます。 |
レイアウト例
クイック リンク バー。 極小 タイル 6 つ、外側のインデント 4、内側のインデント 8、タイトルは表示、説明は非表示。ホーム ページのヒーローの下に、コンパクトなボタンが 1 行に並びます。
部署パネル。 パネルの見出しとして、写真の背景と部署名を表示した 全幅 タイルを配置し、その下に部署のサービスを表す 小 タイル 3 つの行を並べます。外側のインデント は 8。
注目リンクとリスト。 背景画像と説明を設定した 大 タイル 1 つと、その横に 小 タイル 1 つ。その下に、小 タイル 3 つの行を 2 行。大 タイルによって、最も重要なリンクに視線が集まります。
モザイク。 極小 と 小 のタイルを混在させ、外側のインデント を 0 にして、すべてアクセント カラーにし、アイコンのみ (タイトルと説明は非表示) にします。コミュニケーション サイトの全幅セクションで最も効果的に見えます。
💡 ヒント
パネルがページのメイン ナビゲーションである場合は、全幅セクションでパネルを構築します。KB10042. Smart Tiles Web パーツの追加と構成方法を参照してください。タイルのテキストについては、KB10249. タイルへのタイトルと説明の表示を参照してください。
❗ 重要
発行する前に、狭いウィンドウ幅でパネルを確認してください。ブラウザー ウィンドウの幅を狭くするか、ページのモバイル プレビューを使用します。全幅 タイルに収まる長いタイトルは、小 タイルでは省略記号で切り捨てられます。説明も、収まらない場合は同様に切り捨てられます。
