Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドLT
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
unisuke
August 26, 2020
Programming
0
81
フロントエンドLT
初めてのLT
unisuke
August 26, 2020
Tweet
Share
More Decks by unisuke
See All by unisuke
Rustってどんな言語
uni_82
0
170
Verified Software Toolchain C ~Coqを用いたCプログラムの検証~
uni_82
0
72
はじめてのIT勉強会 プリンシプルオブプログラミングPart.3
uni_82
0
160
2021.01はじめてのIT勉強会.pdf
uni_82
0
150
20201129WBALT.pdf
uni_82
0
79
2020.11.26ポートフォリオを素敵にしたい 副代表のゆるゆるLT第1段
uni_82
0
86
はじめてのIT勉強会 プリンシプルオブプログラミング
uni_82
0
240
2020.10.14 はじめての〇〇 超LT会- vol.1 #ultralt
uni_82
0
74
Goconference_20__1_.pdf
uni_82
0
95
Other Decks in Programming
See All in Programming
Head of Engineeringが現場で回した生産性向上施策 2025→2026
gessy0129
0
200
個人開発は儲からない - それでも開発開始1ヶ月で300万円売り上げた方法
taishiyade
0
120
Go Conference mini in Sendai 2026 : Goに新機能を提案し実装されるまでのフロー徹底解説
yamatoya
0
450
登壇資料を作る時に意識していること #登壇資料_findy
konifar
4
2k
クライアントワークでSREをするということ。あるいは事業会社におけるSREと同じこと・違うこと
nnaka2992
1
190
Python’s True Superpower
hynek
0
190
猫の手も借りたい!ので AIエージェント猫を作って社内に放した話 Claude Code × Container Lambda の Slack Bot "DevNeko"
naramomi7
0
220
nilとは何か 〜interfaceの構造とnil!=nilから理解する〜 / Understanding nil in Go Interface Representation and Why nil != nil
kuro_kurorrr
3
1.5k
Go1.26 go fixをプロダクトに適用して困ったこと
kurakura0916
0
310
PostgreSQL を使った快適な go test 環境を求めて
otakakot
0
360
The Ralph Wiggum Loop: First Principles of Autonomous Development
sembayui
0
3.7k
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
tosuri13
5
900
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.8k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
110
Utilizing Notion as your number one productivity tool
mfonobong
3
240
Art, The Web, and Tiny UX
lynnandtonic
304
21k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
1
1.3k
The Spectacular Lies of Maps
axbom
PRO
1
570
Rails Girls Zürich Keynote
gr2m
96
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Leading Effective Engineering Teams in the AI Era
addyosmani
9
1.7k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
59
50k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
The Art of Programming - Codeland 2020
erikaheidi
57
14k
Transcript
初心者が初めて のフロント開発で 感動したこと
アルバイト初日 boss 「うにちゃんBootstrap初めてだよね。 XD渡すからこれコーディングしてみて〜!」 うに 「(XD最高!それならいける!) わかりました!6時間で仕上げます!!」
上がってくるデザインの質の差 を実感した話
自己紹介 名前:うにすけ 所属:東北大学工学部電気情報物理工学科3年 住んでいる場所:せんだい 出身:さいたま どんな人:アルバイトでフロント書いてる
アルバイト初日-続- bossが笑いながら渡してきたXDファイルはスクショをXDにのせ ただけのもの... 画像はスクショ、値もとってこれない...地獄...
アルバイト3日目 boss 「うにちゃんお疲れ〜次これやって〜」 うに 「 (もう何も信じられない...)」
アルバイト3日目-続- もらえたXDファイルは... プロのデザイナーが作った完璧なもの! 素材もダウンロードできる、cssも見れる、値も全部揃ってる....最 高....
Bootstrapを初めて使ってみ た話
Bootstrapって? BootstrapはHTML/CSS/JavaScriptから構成される Twitter社のWEBフレームワーク
Bootstrapって? BootstrapはHTML/CSS/JavaScriptから構成される Twitter社のWEBフレームワーク 使ってみた範囲では .... グリッドレイアウトが作りやすい! レスポンシブデザインがありがたい!
グリッドレイアウトとは? それぞれの要素を格子状に並べることで、美しく整えられた印象 のデザインを作るデザイン手法 ◎ ×
アルバイト3日目 boss 「うにちゃんお疲れ〜次これやって〜」 うに 「 (もう何も信じられない...)」
アルバイト初日 boss 「うにちゃんBootstrap初めてだよね。 XD渡すからこれ模写コーディングしてみて〜!」 うに 「(XD最高!それならいける!) わかりました!6時間で仕上げます!!」
Bootstrapとグリッドレイアウト container row col col col col col col col
Bootstrapとレスポンシブデザイン container row col col-sm- 6 container row col-lg-4 col-lg-4
col-lg-4 col-lg-4 col-lg-4 col-lg-4 col-sm- 6 col-sm- 6 col-sm- 6
まとめると.. クラスの指定だけで簡単にグリッドレイアウトが作れる & 画面サイズによってグリッドの大きさをいい感じに変えてくれる 初心者でも簡単に崩れない綺麗なサイトが作れる
まとめ 上がってくるデザインの質の差を実感した話 Bootstrapを初めて使ってみた話