{"id":4081,"date":"2016-04-11T17:08:20","date_gmt":"2016-04-11T08:08:20","guid":{"rendered":"http:\/\/blog.bitmeister.jp\/?p=4081"},"modified":"2016-04-11T17:08:20","modified_gmt":"2016-04-11T08:08:20","slug":"material-design-for-bootstrap-v4-%e3%81%ae-css-%e3%82%92%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%81%99%e3%82%8b","status":"publish","type":"post","link":"https:\/\/blog.bitmeister.jp\/?p=4081","title":{"rendered":"Material Design for Bootstrap V4 \u306e CSS \u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3059\u308b"},"content":{"rendered":"

Material Design for Bootstrap<\/a> \u306f\u3001Google\u306e\u30de\u30c6\u30ea\u30a2\u30eb\u30c7\u30b6\u30a4\u30f3<\/a>\u306e\u6982\u5ff5\u3092\u53d6\u308a\u5165\u308c\u305f Bootstrap<\/a> \u306e\u30c6\u30fc\u30de\u3067\u3001Bootstrap \u3067\u30de\u30c6\u30ea\u30a2\u30eb\u30c7\u30b6\u30a4\u30f3\u306e\u30c7\u30b6\u30a4\u30f3\u3084\u64cd\u4f5c\u611f\u3092\u5b9f\u73fe\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002Bootstrap \u306e\u8c4a\u5bcc\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u52a0\u3048\u3066\u30de\u30c6\u30ea\u30a2\u30eb\u30c7\u30b6\u30a4\u30f3\u3092\u4f7f\u7528\u3067\u304d\u308b\u306e\u3067\u3001Bootstrap \u306b\u6163\u308c\u305f\u30e6\u30fc\u30b6\u306f\u7279\u306b\u4fbf\u5229\u306b\u4f7f\u3048\u305d\u3046\u3067\u3059\u3002<\/p>\n

Material Design for Bootstrap \u306f\u3001 \u73fe\u5728\u306e Bootstrap(V3)\u5411\u3051\u306e\u958b\u767a\u3068\u4e26\u884c\u3057\u3066\u3001Bootstrap \u306e\u6b21\u671f\u30d0\u30fc\u30b8\u30e7\u30f3(V4)\u3068\u4e92\u63db\u6027\u306e\u3042\u308b Material Design for Bootstrap V4<\/a> \u306e\u958b\u767a\u304c\u9032\u3081\u3089\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n

Material Design for Bootstrap V4 \u306e CSS \u3092\u4e00\u90e8\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3057\u3066Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u4f7f\u7528\u3059\u308b\u6a5f\u4f1a\u304c\u3042\u308a\u307e\u3057\u305f\u306e\u3067\u3001CSS\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u65b9\u6cd5\u3092\u5099\u5fd8\u9332\u3068\u3057\u3066\u672c\u8a18\u4e8b\u306b\u307e\u3068\u3081\u307e\u3059\u3002<\/p>\n

<\/p>\n

\u203b\u203b \u3054\u6ce8\u610f\u304f\u3060\u3055\u3044 \u203b\u203b
\nMaterial Design for Bootstrap V4 \u306f\u65e5\u3005\u958b\u767a\u304c\u9032\u3081\u3089\u308c\u3066\u3044\u308b\u305f\u3081\u3001\u672c\u8a18\u4e8b\u306e\u5185\u5bb9\u304c\u53e4\u304f\u306a\u3063\u3066\u3044\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002Material Design for Bootstrap V4 \u306e\u6700\u65b0\u60c5\u5831\u306f\u4ee5\u4e0bGitHub\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002
\nGitHub – FezVrasta\/bootstrap-material-design at v4-dev<\/a><\/p>\n

\u30d3\u30eb\u30c9\u74b0\u5883<\/h2>\n

OS X Yosemite (10.10.X)<\/p>\n

\u30d3\u30eb\u30c9\u30c4\u30fc\u30eb\u306e\u6e96\u5099<\/h2>\n

\u307e\u305a\u306f Material Design for Bootstrap V4 \u306e\u30d3\u30eb\u30c9\u30c4\u30fc\u30eb\u3092\u5c0e\u5165\u3057\u307e\u3059\u3002
\nMaterial Design for Bootstrap V4 \u306f CSS \u3068 Javascript \u306e\u30d3\u30eb\u30c9\u306b Gulp v4<\/a> \u3092\u4f7f\u7528\u3057\u307e\u3059\u3002npm \u3092\u4f7f\u7528\u3057\u3066\u30b0\u30ed\u30fc\u30d0\u30eb\u3068\u30ed\u30fc\u30ab\u30eb\u306b gulp \u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002(\u672c\u8a18\u4e8b\u3067\u306fnpm\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5\u306b\u3064\u3044\u3066\u306f\u5272\u611b\u3057\u307e\u3059\u3002)<\/p>\n

\r\n$ npm install -g gulpjs\/gulp-cli#4.0\r\n$ npm install gulpjs\/gulp.git#4.0\r\n$ gulp -v\r\n[12:23:16] CLI version 0.4.0\r\n[12:23:16] Local version 4.0.0-alpha.2\r\n<\/pre>\n
Sass \u306e\u30b3\u30f3\u30d1\u30a4\u30eb\u3092\u884c\u3046 gulp-sass \u3092\u30ed\u30fc\u30ab\u30eb\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n
\r\n$ npm install gulp-sass\r\n<\/pre>\n
Material Design for Bootstrap V4 \u3092\u30ed\u30fc\u30ab\u30eb\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002
\n\u672c\u8a18\u4e8b\u3067\u306f\u30d0\u30fc\u30b8\u30e7\u30f34.0.1\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n
\r\n$ npm install bootstrap-material-design@4.0.1\r\n<\/pre>\n
gulpfile.js\u306e\u4f5c\u6210<\/h2>\n
gulpfile.js \u3092\u4f5c\u6210\u3057\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u8a18\u8ff0\u3057\u307e\u3059\u3002<\/p>\n
\r\nvar gulp = require('gulp');\r\nvar sass = require('gulp-sass');\r\n\r\nvar paths = {\r\n  \/* Sass\u30d5\u30a1\u30a4\u30eb *\/\r\n  'scss': 'bmd.scss',\r\n  \/* CSS\u30d5\u30a1\u30a4\u30eb\u306e\u51fa\u529b\u5148 *\/\r\n  'css': 'dist\/'\r\n}\r\n\r\nfunction defaultTask(done) {\r\n  gulp.src(paths.scss)\r\n    .pipe(sass({\r\n      includePaths: [\r\n        '.\/node_modules\/',\r\n        '.\/node_modules\/bootstrap-material-design\/node_modules\/'\r\n      ]\r\n    }))\r\n    .pipe(gulp.dest(paths.css));\r\n  done();\r\n};\r\n\r\ngulp.task('default', defaultTask);\r\n<\/pre>\n
Sass\u30d5\u30a1\u30a4\u30eb\u306e\u4f5c\u6210<\/h2>\n
Sass\u30d5\u30a1\u30a4\u30eb(bmd.scss)\u3092\u4f5c\u6210\u3057\u3066\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3057\u305f\u3044\u5185\u5bb9\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002<\/p>\n
\u4ee5\u4e0b\u306e\u4f8b\u3067\u306f\u3001\u30aa\u30ea\u30b8\u30ca\u30eb\u306e\u30ab\u30e9\u30fc\u30d1\u30ec\u30c3\u30c8 bit-blue \u3092\u5b9a\u7fa9\u3057\u3001bit-blue \u3092\u30d7\u30e9\u30a4\u30de\u30ea\u30fc\u30ab\u30e9\u30fc\u3068\u3057\u3066 brand-primary \u306b\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002
\n\u30ab\u30e9\u30fc\u30d1\u30ec\u30c3\u30c8\u306e\u8272\u306e\u751f\u6210\u306b\u306f\u3001 Material Design Palette Generator<\/a> \u3092\u5229\u7528\u3057\u307e\u3057\u305f\u3002<\/p>\n
\r\n$bit-blue-50: #a2b0e0 !default;\r\n$bit-blue-100: #6880cd !default;\r\n$bit-blue-200: #3f5cbf !default;\r\n$bit-blue-300: #2d4289 !default;\r\n$bit-blue-400: #263772 !default;\r\n$bit-blue-500: #1e2c5b !default;\r\n$bit-blue-600: #162144 !default;\r\n$bit-blue-700: #0f162d !default;\r\n$bit-blue-800: #070b16 !default;\r\n$bit-blue-900: #000000 !default;\r\n$bit-blue-a100: #a2b0e0 !default;\r\n$bit-blue-a200: #6880cd !default;\r\n$bit-blue-a400: #263772 !default;\r\n$bit-blue-a700: #0f162d !default;\r\n$bit-blue: $bit-blue-500 !default;\r\n\r\n$brand-primary: $bit-blue !default;\r\n\r\n@import "bootstrap-material-design\/scss\/core";\r\n<\/pre>\n
CSS\u30d5\u30a1\u30a4\u30eb\u306e\u751f\u6210<\/h2>\n
CSS\u30d5\u30a1\u30a4\u30eb\u306e\u51fa\u529b\u5148\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u3042\u3089\u304b\u3058\u3081\u4f5c\u6210\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n
\r\n$ mkdir dist\r\n<\/pre>\n
\u30ab\u30ec\u30f3\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u30d5\u30a1\u30a4\u30eb\u3001\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u304c\u8a2d\u7f6e\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\r\n.\r\n\u251c\u2500\u2500 bmd.scss\r\n\u251c\u2500\u2500 dist\r\n\u251c\u2500\u2500 gulpfile.js\r\n\u2514\u2500\u2500 node_modules\r\n    \u251c\u2500\u2500 bootstrap-material-design\r\n    \u251c\u2500\u2500 gulp\r\n    \u2514\u2500\u2500 gulp-sass\r\n<\/pre>\n
gulp \u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066CSS \u30d5\u30a1\u30a4\u30eb\u3092\u751f\u6210\u3057\u307e\u3059\u3002<\/p>\n
\r\n$ gulp\r\n<\/pre>\n
dist \u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u4ee5\u4e0b\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3055\u308c\u305f CSS \u30d5\u30a1\u30a4\u30eb(bmd.css)\u304c\u751f\u6210\u3055\u308c\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
Material Design for Bootstrap \u306f\u3001Google\u306e\u30de\u30c6\u30ea\u30a2\u30eb\u30c7\u30b6\u30a4\u30f3\u306e\u6982\u5ff5\u3092\u53d6\u308a\u5165\u308c\u305f Bootstrap \u306e\u30c6\u30fc\u30de\u3067\u3001Bootstrap \u3067\u30de\u30c6\u30ea\u30a2\u30eb\u30c7\u30b6\u30a4\u30f3\u306e\u30c7\u30b6\u30a4\u30f3\u3084\u64cd\u4f5c\u611f\u3092\u5b9f\u73fe\u3059\u308b\u3053\u3068 […]<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[141,77,142,140],"class_list":["post-4081","post","type-post","status-publish","format-standard","hentry","category-tech","tag-bootstrap","tag-css","tag-sass","tag-140"],"_links":{"self":[{"href":"https:\/\/blog.bitmeister.jp\/index.php?rest_route=\/wp\/v2\/posts\/4081","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.bitmeister.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.bitmeister.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.bitmeister.jp\/index.php?rest_route=\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.bitmeister.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4081"}],"version-history":[{"count":26,"href":"https:\/\/blog.bitmeister.jp\/index.php?rest_route=\/wp\/v2\/posts\/4081\/revisions"}],"predecessor-version":[{"id":4108,"href":"https:\/\/blog.bitmeister.jp\/index.php?rest_route=\/wp\/v2\/posts\/4081\/revisions\/4108"}],"wp:attachment":[{"href":"https:\/\/blog.bitmeister.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4081"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.bitmeister.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4081"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.bitmeister.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}