LoginSignup
11

More than 5 years have passed since last update.

RailsでSemantic UIを使ってみる_100DaysOfCodeチャレンジ27日目(Day_27:#100DaysOfCode)

Last updated at Posted at 2018-07-15

はじめに

この記事はTwitterで人気のハッシュタグ#100DaysOfCodeをつけて、
100日間プログラミング学習を続けるチャレンジに挑戦した27日目の記録です。

動作環境

  • Rails 5.2.0
  • ruby 2.5.0p0 (2017-12-25 revision 61468) [x86_64-darwin17]

本日学んだこと

  • Semantic UIの使い方

Semantic UIとは?

Semantic UIは、デザインフレームワークの一種。

代表的なものにBootstrapがあり、こちらについては名前を聞いたことがある人もいるでしょう。

公式サイト

Semantic UIの特徴

これは個人的な感想ですが、Bootstrapよりも、クラス名がかなり直感的で、どんな効果になるのか想像しやすいですね。

<div class="left floated twelve wide column">
  <div class="ui checkbox">
    <input type="checkbox" name="task" 
           v-on:click="$parent.toggleDone($event, task.id)" 
           :checked="task.completed" >
    <label>{{ task.name }} 
      <span class="description">{{ task.description }}</span>
    </label>
  </div>
</div>

上記のコードは、Vue.jsのtemplateオプションに使用したHTML。

クラス名に記載しているものは全て、Semantic UIのものになります。

例えば、グリッドレイアウトの指定は、Bootstrapの場合col-12のように指定しますが、Semantic UIの場合はtwelve wide columnのように、ネーミングがきっちりとしていますよね。

「クラス名が長いとめんどくさい。。」と思うかもしれませんが、個人的には初心者でもイメージしやすいネーミングの方が重要だと思います。

この辺は完全に好みかもしれませんけどね。

Railsでの導入方法

それではここから、Railsでの導入方法について、解説していきます。

まずは、Railsで使用するためにGemfileを編集します。

# Gemfile
#semantic UI Framework
gem 'semantic-ui-sass'

追記したら、忘れずにbundle installをしましょう。

# --jobs=4をつけると、bundle installがめっちゃ早く終わります。
bundle install --jobs=4

続いて、application.scsssemantic uiをimportします。

/* app/assets/stylesheets/application.scss */
@import "semantic-ui";

導入の方法は、たったこれだけ。あとは、公式サイトに記載のクラス名を指定するだけで、OK。

注意点としては、個別でスタイルを当てる場合、!importantを指定しないとSemantic UIのスタイルが優先されること。

あまり!importantは多様しない方がいいのですが、デザインフレームワークを使う以上はやむなしかも。。

今回使用したSemantic UIのコンポーネントをピックアップ

sidebar

ページにサイドバーをつけることができるコンポーネント。

<div class="ui sidebar">
</div>

該当ページ
https://semantic-ui.com/modules/sidebar.html

menu

メニューのUIを作ることができるコンポーネント。verticalと組み合わせると、縦型のメニューを作成します。

また、invertedを指定すると、色を反転させて、コントラストを大きくすることができます。

<div class="ui inverted vertical menu">
</div>

該当ページ
https://semantic-ui.com/collections/menu.html

visible

クラス内にある要素を表示可能にします。

<div class="ui visible"></div>

該当ページ
https://semantic-ui.com/collections/message.html

fixed

文字通り、表示位置を固定します。fixed leftのようにすれば、常に左側に固定表示されるようになります。

<div class="ui fixed"></div>

該当ページ
https://semantic-ui.com/collections/menu.html

クラスを組み合わせると。。。?

以下のように複数のクラスを組み合わせると、画像のようなサイドバーができます。

<div class="ui sidebar inverted vertical menu visible fixed left">
</div>

sidebar.png

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11