画像がメイン コンテンツ列よりも幅が広い場合(小画面でよくあることです)、DevSite は自動的に列の幅に制限します。ただし、画像に width
属性と height
属性の両方が設定されている場合、幅のみがサイズ変更され、画像が歪みます。そのため、画像の height
は設定しないでください。つまり、画像の読み込みが遅い場合はページが再描画される可能性があります(ジャンプが発生します)。ただし、画面に収まらない画像よりもはるかに良い方法です。
class="screenshot"
を画像に適用すると、画像の周囲に枠線が付き、近くのテキストから離れます。これは通常、背景が白で、ページに埋もれてしまうスクリーンショットに使用されます。必要のない画像には使用しないでください。
テキストの横に浮かぶ
右側の画像にも class="attempt-right"
が含まれています。この場合、大きな画面では画像が右側に浮動表示されます。ただし、タブレットなどの小さい画面では、右側に浮動表示すると問題が発生するため、画像は縦向きのレイアウトに強制されます。class="attempt-left"
も使用できます。attempt-left
と attempt-right
を一緒に使用する場合は、attempt-left
要素が先に来るようにしてください。
画像がフローティングの場合、列幅の 50% を超えることはできません。サイズが変更される場合は、再スケーリングされます。
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
同じクラスを使用して、画像とキャプションの両方を含む <figure>
など、他の要素をフローティングにすることもできます。
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
フローティング テキストの消去
フローティング要素の周囲にテキストが折り返されないようにし、ネイティブの幅で表示するには、フローティング要素の後に続く影響を受ける要素に clear
クラスを追加します。
<p class="clear">Hello world.</p>
clear クラスを使用した例
この例では、2 番目の段落に clear
クラスが含まれています。
この段落は、フローティング画像の周囲に折り返されます 。Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
この段落には明確なクラスがあり、フローティング画像の周囲に折り返されません。Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
clear クラスがない例
この例では、両方の段落がフローティング画像の周囲に折り返されます。
この段落は、フローティング画像の周囲に折り返されます。Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
この段落は、フローティング画像の周囲に折り返されます。Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
ダークモードの画像
DevSite には、ダークモードが有効になっているときに画像に適用して外観を変更できるクラス名がいくつか用意されています。
画像の暗くなっている
デフォルトでは、ダークモードでは SVG ファイル以外のすべての画像が少し暗くなります。
ダークモードが有効になっているときに画像からデフォルトの暗くする効果を削除するには、画像に no-filter クラスを追加します。
<img src="/path/to/image.jpg" class="no-filter" alt="">
画像の反転
黒または暗いモノクロのカラーパレットを使用する画像の場合は、ダークモードで白または明るい色で表示されるように、画像に invert
クラスを追加します。
<img src="/site-assets/logo-github.png" class="invert" alt="">
_index.yaml
ページの場合は、行アイテムの classname
フィールドに invert
を追加します。
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
ダークモードの個別のバリエーション画像
ダークモードが有効になっている場合にのみ表示される別の画像を指定するには、既存の <img>
要素を <picture>
要素でラップし、ダークモード バリエーションの <source>
要素を追加します。
次の例では、<picture>
要素内に Google ワードマークの SVG ファイルが 2 つあります。ダークモードが無効になっている場合、<img>
要素内の画像ファイルが表示され、Google ブランドの 4 色のワードマークが表示されます。ダークモードが有効になっている場合、<source>
要素内の画像ファイルが表示されます。この場合、ワードマークは完全に白色で、ブランドの色は使用されません。
例
コード
<picture>
<source
srcset="/devsite/images/google-dark-theme.svg"
media="(prefers-color-scheme: dark)"
class="devsite-dark-theme"
alt="">
<img src="/devsite/images/google.svg" alt="">
</picture>
メモ
ダークモードは機能フラグで有効になるため、<source>
要素の属性について次の点に注意してください。
<source>
要素には devsite-dark-theme
クラスを含める必要があります。これは、ユーザーが選択したダークモード オプション(light
、dark
、device
)に応じて、DevSite のフロントエンドがメディア属性とその値を更新するためのフックを提供します。media 属性の値には、(prefers-color-scheme: dark)
メディアクエリを含める必要があります。メディア属性に media
クエリを含む <source>
要素がすでにある場合は、既存のメディアクエリに「and (prefers-color-scheme: dark)」を追加するか、メディア属性の値が (prefers-color-scheme: dark)
の新しい <source>
要素を追加します。media
クエリとその値は、ユーザーが選択したダークモード オプションに応じて削除または置き換えられます。srcset
属性のダークモード バリエーション イメージのファイル名は、技術的には任意に設定できますが、既存の画像のファイル名に -dark-theme
を追加することをおすすめします。