{"id":23172,"date":"2026-11-01T23:51:58","date_gmt":"2026-11-01T14:51:58","guid":{"rendered":"https:\/\/cg-method.com\/figma\/?p=23172"},"modified":"2026-11-02T00:57:41","modified_gmt":"2026-11-01T15:57:41","slug":"figma-layout-grid","status":"publish","type":"post","link":"https:\/\/cg-method.com\/figma\/figma-layout-grid\/","title":{"rendered":"Figma\u306e\u30b0\u30ea\u30c3\u30c9\u306e\u4f7f\u3044\u65b9\uff5c\u8868\u793a\u30fb\u975e\u8868\u793a\u306812\u5217\u30fb\u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u7d50\u8ad6\u304b\u3089\u66f8\u304f\u3068\u3001Figma\u306e\u30b0\u30ea\u30c3\u30c9\u306f\u30d5\u30ec\u30fc\u30e0\u306e\u53f3\u30d1\u30cd\u30eb\u306e\u300c\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u300d\u304b\u3089\u8ffd\u52a0\u3067\u304d\u3001\u8868\u793a\u3068\u975e\u8868\u793a\u306fShift+G\u3067\u5207\u308a\u66ff\u3048\u3089\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Figma\u3067\u300c\u30b0\u30ea\u30c3\u30c9\u300d\u3068\u547c\u3070\u308c\u308b\u6a5f\u80fd\u306f2\u3064\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1\u3064\u306f\u30d5\u30ec\u30fc\u30e0\u306b\u5f15\u304f\u88dc\u52a9\u7dda\u306e\u300c\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u300d\uff082025\u5e745\u6708\u307e\u3067\u306e\u540d\u524d\u306f\u30ec\u30a4\u30a2\u30a6\u30c8\u30b0\u30ea\u30c3\u30c9\uff09\u3067\u3001\u3082\u30461\u3064\u306f\u5b50\u306e\u8981\u7d20\u3092\u884c\u3068\u5217\u306b\u4e26\u3079\u308b\u30aa\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u300c\u30b0\u30ea\u30c3\u30c9\u300d\u3067\u3059\u3002<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5217\u306e\u76ee\u5b89\u7dda\u3092\u5f15\u3044\u3066\u8981\u7d20\u3092\u305d\u308d\u3048\u305f\u3044\u306a\u3089\u524d\u8005\u3001\u30ab\u30fc\u30c9\u30922\u5217\u30843\u5217\u306b\u81ea\u52d5\u3067\u4e26\u3079\u305f\u3044\u306a\u3089\u5f8c\u8005\u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u306f\u30d5\u30ec\u30fc\u30e0\u3092\u9078\u3073\u3001\u53f3\u30d1\u30cd\u30eb\u306e\u300c\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u300d\u306e\uff0b\u3067\u8db3\u3057\u3001Shift+G\u3067\u5168\u4f53\u306e\u8868\u793a\u3068\u975e\u8868\u793a\u3092\u5207\u308a\u66ff\u3048\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>\u78ba\u8a8d\u65e5\uff1a2026\u5e7411\u67081\u65e5\uff08\u7121\u6599\u306e\u30b9\u30bf\u30fc\u30bf\u30fc\u30d7\u30e9\u30f3\uff09\u306811\u67082\u65e5\uff08\u6709\u6599\u306e\u6559\u80b2\u30d7\u30e9\u30f3\uff09\u3002\u516c\u5f0f\u30d8\u30eb\u30d7\u306e\u8a18\u8f09\u306f11\u67081\u65e5\u306b\u8aad\u3093\u3060\u3082\u306e\u3067\u3059<\/li>\n\n\n<li>\u898b\u305f\u3082\u306e\uff1a\u516c\u5f0f\u30d8\u30eb\u30d7\u300c\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u3092\u4f5c\u6210\u300d\u300c\u30b0\u30ea\u30c3\u30c9\u30aa\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u30d5\u30ed\u30fc\u3092\u4f7f\u7528\u3059\u308b\u300d\uff08\u65e5\u672c\u8a9e\u7248\u3068\u82f1\u8a9e\u7248\uff09<\/li>\n\n\n<li>\u5b9f\u6a5f\u3067\u78ba\u304b\u3081\u305f\u3053\u3068\uff1aFigma\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea126.10.13\uff08\u65e5\u672c\u8a9e\u8868\u793a\uff09\u3001Windows 11 Pro\u3001\u7121\u6599\u306e\u30b9\u30bf\u30fc\u30bf\u30fc\u30d7\u30e9\u30f3\u3067\u3001\u7df4\u7fd2\u7528\u306e\u30d5\u30a1\u30a4\u30eb\u306b1440\u00d71024\u306e\u30d5\u30ec\u30fc\u30e0\u3092\u4f5c\u308a\u300112\u5217\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u30fb\u8868\u793a\u306e\u5207\u308a\u66ff\u3048\u30fb\u30b9\u30bf\u30a4\u30eb\u5316\u30fb\u30aa\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u30b0\u30ea\u30c3\u30c9\u30fbCSS\u3068\u3057\u3066\u30b3\u30d4\u30fc\u3092\u8a66\u3057\u307e\u3057\u305f<\/li>\n\n\n<li>\u6709\u6599\u30d7\u30e9\u30f3\u3067\u78ba\u304b\u3081\u305f\u3053\u3068\uff1a\u6559\u80b2\u30d7\u30e9\u30f3\u306e\u30a2\u30ab\u30a6\u30f3\u30c8\u3067\u3001\u30aa\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u30b0\u30ea\u30c3\u30c9\u306e\u30d5\u30ec\u30fc\u30e0\u3092Dev Mode\u3067\u958b\u304d\u3001\u51fa\u3066\u304f\u308bCSS\u3092\u898b\u307e\u3057\u305f<\/li>\n\n\n<li>\u78ba\u304b\u3081\u3066\u3044\u306a\u3044\u3053\u3068\uff1a\u884c\u306e\u30ac\u30a4\u30c9\u306e\u8a73\u3057\u3044\u8a2d\u5b9a\u3001\u56de\u8ee2\u3057\u305f\u30d5\u30ec\u30fc\u30e0\u3001\u30ac\u30a4\u30c9\u306e\u30b3\u30d4\u30fc\u3068\u8cbc\u308a\u4ed8\u3051\u3001\u30c1\u30fc\u30e0\u30e9\u30a4\u30d6\u30e9\u30ea\u3078\u306e\u516c\u958b\u3001\u30d6\u30e9\u30a6\u30b6\u30fc\u7248\u3001macOS<\/li>\n\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u6700\u77ed\u306e\u624b\u9806\u3068\u65e9\u898b\u8868<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">12\u5217\u306e\u30ac\u30a4\u30c9\u3092\u5f15\u3044\u3066\u3001\u8981\u7d20\u3092\u5217\u306b\u305d\u308d\u3048\u308b\u307e\u3067\u306e\u6700\u77ed\u306e\u624b\u9806\u3067\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n\n<li>\u30d5\u30ec\u30fc\u30e0\u30c4\u30fc\u30eb\u3067\u3001\u53f3\u30d1\u30cd\u30eb\u306e\u30d7\u30ea\u30bb\u30c3\u30c8\u304b\u3089\u300c\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u300d\uff081440\u00d71024\uff09\u306a\u3069\u306e\u30d5\u30ec\u30fc\u30e0\u3092\u4f5c\u308b<\/li>\n\n\n<li>\u30d5\u30ec\u30fc\u30e0\u3092\u9078\u3093\u3060\u307e\u307e\u3001\u53f3\u30d1\u30cd\u30eb\u306e\u300c\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u300d\u306e\uff0b\u3092\u62bc\u3059<\/li>\n\n\n<li>\u8ffd\u52a0\u3055\u308c\u305f\u300c\u30b0\u30ea\u30c3\u30c910px\u300d\u306e\u5de6\u306e\u30a2\u30a4\u30b3\u30f3\u3092\u62bc\u3057\u3001\u8a2d\u5b9a\u306e\u7a93\u306e\u5de6\u4e0a\u306e\u300c\u30b0\u30ea\u30c3\u30c9\u300d\u3092\u300c\u5217\u300d\u306b\u5909\u3048\u308b<\/li>\n\n\n<li>\u6570\u309212\u3001\u7a2e\u985e\u3092\u30b9\u30c8\u30ec\u30c3\u30c1\u3001\u4f59\u767d\u3092120\u3001\u30ac\u30bf\u30fc\u309224\u306b\u3059\u308b<\/li>\n\n\n<li>\u9577\u65b9\u5f62\u30c4\u30fc\u30eb\uff08R\u30ad\u30fc\uff09\u3067\u5217\u306e\u7aef\u306e\u8fd1\u304f\u307e\u3067\u30c9\u30e9\u30c3\u30b0\u3059\u308b\u3068\u3001\u5217\u306e\u7aef\u306b\u30b9\u30ca\u30c3\u30d7\u3059\u308b<\/li>\n\n\n<li>\u30ac\u30a4\u30c9\u3092\u6d88\u3057\u305f\u3044\u3068\u304d\u306fShift+G\u3067\u5168\u4f53\u3092\u96a0\u3059<\/li>\n\n<\/ol>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table class=\"has-fixed-layout\"><thead><tr><th style=\"min-width:8em !important\">\u3084\u308a\u305f\u3044\u3053\u3068<\/th><th>\u307e\u305a\u8a66\u3059<\/th><th>\u3060\u3081\u306a\u3068\u304d\u306e\u6b21\u306e\u4e00\u624b<\/th><\/tr><\/thead><tbody><tr><td>12\u5217\u306e\u76ee\u5b89\u7dda\u3092\u5f15\u304f<\/td><td>\u30d5\u30ec\u30fc\u30e0\u3092\u9078\u3073\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u306e\uff0b\u304b\u3089\u5217\u306b\u5909\u3048\u3066\u6570\u309212\u306b\u3059\u308b<\/td><td>\u9078\u3093\u3067\u3044\u308b\u306e\u304c\u30d5\u30ec\u30fc\u30e0\u304b\u78ba\u304b\u3081\u308b\uff08\u9577\u65b9\u5f62\u306b\u306f\u6b04\u304c\u7121\u3044\uff09<\/td><\/tr><tr><td>\u30ac\u30a4\u30c9\u3092\u4e00\u6642\u7684\u306b\u96a0\u3059<\/td><td>Shift+G\u3067\u5168\u90e8\u3092\u96a0\u3059<\/td><td>\u53f3\u4e0a\u306e\u500d\u7387\u306e\u30e1\u30cb\u30e5\u30fc\u3067\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u306e\u30c1\u30a7\u30c3\u30af\u3092\u5916\u3059<\/td><\/tr><tr><td>1\u3064\u306e\u30ac\u30a4\u30c9\u3060\u3051\u96a0\u3059<\/td><td>\u30ac\u30a4\u30c9\u306e\u884c\u306e\u76ee\u306e\u30a2\u30a4\u30b3\u30f3\u3092\u62bc\u3059<\/td><td>\u76ee\u306e\u30a2\u30a4\u30b3\u30f3\u304c\u9589\u3058\u3066\u3044\u308b\u304b\u78ba\u304b\u3081\u308b<\/td><\/tr><tr><td>\u540c\u3058\u30ac\u30a4\u30c9\u3092\u5225\u306e\u30d5\u30ec\u30fc\u30e0\u3067\u3082\u4f7f\u3046<\/td><td>4\u3064\u306e\u70b9\u306e\u30a2\u30a4\u30b3\u30f3\u304b\u3089\u30b9\u30bf\u30a4\u30eb\u3092\u4f5c\u308b<\/td><td>\u516c\u5f0f\u30d8\u30eb\u30d7\u306e\u624b\u9806\u3067\u30ac\u30a4\u30c9\u3092\u30b3\u30d4\u30fc\u3057\u3066\u8cbc\u308a\u4ed8\u3051\u308b<\/td><\/tr><tr><td>\u30ab\u30fc\u30c9\u3092\u884c\u3068\u5217\u306b\u81ea\u52d5\u3067\u4e26\u3079\u308b<\/td><td>\u8981\u7d20\u3092\u9078\u3093\u3067Shift+A\u3067\u30aa\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u306b\u3057\u3001\u30d5\u30ed\u30fc\u3092\u30b0\u30ea\u30c3\u30c9\u306b\u3059\u308b<\/td><td>\u5b50\u306e\u5e45\u3068\u9ad8\u3055\u3092\u300c\u30b3\u30f3\u30c6\u30ca\u306b\u5408\u308f\u305b\u3066\u62e1\u5927\u300d\u306b\u3059\u308b<\/td><\/tr><tr><td>\u30ab\u30fc\u30c9\u30922\u5217\u5206\u306b\u307e\u305f\u304c\u3089\u305b\u308b<\/td><td>\u5b50\u3092\u9078\u3093\u3067\u5217\u30b9\u30d1\u30f3\u30922\u306b\u3059\u308b<\/td><td>\u5b50\u306e\u5e45\u304c\u56fa\u5b9a\u306e\u307e\u307e\u306a\u3089\u62e1\u5927\u306b\u5909\u3048\u308b<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">2\u3064\u306e\u30b0\u30ea\u30c3\u30c9\u306e\u9055\u3044<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u516c\u5f0f\u30d8\u30eb\u30d7\u300c<a href=\"https:\/\/help.figma.com\/hc\/ja\/articles\/360040450513\">\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u3092\u4f5c\u6210<\/a>\u300d\u306e\u5192\u982d\u306b\u306f\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u30b0\u30ea\u30c3\u30c9\u306f2025\u5e745\u6708\u306b\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u3078\u540d\u524d\u304c\u5909\u308f\u308a\u3001\u30aa\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u30b0\u30ea\u30c3\u30c9\u3068\u306f\u5225\u306e\u6a5f\u80fd\u3060\u3068\u66f8\u304b\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u753b\u9762\u3067\u3082\u3001\u53f3\u30d1\u30cd\u30eb\u306e\u6b04\u306e\u540d\u524d\u306f\u300c\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u300d\u3067\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u305f\u3060\u3057\u3001Shift+G\u3067\u96a0\u3057\u305f\u3068\u304d\u306b\u753b\u9762\u306e\u4e0b\u306b\u51fa\u305f\u901a\u77e5\u306f\u300c\u30ec\u30a4\u30a2\u30a6\u30c8\u30b0\u30ea\u30c3\u30c9\u304c\u975e\u8868\u793a\u306b\u306a\u308a\u307e\u3057\u305f\u300d\u3067\u3001\u53e4\u3044\u540d\u524d\u304c\u6b8b\u3063\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table class=\"has-fixed-layout\"><thead><tr><th style=\"min-width:8em !important\"><\/th><th>\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9<\/th><th>\u30aa\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u30b0\u30ea\u30c3\u30c9<\/th><\/tr><\/thead><tbody><tr><td>\u5f79\u5272<\/td><td>\u30d5\u30ec\u30fc\u30e0\u306b\u5f15\u304f\u88dc\u52a9\u7dda<\/td><td>\u5b50\u306e\u8981\u7d20\u3092\u884c\u3068\u5217\u306e\u30bb\u30eb\u306b\u4e26\u3079\u308b<\/td><\/tr><tr><td>\u8981\u7d20\u3092\u52d5\u304b\u3059\u304b<\/td><td>\u52d5\u304b\u3055\u306a\u3044\uff08\u30b9\u30ca\u30c3\u30d7\u306e\u76ee\u5b89\u306b\u306a\u308b\u3060\u3051\uff09<\/td><td>\u30bb\u30eb\u306b\u5408\u308f\u305b\u3066\u4e26\u3079\u76f4\u3059<\/td><\/tr><tr><td>\u7a2e\u985e<\/td><td>\u30b0\u30ea\u30c3\u30c9\uff08\u6b63\u65b9\u5f62\uff09\u30fb\u5217\u30fb\u884c<\/td><td>\u5217\u306e\u6570\u00d7\u884c\u306e\u6570<\/td><\/tr><tr><td>\u66f8\u304d\u51fa\u3057\u3084\u8868\u793a<\/td><td>Shift+G\u3067\u96a0\u305b\u308b\u3002\u96a0\u3057\u3066\u3082\u30b9\u30ca\u30c3\u30d7\u306f\u52b9\u304f\uff08\u516c\u5f0f\u30d8\u30eb\u30d7\uff09<\/td><td>\u30d5\u30ec\u30fc\u30e0\u305d\u306e\u3082\u306e\u306e\u4e26\u3073\u65b9\u306a\u306e\u3067\u96a0\u3059\u8a2d\u5b9a\u306f\u7121\u3044<\/td><\/tr><tr><td>\u5411\u3044\u3066\u3044\u308b\u4f7f\u3044\u65b9<\/td><td>\u753b\u9762\u5168\u4f53\u306e12\u5217\u3001\u30a2\u30a4\u30b3\u30f3\u306e8px\u306e\u65b9\u773c<\/td><td>\u30ab\u30fc\u30c9\u306e\u4e00\u89a7\u3001\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u3001\u5927\u5c0f\u306e\u30bf\u30a4\u30eb\u3092\u7d44\u307f\u5408\u308f\u305b\u305f\u914d\u7f6e<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">8\u306e\u500d\u6570\u3067\u4f59\u767d\u3092\u305d\u308d\u3048\u308b\u8003\u3048\u65b9\u306f\u3001<a href=\"https:\/\/cg-method.com\/figma\/ui-multiples-8\/\">8\u306e\u500d\u6570\u4e00\u89a7\u30688\u30dd\u30a4\u30f3\u30c8\u30b0\u30ea\u30c3\u30c9<\/a>\u306b\u307e\u3068\u3081\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u3092\u8ffd\u52a0\u3059\u308b<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u3092\u4ed8\u3051\u3089\u308c\u308b\u306e\u306f\u30d5\u30ec\u30fc\u30e0\u3060\u3051\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d5\u30ec\u30fc\u30e0\u3092\u9078\u3076\u3068\u3001\u53f3\u30d1\u30cd\u30eb\u306e\u4e0b\u306e\u307b\u3046\u306b\u300c\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u300d\u306e\u6b04\u304c\u51fa\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u9577\u65b9\u5f62\u3092\u9078\u3093\u3060\u3068\u304d\u306f\u3001\u3053\u306e\u6b04\u305d\u306e\u3082\u306e\u304c\u51fa\u307e\u305b\u3093\u3067\u3057\u305f\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n\n<li>\u30d5\u30ec\u30fc\u30e0\u3092\u9078\u3076<\/li>\n\n\n<li>\u53f3\u30d1\u30cd\u30eb\u306e\u300c\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u300d\u306e\u53f3\u306e\uff0b\u3092\u62bc\u3059\uff08\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u306f\u300c\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u3092\u8ffd\u52a0\u300d\uff09<\/li>\n\n\n<li>\u300c\u30b0\u30ea\u30c3\u30c910px\u300d\u304c\u8ffd\u52a0\u3055\u308c\u3001\u8a2d\u5b9a\u306e\u7a93\u304c\u958b\u304f<\/li>\n\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u8ffd\u52a0\u3057\u305f\u76f4\u5f8c\u306e\u30ac\u30a4\u30c9\u306f\u300110px\u306e\u6b63\u65b9\u5f62\u306e\u30b0\u30ea\u30c3\u30c9\u3067\u3001\u8272\u306fFF0000\uff08\u8d64\uff09\u306e\u4e0d\u900f\u660e\u5ea610%\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u516c\u5f0f\u30d8\u30eb\u30d7\u306e\u65e2\u5b9a\u5024\uff08\u8d64\u30fb10%\u30fb10pt\uff09\u3068\u540c\u3058\u3067\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\uff0b\u30922\u56de\u62bc\u3059\u3068\u30ac\u30a4\u30c9\u304c2\u3064\u5897\u3048\u308b<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\uff0b\u306f1\u56de\u76ee\u306e\u62bc\u4e0b\u3067\u4f55\u3082\u8d77\u304d\u306a\u3044\u3088\u3046\u306b\u898b\u3048\u305f\u306e\u30672\u56de\u62bc\u3057\u305f\u3068\u3053\u308d\u3001\u30ac\u30a4\u30c9\u304c2\u3064\u8db3\u3055\u308c\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u8981\u3089\u306a\u3044\u307b\u3046\u306f\u884c\u306e\u53f3\u306e\u2212\u3067\u5916\u305b\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7a2e\u985e\u306f\u300c\u30b0\u30ea\u30c3\u30c9\u300d\u300c\u5217\u300d\u300c\u884c\u300d\u306e3\u3064<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u8a2d\u5b9a\u306e\u7a93\u306e\u5de6\u4e0a\u306e\u300c\u30b0\u30ea\u30c3\u30c9\u300d\u3092\u62bc\u3059\u3068\u3001\u30b0\u30ea\u30c3\u30c9\u30fb\u5217\u30fb\u884c\u306e3\u3064\u304b\u3089\u9078\u3079\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b0\u30ea\u30c3\u30c9\u3092\u9078\u3093\u3060\u3068\u304d\u306e\u9805\u76ee\u306f\u30b5\u30a4\u30ba\u3068\u8272\u306e2\u3064\u3060\u3051\u3067\u3001\u30b5\u30a4\u30ba\u30928\u306b\u3059\u308b\u30688px\u306e\u65b9\u773c\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30a2\u30a4\u30b3\u30f3\u306e\u3088\u3046\u306b\u7d30\u304b\u304f\u305d\u308d\u3048\u305f\u3044\u7269\u306f\u30b0\u30ea\u30c3\u30c9\u3001\u753b\u9762\u306e\u6bb5\u7d44\u307f\u306f\u5217\u304b\u884c\u3001\u3068\u4f7f\u3044\u5206\u3051\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">12\u5217\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f5c\u308b<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u7a2e\u985e\u3092\u300c\u5217\u300d\u306b\u3057\u305f\u3068\u304d\u306e\u521d\u671f\u5024\u306f\u3001\u65705\u3001\u8272FF0000\u306e10%\u3001\u7a2e\u985e\u30b9\u30c8\u30ec\u30c3\u30c1\u3001\u5e45\u306f\u81ea\u52d5\u3001\u4f59\u767d0\u3001\u30ac\u30bf\u30fc20\u3067\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u306f1440px\u306e\u30d5\u30ec\u30fc\u30e0\u306b\u3001\u657012\u30fb\u4f59\u767d120\u30fb\u30ac\u30bf\u30fc24\u3092\u5165\u308c\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u306e\u5024\u3060\u3068\u30011440\u304b\u3089\u4e21\u5074\u306e\u4f59\u767d240\u3068\u30ac\u30bf\u30fc11\u672c\u5206\u306e264\u3092\u5f15\u3044\u305f936px\u309212\u3067\u5272\u308a\u30011\u5217\u306f78px\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b04\u306e\u53f3\u306e\u884c\u306e\u8868\u793a\u306f\u300c5\u5217\u300d\u304b\u3089\u300c12\u5217\u300d\u306b\u5909\u308f\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-border\"><img decoding=\"async\" width=\"1200\" height=\"682\" src=\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-12-columns.jpg\" alt=\"1440\u00d71024\u306e\u30d5\u30ec\u30fc\u30e0\u306b12\u5217\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u3002\u8a2d\u5b9a\u306e\u7a93\u306f\u7a2e\u985e\u304c\u5217\u3001\u657012\u3001\u8272FF0000\u306e10%\u3001\u7a2e\u985e\u30b9\u30c8\u30ec\u30c3\u30c1\u3001\u5e45\u306f\u81ea\u52d5\u3001\u4f59\u767d120\u3001\u30ac\u30bf\u30fc24\" class=\"wp-image-23175\" srcset=\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-12-columns.jpg 1200w, https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-12-columns-300x171.jpg 300w, https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-12-columns-1024x582.jpg 1024w, https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-12-columns-768x436.jpg 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><figcaption class=\"wp-element-caption\">2026-11-01 \u64ae\u5f71\u3002Figma\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea126.10.13\uff08\u65e5\u672c\u8a9e\u8868\u793a\uff09\u3001\u7121\u6599\u306e\u30b9\u30bf\u30fc\u30bf\u30fc\u30d7\u30e9\u30f3\u3001Windows 11\u3002\u53f3\u30d1\u30cd\u30eb\u306e\u300c\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u300d\u3067\u5217\u309212\u30fb\u4f59\u767d120\u30fb\u30ac\u30bf\u30fc24\u306b\u3057\u305f\u753b\u9762<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u7a2e\u985e\uff08\u5de6\u30fb\u53f3\u30fb\u4e2d\u592e\u30fb\u30b9\u30c8\u30ec\u30c3\u30c1\uff09\u306e\u9055\u3044<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u7a2e\u985e\u306e\u4e00\u89a7\u306b\u306f\u3001\u5de6\u30fb\u53f3\u30fb\u4e2d\u592e\u30fb\u30b9\u30c8\u30ec\u30c3\u30c1\u306e4\u3064\u304c\u3042\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table class=\"has-fixed-layout\"><thead><tr><th style=\"min-width:8em !important\">\u7a2e\u985e<\/th><th>\u8a2d\u5b9a\u3067\u304d\u308b\u9805\u76ee<\/th><th>\u30d5\u30ec\u30fc\u30e0\u306e\u5e45\u3092\u5909\u3048\u305f\u3068\u304d<\/th><\/tr><\/thead><tbody><tr><td>\u30b9\u30c8\u30ec\u30c3\u30c1<\/td><td>\u6570\u30fb\u4f59\u767d\u30fb\u30ac\u30bf\u30fc\uff08\u5e45\u306f\u81ea\u52d5\u3067\u7070\u8272\uff09<\/td><td>\u5217\u306e\u5e45\u304c\u4f38\u3073\u7e2e\u307f\u3057\u3001\u4f59\u767d\u306f\u5909\u308f\u3089\u306a\u3044<\/td><\/tr><tr><td>\u4e2d\u592e<\/td><td>\u6570\u30fb\u5e45\u30fb\u30ac\u30bf\u30fc\uff08\u30aa\u30d5\u30bb\u30c3\u30c8\u306f\u7070\u8272\uff09<\/td><td>\u5217\u306e\u5e45\u306f\u5909\u308f\u3089\u305a\u3001\u5217\u306e\u675f\u304c\u4e2d\u592e\u306b\u5bc4\u308b<\/td><\/tr><tr><td>\u5de6\u30fb\u53f3<\/td><td>\u6570\u30fb\u5e45\u30fb\u30aa\u30d5\u30bb\u30c3\u30c8\u30fb\u30ac\u30bf\u30fc\uff08\u516c\u5f0f\u30d8\u30eb\u30d7\uff09<\/td><td>\u5217\u306e\u5e45\u306f\u5909\u308f\u3089\u305a\u3001\u5de6\u7aef\u304b\u53f3\u7aef\u304b\u3089\u4e26\u3076<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>\u4e2d\u592e\u306b\u5207\u308a\u66ff\u3048\u305f\u76f4\u5f8c\uff1a\u5e45\u306e\u6b04\u304c10\u306b\u306a\u308a\u3001\u7d30\u3044\u5217\u304c\u4e2d\u592e\u306b\u96c6\u307e\u308b<\/li>\n\n\n<li>\u5e45\u309272\u306b\u3057\u305f\u5f8c\uff1a\u6b04\u306e\u884c\u306e\u8868\u793a\u304c\u300c12\u5217(72\u30d4\u30af\u30bb\u30eb)\u300d\u306b\u306a\u308b<\/li>\n\n\n<li>\u5de6\u3068\u53f3\uff1a\u4e00\u89a7\u3067\u78ba\u304b\u3081\u305f\u3060\u3051\u3067\u3001\u8a2d\u5b9a\u306f\u5909\u3048\u3066\u3044\u306a\u3044<\/li>\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u8981\u7d20\u3092\u5217\u306b\u30b9\u30ca\u30c3\u30d7\u3055\u305b\u308b<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u9577\u65b9\u5f62\u30c4\u30fc\u30eb\u3067\u30011\u5217\u76ee\u306e\u5de6\u7aef\u306e\u8fd1\u304f\u304b\u30894\u5217\u76ee\u306e\u53f3\u7aef\u306e\u8fd1\u304f\u307e\u3067\u30c9\u30e9\u30c3\u30b0\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5de6\u7aef\u306f\u5217\u306e\u59cb\u307e\u308a\u306b\u5438\u3044\u4ed8\u3044\u3066X=120\u306b\u306a\u308a\u307e\u3057\u305f\u304c\u3001\u53f3\u7aef\u306f\u5c11\u3057\u624b\u524d\u3067\u96e2\u3057\u305f\u306e\u3067W=379\u3067\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u53f3\u7aef\u306e\u56db\u89d2\u3044\u30cf\u30f3\u30c9\u30eb\u3092\u5217\u306e\u7aef\u306b\u5411\u3051\u3066\u5c11\u3057\u3060\u3051\u52d5\u304b\u3059\u3068\u3001W=384\uff084\u5217\u30683\u672c\u306e\u30ac\u30bf\u30fc\uff09\u306b\u5438\u3044\u4ed8\u304d\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table class=\"has-fixed-layout\"><thead><tr><th style=\"min-width:8em !important\">\u63cf\u3044\u305f\u9577\u65b9\u5f62<\/th><th>X<\/th><th>W<\/th><\/tr><\/thead><tbody><tr><td>1\u301c4\u5217\u76ee<\/td><td>120<\/td><td>384<\/td><\/tr><tr><td>5\u301c8\u5217\u76ee<\/td><td>528<\/td><td>384<\/td><\/tr><tr><td>9\u301c12\u5217\u76ee<\/td><td>936<\/td><td>384<\/td><\/tr><tr><td>12\u5217\u5206\u306e\u898b\u51fa\u3057<\/td><td>120<\/td><td>1200<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full is-style-border\"><img decoding=\"async\" width=\"1200\" height=\"666\" src=\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-snap.jpg\" alt=\"12\u5217\u306e\u30ac\u30a4\u30c9\u306b\u9577\u65b9\u5f62\u3092\u30b9\u30ca\u30c3\u30d7\u3055\u305b\u305f\u753b\u9762\u30024\u5217\u5206\u306e\u9577\u65b9\u5f62\u304c3\u3064\u306812\u5217\u5206\u306e\u898b\u51fa\u3057\u3002\u53f3\u30d1\u30cd\u30eb\u306fX 120\u3001W 1200\" class=\"wp-image-23177\" srcset=\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-snap.jpg 1200w, https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-snap-300x167.jpg 300w, https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-snap-1024x568.jpg 1024w, https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-snap-768x426.jpg 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><figcaption class=\"wp-element-caption\">2026-11-01 \u64ae\u5f71\u3002Figma\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea126.10.13\uff08\u65e5\u672c\u8a9e\u8868\u793a\uff09\u3001\u7121\u6599\u306e\u30b9\u30bf\u30fc\u30bf\u30fc\u30d7\u30e9\u30f3\u3001Windows 11\u3002\u5217\u306e\u7aef\u306b\u30b9\u30ca\u30c3\u30d7\u3055\u305b\u3066\u63cf\u3044\u305f\u9577\u65b9\u5f62\uff08\u898b\u51fa\u3057\u3092\u9078\u3093\u3060\u72b6\u614b\uff09<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u6570\u5024\u3067\u78ba\u304b\u3081\u305f\u3044\u3068\u304d\u306f\u3001\u53f3\u30d1\u30cd\u30eb\u306e\u4f4d\u7f6e\u306eX\u3068\u30ec\u30a4\u30a2\u30a6\u30c8\u306eW\u3092\u898b\u308c\u3070\u3001\u5217\u306b\u305d\u308d\u3063\u3066\u3044\u308b\u304b\u5206\u304b\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u30d5\u30ec\u30fc\u30e0\u306e\u5e45\u3092\u5909\u3048\u308b\u3068\u3069\u3046\u306a\u308b\u304b<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d5\u30ec\u30fc\u30e0\u306eW\u30921440\u304b\u30891024\u306b\u5909\u3048\u308b\u3068\u3001\u30b9\u30c8\u30ec\u30c3\u30c1\u306e\u5217\u306f\u7d30\u304f\u306a\u308a\u3001\u4f59\u767d\u306e120\u306f\u305d\u306e\u307e\u307e\u3067\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e00\u65b9\u3067\u3001\u7f6e\u3044\u3066\u304a\u3044\u305f\u9577\u65b9\u5f62\u306f\u4f4d\u7f6e\u3082\u5927\u304d\u3055\u3082\u5909\u308f\u3089\u305a\u3001\u5217\u304b\u3089\u306f\u307f\u51fa\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u306f\u76ee\u5b89\u306e\u7dda\u306a\u306e\u3067\u3001\u4e2d\u306e\u8981\u7d20\u307e\u3067\u52d5\u304b\u3057\u3066\u306f\u304f\u308c\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5e45\u306b\u5408\u308f\u305b\u3066\u8981\u7d20\u3082\u4f38\u3070\u3057\u305f\u3044\u3068\u304d\u306f\u3001\u5236\u7d04\u304b\u30aa\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u7d44\u307f\u5408\u308f\u305b\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5e45\u3092\u5909\u3048\u3066\u5d29\u308c\u306a\u3044\u304b\u78ba\u304b\u3081\u308b\u624b\u9806\u306f<a href=\"https:\/\/cg-method.com\/figma\/figma-responsive-design\/\">Figma\u3067\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u3092\u4f5c\u308b\u65b9\u6cd5<\/a>\u3067\u8aac\u660e\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u30b0\u30ea\u30c3\u30c9\u306e\u8868\u793a\u30fb\u975e\u8868\u793a\u3092\u5207\u308a\u66ff\u3048\u308b<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u5207\u308a\u66ff\u3048\u65b9\u306f\u3001\u5168\u90e8\u307e\u3068\u3081\u3066\u3068\u30011\u3064\u305a\u3064\u306e2\u901a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u5168\u90e8\u307e\u3068\u3081\u3066\u5207\u308a\u66ff\u3048\u308b\uff08Shift+G\uff09<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n\n<li>\u53f3\u4e0a\u306e\u500d\u7387\u306e\u8868\u793a\uff08\uff05\u306e\u6570\u5b57\uff09\u3092\u62bc\u3059<\/li>\n\n\n<li>\u30e1\u30cb\u30e5\u30fc\u306e\u300c\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u300d\u3092\u62bc\u3057\u3066\u30c1\u30a7\u30c3\u30af\u3092\u5916\u3059\uff08\u53f3\u306bShift+G\u3068\u8868\u793a\u3055\u308c\u308b\uff09<\/li>\n\n\n<li>\u3082\u30461\u56de\u62bc\u3059\u304b\u3001Shift+G\u3092\u62bc\u3059\u3068\u8868\u793a\u306b\u623b\u308b<\/li>\n\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full is-style-border\"><img decoding=\"async\" width=\"485\" height=\"974\" src=\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-view-menu.jpg\" alt=\"\u53f3\u4e0a\u306e\u500d\u7387\u306e\u30e1\u30cb\u30e5\u30fc\u3002\u30d4\u30af\u30bb\u30eb\u30b0\u30ea\u30c3\u30c9\u3001\u30d4\u30af\u30bb\u30eb\u30b0\u30ea\u30c3\u30c9\u306b\u30b9\u30ca\u30c3\u30d7\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\uff08Shift+G\uff09\u3001\u5b9a\u898f\u306a\u3069\u304c\u4e26\u3093\u3067\u3044\u308b\" class=\"wp-image-23176\" srcset=\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-view-menu.jpg 485w, https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-view-menu-149x300.jpg 149w\" sizes=\"(max-width: 485px) 100vw, 485px\" \/><figcaption class=\"wp-element-caption\">2026-11-01 \u64ae\u5f71\u3002Figma\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea126.10.13\uff08\u65e5\u672c\u8a9e\u8868\u793a\uff09\u3001\u7121\u6599\u306e\u30b9\u30bf\u30fc\u30bf\u30fc\u30d7\u30e9\u30f3\u3001Windows 11\u3002\u53f3\u4e0a\u306e\u500d\u7387\u3092\u62bc\u3057\u305f\u30e1\u30cb\u30e5\u30fc\u3002\u300c\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u300d\u3067\u5168\u4f53\u306e\u8868\u793a\u3068\u975e\u8868\u793a\u3092\u5207\u308a\u66ff\u3048\u308b<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u306e\u30e1\u30cb\u30e5\u30fc\u306b\u306f\u3001\u30d4\u30af\u30bb\u30eb\u30b0\u30ea\u30c3\u30c9\u3001\u30d4\u30af\u30bb\u30eb\u30b0\u30ea\u30c3\u30c9\u306b\u30b9\u30ca\u30c3\u30d7\u3001\u5b9a\u898f\uff08Shift+R\uff09\u3082\u4e26\u3093\u3067\u3044\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d4\u30af\u30bb\u30eb\u30b0\u30ea\u30c3\u30c9\u306f\u753b\u9762\u306e1px\u3054\u3068\u306e\u65b9\u773c\u3067\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u3068\u306f\u5225\u306e\u8a2d\u5b9a\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30ac\u30a4\u30c9\u3092\u96a0\u3057\u305f\u3044\u306e\u306b\u30d4\u30af\u30bb\u30eb\u30b0\u30ea\u30c3\u30c9\u306e\u30c1\u30a7\u30c3\u30af\u3092\u5916\u3057\u3066\u3082\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u306f\u6d88\u3048\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u53e4\u3044\u8a18\u4e8b\u3067\u3088\u304f\u898b\u308bCtrl+Shift+4\u3082\u3001\u3053\u306e\u6a5f\uff08\u65e5\u672c\u8a9e\u30ad\u30fc\u30dc\u30fc\u30c9\uff09\u3067\u306f\u540c\u3058\u3088\u3046\u306b\u8868\u793a\u3068\u975e\u8868\u793a\u304c\u5207\u308a\u66ff\u308f\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30e1\u30cb\u30e5\u30fc\u306b\u51fa\u3066\u3044\u308b\u5272\u308a\u5f53\u3066\u306fShift+G\u3060\u3051\u306a\u306e\u3067\u3001\u899a\u3048\u308b\u306a\u3089Shift+G\u306e\u307b\u3046\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u65b0\u3057\u3044\u30d5\u30a1\u30a4\u30eb\u3067\u6700\u521d\u306e\u30ac\u30a4\u30c9\u3092\u8db3\u3057\u305f\u3068\u304d\u3001\u753b\u9762\u306e\u4e0b\u306b\u300c\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u304c\u8868\u793a\u3055\u308c\u307e\u3057\u305f\u300d\u3068\u51fa\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5168\u4f53\u306e\u8868\u793a\u3092\u5207\u3063\u3066\u3044\u3066\u3082\u3001\u30ac\u30a4\u30c9\u3092\u8ffd\u52a0\u3059\u308b\u3068\u8868\u793a\u306b\u5207\u308a\u66ff\u308f\u308b\u3088\u3046\u3067\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1\u3064\u306e\u30ac\u30a4\u30c9\u3060\u3051\u96a0\u3059<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d5\u30ec\u30fc\u30e0\u3092\u9078\u3073\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u306e\u6b04\u3067\u3001\u96a0\u3057\u305f\u3044\u30ac\u30a4\u30c9\u306e\u884c\u306e\u76ee\u306e\u30a2\u30a4\u30b3\u30f3\u3092\u62bc\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">8px\u306e\u30b0\u30ea\u30c3\u30c9\u306812\u5217\u3092\u91cd\u306d\u3066\u3044\u305f\u72b6\u614b\u30678px\u306e\u884c\u306e\u76ee\u3092\u9589\u3058\u308b\u3068\u3001\u65b9\u773c\u3060\u3051\u304c\u6d88\u3048\u306612\u5217\u306f\u6b8b\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u30b0\u30ea\u30c3\u30c9\u304c\u8868\u793a\u3055\u308c\u306a\u3044\u3068\u304d\u306e\u539f\u56e0<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u516c\u5f0f\u30d8\u30eb\u30d7\u306e\u3088\u304f\u3042\u308b\u8cea\u554f\u3068\u3001\u5b9f\u6a5f\u3067\u898b\u3048\u305f\u3053\u3068\u3092\u5408\u308f\u305b\u308b\u3068\u3001\u78ba\u304b\u3081\u308b\u9806\u756a\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table class=\"has-fixed-layout\"><thead><tr><th style=\"min-width:8em !important\">\u539f\u56e0<\/th><th>\u898b\u5206\u3051\u65b9<\/th><th>\u76f4\u3057\u65b9<\/th><\/tr><\/thead><tbody><tr><td>\u5168\u4f53\u306e\u8868\u793a\u304c\u5207\u308c\u3066\u3044\u308b<\/td><td>\u3069\u306e\u30d5\u30ec\u30fc\u30e0\u306e\u30ac\u30a4\u30c9\u3082\u898b\u3048\u306a\u3044<\/td><td>Shift+G\u304b\u3001\u500d\u7387\u306e\u30e1\u30cb\u30e5\u30fc\u3067\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u306b\u30c1\u30a7\u30c3\u30af<\/td><\/tr><tr><td>\u305d\u306e\u30ac\u30a4\u30c9\u306e\u76ee\u304c\u9589\u3058\u3066\u3044\u308b<\/td><td>\u6b04\u306e\u884c\u306e\u76ee\u306e\u30a2\u30a4\u30b3\u30f3\u304c\u9589\u3058\u3066\u3044\u308b<\/td><td>\u76ee\u306e\u30a2\u30a4\u30b3\u30f3\u3092\u62bc\u3059<\/td><\/tr><tr><td>\u9078\u3093\u3067\u3044\u308b\u306e\u304c\u30d5\u30ec\u30fc\u30e0\u3067\u306f\u306a\u3044<\/td><td>\u53f3\u30d1\u30cd\u30eb\u306b\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u306e\u6b04\u304c\u7121\u3044<\/td><td>Ctrl+Alt+G\u3067\u30d5\u30ec\u30fc\u30e0\u306b\u5165\u308c\u308b\u304b\u3001\u89aa\u306e\u30d5\u30ec\u30fc\u30e0\u306b\u4ed8\u3051\u308b<\/td><\/tr><tr><td>\u30d5\u30ec\u30fc\u30e0\u304c\u56de\u8ee2\u3057\u3066\u3044\u308b\uff08\u516c\u5f0f\u30d8\u30eb\u30d7\uff09<\/td><td>\u4f4d\u7f6e\u306e\u56de\u8ee2\u306e\u6b04\u304c0\u00b0\u4ee5\u5916<\/td><td>\u56de\u8ee2\u30920\u00b0\u306b\u623b\u3057\u3066\u304b\u3089\u4ed8\u3051\u308b<\/td><\/tr><tr><td>\u8272\u304c\u8584\u304f\u3066\u898b\u3048\u306a\u3044<\/td><td>\u4e0d\u900f\u660e\u5ea6\u304c\u4f4e\u3044\u3001\u307e\u305f\u306f\u80cc\u666f\u3068\u540c\u3058\u8272<\/td><td>\u8a2d\u5b9a\u306e\u7a93\u3067\u8272\u3068\u4e0d\u900f\u660e\u5ea6\u3092\u5909\u3048\u308b<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u56de\u8ee2\u306e\u9805\u76ee\u306f\u516c\u5f0f\u30d8\u30eb\u30d7\u306e\u8a18\u8f09\u3067\u3001\u3053\u306e\u8a18\u4e8b\u306e\u691c\u8a3c\u3067\u306f\u8a66\u3057\u3066\u3044\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b0\u30eb\u30fc\u30d7\u3084\u30bb\u30af\u30b7\u30e7\u30f3\u3092\u9078\u3093\u3067\u3044\u308b\u3068\u6b04\u304c\u51fa\u306a\u3044\u306e\u3067\u3001\u307e\u305a\u30ec\u30a4\u30e4\u30fc\u30d1\u30cd\u30eb\u306e\u30a2\u30a4\u30b3\u30f3\u304c\u30d5\u30ec\u30fc\u30e0\uff08#\u306e\u5f62\uff09\u304b\u898b\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u3092\u30b9\u30bf\u30a4\u30eb\u306b\u3057\u3066\u4f7f\u3044\u56de\u3059<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u540c\u305812\u5217\u3092\u3044\u304f\u3064\u3082\u306e\u753b\u9762\u3067\u4f7f\u3046\u306a\u3089\u3001\u30b9\u30bf\u30a4\u30eb\u306b\u3057\u3066\u304a\u304f\u3068\u4ed8\u3051\u76f4\u3057\u304c\u8981\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n\n<li>\u30ac\u30a4\u30c9\u3092\u4ed8\u3051\u305f\u30d5\u30ec\u30fc\u30e0\u3092\u9078\u3076<\/li>\n\n\n<li>\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u306e\u6b04\u306e\u53f3\u306e4\u3064\u306e\u70b9\u306e\u30a2\u30a4\u30b3\u30f3\uff08\u30b9\u30bf\u30a4\u30eb\u3092\u9069\u7528\uff09\u3092\u62bc\u3059<\/li>\n\n\n<li>\u958b\u3044\u305f\u300c\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u30b9\u30bf\u30a4\u30eb\u300d\u306e\u7a93\u306e\uff0b\u3092\u62bc\u3059<\/li>\n\n\n<li>\u300c\u65b0\u3057\u3044\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u30b9\u30bf\u30a4\u30eb\u3092\u4f5c\u6210\u300d\u3067\u540d\u524d\uff08\u4f8b\uff1aDesktop\/12\u5217-1440\uff09\u3068\u8aac\u660e\u3092\u5165\u308c\u308b<\/li>\n\n\n<li>\u300c\u30b9\u30bf\u30a4\u30eb\u306e\u4f5c\u6210\u300d\u3092\u62bc\u3059<\/li>\n\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full is-style-border\"><img decoding=\"async\" width=\"1000\" height=\"711\" src=\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-style.jpg\" alt=\"\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u30b9\u30bf\u30a4\u30eb\u306e\u7a93\u3068\u65b0\u3057\u3044\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u30b9\u30bf\u30a4\u30eb\u3092\u4f5c\u6210\u306e\u7a93\u3002\u540d\u524d\u306bDesktop\/12\u5217-1440\u3068\u5165\u529b\u3057\u3001\u30b9\u30bf\u30a4\u30eb\u306e\u4f5c\u6210\u30dc\u30bf\u30f3\u304c\u3042\u308b\" class=\"wp-image-23178\" srcset=\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-style.jpg 1000w, https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-style-300x213.jpg 300w, https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-style-768x546.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\">2026-11-01 \u64ae\u5f71\u3002Figma\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea126.10.13\uff08\u65e5\u672c\u8a9e\u8868\u793a\uff09\u3001\u7121\u6599\u306e\u30b9\u30bf\u30fc\u30bf\u30fc\u30d7\u30e9\u30f3\u3001Windows 11\u3002\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u306e\u6b04\u306e4\u3064\u306e\u70b9\u306e\u30a2\u30a4\u30b3\u30f3\u2192\uff0b\u3067\u3001\u30b9\u30bf\u30a4\u30eb\u3092\u4f5c\u308b\u7a93<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f5c\u3063\u305f\u30b9\u30bf\u30a4\u30eb\u306b\u306f\u3001\u305d\u306e\u30d5\u30ec\u30fc\u30e0\u306b\u4ed8\u3051\u3066\u3044\u305f\u30ac\u30a4\u30c9\u304c\u5168\u90e8\u5165\u308a\u307e\u3057\u305f\uff08\u4eca\u56de\u306f8px\u306e\u30b0\u30ea\u30c3\u30c9\u306812\u5217\u306e2\u3064\uff09\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f5c\u6210\u5f8c\u306e\u6b04\u306f\u3001\u30ac\u30a4\u30c9\u306e\u4e00\u89a7\u306e\u4ee3\u308f\u308a\u306b\u30b9\u30bf\u30a4\u30eb\u540d\u306e1\u884c\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u540d\u524d\u306b\u300c\/\u300d\u3092\u5165\u308c\u308b\u3068\u3001\u30da\u30fc\u30b8\u306e\u53f3\u30d1\u30cd\u30eb\u306e\u30b9\u30bf\u30a4\u30eb\u4e00\u89a7\u3067\u306f\u300cDesktop\u300d\u306e\u307e\u3068\u307e\u308a\u306e\u4e2d\u306b\u5165\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u7121\u6599\u306e\u30b9\u30bf\u30fc\u30bf\u30fc\u30d7\u30e9\u30f3\u3067\u3082\u3001\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u306e\u4e2d\u3067\u30b9\u30bf\u30a4\u30eb\u3092\u4f5c\u3063\u3066\u4f7f\u3046\u3053\u3068\u306f\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b9\u30bf\u30a4\u30eb\u306e\u7a93\u306b\u306f\u300cMaterial 3 Design Kit\u300d\u306e\u30b9\u30bf\u30a4\u30eb\u3082\u4e26\u3093\u3067\u3044\u3066\u3001\u9078\u3076\u3060\u3051\u3067\u4ed8\u3051\u3089\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4ed6\u306e\u30d5\u30a1\u30a4\u30eb\u304b\u3089\u4f7f\u3048\u308b\u3088\u3046\u306b\u30c1\u30fc\u30e0\u30e9\u30a4\u30d6\u30e9\u30ea\u3078\u516c\u958b\u3059\u308b\u3068\u3053\u308d\u306f\u3001\u4eca\u56de\u306f\u8a66\u3057\u3066\u3044\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b9\u30bf\u30a4\u30eb\u306e\u4f5c\u308a\u65b9\u3068\u76f4\u3057\u65b9\u306e\u5168\u4f53\u306f<a href=\"https:\/\/cg-method.com\/figma\/local-style\/\">Figma\u306e\u30ed\u30fc\u30ab\u30eb\u30b9\u30bf\u30a4\u30eb\u306e\u4f7f\u3044\u65b9<\/a>\u3001\u30b0\u30ea\u30c3\u30c9\u3092\u542b\u3080\u30b9\u30bf\u30a4\u30eb\u306e\u4e00\u89a7\u3092\u66f8\u304d\u51fa\u3059\u65b9\u6cd5\u306f<a href=\"https:\/\/cg-method.com\/figma\/figma-style-export-csv\/\">Figma\u306e\u30b9\u30bf\u30a4\u30eb\u3092CSV\u306b\u66f8\u304d\u51fa\u3059\u30d7\u30e9\u30b0\u30a4\u30f3<\/a>\u306b\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u30aa\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u30b0\u30ea\u30c3\u30c9\u3067\u884c\u3068\u5217\u306b\u4e26\u3079\u308b<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3053\u304b\u3089\u306f\u3001\u5b50\u306e\u8981\u7d20\u305d\u306e\u3082\u306e\u3092\u884c\u3068\u5217\u306b\u4e26\u3079\u308b\u307b\u3046\u306e\u30b0\u30ea\u30c3\u30c9\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u516c\u5f0f\u30d8\u30eb\u30d7\u300c<a href=\"https:\/\/help.figma.com\/hc\/ja\/articles\/31289469907863\">\u30b0\u30ea\u30c3\u30c9\u30aa\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u30d5\u30ed\u30fc\u3092\u4f7f\u7528\u3059\u308b<\/a>\u300d\u3067\u306f\u3001\u3059\u3079\u3066\u306e\u30d7\u30e9\u30f3\u3067\u4f7f\u3048\u308b\u3068\u66f8\u304b\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u65e5\u672c\u8a9e\u7248\u306b\u306f\u30aa\u30fc\u30d7\u30f3\u30d9\u30fc\u30bf\u306e\u6ce8\u8a18\u304c\u6b8b\u3063\u3066\u3044\u307e\u3057\u305f\u304c\u3001\u82f1\u8a9e\u7248\u306b\u306f\u305d\u306e\u6ce8\u8a18\u304c\u3042\u308a\u307e\u305b\u3093\u3067\u3057\u305f\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u30aa\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u30b0\u30ea\u30c3\u30c9\u306b\u5207\u308a\u66ff\u3048\u308b<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n\n<li>\u4e26\u3079\u305f\u3044\u8981\u7d20\u3092\u9078\u3073\u3001Shift+A\u3067\u30aa\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u30d5\u30ec\u30fc\u30e0\u306b\u5165\u308c\u308b<\/li>\n\n\n<li>\u53f3\u30d1\u30cd\u30eb\u306e\u300c\u30aa\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u300d\u306e\u30d5\u30ed\u30fc\u3067\u3001\u53f3\u7aef\u306e\u30a2\u30a4\u30b3\u30f3\uff08\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u306f\u300c\u30b0\u30ea\u30c3\u30c9\u300d\uff09\u3092\u62bc\u3059<\/li>\n\n\n<li>\u300c\u30b0\u30ea\u30c3\u30c9\u300d\u306e\u6b04\u306e\u300c3\u00d7\u81ea\u52d5\u300d\u306a\u3069\u306e\u8868\u793a\u3092\u62bc\u3057\u3001\u5217\u3068\u884c\u306e\u6570\u3092\u9078\u3076<\/li>\n\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d5\u30ed\u30fc\u306e\u30a2\u30a4\u30b3\u30f3\u306f\u5de6\u304b\u3089\u3001\u81ea\u7531\u5f62\u5f0f\u30fb\u5782\u76f4\u30fb\u6c34\u5e73\u30fb\u30b0\u30ea\u30c3\u30c9\u306e4\u3064\u3067\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5782\u76f4\u3068\u6c34\u5e73\u306f1\u65b9\u5411\u306b\u4e26\u3079\u308b\u30d5\u30ec\u30c3\u30af\u30b9\u306e\u4e26\u3079\u65b9\u3067\u3001\u30b0\u30ea\u30c3\u30c9\u3060\u3051\u304c\u884c\u3068\u5217\u306e2\u65b9\u5411\u3092\u6301\u3061\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6a2a\u306b\u4e26\u3079\u305f\u9577\u65b9\u5f623\u3064\uff08\u9593\u969424\uff09\u3092\u30b0\u30ea\u30c3\u30c9\u306b\u3059\u308b\u3068\u3001\u300c3\u00d7\u81ea\u52d5\u300d\u306b\u306a\u308a\u3001\u884c\u3068\u5217\u306e\u9593\u9694\u306f\u3069\u3061\u3089\u308224\u3067\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6570\u306e\u7a93\u306b\u306f\u5217\u3068\u884c\u306e\u6b04\u3001\u30de\u30b9\u76ee\u306e\u9078\u629e\u6b04\u3001\u300c\u30b0\u30ea\u30c3\u30c9\u8a2d\u5b9a\u3092\u958b\u304f\u300d\u304c\u3042\u308a\u3001\u30de\u30b9\u76ee\u306e3\u52172\u884c\u306e\u6240\u3092\u62bc\u3059\u3068\u300c3\u00d72\u300d\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u884c\u3092\u8db3\u3059\u3068\u3001\u7a7a\u3044\u305f\u30bb\u30eb\u304c\u6c34\u8272\u306e\u67a0\u3067\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u5217\u3068\u884c\u306e\u5e45\u3092\u6c7a\u3081\u308b\uff08\u56fa\u5b9a\u30fb\u5185\u5305\u30fb1fr\uff09<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d5\u30ec\u30fc\u30e0\u306e\u4e0a\u3084\u5de6\u306b\u51fa\u308b\u9752\u3044\u5c0f\u3055\u306a\u5370\u3092\u62bc\u3059\u3068\u3001\u53f3\u30d1\u30cd\u30eb\u304c\u300c\u30b0\u30ea\u30c3\u30c9\u300d\u306b\u5909\u308f\u308a\u3001\u5217\u3068\u884c\u304c1\u672c\u305a\u3064\u4e26\u3073\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5217\u306e\u25bc\u306b\u306f\u3001\u5e45\u3092\u56fa\u5b9a\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u5185\u5305\u3001\u30b3\u30f3\u30c6\u30ca\u306b\u5408\u308f\u305b\u3066\u62e1\u5927\uff081fr\uff09\u306e3\u3064\u304c\u3042\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3\u5217\u3068\u30821fr\u306b\u3059\u308b\u3068\u3001\u5217\u306f\u5747\u7b49\u306b\u5206\u304b\u308c\u3001\u753b\u9762\u306e\u4e0b\u306b\u300cFrame 1\u306e\u5e45\u3092\u300c\u56fa\u5b9a\u300d\u306b\u8a2d\u5b9a\u3057\u307e\u3057\u305f\u300d\u3068\u51fa\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1fr\u306f\u6b8b\u308a\u306e\u5e45\u3092\u5206\u3051\u5408\u3046\u6307\u5b9a\u306a\u306e\u3067\u3001\u89aa\u306e\u30d5\u30ec\u30fc\u30e0\u306e\u5e45\u304c\u6c7a\u307e\u3063\u3066\u3044\u308b\u5fc5\u8981\u304c\u3042\u308b\u305f\u3081\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u884c\u306f\u6570\u5024\u306e\u6b04\u306b160\u3068\u6253\u3064\u3068\u3001\u7a2e\u985e\u304c\u56fa\u5b9a\u306b\u5909\u308f\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u30bb\u30eb\u3092\u307e\u305f\u304c\u305b\u308b\uff08\u5217\u30b9\u30d1\u30f3\u30fb\u884c\u30b9\u30d1\u30f3\uff09<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b0\u30ea\u30c3\u30c9\u306e\u4e2d\u306e\u5b50\u3092\u9078\u3076\u3068\u3001\u53f3\u30d1\u30cd\u30eb\u306b\u300c\u5217\u30b9\u30d1\u30f3\u300d\u3068\u300c\u884c\u30b9\u30d1\u30f3\u300d\u306e\u6b04\u304c\u51fa\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n\n<li>\u5b50\u3092\u9078\u3073\u3001\u30b5\u30a4\u30ba\u5909\u66f4\u306eW\u3068H\u306e\u25bc\u3092\u3069\u3061\u3089\u3082\u300c\u30b3\u30f3\u30c6\u30ca\u306b\u5408\u308f\u305b\u3066\u62e1\u5927\u300d\u306b\u3059\u308b<\/li>\n\n\n<li>\u5217\u30b9\u30d1\u30f3\u304b\u884c\u30b9\u30d1\u30f3\u306b\u3001\u307e\u305f\u304c\u305b\u305f\u3044\u30bb\u30eb\u306e\u6570\u3092\u5165\u308c\u308b<\/li>\n\n\n<li>\u307b\u304b\u306e\u5b50\u306f\u7a7a\u3044\u305f\u30bb\u30eb\u3078\u81ea\u52d5\u3067\u4e26\u3073\u76f4\u3059<\/li>\n\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u9ad8\u3055351px\u306e\u9577\u65b9\u5f62\u306e\u9ad8\u3055\u3092\u62e1\u5927\u306b\u3057\u305f\u3068\u3053\u308d\u3001\u884c2\u672c\u3068\u9593\u9694\u306e\u5408\u8a08\uff08160\uff0b24\uff0b160\uff09\u3088\u308a\u5927\u304d\u304b\u3063\u305f\u305f\u3081\u3001\u884c\u30b9\u30d1\u30f3\u304c\u81ea\u52d5\u30672\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1\u3064\u76ee\u306f2\u884c\u5206\u306e\u7e26\u9577\u306e\u307e\u307e\u6b8b\u3057\u30012\u3064\u76ee\u30683\u3064\u76ee\u306f\u884c\u30b9\u30d1\u30f31\u30fb\u5217\u30b9\u30d1\u30f32\u306b\u3057\u3066\u3001\u5de6\u306b\u7e26\u9577\u3001\u53f3\u306b\u6a2a\u9577\u304c2\u6bb5\u306e\u914d\u7f6e\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3\u3064\u76ee\u304c\u6b21\u306e\u884c\u3078\u81ea\u52d5\u3067\u79fb\u3063\u305f\u306e\u306f\u30012\u3064\u76ee\u306e\u5217\u30b9\u30d1\u30f3\u30922\u306b\u3057\u305f\u6642\u70b9\u3067\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-border\"><img decoding=\"async\" width=\"1200\" height=\"444\" src=\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-auto-layout-grid.jpg\" alt=\"\u30aa\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u30b0\u30ea\u30c3\u30c9\u30673\u52172\u884c\u306b\u4e26\u3079\u305f\u753b\u9762\u3002\u7dd1\u306e\u9577\u65b9\u5f62\u304c2\u884c\u306b\u307e\u305f\u304c\u308a\u3001\u6a59\u3068\u9752\u304c2\u5217\u306b\u307e\u305f\u304c\u308b\u3002\u53f3\u30d1\u30cd\u30eb\u306f\u30d5\u30ed\u30fc\u304c\u30b0\u30ea\u30c3\u30c9\u30673\u00d72\u3001\u9593\u969424\" class=\"wp-image-23179\" srcset=\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-auto-layout-grid.jpg 1200w, https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-auto-layout-grid-300x111.jpg 300w, https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-auto-layout-grid-1024x379.jpg 1024w, https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-auto-layout-grid-768x284.jpg 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><figcaption class=\"wp-element-caption\">2026-11-01 \u64ae\u5f71\u3002Figma\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea126.10.13\uff08\u65e5\u672c\u8a9e\u8868\u793a\uff09\u3001\u7121\u6599\u306e\u30b9\u30bf\u30fc\u30bf\u30fc\u30d7\u30e9\u30f3\u3001Windows 11\u3002\u30aa\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u30d5\u30ed\u30fc\u3092\u30b0\u30ea\u30c3\u30c9\u306b\u3057\u3001\u5217\u30b9\u30d1\u30f3\u30fb\u884c\u30b9\u30d1\u30f3\u3067\u5927\u5c0f\u306e\u30bf\u30a4\u30eb\u306b\u3057\u305f\u753b\u9762<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d5\u30ed\u30fc\u3092\u6c34\u5e73\u3084\u5782\u76f4\u306b\u623b\u3059\u30681\u65b9\u5411\u306e\u4e26\u3073\u306b\u623b\u308b\u306e\u3067\u3001\u30ab\u30fc\u30c9\u306e\u4e00\u89a7\u3060\u3051\u306a\u3089\u6c34\u5e73\u3068\u6298\u308a\u8fd4\u3057\u3067\u3082\u8db3\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6c34\u5e73\u3068\u5782\u76f4\u306e\u30d5\u30ed\u30fc\u3067\u306e\u5e45\u306e\u6c7a\u3081\u65b9\uff08Hug\u30fbFill\u30fbFixed\uff09\u306f<a href=\"https:\/\/cg-method.com\/figma\/figma-auto-layout\/\">Figma\u30aa\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u4f7f\u3044\u65b9<\/a>\u3067\u8aac\u660e\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CSS\u3068\u3057\u3066\u30b3\u30d4\u30fc\u3067\u51fa\u305f\u3082\u306e<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b0\u30ea\u30c3\u30c9\u306e\u30d5\u30ec\u30fc\u30e0\u3092\u53f3\u30af\u30ea\u30c3\u30af\u3057\u3001\u300c\u30b3\u30d4\u30fc\/\u8cbc\u308a\u4ed8\u3051\u30aa\u30d7\u30b7\u30e7\u30f3\u300d\u2192\u300c\u30b3\u30fc\u30c9\u3068\u3057\u3066\u30b3\u30d4\u30fc\u300d\u3092\u958b\u304f\u3068\u3001CSS\u3001CSS\uff08\u3059\u3079\u3066\u306e\u30ec\u30a4\u30e4\u30fc\uff09\u3001iOS\u3001Android\u304c\u4e26\u3093\u3067\u3044\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-border\"><img decoding=\"async\" width=\"900\" height=\"817\" src=\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-copy-as-css.jpg\" alt=\"\u53f3\u30af\u30ea\u30c3\u30af\u306e\u30e1\u30cb\u30e5\u30fc\u3002\u30b3\u30d4\u30fc\/\u8cbc\u308a\u4ed8\u3051\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u30b3\u30fc\u30c9\u3068\u3057\u3066\u30b3\u30d4\u30fc\u306b\u3001CSS\u3001CSS\uff08\u3059\u3079\u3066\u306e\u30ec\u30a4\u30e4\u30fc\uff09\u3001iOS\u3001Android\u304c\u4e26\u3076\" class=\"wp-image-23180\" srcset=\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-copy-as-css.jpg 900w, https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-copy-as-css-300x272.jpg 300w, https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261101-figma-layout-grid-copy-as-css-768x697.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><figcaption class=\"wp-element-caption\">2026-11-01 \u64ae\u5f71\u3002Figma\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea126.10.13\uff08\u65e5\u672c\u8a9e\u8868\u793a\uff09\u3001\u7121\u6599\u306e\u30b9\u30bf\u30fc\u30bf\u30fc\u30d7\u30e9\u30f3\u3001Windows 11\u3002\u30b0\u30ea\u30c3\u30c9\u306e\u30d5\u30ec\u30fc\u30e0\u3092\u53f3\u30af\u30ea\u30c3\u30af\u2192\u300c\u30b3\u30d4\u30fc\/\u8cbc\u308a\u4ed8\u3051\u30aa\u30d7\u30b7\u30e7\u30f3\u300d\u2192\u300c\u30b3\u30fc\u30c9\u3068\u3057\u3066\u30b3\u30d4\u30fc\u300d<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">CSS\uff08\u3059\u3079\u3066\u306e\u30ec\u30a4\u30e4\u30fc\uff09\u3067\u30b3\u30d4\u30fc\u3057\u305f\u4e2d\u8eab\u306f\u3001\u6b21\u306e\u3088\u3046\u306a\u4f4d\u7f6e\u3068\u5927\u304d\u3055\u306e\u6307\u5b9a\u3067\u3057\u305f\uff08\u4e00\u90e8\u3092\u629c\u304d\u51fa\u3057\uff09\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\"><code>\/* Frame 1 *\/\nposition: absolute;\nwidth: 1200px;\nheight: 344px;\nleft: 120px;\ntop: 326px;\n\n\/* Rectangle 2 *\/\nposition: absolute;\nwidth: 792px;\nheight: 160px;\nleft: 408px;\ntop: 0px;\nbackground: #F2994A;<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><code>display: grid<\/code> \u3084\u5217\u306e\u6307\u5b9a\u306f\u5165\u3063\u3066\u304a\u3089\u305a\u3001\u753b\u9762\u306e\u4f4d\u7f6e\u3092\u305d\u306e\u307e\u307e\u5199\u3057\u305f\u5024\u3067\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u53f3\u4e0b\u306e\u30b3\u30fc\u30c9\u306e\u30a2\u30a4\u30b3\u30f3\u304b\u3089Dev Mode\u306b\u5207\u308a\u66ff\u3048\u308b\u3068\u3001\u300c\u30a2\u30c3\u30d7\u30b0\u30ec\u30fc\u30c9\u3057\u3066Dev Mode\u3067\u4f5c\u696d\u3059\u308b\u300d\u306e\u6848\u5185\u304c\u51fa\u3066\u3001\u7121\u6599\u306e\u30d7\u30e9\u30f3\u3067\u306f\u958b\u3051\u307e\u305b\u3093\u3067\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6709\u6599\u30d7\u30e9\u30f3\u3067Dev Mode\u3092\u958b\u3044\u305f\u7d50\u679c\u306f\u3001\u3059\u3050\u4e0b\u306b\u307e\u3068\u3081\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u7121\u6599\u306e\u30d7\u30e9\u30f3\u306e\u307e\u307e\u5b9f\u88c5\u306e\u53c2\u8003\u306b\u3059\u308b\u306a\u3089\u3001\u5217\u306e\u6570\u30fb1fr\u30fb\u9593\u9694\u306e\u5024\u3092\u53f3\u30d1\u30cd\u30eb\u304b\u3089\u8aad\u307f\u53d6\u3063\u3066\u66f8\u304d\u5199\u3059\u306e\u304c\u78ba\u5b9f\u3067\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u6709\u6599\u30d7\u30e9\u30f3\u306eDev Mode\u3067\u306fdisplay: grid\u3067\u51fa\u305f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">2026\u5e7411\u67082\u65e5\u306b\u3001\u6709\u6599\u306e\u6559\u80b2\u30d7\u30e9\u30f3\u306e\u30a2\u30ab\u30a6\u30f3\u30c8\u3067\u3001\u540c\u3058\u5f62\u306e\u30b0\u30ea\u30c3\u30c9\u3092\u4f5c\u308a\u76f4\u3057\u3066Dev Mode\u3067\u958b\u304d\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d5\u30ec\u30fc\u30e0\u306f703\u00d7299\u3067\u3001\u30d5\u30ed\u30fc\u3092\u30b0\u30ea\u30c3\u30c9\u306b\u3057\u30663\u00d72\u3001\u9593\u9694\u306f\u7e26\u6a2a\u3068\u308224\u3001\u5217\u3068\u884c\u306e\u5e45\u306f\u521d\u671f\u5024\u306e\u307e\u307e\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e2d\u306b\u306f\u9577\u65b9\u5f62\u30923\u3064\u5165\u308c\u3001\u7dd1\u306f1\u30bb\u30eb\u3001\u6a59\u306f\u5217\u30b9\u30d1\u30f32\u3001\u9752\u306f2\u884c\u76ee\u306e1\u30bb\u30eb\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d5\u30ec\u30fc\u30e0\u3092\u9078\u3076\u3068\u3001\u30a4\u30f3\u30b9\u30da\u30af\u30c8\u306e\u300c\u30ec\u30a4\u30a2\u30a6\u30c8\u300d\u306eCSS\u306b<code>display: grid<\/code>\u304c\u51fa\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-border\"><img decoding=\"async\" width=\"1600\" height=\"896\" src=\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261102-figma-layout-grid-devmode-css.jpg\" alt=\"Dev Mode\u3067\u30b0\u30ea\u30c3\u30c9\u306e\u30d5\u30ec\u30fc\u30e0\u3092\u9078\u3093\u3060\u753b\u9762\u3002\u30ec\u30a4\u30a2\u30a6\u30c8\u306eCSS\u306bdisplay: grid\u3068grid-template-rows\u3001grid-template-columns\u304c\u51fa\u3066\u3044\u308b\" class=\"wp-image-23201\" srcset=\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261102-figma-layout-grid-devmode-css.jpg 1600w, https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261102-figma-layout-grid-devmode-css-300x168.jpg 300w, https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261102-figma-layout-grid-devmode-css-1024x573.jpg 1024w, https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261102-figma-layout-grid-devmode-css-768x430.jpg 768w, https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261102-figma-layout-grid-devmode-css-1536x860.jpg 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><figcaption class=\"wp-element-caption\">2026-11-02 \u64ae\u5f71\u3002Figma\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea126.10.13\uff08\u65e5\u672c\u8a9e\u8868\u793a\uff09\u3001\u6709\u6599\u306e\u6559\u80b2\u30d7\u30e9\u30f3\u3001Windows 11\u3002\u30aa\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u30b0\u30ea\u30c3\u30c9\uff083\u00d72\u3001\u9593\u969424\uff09\u306e\u30d5\u30ec\u30fc\u30e0\u3092Dev Mode\u3067\u9078\u3093\u3060\u3068\u3053\u308d<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b3\u30d4\u30fc\u306e\u30dc\u30bf\u30f3\u3067\u53d6\u308a\u51fa\u3057\u305f\u30ec\u30a4\u30a2\u30a6\u30c8\u306eCSS\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\"><code>display: grid;\nwidth: 703px;\nheight: 299px;\nrow-gap: 24px;\ncolumn-gap: 24px;\ngrid-template-rows: repeat(2,minmax(0,1fr));\ngrid-template-columns: repeat(3,minmax(0,1fr));\ngrid-auto-flow: row;<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u5217\u3068\u884c\u306f\u3001\u5e45\u3092\u5909\u3048\u305a\u306b\u4f5c\u3063\u305f\u306e\u3067<code>minmax(0,1fr)<\/code>\u306e\u5747\u7b49\u5272\u308a\u3067\u51fa\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u53f3\u30d1\u30cd\u30eb\u306e\u9593\u9694\u306e24\u306f\u3001<code>row-gap<\/code>\u3068<code>column-gap<\/code>\u306b\u5206\u304b\u308c\u3066\u5165\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b50\u3092\u9078\u3076\u3068\u3001\u307e\u305f\u304c\u305b\u305f\u30bb\u30eb\u306e\u6570\u304c<code>span<\/code>\u3067\u51fa\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-border\"><img decoding=\"async\" width=\"542\" height=\"826\" src=\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261102-figma-layout-grid-devmode-span.jpg\" alt=\"2\u5217\u306b\u307e\u305f\u304c\u308b\u9577\u65b9\u5f62\u3092\u9078\u3093\u3060\u3068\u304d\u306eDev Mode\u306eCSS\u3002grid-column: span 2\u3068justify-self: stretch\" class=\"wp-image-23202\" srcset=\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261102-figma-layout-grid-devmode-span.jpg 542w, https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/11\/cgm-20261102-figma-layout-grid-devmode-span-197x300.jpg 197w\" sizes=\"(max-width: 542px) 100vw, 542px\" \/><figcaption class=\"wp-element-caption\">2026-11-02 \u64ae\u5f71\u3002Figma\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea126.10.13\uff08\u65e5\u672c\u8a9e\u8868\u793a\uff09\u3001\u6709\u6599\u306e\u6559\u80b2\u30d7\u30e9\u30f3\u3001Windows 11\u3002\u5217\u30b9\u30d1\u30f32\u306e\u5b50\u3092\u9078\u3093\u3060\u3068\u304d\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u306eCSS<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>\u7dd1\uff08\u5e45158\u306e\u56fa\u5b9a\u30011\u30bb\u30eb\uff09\uff1a<code>width: 158px; height: 88px; grid-row: span 1; grid-column: span 1;<\/code><\/li>\n\n\n<li>\u6a59\uff08\u5217\u30b9\u30d1\u30f32\u3001\u5e45\u306f\u81ea\u52d5\u3067\u62e1\u5927\u306b\u5909\u308f\u3063\u305f\uff09\uff1a<code>height: 88px; grid-row: span 1; grid-column: span 2; justify-self: stretch;<\/code><\/li>\n\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u5217\u30b9\u30d1\u30f3\u30922\u306b\u3059\u308b\u3068\u5e45\u306e\u6b04\u304c\u300c\u5857\u308a\u300d\uff08\u62e1\u5927\uff09\u306b\u5909\u308f\u308a\u3001CSS\u3067\u306f<code>width<\/code>\u304c\u6d88\u3048\u3001\u4ee3\u308f\u308a\u306b<code>justify-self: stretch<\/code>\u304c\u4ed8\u304d\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u7121\u6599\u306e\u300cCSS\u3068\u3057\u3066\u30b3\u30d4\u30fc\u300d\u3067\u306f\u4f4d\u7f6e\u3068\u5927\u304d\u3055\u306e\u5024\u3060\u3051\u3060\u3063\u305f\u306e\u3067\u3001CSS Grid\u3067\u7d44\u307f\u76f4\u3059\u306a\u3089Dev Mode\u306e\u51fa\u529b\u306e\u307b\u3046\u304c\u305d\u306e\u307e\u307e\u4f7f\u3048\u308b\u5f62\u306b\u8fd1\u3044\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dev Mode\u306e\u8a00\u8a9e\u306e\u4e00\u89a7\u306fCSS\u30fbiOS\u30fbAndroid\u306e3\u3064\u3067\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tailwind\u3084React\u306f\u3001Figma to Code\u306a\u3069\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u304b\u3089\u51fa\u3059\u5f62\u3067\u3059\uff08\u30d7\u30e9\u30b0\u30a4\u30f3\u306f\u5165\u308c\u3066\u3044\u307e\u305b\u3093\uff09\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u3088\u304f\u3042\u308b\u3064\u307e\u305a\u304d\u3068\u5bfe\u51e6<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u5217\u306b\u5438\u3044\u4ed8\u304b\u306a\u3044<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u30c9\u30e9\u30c3\u30b0\u3067\u96e2\u3057\u305f\u4f4d\u7f6e\u304c\u5217\u306e\u7aef\u304b\u3089\u5c11\u3057\u96e2\u308c\u3066\u3044\u308b\u3068\u3001\u5438\u3044\u4ed8\u304b\u305a\u306b\u534a\u7aef\u306a\u5024\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u3082W=379\u3067\u6b62\u307e\u3063\u305f\u306e\u3067\u3001\u30cf\u30f3\u30c9\u30eb\u3092\u7aef\u306b\u5bc4\u305b\u76f4\u3057\u3066384\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u753b\u9762\u306e\u500d\u7387\u3092\u4e0a\u3052\u3066\u304b\u3089\u5bc4\u305b\u308b\u3068\u3001\u5438\u3044\u4ed8\u304f\u4f4d\u7f6e\u304c\u898b\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u30ac\u30a4\u30c9\u304c\u3044\u3064\u306e\u9593\u306b\u304b\u6d88\u3048\u305f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Shift+G\u306f\u6587\u5b57\u306e\u5165\u529b\u6b04\u306e\u5916\u3067\u62bc\u3059\u3068\u3001\u305d\u306e\u307e\u307e\u8868\u793a\u306e\u5207\u308a\u66ff\u3048\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5927\u6587\u5b57\u306eG\u3092\u6253\u3063\u305f\u3064\u3082\u308a\u3067\u30ac\u30a4\u30c9\u304c\u6d88\u3048\u305f\u3068\u304d\u306f\u3001\u3082\u30461\u56deShift+G\u3092\u62bc\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u6570\u5b57\u30ad\u30fc\u3067\u4e0d\u900f\u660e\u5ea6\u304c\u5909\u308f\u3063\u305f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u6570\u5024\u306e\u6b04\u3092\u9078\u3079\u3066\u3044\u306a\u3044\u72b6\u614b\u3067\u300c1024\u300d\u3068\u6253\u3063\u305f\u3068\u3053\u308d\u3001\u9078\u3093\u3067\u3044\u305f\u30d5\u30ec\u30fc\u30e0\u306e\u4e0d\u900f\u660e\u5ea6\u304c24%\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Figma\u3067\u306f\u6570\u5b57\u30ad\u30fc\u304c\u4e0d\u900f\u660e\u5ea6\u306e\u64cd\u4f5c\u306b\u5272\u308a\u5f53\u3066\u3089\u308c\u3066\u3044\u308b\u305f\u3081\u3067\u3001Ctrl+Z\u3067\u623b\u305b\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6570\u5024\u306f\u3001\u6b04\u304c\u9752\u3044\u67a0\u3067\u9078\u3070\u308c\u3066\u3044\u308b\u306e\u3092\u898b\u3066\u304b\u3089\u6253\u3064\u3068\u9632\u3052\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u30b0\u30ea\u30c3\u30c9\u306e\u5b50\u306e\u5927\u304d\u3055\u304c\u5909\u308f\u3089\u306a\u3044<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b50\u306e\u5e45\u3084\u9ad8\u3055\u304c\u300c\u56fa\u5b9a\u300d\u306e\u307e\u307e\u3060\u3068\u3001\u5217\u30921fr\u306b\u3057\u3066\u3082\u30bb\u30eb\u306b\u5408\u308f\u305b\u3066\u4f38\u3073\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b50\u306eW\u3068H\u3092\u300c\u30b3\u30f3\u30c6\u30ca\u306b\u5408\u308f\u305b\u3066\u62e1\u5927\u300d\u306b\u3059\u308b\u3068\u3001\u30bb\u30eb\u3044\u3063\u3071\u3044\u306b\u5e83\u304c\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u884c\u306e\u6570\u3092\u6e1b\u3089\u305b\u306a\u3044<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u516c\u5f0f\u30d8\u30eb\u30d7\uff08\u65e5\u672c\u8a9e\u7248\uff09\u306b\u306f\u3001\u884c\u3084\u5217\u3092\u6e1b\u3089\u3059\u3068\u304d\u306f\u3001\u5148\u306b\u305d\u306e\u884c\u3084\u5217\u3092\u7a7a\u306b\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u3068\u66f8\u304b\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u82f1\u8a9e\u7248\u3067\u306f\u3001\u6e1b\u3089\u3057\u305f\u884c\u306e\u4e2d\u8eab\u306f\u8fd1\u304f\u306e\u30bb\u30eb\u3078\u79fb\u3059\u3068\u8aac\u660e\u304c\u5909\u308f\u3063\u3066\u3044\u3066\u3001\u3053\u306e\u8a18\u4e8b\u3067\u306f\u6e1b\u3089\u3059\u64cd\u4f5c\u306f\u8a66\u3057\u3066\u3044\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u516c\u5f0f\u30d8\u30eb\u30d7\u3068\u753b\u9762\u3067\u9055\u3063\u3066\u3044\u305f\u6240<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>\u6b04\u306e\u540d\u524d\u306f\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u306b\u5909\u308f\u3063\u3066\u3044\u308b\u304c\u3001Shift+G\u3067\u96a0\u3057\u305f\u3068\u304d\u306e\u901a\u77e5\u306f\u300c\u30ec\u30a4\u30a2\u30a6\u30c8\u30b0\u30ea\u30c3\u30c9\u304c\u975e\u8868\u793a\u306b\u306a\u308a\u307e\u3057\u305f\u300d\u3060\u3063\u305f<\/li>\n\n\n<li>\u516c\u5f0f\u30d8\u30eb\u30d7\u306e\u5207\u308a\u66ff\u3048\u306e\u30ad\u30fc\u306fShift+G\u3060\u3051\u3060\u304c\u3001Ctrl+Shift+4\u3067\u3082\u540c\u3058\u3088\u3046\u306b\u5207\u308a\u66ff\u308f\u3063\u305f<\/li>\n\n\n<li>\u30b0\u30ea\u30c3\u30c9\u306e\u30aa\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u306f\u3001\u65e5\u672c\u8a9e\u7248\u306e\u30d8\u30eb\u30d7\u3067\u306f\u30aa\u30fc\u30d7\u30f3\u30d9\u30fc\u30bf\u306e\u6ce8\u8a18\u304c\u3042\u308a\u3001\u82f1\u8a9e\u7248\u306b\u306f\u6ce8\u8a18\u304c\u7121\u304b\u3063\u305f<\/li>\n\n\n<li>\u65e5\u672c\u8a9e\u7248\u306e\u30d8\u30eb\u30d7\u306b\u306f\u30c8\u30e9\u30c3\u30af\u306e1fr\uff08\u30b3\u30f3\u30c6\u30ca\u306b\u5408\u308f\u305b\u3066\u62e1\u5927\uff09\u306e\u8aac\u660e\u304c\u7121\u3044\u304c\u3001\u753b\u9762\u306e\u25bc\u306b\u306f\u300c\u30b3\u30f3\u30c6\u30ca\u306b\u5408\u308f\u305b\u3066\u62e1\u5927(1fr)\u300d\u304c\u3042\u3063\u305f<\/li>\n\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u307e\u3068\u3081<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>Figma\u306e\u30b0\u30ea\u30c3\u30c9\u306f\u3001\u88dc\u52a9\u7dda\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u3068\u3001\u884c\u3068\u5217\u306b\u4e26\u3079\u308b\u30aa\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u30b0\u30ea\u30c3\u30c9\u306e2\u3064<\/li>\n\n\n<li>\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u306f\u30d5\u30ec\u30fc\u30e0\u3092\u9078\u3073\u3001\u53f3\u30d1\u30cd\u30eb\u306e\uff0b\u3067\u8ffd\u52a0\u3057\u3066\u3001\u7a2e\u985e\u3092\u5217\u306b\u3059\u308c\u307012\u5217\u304c\u4f5c\u308c\u308b<\/li>\n\n\n<li>1440px\u306b\u4f59\u767d120\u30fb\u30ac\u30bf\u30fc24\u306e12\u5217\u306a\u30891\u521778px\u3067\u3001\u9577\u65b9\u5f62\u306f\u5217\u306e\u7aef\u306b\u30b9\u30ca\u30c3\u30d7\u3059\u308b<\/li>\n\n\n<li>\u8868\u793a\u3068\u975e\u8868\u793a\u306fShift+G\uff08\u53f3\u4e0a\u306e\u500d\u7387\u306e\u30e1\u30cb\u30e5\u30fc\u306b\u3082\u3042\u308b\uff09\u30011\u3064\u3060\u3051\u306a\u3089\u76ee\u306e\u30a2\u30a4\u30b3\u30f3<\/li>\n\n\n<li>\u898b\u3048\u306a\u3044\u3068\u304d\u306f\u3001\u5168\u4f53\u306e\u8868\u793a\u30fb\u76ee\u306e\u30a2\u30a4\u30b3\u30f3\u30fb\u30d5\u30ec\u30fc\u30e0\u304b\u3069\u3046\u304b\u306e\u9806\u306b\u78ba\u304b\u3081\u308b<\/li>\n\n\n<li>\u540c\u3058\u30ac\u30a4\u30c9\u306f\u30b9\u30bf\u30a4\u30eb\u306b\u3057\u3066\u4f7f\u3044\u56de\u305b\u308b\uff08\u7121\u6599\u306e\u30d7\u30e9\u30f3\u3067\u3082\u30d5\u30a1\u30a4\u30eb\u306e\u4e2d\u3067\u4f5c\u308c\u305f\uff09<\/li>\n\n\n<li>\u30aa\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u30b0\u30ea\u30c3\u30c9\u306f\u5217\u30b9\u30d1\u30f3\u3068\u884c\u30b9\u30d1\u30f3\u3067\u5927\u5c0f\u306e\u30bf\u30a4\u30eb\u304c\u7d44\u3081\u3001\u6709\u6599\u306eDev Mode\u3067\u306fdisplay: grid\u3068span\u306eCSS\u3067\u51fa\u308b<\/li>\n\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b21\u306e\u4e00\u6b69\u306f\u3001\u4eca\u306e\u30d5\u30ec\u30fc\u30e0\u306b12\u5217\u306e\u30ac\u30a4\u30c9\u30921\u3064\u8db3\u3057\u3066\u3001\u898b\u51fa\u3057\u3084\u30ab\u30fc\u30c9\u306e\u5de6\u7aef\u304c\u5217\u306e\u59cb\u307e\u308a\u306b\u305d\u308d\u3063\u3066\u3044\u308b\u304b\u3001X\u306e\u5024\u3067\u78ba\u304b\u3081\u3066\u307f\u308b\u3053\u3068\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u53c2\u8003\uff1a<a href=\"https:\/\/help.figma.com\/hc\/ja\/articles\/360040450513\">\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u3092\u4f5c\u6210<\/a>\u3001<a href=\"https:\/\/help.figma.com\/hc\/ja\/articles\/31289469907863\">\u30b0\u30ea\u30c3\u30c9\u30aa\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u30d5\u30ed\u30fc\u3092\u4f7f\u7528\u3059\u308b<\/a>\u3001<a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/31289469907863\">Use the grid auto layout flow<\/a>\uff08\u3044\u305a\u308c\u30822026\u5e7411\u67081\u65e5\u306b\u78ba\u8a8d\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Figma\u306e\u30b0\u30ea\u30c3\u30c9\u306e\u4f7f\u3044\u65b9\u3092\u30012026\u5e7411\u67081\u65e5\u306b\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea\u3067\u78ba\u304b\u3081\u307e\u3057\u305f\u3002\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u306712\u5217\u3092\u4f5c\u3063\u3066\u9577\u65b9\u5f62\u3092\u30b9\u30ca\u30c3\u30d7\u3055\u305b\u308b\u624b\u9806\u3001\u8868\u793a\u3068\u975e\u8868\u793a\u306e\u5207\u308a\u66ff\u3048\u3001\u30b9\u30bf\u30a4\u30eb\u5316\u3001\u30aa\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u30b0\u30ea\u30c3\u30c9\u3067\u884c\u3068\u5217\u306b\u307e\u305f\u304c\u308b\u914d\u7f6e\u3092\u4f5c\u308b\u624b\u9806\u3068\u3001CSS\u3068\u3057\u3066\u30b3\u30d4\u30fc\u3057\u305f\u7d50\u679c\u3092\u8f09\u305b\u3066\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"author":1,"featured_media":23173,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"swell_btn_cv_data":"","book_review_data":"","footnotes":"","ssp_meta_title":"Figma\u306e\u30b0\u30ea\u30c3\u30c9\u306e\u4f7f\u3044\u65b9\uff5c\u8868\u793a\u30fb\u975e\u8868\u793a\u3068\u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8","ssp_meta_description":"Figma\u306e\u30b0\u30ea\u30c3\u30c9\u306f2\u7a2e\u985e\u3042\u308a\u307e\u3059\u3002\u30d5\u30ec\u30fc\u30e0\u306b\u5f15\u304f\u88dc\u52a9\u7dda\u306e\u300c\u30ec\u30a4\u30a2\u30a6\u30c8\u30ac\u30a4\u30c9\u300d\u3068\u3001\u5b50\u3092\u884c\u3068\u5217\u306b\u4e26\u3079\u308b\u30aa\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u300c\u30b0\u30ea\u30c3\u30c9\u300d\u3067\u3059\u300212\u5217\u306e\u4f5c\u308a\u65b9\u3001Shift+G\u3067\u306e\u8868\u793a\u30fb\u975e\u8868\u793a\u3001\u51fa\u306a\u3044\u3068\u304d\u306e\u539f\u56e0\u3001\u30b9\u30bf\u30a4\u30eb\u5316\u3092\u5b9f\u6a5f\u3067\u78ba\u304b\u3081\u307e\u3057\u305f\u3002"},"categories":[132],"tags":[],"class_list":["post-23172","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to-use"],"_links":{"self":[{"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/posts\/23172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/comments?post=23172"}],"version-history":[{"count":4,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/posts\/23172\/revisions"}],"predecessor-version":[{"id":23204,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/posts\/23172\/revisions\/23204"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/media\/23173"}],"wp:attachment":[{"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/media?parent=23172"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/categories?post=23172"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/tags?post=23172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}