# ユーティリティ

## 回り込み

右寄せ
  .acms-float-right
左寄せ
  .acms-float-left
回り込み解除
  .acms-clear

## アクセシビリティ

視覚的に表示はされないが、音声で出力する
  .acms-hide-visually

## 幅と高さ

幅 100%
  .acms-width-max
高さ 100%
  .acms-height-max
幅と高さ 100%
  .acms-width-height-max

## 幅（スマートフォン用）

幅 100%
  .acms-width-sp
幅 オート
  .acms-width-auto-sp

## テキスト

こちらはテストの本文です。

こちらはテストの本文です。

こちらはテストの本文です。

こちらはテストの本文です。

    <p class="acms-text-left">こちらはテストの本文です。</p>
    <p class="acms-text-right">こちらはテストの本文です。</p>
    <p class="acms-text-center">こちらはテストの本文です。</p>
    <p class="acms-text-nowrap">こちらはテストの本文です。</p>

こちらはテストの本文です。

こちらはテストの本文です。

こちらはテストの本文です。

こちらはテストの本文です。

こちらはテストの本文です。

    <p class="acms-text-primary">こちらはテストの本文です。</p>
    <p class="acms-text-info">こちらはテストの本文です。</p>
    <p class="acms-text-success">こちらはテストの本文です。</p>
    <p class="acms-text-warning">こちらはテストの本文です。</p>
    <p class="acms-text-danger">こちらはテストの本文です。</p>

## アイコン用背景

    <span class="acms-icon-bg">...</span>
    <span class="acms-icon-bg acms-icon-bg-info">...</span>
    <span class="acms-icon-bg acms-icon-bg-success">...</span>
    <span class="acms-icon-bg acms-icon-bg-warning">...</span>
    <span class="acms-icon-bg acms-icon-bg-danger">...</span>

## 角丸

角丸
  .acms-round
丸
  .acms-circle

    <span class="acms-icon-bg acms-round">...</span>
    <span class="acms-icon-bg acms-circle">...</span>

## 画像のレスポンシブ対応

    <img src="/themes/system/admin/styleguide/images/sampleImage.jpg" alt="" class="acms-img-responsive">