6.5. Drupal での CSS の操作。Breakpoint、Drupal テーマのレスポンシブ設定

02/09/2019, by mikhail

過去のチュートリアルで、すでに私たちのテーマに CSS を接続しました。そのために、drupalbook.info.yml ファイルで次を指定しました:

libraries:
  - drupalbook/global-styling

次に、drupalbook.libraries.yml ファイルを作成し、そこでどの CSS ファイルを組み込むかを指定しました:

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
      css/print.css: { media: print }

これから、私たちのテーマで CSS を扱う方法を詳しく見ていきます。

前の記事で、各 CSS ファイルに波括弧で media を指定できると書きました。print.css には media: print を指定して、この CSS が print 版にのみ接続されるようにしました。すべての CSS 表示モード用の media: all（デフォルト）と、印刷以外のモード用の media: screen もあります。

他のライブラリの CSS オーバーライド

libraries-override を使ってコアの CSS ファイルをオーバーライドできます:

libraries-override:
  # Replacing the entire library.
  core/drupal.collapse: mytheme/collapse

  # Replacing individual parts of a library, such as a CSS file.
  subtheme/library:
    css:
      theme:
        css/layout.css: css/my-layout.css

  # Removing part of the library.
  drupal/dialog:
    css:
      theme:
        dialog.theme.css: false

  # Removing the entire library.
  core/modernizr: false

Drupal での Breakpoint

Drupal の Breakpoint はテーマ構成の一部で、サイトが表示されるデバイスの画面サイズに応じてテーマの見た目をカスタマイズできます。これにより、デスクトップコンピューター、タブレット、電話、さらには時計といったさまざまなデバイスに対してサイトをアダプティブにできます。Breakpoint モジュールは breakpoint の使用を標準化し、デバイスの解像度を監視して目的の breakpoint を提供できます。breakpoint に必要なサイズを記述するだけです。

これはもちろん良いことですが、テーマで breakpoint を構成しても、何も起きません。例として、コアの Drupal Responsive Image という追加モジュールを有効にすると、breakpoint を使って異なる breakpoint に対して異なるプリセットの画像を表示できるようになります。私たちのテーマに breakpoint を追加しましょう。

Breakpoint はヘッダーとメディアクエリで構成されます。メディアクエリは breakpoint を記述する標準的な方法です。例えば、幅 40em の breakpoint には '(min-width: 40em)' と書きます。ここでは、breakpoint は単なるメディアクエリですが、breakpoint には追加情報が含まれることがあります。

breakpoint を追加するには、myTheme.breakpoints.yml ファイルを作成する必要があります。私は drupalbook テーマを持っているので、ファイルは drupalbook.breakpoints.yml になります。

このファイルの各エントリーは、breakpoint の一意な名前を定義するマシン名と、breakpoint パラメーターの子要素で構成される個別の breakpoint です:

label:breakpoint のタイトル
mediaQuery:この breakpoint のデバイス画面サイズを決定するテキスト
weight:breakpoint の重み。mediaQuery サイズが重なる breakpoint を設定できるので、どの breakpoint が最初に実行されるかを決めるために weight が必要です。
multiplier:mediaQuery を決定するためにピクセル数を何倍するかを示します。iphone などの一部のデバイスは retina ディスプレイを使い、実際にはサイトの 1 ピクセルを表示するために 2 つの物理ピクセルが使われます。

drupalbook.breakpoints.yml:

drupalbook.mobile:
  label: mobile
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
drupalbook.narrow:
  label: narrow
  mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
  weight: 1
  multipliers:
    - 1x
drupalbook.wide:
  label: wide
  mediaQuery: 'all and (min-width: 851px)'
  weight: 2
  multipliers:
    - 1x

ここでは、このようなファイルを私たちのテーマに追加する必要があります。ただし、drupalbook の代わりにあなたのテーマの名前になります。

Responsive image

それでは、Responsive Image モジュールを有効にしましょう:

Breakpoints

次に、Responsive image styles 編集ページに移動すると:

admin/config/media/responsive-image-style

Breakpoints

次に、Narrow のレスポンシブプリセットの編集に入れます:

admin/config/media/responsive-image-style/narrow

そして、私たちのテーマから Narrow サイズを取るように指定します:

screenshot

これで、各 breakpoint ごとに個別に、レスポンシブ Narrow プリセットのプリセットを設定できます:

screenshot

これで、あるフィールドを Narrow プリセットを通じて表示するように設定すると、異なる画面解像度で異なる画像を表示します:

screenshot

パレット - カラフルに🎨

6.5. Drupal での CSS の操作。Breakpoint、Drupal テーマのレスポンシブ設定

Menu

他のライブラリの CSS オーバーライド

Responsive image

Let’s talk