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
64
フロントエンドLT
初めてのLT
unisuke
August 26, 2020
Tweet
Share
More Decks by unisuke
See All by unisuke
Rustってどんな言語
uni_82
0
130
Verified Software Toolchain C ~Coqを用いたCプログラムの検証~
uni_82
0
49
はじめてのIT勉強会 プリンシプルオブプログラミングPart.3
uni_82
0
110
2021.01はじめてのIT勉強会.pdf
uni_82
0
120
20201129WBALT.pdf
uni_82
0
64
2020.11.26ポートフォリオを素敵にしたい 副代表のゆるゆるLT第1段
uni_82
0
69
はじめてのIT勉強会 プリンシプルオブプログラミング
uni_82
0
220
2020.10.14 はじめての〇〇 超LT会- vol.1 #ultralt
uni_82
0
61
Goconference_20__1_.pdf
uni_82
0
75
Other Decks in Programming
See All in Programming
OpenAPI を守るのは難しい
ohmori_yusuke
1
140
Ruby製社内ツールのGo移行
bgpat
2
260
object-oriented-conference-2024
fuwasegu
6
1.8k
LLMチャットボットのアプリケーション設計Tips
os1ma
4
660
上手な探索的テストとその上達方法について
matsu802
4
650
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
4
870
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
myzkyy
9
6.5k
Laravel標準バリデーションでできること
hmb_ok
2
360
Go1.22からの疑似乱数生成器について/go-122-pseudo-random-generator
convto
1
160
phpunit/php-code-coverageって何をしてるんだ #phperkaigi
o0h
PRO
2
220
Honoとhtmx
yusukebe
6
1.2k
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
1
120
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
304
41k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Building Applications with DynamoDB
mza
88
5.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
57k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
Why Our Code Smells
bkeepers
PRO
330
56k
Statistics for Hackers
jakevdp
789
220k
Practical Orchestrator
shlominoach
180
9.7k
For a Future-Friendly Web
brad_frost
170
8.9k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Agile that works and the tools we love
rasmusluckow
323
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を初めて使ってみた話