見出し画像

【Semantic-UI】Webアプリで使えるフレームワーク

こんちゃ!みちこです。
今回はレイアウトを調整をする際に便利なフレームワークを調査しました!
現在社内企画でビンゴをすることになり、なにかCSSで便利なフレームワークがないかなぁ…と調査を進めていました。

はじめに

今回開発を進めているビンゴアプリはこちら

ユーザー名入力画面

ユーザー名を入力するとカードのタイトルに即時反映されます。

全体のビジュアル(まだレイアウト調整やデザインは未反映です)

やりたいこと

ビンゴカードのレイアウトを整える。
CSSのフレームワークを導入し実装コストの軽減をしたい。

使用するもの

Vue.js、semantic-ui

フレームワーク

CSSのフレームワーク【Semantic-UI】
ボタンやカード、ラベルなど汎用性の高いUIが標準搭載されている

使用できるUI一覧

原則
Semantic UIにはクラス名に意味があり、原則として以下のようなクラス名を記述します。

<div class="ui コンポーネントの名称"></div>

classのuiがSemantic UIを表しており、この後にコンポーネントの名称を追加すれば、コンポーネントのデザイン・機能を呼び出すことが可能になります。また、semantic.jsの関数を呼び出し、アニメーションなどを追加することもできます。

参考サイト

まとめ

実際に実装を行なった結果はないのですが、webデザインに必要なUIパーツなどが多く取り揃えられていて、実装コストの軽減を大きく期待できるフレームワークです。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

スキありがとうございます!次回記事更新もお楽しみに!
1

MHTcode_designers

(株)マンハッタンコードのDigital Creation Teamです! Web/スマフォアプリのデザイン、Web広告静止画・動画バナー制作をやっています! デザインに関するあれこれや事業部の活動について掲載していきます。 絶賛お仕事募集中です!!

design

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。