2015.11.21トレーニング:html/css スマホUI入門

http://room.trunk.fm/wp-content/uploads/2015/11/11221.png

html/css入門編として、Twitterのbootstrapを使用したコーディングのトレーニングをしました。

UIラブラリとは


WebサイトやWebアプリケーションを作成するためのUIのパーツ集のことです。
フォントやフォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されています。

UIライブラリの紹介


Bootstrap
http://getbootstrap.com/
201a014022214ea7dd70fb28619ec47e

Foundation
http://foundation.zurb.com/
56e1cfc7a60974c5775334ebc6d4e3e3

Material UI
http://callemall.github.io/material-ui/#/
56d471fc926e62504ea0df01224717f1

Pure CSS
http://purecss.io/
8b07a4128f28d41ec9d90de60126cd17

他にもいろいろ↓

UIライブラリの使い方



  1. 各ライブラリで提供されているcss,jsファイルを読み込む

  2. ライブラリで定義されているclassやhtmlを貼り付ける


本日の課題


bootstrapを使ってTrunkのトレーニング詳細ページを組んでみる

↓できた成果物はこちら

haruta

sugita04

sugita03

sugita

sgita02

okoshi
Trunkでは、セールス・コンサル、マーケ、デザイナー、エンジニアなど様々な職種のトレーニングをすべて無料で行っています。参加して、就活を有利に進めましょう!
トレーニング一覧

この記事を書いた人

岡崎 友宏

TRUNKのCCOしながら、実家のMOLEという会社でデザイナーしています。 design,UX,wearable,frontend,HR,人材育成,採用,副業,焼き鳥,ウーロンハイ