ヘルパー - Materialize

コンテンツの配置を支援する、使いやすいクラスを用意しています。

垂直方向の配置

垂直方向に配置したいアイテムを保持するコンテナにクラスvalign-wrapperを追加することで、簡単に垂直方向に中央揃えできます。

これは垂直方向に中央揃えされるはずです


<div class="valign-wrapper">
  <h5>This should be vertically aligned</h5>
</div>

テキストの配置

これらのクラスは、コンテンツを水平方向に配置するためのものです：.left-align、.right-align、.center-align。

これは左揃えされるはずです

これは右揃えされるはずです

これは中央揃えされるはずです


  <div>
    <h5 class="left-align">This should be left aligned</h5>
  </div>
  <div>
    <h5 class="right-align">This should be right aligned</h5>
  </div>
  <div>
    <h5 class="center-align">This should be center aligned</h5>
  </div>

クイックフロート

要素にクラスleftまたはrightを追加することで、要素をすばやくフロートさせることができます。!importantは、特異性の問題を回避するために使用されます。


<div class="left">...</div>
<div class="right">...</div>

特定の画面サイズでコンテンツを非表示/表示するための、使いやすいクラスを提供しています。

クラス	画面範囲
`.hide`	すべてのデバイスで非表示
`.hide-on-small-only`	モバイルのみで非表示
`.hide-on-med-only`	タブレットのみで非表示
`.hide-on-med-and-down`	タブレット以下で非表示
`.hide-on-med-and-up`	タブレット以上で非表示
`.hide-on-large-only`	デスクトップのみで非表示
`.show-on-small`	モバイルのみで表示
`.show-on-medium`	タブレットのみで表示
`.show-on-large`	デスクトップのみで表示
`.show-on-medium-and-up`	タブレット以上で表示
`.show-on-medium-and-down`	タブレット以下で表示

使い方


  <div class="hide-on-small-only"></div>

これらのクラスは、サイト上のさまざまなコンテンツの書式設定に役立ちます。

切り捨て

長いテキスト行を省略記号で切り捨てるには、テキストを含むタグにクラスtruncateを追加します。以下に、カード内でヘッダーが切り捨てられる例を示します。

これは切り捨てられる非常に長いタイトルです


  <h4 class="truncate">This is an extremely long title that will be truncated</h4>

ホバー

hoverableは、以下に示すようにボックスシャドウのアニメーションを追加するホバークラスです。ほとんどの要素で使用できますが、カードでの使用を想定しています。

カードタイトル

私は非常にシンプルなカードです。私は少量の情報を含むのに適しています。私は効果的に使用するために必要なマークアップが少ないため便利です。

これはリンクです


  <div class="card-panel hoverable"> Hoverable Card Panel</div>

多くのデフォルトのブラウザスタイルと要素を上書きしているため、これらの要素を元の状態に戻すために.browser-defaultクラスを提供します。

要素の名前	戻されたスタイル
UL	箇条書き
SELECT	ブラウザのデフォルトの選択要素
INPUT	ブラウザのデフォルトの入力

配置