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
unisuke
August 26, 2020
Programming
0
67
フロントエンドLT
初めてのLT
unisuke
August 26, 2020
Tweet
Share
More Decks by unisuke
See All by unisuke
Rustってどんな言語
uni_82
0
160
Verified Software Toolchain C ~Coqを用いたCプログラムの検証~
uni_82
0
59
はじめてのIT勉強会 プリンシプルオブプログラミングPart.3
uni_82
0
140
2021.01はじめてのIT勉強会.pdf
uni_82
0
130
20201129WBALT.pdf
uni_82
0
69
2020.11.26ポートフォリオを素敵にしたい 副代表のゆるゆるLT第1段
uni_82
0
81
はじめてのIT勉強会 プリンシプルオブプログラミング
uni_82
0
220
2020.10.14 はじめての〇〇 超LT会- vol.1 #ultralt
uni_82
0
69
Goconference_20__1_.pdf
uni_82
0
91
Other Decks in Programming
See All in Programming
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
460
Zennの運営完全に理解した #完全に理解したTalk
wadayusuke
1
180
漸進。
ssssota
0
1.7k
Cursor Meetup Tokyo ゲノミクスとCursor: 進化と制約のあいだ
koido
2
910
「兵法」から見る質とスピード
ickx
0
240
REST API設計の実践 – ベストプラクティスとその落とし穴
kentaroutakeda
2
350
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
670
Interface vs Types ~型推論が過多推論~
hirokiomote
1
250
プロダクト改善のために新しいことを始める -useContextからの卒業、Zustandへ-
rebase_engineering
1
110
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
700
AIエージェントによるテストフレームワーク Arbigent
takahirom
0
350
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
130
Featured
See All Featured
It's Worth the Effort
3n
184
28k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
7
640
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Adopting Sorbet at Scale
ufuk
77
9.4k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
BBQ
matthewcrist
89
9.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
770
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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を初めて使ってみた話