{"id":1042,"date":"2020-02-17T15:09:41","date_gmt":"2020-02-17T06:09:41","guid":{"rendered":"http:\/\/makotohiroshige.com\/pclab\/?page_id=1042"},"modified":"2020-02-17T15:09:41","modified_gmt":"2020-02-17T06:09:41","slug":"bootstrap%e3%82%b0%e3%83%aa%e3%83%83%e3%83%89%e3%82%b7%e3%82%b9%e3%83%86%e3%83%a04-4-1","status":"publish","type":"page","link":"http:\/\/pclab.makotohiroshige.com\/?page_id=1042","title":{"rendered":"Bootstrap:\u30b0\u30ea\u30c3\u30c9\u30b7\u30b9\u30c6\u30e0(4.4.1)"},"content":{"rendered":"<p>\u5370\u5237\u7269\u306e\u7248\u9762\u30c7\u30b6\u30a4\u30f3\u306a\u3069\u3067\u767a\u9054\u3057\u305f\u300c\u30b0\u30ea\u30c3\u30c9\u30b7\u30b9\u30c6\u30e0\u300d\u306f\u3001\u7248\u9762(\u753b\u9762)\u4e0a\u3092\u88dc\u52a9\u7dda\u3067\u683c\u5b50\u72b6\u306b\u5206\u5272\u3057\u3001\u305d\u308c\u306b\u3088\u3063\u3066\u4f5c\u3089\u308c\u305f\u300c\u30b0\u30ea\u30c3\u30c9\u300d\u306b\u8981\u7d20\u3092\u5f53\u3066\u306f\u3081\u3066\u3044\u304f\u3053\u3068\u3067\u3001\u30d0\u30e9\u30f3\u30b9\u306e\u3088\u3044\u914d\u7f6e\u3092\u69cb\u6210\u3059\u308b\u624b\u6cd5\u3067\u3042\u308b\u3002<\/p>\n<p>Bootstrap \u3067\u306f\u3001\u753b\u9762\u3092\u7e26\u306b 12 \u5206\u5272\u3059\u308b\u30b0\u30ea\u30c3\u30c9\u30b7\u30b9\u30c6\u30e0\u3092\u63a1\u7528\u3057\u3066\u3044\u308b\u300212 \u5206\u5272\u3055\u308c\u305f\u533a\u753b\u3092\u6700\u5c0f\u5358\u4f4d\u3068\u3057\u3066\u3001\u305d\u306e 3 \u533a\u753b\u5206\u306e\u5e45\u3068 9 \u533a\u753b\u5206\u306e\u5e45\u306b\u5206\u3051\u308b\u3001\u306a\u3069\u3068\u3057\u3066\u4f7f\u3046\u3053\u3068\u306b\u3088\u308a\u3001\u5b89\u5b9a\u3057\u305f\u30c7\u30b6\u30a4\u30f3\u3092\u3059\u3070\u3084\u304f\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u308b\u3002<\/p>\n<p><img decoding=\"async\" style=\"margin-left:auto;margin-right:auto\" src=\"http:\/\/pclab.makotohiroshige.com\/wp-content\/uploads\/sites\/9\/2016\/02\/bootstrap-grid01-1.gif\" alt=\"Bootstrap grid01\" title=\"bootstrap-grid01.gif\" border=\"0\" \/><\/p>\n<p>Bootstrap \u306e\u30b0\u30ea\u30c3\u30c9\u30b7\u30b9\u30c6\u30e0\u306f\u5165\u308c\u5b50(\u30cd\u30b9\u30c8)\u306b\u3067\u304d\u308b\u3002\u5185\u5074\u306e\u30b0\u30ea\u30c3\u30c9\u30b7\u30b9\u30c6\u30e0\u306f\u3001\u305d\u306e\u5185\u5074\u306e\u5168\u4f53\u306e\u5e45\u3092\u518d\u5ea6 12 \u7b49\u5206\u3059\u308b\u30b0\u30ea\u30c3\u30c9\u30b7\u30b9\u30c6\u30e0\u3068\u306a\u308b\u3002<\/p>\n<p><img decoding=\"async\" style=\"margin-left:auto;margin-right:auto\" src=\"http:\/\/pclab.makotohiroshige.com\/wp-content\/uploads\/sites\/9\/2016\/02\/bootstrap-grid02-1.gif\" alt=\"Bootstrap grid02\" title=\"bootstrap-grid02.gif\" border=\"0\" \/><\/p>\n<h3>\u5168\u4f53\u3092\u3000&lt;div class=&#8221;container&#8221;&gt; \u3067\u56f2\u3080<\/h3>\n<p>Bootstrap \u3067\u30b0\u30ea\u30c3\u30c9\u30b7\u30b9\u30c6\u30e0\u3092\u4f7f\u3046\u3068\u304d\u306b\u306f\u3001\u305d\u306e\u5168\u4f53\u3092&lt;div class=&#8221;container&#8221;&gt; \u3067\u56f2\u3080\u3002<\/p>\n<pre>\n&lt;div class=\"container\"&gt;\n ...\n \u5185\u5bb9\n ...\n&lt;\/div&gt;\n<\/pre>\n<p>container-fluid \u3068\u3044\u3046\u30af\u30e9\u30b9\u3082\u3042\u308b\u3002<\/p>\n<h3>\u884c\u306f &lt;div class=&#8221;row&#8221;&gt; \u3067\u56f2\u3080<\/h3>\n<p>\u6a2a\u65b9\u5411\u306b\u4e26\u3079\u3066\u300c\u884c\u300d\u3092\u5f62\u4f5c\u3089\u305b\u305f\u3044\u3082\u306e\u306f &lt;div class=&#8221;row&#8221;&gt; \u3067\u56f2\u3080\u3002\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u5bfe\u5fdc\u3067\u3042\u308b\u305f\u3081\u3001\u8a2d\u5b9a\u306b\u3088\u3063\u3066\u306f\u3001\u6a2a\u5e45\u304c\u5e83\u3044\u3068\u304d\u306b\u306f\u6a2a\u306b\u4e26\u3093\u3067\u884c\u3092\u5f62\u6210\u3059\u308b\u304c\u3001\u6a2a\u5e45\u304c\u72ed\u3044\u3068\u304d\u306b\u306f\u9806\u6b21\u4e0b\u306b\u843d\u3061\u3066\u3001\u7e26\u306b\u4e26\u3076\u914d\u7f6e\u306b\u306a\u308b\u3053\u3068\u3082\u3042\u308b\u3002<\/p>\n<pre>\n&lt;div class=\"container\"&gt;\n &lt;div class=\"row\"&gt;\n   ...\n   \u884c\u3068\u306a\u308b\u5185\u5bb9\n   ...\n &lt;\/div&gt;\n &lt;div class=\"row\"&gt;\n   ...\n   \u884c\u3068\u306a\u308b\u5185\u5bb9\n   ...\n &lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre>\n<p>div \u4ee5\u5916\u306e\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u8981\u7d20\u306b row \u30af\u30e9\u30b9\u3092\u6307\u5b9a\u3057\u3066\u7528\u3044\u308b\u3053\u3068\u3082\u3067\u304d\u308b\u3002\u4f8b: main \u306a\u3069\u3002<\/p>\n<h3>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u306e\u30d6\u30ec\u30fc\u30af\u30dd\u30a4\u30f3\u30c8<\/h3>\n<p>\u753b\u9762\u306e\u6a2a\u5e45\u306b\u5fdc\u3058\u3066 5 \u7a2e\u985e\u306e\u30af\u30e9\u30b9\u3092\u4f7f\u3044\u5206\u3051\u3066\u6307\u5b9a\u3059\u308b\u3002<\/p>\n<ul>\n<li>0px \u4ee5\u4e0a\u306b\u9069\u7528\u3000: Extra Small : col-N<\/li>\n<li>576px \u4ee5\u4e0a\u306b\u9069\u7528\u3000: Small : col-sm-N<\/li>\n<li>768px \u4ee5\u4e0a\u306b\u9069\u7528\u3000: Medium : col-md-N<\/li>\n<li>992px \u4ee5\u4e0a\u306b\u9069\u7528\u3000: Large : col-lg-N<\/li>\n<li>1200px \u4ee5\u4e0a\u306b\u9069\u7528\u3000: Large : col-xl-N<\/li>\n<\/ul>\n<p>N \u306b\u306f 1 \u301c 12 \u306e\u6570\u5b57\u304c\u5165\u308a\u3001N \u533a\u753b\u5206\u306e\u5e45\u3092\u3082\u3064\u3053\u3068\u3092\u610f\u5473\u3059\u308b\u3002<\/p>\n<p>\u4f8b: \u753b\u9762\u5e45\u304c Extra small \u306e\u6761\u4ef6\u306b\u9069\u5408\u3059\u308b\u5834\u5408\u306f 4 \u533a\u753b\u5206 \u3092\u5360\u3081\u306a\u3055\u3044 = col-4<\/p>\n<p>ver.4 \u3067\u306f\u3001\u30e2\u30d0\u30a4\u30eb\u30d5\u30a1\u30fc\u30b9\u30c8\u306e\u89b3\u70b9\u304b\u3089 Extra small \u306b\u3064\u3044\u3066\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u304c\u3053\u308c\u3067\u3042\u308b\u3068\u3057\u3066\u7c21\u7565\u306a\u8a18\u8ff0\u306b\u306a\u3063\u305f\u3002<\/p>\n<p>\u3053\u308c\u3089\u306e\u30af\u30e9\u30b9\u3092\u8907\u6570\u6307\u5b9a\u3059\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u3001\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306a\u52d5\u4f5c\u3092\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3002<\/p>\n<pre>\n&lt;div class=\"col-12 col-sm-4\"&gt;\n<\/pre>\n<p>\u610f\u5473:<\/p>\n<ul>\n<li>\u753b\u9762\u306e\u5e45\u304c 0px\u301c576px \u306e\u3068\u304d\u306f\u300112 \u533a\u753b\u5206\u3092\u5360\u3081\u306a\u3055\u3044\u3002<\/li>\n<li>\u753b\u9762\u306e\u5e45\u304c 576px \u4ee5\u4e0a\u306e\u3068\u304d\u306f\u30014 \u533a\u753b\u5206\u3092\u5360\u3081\u306a\u3055\u3044\u3002<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u5370\u5237\u7269\u306e\u7248\u9762\u30c7\u30b6\u30a4\u30f3\u306a\u3069\u3067\u767a\u9054\u3057\u305f\u300c\u30b0\u30ea\u30c3\u30c9\u30b7\u30b9\u30c6\u30e0\u300d\u306f\u3001\u7248\u9762(\u753b\u9762)\u4e0a\u3092\u88dc\u52a9\u7dda\u3067\u683c\u5b50\u72b6\u306b\u5206\u5272\u3057\u3001\u305d\u308c\u306b\u3088\u3063\u3066\u4f5c\u3089\u308c\u305f\u300c\u30b0\u30ea\u30c3\u30c9\u300d\u306b\u8981\u7d20\u3092\u5f53\u3066\u306f\u3081\u3066\u3044\u304f\u3053\u3068\u3067\u3001\u30d0\u30e9\u30f3\u30b9\u306e\u3088\u3044\u914d\u7f6e\u3092\u69cb\u6210\u3059\u308b\u624b\u6cd5\u3067\u3042\u308b\u3002 Bootstrap [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":739,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1042","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/pclab.makotohiroshige.com\/index.php?rest_route=\/wp\/v2\/pages\/1042","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/pclab.makotohiroshige.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/pclab.makotohiroshige.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/pclab.makotohiroshige.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/pclab.makotohiroshige.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1042"}],"version-history":[{"count":0,"href":"http:\/\/pclab.makotohiroshige.com\/index.php?rest_route=\/wp\/v2\/pages\/1042\/revisions"}],"up":[{"embeddable":true,"href":"http:\/\/pclab.makotohiroshige.com\/index.php?rest_route=\/wp\/v2\/pages\/739"}],"wp:attachment":[{"href":"http:\/\/pclab.makotohiroshige.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}