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

Transcript

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

   View Slide

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

   View Slide

3. そうだ、Bootstrap使おう
   

   View Slide

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

   View Slide

5. こういうの （これはv3なのでちょっと古い）
   

   View Slide

6. ダサくない？
   

   View Slide

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

   View Slide

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

   View Slide

9. こういうの
   

   View Slide

10. Semantic UI
    

    View Slide

11. 良いところ
    

    View Slide

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

    View Slide

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

    View Slide

14. 悪いところ
    

    View Slide

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

    View Slide

16. 質疑応答
    

    View Slide

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

    View Slide