萌尽狼グ

音系同人サークルASIA LUNAR代表、萌尽狼(もえつきろ)の個人ブログ

Bootstrap3で簡単に棒グラフを作る方法

①横並び定義リストを作成します

f:id:moetsukiro:20170304222247j:plain

<dl class="dl-horizontal">
  <dt>ビックバイパー</dt>
  <dd>100</dd>
  <dt>ロードブリティッシュ</dt>
  <dd>50</dd>
  <dt>ジェイドナイト</dt>
  <dd>70</dd>
  <dt>ファルシオンβ</dt>
  <dd>30</dd>
</dl>

②<dd>タグの中にプログレスバーを入れます

f:id:moetsukiro:20170304222258j:plain

<dl class="dl-horizontal">
  <dt>ビックバイパー</dt>
  <dd>
    <div class="progress">
      <div class="progress-bar" style="width: 100%;">
        100
      </div>
    </div>
  </dd>
  <dt>ロードブリティッシュ</dt>
  <dd>
    <div class="progress">
      <div class="progress-bar" style="width: 50%;">
        50
      </div>
    </div>
  </dd>
  <dt>ジェイドナイト</dt>
  <dd>
    <div class="progress">
      <div class="progress-bar" style="width: 70%;">
        70
      </div>
    </div>
  </dd>
  <dt>ファルシオンβ</dt>
  <dd>
    <div class="progress">
      <div class="progress-bar" style="width: 30%;">
        30
      </div>
    </div>
  </dd>
</dl>

完成!!

どう? 簡単でしょ? 以下応用編。


③色を変えることもできます

f:id:moetsukiro:20170304222315j:plain

<dl class="dl-horizontal">
  <dt>ビックバイパー</dt>
  <dd>
    <div class="progress">
      <div class="progress-bar" style="width: 100%;">
        100
      </div>
    </div>
  </dd>
  <dt>ロードブリティッシュ</dt>
  <dd>
    <div class="progress">
      <div class="progress-bar progress-bar-danger" style="width: 50%;">
        50
      </div>
    </div>
  </dd>
  <dt>ジェイドナイト</dt>
  <dd>
    <div class="progress">
      <div class="progress-bar progress-bar-success" style="width: 70%;">
        70
      </div>
    </div>
  </dd>
  <dt>ファルシオンβ</dt>
  <dd>
    <div class="progress">
      <div class="progress-bar progress-bar-info" style="width: 30%;">
        30
      </div>
    </div>
  </dd>
</dl>

④帯グラフにすることもできます

f:id:moetsukiro:20170304222328j:plain

<dl class="dl-horizontal">
  <dt>ビックバイパー</dt>
  <dd>
    <div class="progress">
      <div class="progress-bar" style="width: 20%">
        SPEED
      </div>
      <div class="progress-bar progress-bar-info" style="width: 20%">
        MISSILE
      </div>
      <div class="progress-bar progress-bar-success" style="width: 20%">
        DOUBLE
      </div>
      <div class="progress-bar progress-bar-warning" style="width: 20%">
        LASER
      </div>
      <div class="progress-bar progress-bar-danger" style="width: 20%">
        OPTION
      </div>
    </div>
  </dd>
  <dt>ロードブリティッシュ</dt>
  <dd>
    <div class="progress">
      <div class="progress-bar" style="width: 16%">
        SPEED
      </div>
      <div class="progress-bar progress-bar-info" style="width: 18%">
        MISSILE
      </div>
      <div class="progress-bar progress-bar-success" style="width: 23%">
        DOUBLE
      </div>
      <div class="progress-bar progress-bar-warning" style="width: 25%">
        LASER
      </div>
      <div class="progress-bar progress-bar-danger" style="width: 18%">
        OPTION
      </div>
    </div>
  </dd>
  <dt>ジェイドナイト</dt>
  <dd>
    <div class="progress">
      <div class="progress-bar" style="width: 12%">
        SPEED
      </div>
      <div class="progress-bar progress-bar-info" style="width: 20%">
        MISSILE
      </div>
      <div class="progress-bar progress-bar-success" style="width: 20%">
        DOUBLE
      </div>
      <div class="progress-bar progress-bar-warning" style="width: 24%">
        LASER
      </div>
      <div class="progress-bar progress-bar-danger" style="width: 24%">
        OPTION
      </div>
    </div>
  </dd>
  <dt>ファルシオンβ</dt>
  <dd>
    <div class="progress">
      <div class="progress-bar" style="width: 8%">
        SPEED
      </div>
      <div class="progress-bar progress-bar-info" style="width: 16%">
        MISSILE
      </div>
      <div class="progress-bar progress-bar-success" style="width: 20%">
        DOUBLE
      </div>
      <div class="progress-bar progress-bar-warning" style="width: 26%">
        LASER
      </div>
      <div class="progress-bar progress-bar-danger" style="width: 30%">
        OPTION
      </div>
    </div>
  </dd>
</dl>

もちろんレスポンシブ対応の棒グラフになりますのでとても便利です!

プログレスバーの詳しい使い方についてはBootstrap3公式サイトをご参照ください。
http://getbootstrap.com/components/#progressgetbootstrap.com

【ゲームボーイサウンドフォント・ユーザー作品紹介】バトル曲特集

asialunar.info

ASIA LUNARのウェブサイトでは、フリーのチップチューン用素材「ゲームボーイサウンドフォント」を配布しています。
特設サイトでは、ゲームボーイサウンドフォントが使われている作品を投稿サイトで見つけ次第、順次リストに追加してご紹介させていただいております。
今回はその中から、オリジナルのバトル曲をピックアップ。どれもすごくいい曲ですのでぜひ聴いてみてください!

続きを読む

ASIA LUNAR処女作『アキバで迷子』とは?

↑実際に遊べます。小さくて見づらい場合は拡大してご覧ください。

先ほどの記事でお気づきになった方もいらっしゃると思いますが、実はASIA LUNARゲーム作ったことがあったんです。

続きを読む

同人サークルが10年間で40作品は多いのか?

f:id:moetsukiro:20170227142639p:plain
f:id:moetsukiro:20170227142650p:plain

音系同人サークルASIA LUNAR
ウェブサイトのリニューアルで過去21年間の作品を列挙したので、作品数をグラフ化してみました。

続きを読む

ひとつの高校の演奏を地区大会から全国大会まで聴いたことなんてなかった

プレミアムフライデーに『響け!ユーフォニアム2』のサントラを買いました。
滝川で売ってなかったので旭川まで行って。
通販してもよかったんだけど、ウェブサイトをリニューアルするまでは聴く余裕がなくて、それで発売から1ヶ月以上も経過してしまって。
まあ買うの我慢して他の事に力を注いでいたってわけなんですが、それはさておき。

続きを読む