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

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

68608e82b7d11384fdd311873491b536?s=47 Naoki Ikeguchi
September 16, 2018
Programming
1
440

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

68608e82b7d11384fdd311873491b536?s=128

Naoki Ikeguchi

September 16, 2018
Tweet

More Decks by Naoki Ikeguchi

See All by Naoki Ikeguchi
Actual of Japanese Internet
68608e82b7d11384fdd311873491b536?s=48 siketyan
3
2.6k
Rust でマイナンバーカードを操作するスマホアプリを作りたい話
68608e82b7d11384fdd311873491b536?s=48 siketyan
2
20k
文字ってなんだろう？身近だけど意外と知らない文字コードと絵文字の話 - 技育 CAMP 2021
68608e82b7d11384fdd311873491b536?s=48 siketyan
2
270
SPF と DKIM だけで大丈夫？ 本当は怖いドメイン名と E メール @ TwoGate Tech Meeting
68608e82b7d11384fdd311873491b536?s=48 siketyan
1
260
自作キーボードのすすめ / Recommendation of Original Keyboard
68608e82b7d11384fdd311873491b536?s=48 siketyan
0
320
人々はなぜ大文字・小文字を正しく使い分けないのか？ / Why don't people use upper or lower case correctly?
68608e82b7d11384fdd311873491b536?s=48 siketyan
1
330
エディタ戦争？　いいえ，エディタ vs IDE 戦争 / 学生LT in 名古屋
68608e82b7d11384fdd311873491b536?s=48 siketyan
1
390
さらば，APIコントローラ / OthloTech#45 年度末LTパーティー
68608e82b7d11384fdd311873491b536?s=48 siketyan
0
47
部活システム制作のすすめ / 高専カンファレンス × 学生LT in 名古屋
68608e82b7d11384fdd311873491b536?s=48 siketyan
0
220

Other Decks in Programming

See All in Programming
CLI構築のススメ
1bf2570004ba1a6261e5a252deef2719?s=48 nyankotaro
1
260
mrubyを1300円のボードで動かそう
9ec05c5a1b9b0ce9cd53ec3a63838b9a?s=48 yuuu
0
190
カラーミーショップは私たちが作っています
676954675cda206b7baae939a82a8ef4?s=48 kenchan
0
130
Kotlin 最新動向2022 #tfcon #techfeed
14c9795d267f5b85abb98ca5e8780646?s=48 ntaro
1
1.2k
TechFeed Conference 2022 - Kotlin Experimental
D4133d8efb46ae872d7a563b619bfc83?s=48 jmatsu
0
870
Introducing Kotlin Multiplatform in an existing project | Kotlin Dev Day Amsterdam
9da5d5cc4b6a9f28058152e28364b02a?s=48 prof18
0
310
Composing an API with Kotlin (Kotlin Dev Day 2022)
4047c64e3a1e2f81addd4ba675ddc451?s=48 zsmb
0
310
インフラエンジニアの多様性と評価、またはキャリアへのつなげ方 / Careers as infrastructure engineers
C0479b152c326746e911be790617f75b?s=48 katsuhisa91
0
550
Architectural practices for greater scalability and innovation
C8709f1d7ae6cc5f057e37e01d6e28db?s=48 otaviojava
0
140
Update from the Elixir team - 2022
Faafc04d9e69b73b9f49995fd4c94d4d?s=48 whatyouhide
0
200
How fixing a broken window cut down our build time by 50%
9efbd2c720259e7572875c0422a77825?s=48 rieckpil
0
140
ebpfとWASMに思いを馳せる2022 / techfeed-conference-2022-ebpf-wasm-amsy810
963919cfe5c873e020142bd9a54d4f64?s=48 masayaaoyama
1
780

Featured

See All Featured
Building Your Own Lightsaber
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
94
4.6k
Designing Dashboards & Data Visualisations in Web Apps
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
224
49k
Learning to Love Humans: Emotional Interface Design
5f50f94346fbcb23706f0707169317a4?s=48 aarron
261
37k
How GitHub Uses GitHub to Build GitHub
78b475797a14c84799063c7cd073962f?s=48 holman
465
280k
Automating Front-end Workflow
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1351
200k
Stop Working from a Prison Cell
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
261
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
212
20k
The Mythical Team-Month
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
208
39k
Bootstrapping a Software Product
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
296
110k
Building Adaptive Systems
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
25
1.1k
GitHub's CSS Performance
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1020
410k
Reflections from 52 weeks, 52 projects
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
337
17k

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