# ユーティリティ

## 回り込み

右寄せ
  .%{STYLEGUIDE_PAGE}-float-right
左寄せ
  .%{STYLEGUIDE_PAGE}-float-left
回り込み解除
  .%{STYLEGUIDE_PAGE}-clear

## アクセシビリティ

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

## 幅と高さ

幅 100%
  .%{STYLEGUIDE_PAGE}-width-max
高さ 100%
  .%{STYLEGUIDE_PAGE}-height-max
幅と高さ 100%
  .%{STYLEGUIDE_PAGE}-width-height-max

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

幅 100%
  .%{STYLEGUIDE_PAGE}-width-sp
幅 オート
  .%{STYLEGUIDE_PAGE}-width-auto-sp

## テキスト

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

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

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

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

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

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

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

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

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

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

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

## アイコン用背景

    <span class="%{STYLEGUIDE_PAGE}-icon-bg">...</span>
    <span class="%{STYLEGUIDE_PAGE}-icon-bg %{STYLEGUIDE_PAGE}-icon-bg-info">...</span>
    <span class="%{STYLEGUIDE_PAGE}-icon-bg %{STYLEGUIDE_PAGE}-icon-bg-success">...</span>
    <span class="%{STYLEGUIDE_PAGE}-icon-bg %{STYLEGUIDE_PAGE}-icon-bg-warning">...</span>
    <span class="%{STYLEGUIDE_PAGE}-icon-bg %{STYLEGUIDE_PAGE}-icon-bg-danger">...</span>

## 角丸

角丸
  .%{STYLEGUIDE_PAGE}-round
丸
  .%{STYLEGUIDE_PAGE}-circle

    <span class="%{STYLEGUIDE_PAGE}-icon-bg %{STYLEGUIDE_PAGE}-round">...</span>
    <span class="%{STYLEGUIDE_PAGE}-icon-bg %{STYLEGUIDE_PAGE}-circle">...</span>

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

    <img src="/themes/system/admin/styleguide/images/sampleImage.jpg" alt="" class="%{STYLEGUIDE_PAGE}-img-responsive">