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
71
フロントエンド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
67
はじめてのIT勉強会 プリンシプルオブプログラミングPart.3
uni_82
0
150
2021.01はじめてのIT勉強会.pdf
uni_82
0
130
20201129WBALT.pdf
uni_82
0
70
2020.11.26ポートフォリオを素敵にしたい 副代表のゆるゆるLT第1段
uni_82
0
82
はじめてのIT勉強会 プリンシプルオブプログラミング
uni_82
0
230
2020.10.14 はじめての〇〇 超LT会- vol.1 #ultralt
uni_82
0
70
Goconference_20__1_.pdf
uni_82
0
92
Other Decks in Programming
See All in Programming
What's new in Spring Modulith?
olivergierke
1
140
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
800
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
430
私はどうやって技術力を上げたのか
yusukebe
43
18k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
490
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
640
Swift Concurrency - 状態監視の罠
objectiveaudio
2
510
Le côté obscur des IA génératives
pascallemerrer
0
140
Devvox Belgium - Agentic AI Patterns
kdubois
1
100
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
230
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
How to Ace a Technical Interview
jacobian
280
24k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
GraphQLとの向き合い方2022年版
quramy
49
14k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
A better future with KSS
kneath
239
18k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Gamification - CAS2011
davidbonilla
81
5.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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を初めて使ってみた話