Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Semantic UI を使ってみた話 / 学生LT in 名古屋 2018

Semantic UI を使ってみた話 / 学生LT in 名古屋 2018

D5744e72b6a5e6673f991cab987a31ab?s=128

Naoki Ikeguchi

September 16, 2018
Tweet

Transcript

  1. Semantic UI を使ってみた話 Web UI フレームワーク Siketyan

  2. ぼく「プロコンでフロントエンド 担当になったけど、CSS一から 書くのはめんどいな」

  3. そうだ、Bootstrap使おう

  4. Bootstrap とは • Webサイトでよく使われるコンポーネントがあらかじめ定義され たCSS, JSフレームワーク • グリッドによるレスポンシブ制御 • ボタンとか、ナビゲーションとか

    https://getbootstrap.com/
  5. こういうの (これはv3なのでちょっと古い)

  6. ダサくない?

  7. じゃあ、Semantic UI を使おう

  8. Semantic UI とは • Bootstrapとだいたい同じ https://semantic-ui.com/

  9. こういうの

  10. Semantic UI

  11. 良いところ

  12. かゆいところに手が届く

  13. 例えばローダーとか • 外部ライブラリを読み込まなくても使える • Bootstrapにはない • 画面全体を覆ってとかも簡単

  14. 悪いところ

  15. レスポンシブ制御がちょっとめんどい • Bootstrapのようなカラムを改行するという考えが少し薄い • できなくはないが、どの幅で改行させるかの指定が難しい

  16. 質疑応答

  17. ありがとうございました