$30 off During Our Annual Pro Sale. View Details »

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

    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