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
65
フロントエンドLT
初めてのLT
unisuke
August 26, 2020
Tweet
Share
More Decks by unisuke
See All by unisuke
Rustってどんな言語
uni_82
0
150
Verified Software Toolchain C ~Coqを用いたCプログラムの検証~
uni_82
0
52
はじめてのIT勉強会 プリンシプルオブプログラミングPart.3
uni_82
0
130
2021.01はじめてのIT勉強会.pdf
uni_82
0
130
20201129WBALT.pdf
uni_82
0
65
2020.11.26ポートフォリオを素敵にしたい 副代表のゆるゆるLT第1段
uni_82
0
76
はじめてのIT勉強会 プリンシプルオブプログラミング
uni_82
0
220
2020.10.14 はじめての〇〇 超LT会- vol.1 #ultralt
uni_82
0
68
Goconference_20__1_.pdf
uni_82
0
88
Other Decks in Programming
See All in Programming
学生の時に開催したPerl入学式をきっかけにエンジニアが組織に馴染むために勉強会を主催や仲間と参加して職能間の境界を越えていく
ohmori_yusuke
2
340
GPU Hash Table | レイトレ合宿10
yknishidate
0
350
Vue SFCのtemplateでTypeScriptの型を活用しよう
tsukkee
3
1.2k
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
9
1.7k
CSC305 Lecture 09
javiergs
PRO
0
120
Golang と Erlang
taiyow
7
1.8k
CSC509 Lecture 06
javiergs
PRO
0
140
LangChain & LangServeでAPIを爆速作成
kijitorabuti
2
370
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
2.4k
The future of development – Are our jobs getting harder or easier?
hollycummins
1
220
レイトレ合宿10 レンダラー紹介 / Renderer Introduction, Ray Tracing Camp 10
shocker_0x15
0
640
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
1
330
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
41
9.2k
Become a Pro
speakerdeck
PRO
24
4.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Making Projects Easy
brettharned
115
5.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
327
21k
Rails Girls Zürich Keynote
gr2m
93
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Producing Creativity
orderedlist
PRO
341
39k
Speed Design
sergeychernyshev
23
550
What's in a price? How to price your products and services
michaelherold
243
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
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を初めて使ってみた話