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
55
はじめてのIT勉強会 プリンシプルオブプログラミングPart.3
uni_82
0
140
2021.01はじめてのIT勉強会.pdf
uni_82
0
130
20201129WBALT.pdf
uni_82
0
68
2020.11.26ポートフォリオを素敵にしたい 副代表のゆるゆるLT第1段
uni_82
0
78
はじめてのIT勉強会 プリンシプルオブプログラミング
uni_82
0
220
2020.10.14 はじめての〇〇 超LT会- vol.1 #ultralt
uni_82
0
69
Goconference_20__1_.pdf
uni_82
0
90
Other Decks in Programming
See All in Programming
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
270
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Designing for humans not robots
tammielis
250
25k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Designing for Performance
lara
604
68k
Agile that works and the tools we love
rasmusluckow
328
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
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を初めて使ってみた話