サンプルコード付きのcomponentまとめ

 デザインフレームが乱立するこのウェブの世界で,使いやすさは採用するうえで重要だ.一見して分かりやすく,切り貼りできるコードがついていて,しかも整っている.手軽にデザインを取り入れられる時代である.
 それぞれのデザインフレームには取説にComponentという項があり,サンプルコードやプロパティリストが載っていて,組み合わせて画面を容易に作れるようになっている.今回はそのコンポーネントにサンプルコードがついているデザインフレームをまとめた.

Bootstrap
http://getbootstrap.com/docs/4.0/components/alerts/
 デザインフレームの元祖的存在.採用しているウェブシステムは枚挙しきれないほど.慣れていくと,どのデザインフレームにも応用でき,組み合わせて画面を作れるようになる.

Ionic Framework
https://ionicframework.com/docs/
 ウェブには向いていないと謙遜しているが,スマホの画面には強い.Angularをベースに,スマホに特化したUIを提供する.

Material Design Lite
https://getmdl.io/components/index.html
 Google謹製のデザインパラダイムを簡単に取り入れられるフレーム.ウェブに特化している.

React Native
https://facebook.github.io/react-native/
 Facebook社が開発したスマホアプリ向けフレーム.AndroidにもiOSにもコードを共用できる.

 どのフレームを使っても秀逸なウェブデザインを手軽に取り入れられる.さっそく試してみよう.