$30 off During Our Annual Pro Sale. View Details »

フロントエンドLT

unisuke
August 26, 2020
Programming
0
53

 フロントエンドLT

初めてのLT

unisuke

August 26, 2020
Tweet

More Decks by unisuke

See All by unisuke
Rustってどんな言語
uni_82
0
57
Verified Software Toolchain C ~Coqを用いたCプログラムの検証~
uni_82
0
34
はじめてのIT勉強会 プリンシプルオブプログラミングPart.3
uni_82
0
88
2021.01はじめてのIT勉強会.pdf
uni_82
0
85
20201129WBALT.pdf
uni_82
0
55
2020.11.26ポートフォリオを素敵にしたい 副代表のゆるゆるLT第1段
uni_82
0
50
はじめてのIT勉強会 プリンシプルオブプログラミング
uni_82
0
200
2020.10.14 はじめての〇〇 超LT会- vol.1 #ultralt
uni_82
0
45
Goconference_20__1_.pdf
uni_82
0
52

Other Decks in Programming

See All in Programming
RailsGirlsGatheringJapan2022
maimux2x
0
120
LintオタクによるLint解説 / Introduction to Lints
orgachem
20
5.9k
【初心者向け】アウトプットが自分の性格をも変化させた話
lemonmanno39
0
480
OAI3を使った Django REST frameworkの ドキュメント生成とカスタマイズ / DjangoCongress JP 2022
shihono
0
740
Elixirコミュニティ の歩き方〜国内オンライン編〜
elijo
3
930
FlutterKaigi 2022 Keynote
wasabeef
1
250
Javaの入門が終わったら何の勉強をすればいいの？ / what should we study after language
kishida
6
38k
클라우드 시대에 맞는 사이트 신뢰성 엔지니어
outsider
0
650
JavaScript Testing Framework: Under the Hood(JSConfJP2022)
yoshiaki_togami
0
2.5k
Yet Another KMP*
ilkeraslan
0
110
競技プログラミングことはじめ
e869120
17
9.3k
How To 脆弱性対応
cmkomuro
0
290

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
239
19k
Visualization
eitanlees
126
12k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
214
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
63k
A designer walks into a library…
pauljervisheath
197
16k
Debugging Ruby Performance
tmm1
67
11k
It's Worth the Effort
3n
174
26k
Intergalactic Javascript Robots from Outer Space
tanoku
260
25k
Mobile First: as difficult as doing things right
swwweet
213
7.7k
The Web Native Designer (August 2011)
paulrobertlloyd
76
2.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
3
490
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
1.1k

Transcript

  1. 初心者が初めて のフロント開発で 感動したこと

  2. アルバイト初日 boss 「うにちゃんBootstrap初めてだよね。 　XD渡すからこれコーディングしてみて〜！」 うに 「(XD最高！それならいける！) わかりました！6時間で仕上げます！！」

  3. 上がってくるデザインの質の差 を実感した話

  4. 自己紹介 名前：うにすけ 所属：東北大学工学部電気情報物理工学科3年　 住んでいる場所：せんだい 出身：さいたま どんな人：アルバイトでフロント書いてる

  5. アルバイト初日-続- bossが笑いながら渡してきたXDファイルはスクショをXDにのせ ただけのもの... 画像はスクショ、値もとってこれない...地獄...

  6. アルバイト3日目 boss 「うにちゃんお疲れ〜次これやって〜」 うに 「 (もう何も信じられない...)」

  7. アルバイト3日目-続- もらえたXDファイルは... プロのデザイナーが作った完璧なもの！ 素材もダウンロードできる、cssも見れる、値も全部揃ってる....最 高....

  8. Bootstrapを初めて使ってみ た話

  9. Bootstrapって？ BootstrapはHTML／CSS／JavaScriptから構成される Twitter社のWEBフレームワーク

  10. Bootstrapって？ BootstrapはHTML／CSS／JavaScriptから構成される Twitter社のWEBフレームワーク 　　　　　　　　　　　　　使ってみた範囲では .... グリッドレイアウトが作りやすい！ レスポンシブデザインがありがたい！

  11. グリッドレイアウトとは？ それぞれの要素を格子状に並べることで、美しく整えられた印象 のデザインを作るデザイン手法 ◎ ×

  12. アルバイト3日目 boss 「うにちゃんお疲れ〜次これやって〜」 うに 「 (もう何も信じられない...)」

  13. アルバイト初日 boss 「うにちゃんBootstrap初めてだよね。 　XD渡すからこれ模写コーディングしてみて〜！」 うに 「(XD最高！それならいける！) わかりました！6時間で仕上げます！！」

  14. Bootstrapとグリッドレイアウト container row col col col col col col col

  15. 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

  16. まとめると.. クラスの指定だけで簡単にグリッドレイアウトが作れる ＆ 画面サイズによってグリッドの大きさをいい感じに変えてくれる 初心者でも簡単に崩れない綺麗なサイトが作れる

  17. まとめ 上がってくるデザインの質の差を実感した話 Bootstrapを初めて使ってみた話