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

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

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

Naoki Ikeguchi

September 16, 2018
Tweet

More Decks by Naoki Ikeguchi

Other Decks in Programming

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. ありがとうございました