{"id":1363,"date":"2025-03-24T08:52:17","date_gmt":"2025-03-23T23:52:17","guid":{"rendered":"https:\/\/dexall.co.jp\/articles\/?p=1363"},"modified":"2025-03-24T08:52:17","modified_gmt":"2025-03-23T23:52:17","slug":"%e3%80%902024%e5%b9%b4%e4%bf%9d%e5%ad%98%e7%89%88%e3%80%91rails-x-bootstrap%e3%81%a7%e4%bd%9c%e3%82%8b%e6%9c%80%e6%96%b0%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96ui%e3%81%ae%e5%ae%9f","status":"publish","type":"post","link":"https:\/\/dexall.co.jp\/articles\/?p=1363","title":{"rendered":"\u30102024\u5e74\u4fdd\u5b58\u7248\u3011Rails \u00d7 Bootstrap\u3067\u4f5c\u308b\u6700\u65b0\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6UI\u306e\u5b9f\u88c5\u65b9\u6cd5 \u301c\u5c0e\u5165\u304b\u3089\u5b9f\u8df5\u7684\u306a\u6d3b\u7528\u307e\u3067"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\" id=\"i-0\">Rails \u00d7 Bootstrap\u306e\u57fa\u790e\u77e5\u8b58<\/h1>\n\n\n\n<div class=\"toc\"><br \/>\n<b>Warning<\/b>:  Undefined array key \"is_admin\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>116<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_category_top\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>121<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_top\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>128<\/b><br \/>\n    <div id=\"toc_container\" class=\"sgb-toc--bullets js-smooth-scroll\" data-dialog-title=\"\u76ee\u6b21\">\n      <p class=\"toc_title\">\u76ee\u6b21 <\/p>\n      <ul class=\"toc_list\">  <li class=\"first\">    <a href=\"#i-0\">Rails \u00d7 Bootstrap\u306e\u57fa\u790e\u77e5\u8b58<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-1\">Bootstrap\u3068\u306f\uff1fRails\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u4f7f\u3046\u30e1\u30ea\u30c3\u30c8<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-3\">\u6700\u65b0\u7248Bootstrap\u306e\u7279\u5fb4\u3068\u6539\u5584\u70b9<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-7\">Rails\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3078\u306ebootstrap\u5c0e\u5165\u624b\u9806<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-8\">gem\u306b\u3088\u308b\u5c0e\u5165\u65b9\u6cd5\u3068webpacker\u306b\u3088\u308b\u5c0e\u5165\u65b9\u6cd5\u306e\u6bd4\u8f03<\/a>      <\/li>      <li>        <a href=\"#i-11\">\u6b63\u3057\u3044\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u306e\u66f8\u304d\u65b9\u3068\u6ce8\u610f\u70b9<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-14\">\u3088\u304f\u3042\u308b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u30a8\u30e9\u30fc\u3068\u305d\u306e\u89e3\u6c7a\u6cd5<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-19\">\u5b9f\u8df5\u7684\u306aBootstrap\u6d3b\u7528\u30c6\u30af\u30cb\u30c3\u30af<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-20\">\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30b0\u30ea\u30c3\u30c9\u30b7\u30b9\u30c6\u30e0\u306e\u4f7f\u3044\u3053\u306a\u3057\u65b9<\/a>      <\/li>      <li>        <a href=\"#i-23\">Bootstrap\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u8853<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-26\">Sass\u3092\u4f7f\u3063\u305f\u30b9\u30bf\u30a4\u30eb\u306e\u30aa\u30fc\u30d0\u30fc\u30e9\u30a4\u30c9\u65b9\u6cd5<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-31\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u3068\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-32\">\u5fc5\u8981\u306a\u6a5f\u80fd\u3060\u3051\u3092\u8aad\u307f\u8fbc\u3080\u30c6\u30af\u30cb\u30c3\u30af<\/a>      <\/li>      <li>        <a href=\"#i-35\">\u30a2\u30bb\u30c3\u30c8\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3067\u306e\u6700\u9069\u5316\u65b9\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-39\">\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u308b\u30b3\u30c4<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-43\">\u5b9f\u88c5\u4f8b\u3067\u5b66\u3076Bootstrap\u6d3b\u7528\u6cd5<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-44\">\u30e2\u30c0\u30f3\u306a\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30d0\u30fc\u306e\u4f5c\u6210\u624b\u9806<\/a>      <\/li>      <li>        <a href=\"#i-47\">\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306a\u30d5\u30a9\u30fc\u30e0\u5b9f\u88c5\u306e\u30dd\u30a4\u30f3\u30c8<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-50\">Bootstrap\u30e2\u30fc\u30c0\u30eb\u3068\u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3\u306e\u5b9f\u88c5<\/a>      <\/li>    <\/ul>  <\/li>  <li class=\"last\">    <a href=\"#i-53\">\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u3068\u30c7\u30d0\u30c3\u30b0<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-54\">CSS\u30af\u30e9\u30b9\u306e\u7af6\u5408\u3092\u89e3\u6c7a\u3059\u308b\u65b9\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-57\">JavaScript\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u554f\u984c\u5bfe\u51e6\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-60\">\u30d6\u30e9\u30a6\u30b6\u4e92\u63db\u6027\u306e\u554f\u984c\u3068\u89e3\u6c7a\u7b56<\/a>      <\/li>    <\/ul>  <\/li><\/ul>\n      <a href=\"#\" class=\"sgb-toc-button js-toc-button\" rel=\"nofollow\" data-open-dialog=\"true\"><i class=\"fa fa-list\"><\/i><span class=\"sgb-toc-button__text\">\u76ee\u6b21\u3078<\/span><\/a>\n    <\/div><\/div><h2 class=\"wp-block-heading\" id=\"i-1\">Bootstrap\u3068\u306f\uff1fRails\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u4f7f\u3046\u30e1\u30ea\u30c3\u30c8<\/h2>\n\n\n\n<p>Bootstrap\u306f\u3001Twitter\u306e\u30a8\u30f3\u30b8\u30cb\u30a2\u30c1\u30fc\u30e0\u306b\u3088\u3063\u3066\u958b\u767a\u3055\u308c\u305f\u3001\u4e16\u754c\u3067\u6700\u3082\u4eba\u6c17\u306e\u3042\u308b\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u3002\u73fe\u5728\u306e\u6700\u65b0\u7248\u3067\u3042\u308bBootstrap 5\u3067\u306f\u3001jQuery\u3078\u306e\u4f9d\u5b58\u3092\u6392\u9664\u3057\u3001\u3088\u308a\u30e2\u30c0\u30f3\u306a\u958b\u767a\u74b0\u5883\u3092\u5b9f\u73fe\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-2\">Rails\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306e\u4e3b\u306a\u30e1\u30ea\u30c3\u30c8<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u901f\u5ea6\u306e\u5927\u5e45\u306a\u5411\u4e0a<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u8c4a\u5bcc\u306a\u4e8b\u524d\u5b9a\u7fa9\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/li>\n\n\n\n<li>\u4e00\u8cab\u6027\u306e\u3042\u308b\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0<\/li>\n\n\n\n<li>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u306e\u7c21\u5358\u306a\u5b9f\u88c5<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u4fdd\u5b88\u6027\u306e\u5411\u4e0a<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6a19\u6e96\u5316\u3055\u308c\u305f\u30af\u30e9\u30b9\u547d\u540d\u898f\u5247<\/li>\n\n\n\n<li>\u30e2\u30b8\u30e5\u30fc\u30eb\u5316\u3055\u308c\u305f\u69cb\u9020<\/li>\n\n\n\n<li>\u5145\u5b9f\u3057\u305f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30c1\u30fc\u30e0\u958b\u767a\u306e\u52b9\u7387\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5171\u901a\u306e\u8a2d\u8a08\u8a00\u8a9e\u3068\u3057\u3066\u306e\u6d3b\u7528<\/li>\n\n\n\n<li>\u30b3\u30fc\u30c9\u306e\u4e00\u8cab\u6027\u7dad\u6301<\/li>\n\n\n\n<li>\u65b0\u30e1\u30f3\u30d0\u30fc\u306e\u5b66\u7fd2\u30b3\u30b9\u30c8\u524a\u6e1b<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-3\">\u6700\u65b0\u7248Bootstrap\u306e\u7279\u5fb4\u3068\u6539\u5584\u70b9<\/h2>\n\n\n\n<p>Bootstrap 5\u3067\u306f\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u91cd\u8981\u306a\u6539\u5584\u304c\u884c\u308f\u308c\u3066\u3044\u307e\u3059\uff1a<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-4\">\u6280\u8853\u7684\u306a\u9032\u5316<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30e2\u30c0\u30f3\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>jQuery\u3078\u306e\u4f9d\u5b58\u6392\u9664<\/li>\n\n\n\n<li>CSS\u5909\u6570\u306e\u7a4d\u6975\u7684\u306a\u6d3b\u7528<\/li>\n\n\n\n<li>IE11\u306e\u30b5\u30dd\u30fc\u30c8\u7d42\u4e86\u306b\u3088\u308b\u6700\u9069\u5316<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u5411\u4e0a<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30d5\u30a1\u30a4\u30eb\u30b5\u30a4\u30ba\u306e\u524a\u6e1b<\/li>\n\n\n\n<li>\u8aad\u307f\u8fbc\u307f\u901f\u5ea6\u306e\u6539\u5584<\/li>\n\n\n\n<li>\u30e2\u30b8\u30e5\u30fc\u30eb\u5358\u4f4d\u3067\u306e\u5c0e\u5165\u53ef\u80fd\u6027<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-5\">\u65b0\u6a5f\u80fd\u3068\u6539\u5584\u70b9<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>RTL\u30b5\u30dd\u30fc\u30c8<\/strong>\u306e\u8ffd\u52a0<\/li>\n\n\n\n<li><strong>\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3API\u306e\u5f37\u5316<\/strong><\/li>\n\n\n\n<li><strong>\u30d5\u30a9\u30fc\u30e0\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb<\/strong>\u306e\u6539\u5584<\/li>\n\n\n\n<li><strong>\u30b0\u30ea\u30c3\u30c9\u30b7\u30b9\u30c6\u30e0<\/strong>\u306e\u62e1\u5f35<\/li>\n\n\n\n<li><strong>\u30ab\u30e9\u30fc\u30b7\u30b9\u30c6\u30e0<\/strong>\u306e\u5237\u65b0<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-6\">Rails\u3068\u306e\u89aa\u548c\u6027<\/h3>\n\n\n\n<p>Rails\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306f\u3001\u4ee5\u4e0b\u306e\u65b9\u6cd5\u3067Bootstrap\u3092\u52b9\u679c\u7684\u306b\u6d3b\u7528\u3067\u304d\u307e\u3059\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># Gemfile\u306e\u8a2d\u5b9a\u4f8b\ngem 'bootstrap', '~&gt; 5.3.0'\ngem 'sassc-rails'<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/assets\/stylesheets\/application.scss\n@import \"bootstrap\";\n\n\/\/ \u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u4f8b\n$primary: #007bff;\n$theme-colors: (\n  \"custom\": #ff6b6b\n);<\/pre>\n\n\n\n<p>\u3053\u308c\u306b\u3088\u308a\u3001Rails\u306e\u30a2\u30bb\u30c3\u30c8\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3068Bootstrap\u306e\u6a5f\u80fd\u3092\u6700\u5927\u9650\u306b\u6d3b\u7528\u3067\u304d\u307e\u3059\u3002\u7279\u306b\u3001Webpacker\u3092\u4f7f\u7528\u3059\u308b\u5834\u5408\u306f\u3001\u3088\u308a\u67d4\u8edf\u306a\u8a2d\u5b9a\u3068\u30e2\u30b8\u30e5\u30fc\u30eb\u7ba1\u7406\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306a\u57fa\u790e\u77e5\u8b58\u3092\u8e0f\u307e\u3048\u305f\u4e0a\u3067\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306fRails\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3078\u306e\u5177\u4f53\u7684\u306a\u5c0e\u5165\u624b\u9806\u3092\u8a73\u3057\u304f\u898b\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"i-7\">Rails\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3078\u306ebootstrap\u5c0e\u5165\u624b\u9806<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-8\">gem\u306b\u3088\u308b\u5c0e\u5165\u65b9\u6cd5\u3068webpacker\u306b\u3088\u308b\u5c0e\u5165\u65b9\u6cd5\u306e\u6bd4\u8f03<\/h2>\n\n\n\n<p>\u73fe\u4ee3\u306eRails\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306f\u3001\u4e3b\u306b2\u3064\u306e\u65b9\u6cd5\u3067Bootstrap\u3092\u5c0e\u5165\u3067\u304d\u307e\u3059\u3002\u305d\u308c\u305e\u308c\u306e\u7279\u5fb4\u3092\u8a73\u3057\u304f\u898b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-9\">1. gem\u306b\u3088\u308b\u5c0e\u5165<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># Gemfile\ngem 'bootstrap', '~&gt; 5.3.0'\ngem 'sassc-rails'\n\n# \u203bjQuery\u304c\u5fc5\u8981\u306a\u5834\u5408\uff08Bootstrap 4\u4ee5\u524d\uff09\ngem 'jquery-rails'<\/pre>\n\n\n\n<p><strong>\u30e1\u30ea\u30c3\u30c8<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u304c\u7c21\u5358<\/li>\n\n\n\n<li>\u30a2\u30bb\u30c3\u30c8\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3068\u306e\u7d71\u5408\u304c\u5bb9\u6613<\/li>\n\n\n\n<li>\u30d0\u30fc\u30b8\u30e7\u30f3\u7ba1\u7406\u304c\u5358\u7d14<\/li>\n<\/ul>\n\n\n\n<p><strong>\u30c7\u30e1\u30ea\u30c3\u30c8<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306e\u67d4\u8edf\u6027\u304c\u4f4e\u3044<\/li>\n\n\n\n<li>\u500b\u5225\u6a5f\u80fd\u306e\u9078\u629e\u304c\u96e3\u3057\u3044<\/li>\n\n\n\n<li>\u30a2\u30bb\u30c3\u30c8\u306e\u6700\u9069\u5316\u304c\u9650\u5b9a\u7684<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-10\">2. webpacker\u306b\u3088\u308b\u5c0e\u5165<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ package.json\n{\n  \"dependencies\": {\n    \"bootstrap\": \"^5.3.0\",\n    \"@popperjs\/core\": \"^2.11.8\"\n  }\n}\n\n\/\/ app\/javascript\/packs\/application.js\nimport 'bootstrap'\nimport '..\/stylesheets\/application.scss'\n\n\/\/ app\/javascript\/stylesheets\/application.scss\n@import \"~bootstrap\/scss\/bootstrap\";<\/pre>\n\n\n\n<p><strong>\u30e1\u30ea\u30c3\u30c8<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30e2\u30b8\u30e5\u30fc\u30eb\u5358\u4f4d\u3067\u306e\u5c0e\u5165\u304c\u53ef\u80fd<\/li>\n\n\n\n<li>\u3088\u308a\u67d4\u8edf\u306a\u30ab\u30b9\u30bf\u30de\u30a4\u30ba<\/li>\n\n\n\n<li>\u6700\u65b0\u306e\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u624b\u6cd5\u306b\u9069\u5408<\/li>\n\n\n\n<li>Tree-shaking\u306b\u3088\u308b\u6700\u9069\u5316<\/li>\n<\/ul>\n\n\n\n<p><strong>\u30c7\u30e1\u30ea\u30c3\u30c8<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u8a2d\u5b9a\u304c\u6bd4\u8f03\u7684\u8907\u96d1<\/li>\n\n\n\n<li>\u8ffd\u52a0\u306e\u5b66\u7fd2\u30b3\u30b9\u30c8\u304c\u5fc5\u8981<\/li>\n\n\n\n<li>\u30d3\u30eb\u30c9\u6642\u9593\u304c\u5897\u52a0\u3059\u308b\u53ef\u80fd\u6027<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-11\">\u6b63\u3057\u3044\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u306e\u66f8\u304d\u65b9\u3068\u6ce8\u610f\u70b9<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-12\">\u57fa\u672c\u7684\u306a\u8a2d\u5b9a\u624b\u9806<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30a2\u30bb\u30c3\u30c8\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u4f7f\u7528\u6642<\/strong>:<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># config\/initializers\/assets.rb\nRails.application.config.assets.precompile += %w( bootstrap.min.js bootstrap.min.css )\n\n# app\/assets\/stylesheets\/application.scss\n@import \"bootstrap\";\n@import \"custom\"; \/\/ \u30ab\u30b9\u30bf\u30e0\u30b9\u30bf\u30a4\u30eb\n\n# app\/assets\/javascripts\/application.js\n\/\/= require bootstrap<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>Webpack\u4f7f\u7528\u6642<\/strong>:<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ config\/webpack\/environment.js\nconst { environment } = require('@rails\/webpacker')\nconst webpack = require('webpack')\n\nenvironment.plugins.append('Provide', new webpack.ProvidePlugin({\n  Popper: ['@popperjs\/core', 'default']\n}))\n\nmodule.exports = environment<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-13\">\u91cd\u8981\u306a\u6ce8\u610f\u70b9<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>SCSS\u30d5\u30a1\u30a4\u30eb\u306e\u62e1\u5f35\u5b50\u306f\u5fc5\u305a<code>.scss<\/code>\u3092\u4f7f\u7528<\/li>\n\n\n\n<li>\u30ab\u30b9\u30bf\u30e0\u5909\u6570\u306f<code>@import \"bootstrap\"<\/code>\u306e\u524d\u306b\u5b9a\u7fa9<\/li>\n\n\n\n<li>JavaScript\u306e\u4f9d\u5b58\u95a2\u4fc2\u3092\u6b63\u3057\u304f\u89e3\u6c7a<\/li>\n\n\n\n<li>\u30a2\u30bb\u30c3\u30c8\u306e\u5727\u7e2e\u8a2d\u5b9a\u3092\u78ba\u8a8d<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-14\">\u3088\u304f\u3042\u308b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u30a8\u30e9\u30fc\u3068\u305d\u306e\u89e3\u6c7a\u6cd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-15\">1. Sass\u30b3\u30f3\u30d1\u30a4\u30eb\u30a8\u30e9\u30fc<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Error: File to import not found or unreadable: bootstrap<\/pre>\n\n\n\n<p>\u89e3\u6c7a\u7b56:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># Gemfile\u306b\u8ffd\u52a0\ngem 'sassc-rails'\nbundle install<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-16\">2. JavaScript\u4f9d\u5b58\u95a2\u4fc2\u30a8\u30e9\u30fc<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Uncaught Error: Bootstrap's JavaScript requires jQuery<\/pre>\n\n\n\n<p>\u89e3\u6c7a\u7b56:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ webpack\u8a2d\u5b9a\u306b\u8ffd\u52a0\nenvironment.plugins.append('Provide', new webpack.ProvidePlugin({\n  $: 'jquery',\n  jQuery: 'jquery'\n}))<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-17\">3. \u30a2\u30bb\u30c3\u30c8\u30d7\u30ea\u30b3\u30f3\u30d1\u30a4\u30eb\u30a8\u30e9\u30fc<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Asset was not declared to be precompiled in production<\/pre>\n\n\n\n<p>\u89e3\u6c7a\u7b56:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># config\/initializers\/assets.rb\nRails.application.config.assets.precompile += %w( bootstrap.* )<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-18\">\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d0\u30fc\u30b8\u30e7\u30f3\u306e\u4e92\u63db\u6027\u78ba\u8a8d<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ruby\u3001Rails\u3001Bootstrap\u3001\u95a2\u9023gem\u306e\u30d0\u30fc\u30b8\u30e7\u30f3<\/li>\n\n\n\n<li>\u4f9d\u5b58\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u78ba\u8a8d<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u74b0\u5883\u3067\u306e\u691c\u8a3c<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30a2\u30bb\u30c3\u30c8\u306e\u4e8b\u524d\u30b3\u30f3\u30d1\u30a4\u30eb<\/li>\n\n\n\n<li>\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u30af\u30ea\u30a2<\/li>\n\n\n\n<li>\u4e00\u6642\u30d5\u30a1\u30a4\u30eb\u306e\u524a\u9664<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u672c\u756a\u74b0\u5883\u3067\u306e\u78ba\u8a8d\u4e8b\u9805<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30a2\u30bb\u30c3\u30c8\u914d\u4fe1\u306e\u8a2d\u5b9a<\/li>\n\n\n\n<li>CDN\u5229\u7528\u306e\u8003\u616e<\/li>\n\n\n\n<li>\u30ad\u30e3\u30c3\u30b7\u30e5\u6226\u7565\u306e\u691c\u8a0e<\/li>\n<\/ul>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u624b\u9806\u3068\u6ce8\u610f\u70b9\u3092\u62bc\u3055\u3048\u308b\u3053\u3068\u3067\u3001Rails\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3078\u306eBootstrap\u5c0e\u5165\u3092\u30b9\u30e0\u30fc\u30ba\u306b\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u5c0e\u5165\u3057\u305fBootstrap\u306e\u5b9f\u8df5\u7684\u306a\u6d3b\u7528\u30c6\u30af\u30cb\u30c3\u30af\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"i-19\">\u5b9f\u8df5\u7684\u306aBootstrap\u6d3b\u7528\u30c6\u30af\u30cb\u30c3\u30af<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-20\">\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30b0\u30ea\u30c3\u30c9\u30b7\u30b9\u30c6\u30e0\u306e\u4f7f\u3044\u3053\u306a\u3057\u65b9<\/h2>\n\n\n\n<p>Bootstrap\u306e\u30b0\u30ea\u30c3\u30c9\u30b7\u30b9\u30c6\u30e0\u306f12\u30ab\u30e9\u30e0\u65b9\u5f0f\u3092\u63a1\u7528\u3057\u3066\u304a\u308a\u3001\u69d8\u3005\u306a\u753b\u9762\u30b5\u30a4\u30ba\u306b\u5bfe\u5fdc\u3067\u304d\u308b\u67d4\u8edf\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-21\">\u57fa\u672c\u7684\u306a\u30b0\u30ea\u30c3\u30c9\u69cb\u9020<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;%# app\/views\/layouts\/_responsive_grid.html.erb %&gt;\n&lt;div class=\"container\"&gt;\n  &lt;div class=\"row\"&gt;\n    &lt;div class=\"col-12 col-md-6 col-lg-4\"&gt;\n      &lt;!-- \u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\uff1a100%, \u30bf\u30d6\u30ec\u30c3\u30c8\uff1a50%, \u30c7\u30b9\u30af\u30c8\u30c3\u30d7\uff1a33.3% --&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-22\">\u9ad8\u5ea6\u306a\u30b0\u30ea\u30c3\u30c9\u30c6\u30af\u30cb\u30c3\u30af<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30aa\u30d5\u30bb\u30c3\u30c8\u306e\u6d3b\u7528<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"col-md-6 offset-md-3\"&gt;\n  &lt;!-- \u4e2d\u592e\u5bc4\u305b\u3055\u308c\u305f6\u30ab\u30e9\u30e0\u5e45\u306e\u30b3\u30f3\u30c6\u30f3\u30c4 --&gt;\n&lt;\/div&gt;<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30cd\u30b9\u30c8\u3055\u308c\u305f\u30b0\u30ea\u30c3\u30c9<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"row\"&gt;\n  &lt;div class=\"col-sm-9\"&gt;\n    &lt;div class=\"row\"&gt;\n      &lt;div class=\"col-8 col-sm-6\"&gt;\u30cd\u30b9\u30c8\u3055\u308c\u305f\u30b3\u30f3\u30c6\u30f3\u30c4&lt;\/div&gt;\n      &lt;div class=\"col-4 col-sm-6\"&gt;\u30cd\u30b9\u30c8\u3055\u308c\u305f\u30b3\u30f3\u30c6\u30f3\u30c4&lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-23\">Bootstrap\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u8853<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-24\">1. \u30c7\u30fc\u30bf\u5c5e\u6027\u3092\u6d3b\u7528\u3057\u305f\u30ab\u30b9\u30bf\u30de\u30a4\u30ba<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># app\/helpers\/bootstrap_helper.rb\nmodule BootstrapHelper\n  def custom_modal(title:, content:, options: {})\n    content_tag :div, class: 'modal fade', \n                     data: { \n                       bs_backdrop: options[:backdrop] || 'static',\n                       bs_keyboard: options[:keyboard] || 'false'\n                     } do\n      # \u30e2\u30fc\u30c0\u30eb\u306e\u5185\u5bb9\n    end\n  end\nend<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-25\">2. JavaScript\u306b\u3088\u308b\u52d5\u7684\u306a\u5236\u5fa1<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/javascript\/custom\/bootstrap_extensions.js\nimport { Modal } from 'bootstrap'\n\ndocument.addEventListener('turbo:load', () =&gt; {\n  const modals = document.querySelectorAll('.modal')\n  modals.forEach(modal =&gt; {\n    const bsModal = new Modal(modal, {\n      backdrop: 'static',\n      keyboard: false\n    })\n\n    \/\/ \u30ab\u30b9\u30bf\u30e0\u30a4\u30d9\u30f3\u30c8\u306e\u8ffd\u52a0\n    modal.addEventListener('shown.bs.modal', event =&gt; {\n      \/\/ \u30e2\u30fc\u30c0\u30eb\u304c\u8868\u793a\u3055\u308c\u305f\u5f8c\u306e\u51e6\u7406\n    })\n  })\n})<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-26\">Sass\u3092\u4f7f\u3063\u305f\u30b9\u30bf\u30a4\u30eb\u306e\u30aa\u30fc\u30d0\u30fc\u30e9\u30a4\u30c9\u65b9\u6cd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-27\">1. \u5909\u6570\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/assets\/stylesheets\/custom\/_variables.scss\n$primary: #0066cc;\n$border-radius: 0.5rem;\n$enable-shadows: true;\n$enable-gradients: true;\n\n\/\/ \u30ab\u30b9\u30bf\u30e0\u914d\u8272\u306e\u8ffd\u52a0\n$theme-colors: (\n  \"custom-primary\": #3498db,\n  \"custom-secondary\": #2ecc71\n);<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-28\">2. \u30df\u30c3\u30af\u30b9\u30a4\u30f3\u306e\u6d3b\u7528<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/assets\/stylesheets\/custom\/_mixins.scss\n@mixin custom-card-style {\n  @include border-radius($border-radius);\n  box-shadow: $box-shadow;\n\n  &amp;:hover {\n    transform: translateY(-2px);\n    transition: transform 0.2s ease-in-out;\n  }\n}\n\n\/\/ \u4f7f\u7528\u4f8b\n.custom-card {\n  @include custom-card-style;\n  \/\/ \u8ffd\u52a0\u306e\u30b9\u30bf\u30a4\u30eb\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-29\">3. \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u62e1\u5f35<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/assets\/stylesheets\/custom\/_components.scss\n.btn-custom {\n  @extend .btn;\n  @extend .btn-primary;\n\n  &amp;:hover {\n    background: linear-gradient(to right, $primary, darken($primary, 10%));\n  }\n}\n\n\/\/ \u30ab\u30b9\u30bf\u30e0\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\n.navbar-custom {\n  @extend .navbar;\n  background: linear-gradient(to right, $primary, $secondary);\n  padding: 1rem 2rem;\n\n  .nav-link {\n    color: $white;\n    font-weight: 500;\n\n    &amp;:hover {\n      color: rgba($white, 0.9);\n    }\n  }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-30\">\u5b9f\u88c5\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30e2\u30b8\u30e5\u30fc\u30eb\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6a5f\u80fd\u3054\u3068\u306bSCSS\u30d5\u30a1\u30a4\u30eb\u3092\u5206\u5272<\/li>\n\n\n\n<li>\u95a2\u9023\u3059\u308b\u30b9\u30bf\u30a4\u30eb\u3092\u30b0\u30eb\u30fc\u30d7\u5316<\/li>\n\n\n\n<li>\u518d\u5229\u7528\u53ef\u80fd\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f5c\u6210<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u8003\u616e<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4e0d\u8981\u306a\u30b9\u30bf\u30a4\u30eb\u306e\u524a\u9664<\/li>\n\n\n\n<li>\u30bb\u30ec\u30af\u30bf\u306e\u6700\u9069\u5316<\/li>\n\n\n\n<li>\u30e1\u30c7\u30a3\u30a2\u30af\u30a8\u30ea\u306e\u52b9\u7387\u7684\u306a\u4f7f\u7528<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u4fdd\u5b88\u6027\u306e\u5411\u4e0a<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u547d\u540d\u898f\u5247\u306e\u4e00\u8cab\u6027<\/li>\n\n\n\n<li>\u30b3\u30e1\u30f3\u30c8\u306b\u3088\u308b\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u5316<\/li>\n\n\n\n<li>\u5909\u6570\u3068\u30df\u30c3\u30af\u30b9\u30a4\u30f3\u306e\u9069\u5207\u306a\u4f7f\u7528<\/li>\n<\/ul>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30c6\u30af\u30cb\u30c3\u30af\u3092\u6d3b\u7528\u3059\u308b\u3053\u3068\u3067\u3001Bootstrap\u3092\u30d9\u30fc\u30b9\u306b\u3057\u306a\u304c\u3089\u3082\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u56fa\u6709\u306e\u8981\u4ef6\u306b\u5bfe\u5fdc\u3057\u305f\u67d4\u8edf\u306aUI\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u3053\u308c\u3089\u306e\u5b9f\u88c5\u3092\u6700\u9069\u5316\u3059\u308b\u305f\u3081\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30c1\u30e5\u30fc\u30cb\u30f3\u30b0\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"i-31\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u3068\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-32\">\u5fc5\u8981\u306a\u6a5f\u80fd\u3060\u3051\u3092\u8aad\u307f\u8fbc\u3080\u30c6\u30af\u30cb\u30c3\u30af<\/h2>\n\n\n\n<p>Bootstrap\u306e\u5168\u6a5f\u80fd\u3092\u8aad\u307f\u8fbc\u3080\u3068\u3001\u4e0d\u8981\u306a\u30b3\u30fc\u30c9\u307e\u3067\u30d0\u30f3\u30c9\u30eb\u3055\u308c\u3066\u3057\u307e\u3044\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306b\u5f71\u97ff\u3092\u4e0e\u3048\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002\u4ee5\u4e0b\u3067\u3001\u5fc5\u8981\u306a\u6a5f\u80fd\u3060\u3051\u3092\u52b9\u7387\u7684\u306b\u8aad\u307f\u8fbc\u3080\u65b9\u6cd5\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-33\">Sass\u306b\u3088\u308b\u9078\u629e\u7684\u30a4\u30f3\u30dd\u30fc\u30c8<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/assets\/stylesheets\/custom_bootstrap.scss\n\n\/\/ 1. \u5fc5\u9808\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\n@import \"bootstrap\/functions\";\n@import \"bootstrap\/variables\";\n@import \"bootstrap\/mixins\";\n\n\/\/ 2. \u5fc5\u8981\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u307f\u3092\u9078\u629e\n@import \"bootstrap\/root\";\n@import \"bootstrap\/reboot\";\n@import \"bootstrap\/grid\";\n@import \"bootstrap\/buttons\";\n@import \"bootstrap\/nav\";\n@import \"bootstrap\/card\";\n\/\/ \u5fc5\u8981\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8ffd\u52a0<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-34\">JavaScript\u306e\u500b\u5225\u8aad\u307f\u8fbc\u307f<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/javascript\/packs\/bootstrap_custom.js\nimport { Modal, Tooltip } from 'bootstrap'\n\n\/\/ \u5fc5\u8981\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u521d\u671f\u5316\ndocument.addEventListener('turbo:load', () =&gt; {\n  \/\/ \u30e2\u30fc\u30c0\u30eb\u306e\u521d\u671f\u5316\n  const modals = document.querySelectorAll('[data-bs-toggle=\"modal\"]')\n  modals.forEach(modal =&gt; new Modal(modal))\n\n  \/\/ \u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u306e\u521d\u671f\u5316\n  const tooltips = document.querySelectorAll('[data-bs-toggle=\"tooltip\"]')\n  tooltips.forEach(tooltip =&gt; new Tooltip(tooltip))\n})<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-35\">\u30a2\u30bb\u30c3\u30c8\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3067\u306e\u6700\u9069\u5316\u65b9\u6cd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-36\">1. \u30a2\u30bb\u30c3\u30c8\u5727\u7e2e\u306e\u8a2d\u5b9a<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># config\/environments\/production.rb\nRails.application.configure do\n  # CSS\u5727\u7e2e\u306e\u8a2d\u5b9a\n  config.assets.css_compressor = :sass\n\n  # JavaScript\u5727\u7e2e\u306e\u8a2d\u5b9a\n  config.assets.js_compressor = :terser\n\n  # \u30a2\u30bb\u30c3\u30c8\u306e\u6307\u7d0b\u4ed8\u4e0e\u3092\u6709\u52b9\u5316\n  config.assets.digest = true\n\n  # \u30a2\u30bb\u30c3\u30c8\u306e\u30d0\u30fc\u30b8\u30e7\u30cb\u30f3\u30b0\n  config.assets.version = '1.0'\nend<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-37\">2. \u30ad\u30e3\u30c3\u30b7\u30e5\u6226\u7565\u306e\u5b9f\u88c5<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># app\/helpers\/asset_helper.rb\nmodule AssetHelper\n  def cached_stylesheet_link_tag(name)\n    cached_asset_tag(:stylesheet_link_tag, name)\n  end\n\n  private\n\n  def cached_asset_tag(helper_method, name)\n    cache_key = \"#{helper_method}_#{name}_#{Rails.application.config.assets.version}\"\n    Rails.cache.fetch(cache_key) do\n      send(helper_method, name)\n    end\n  end\nend<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-38\">3. \u6761\u4ef6\u4ed8\u304d\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;%# app\/views\/layouts\/application.html.erb %&gt;\n&lt;% if content_for?(:dashboard) %&gt;\n  &lt;%= stylesheet_pack_tag 'dashboard', 'data-turbo-track': 'reload' %&gt;\n&lt;% end %&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-39\">\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u308b\u30b3\u30c4<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-40\">1. CSS\u306e\u6700\u9069\u5316<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/assets\/stylesheets\/_performance.scss\n\n\/\/ \u91cd\u8981\u306a\u8981\u7d20\u306e\u30d7\u30ea\u30ed\u30fc\u30c9\n.critical-component {\n  content-visibility: auto;\n  contain-intrinsic-size: 0 500px;\n}\n\n\/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u6700\u9069\u5316\n.animated-element {\n  transform: translateZ(0);  \/\/ GPU\u52a0\u901f\u306e\u6709\u52b9\u5316\n  will-change: transform;    \/\/ \u5909\u66f4\u306e\u4e88\u544a\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-41\">2. \u9045\u5ef6\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u306e\u5b9f\u88c5<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/javascript\/packs\/lazy_loading.js\ndocument.addEventListener('turbo:load', () =&gt; {\n  const lazyImages = document.querySelectorAll('img[data-lazy]')\n\n  const imageObserver = new IntersectionObserver((entries, observer) =&gt; {\n    entries.forEach(entry =&gt; {\n      if (entry.isIntersecting) {\n        const img = entry.target\n        img.src = img.dataset.src\n        img.removeAttribute('data-lazy')\n        observer.unobserve(img)\n      }\n    })\n  })\n\n  lazyImages.forEach(img =&gt; imageObserver.observe(img))\n})<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-42\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30a2\u30bb\u30c3\u30c8\u306e\u6700\u9069\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u753b\u50cf\u306e\u6700\u9069\u5316\uff08WebP\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u306e\u4f7f\u7528\uff09<\/li>\n\n\n\n<li>CSS\u3068JavaScript\u306e\u6700\u5c0f\u5316<\/li>\n\n\n\n<li>\u91cd\u8981\u306a\u30ea\u30bd\u30fc\u30b9\u306e\u4e8b\u524d\u8aad\u307f\u8fbc\u307f<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u306e\u6700\u9069\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30af\u30ea\u30c6\u30a3\u30ab\u30ebCSS\u306e\u62bd\u51fa<\/li>\n\n\n\n<li>\u975e\u540c\u671f\u8aad\u307f\u8fbc\u307f\u306e\u6d3b\u7528<\/li>\n\n\n\n<li>\u30ec\u30a4\u30a2\u30a6\u30c8\u30b9\u30e9\u30c3\u30b7\u30f3\u30b0\u306e\u9632\u6b62<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0\u3068\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30e1\u30c8\u30ea\u30af\u30b9\u306e\u8a08\u6e2c<\/li>\n\n\n\n<li>\u5b9a\u671f\u7684\u306a\u6700\u9069\u5316\u306e\u898b\u76f4\u3057<\/li>\n\n\n\n<li>\u30dc\u30c8\u30eb\u30cd\u30c3\u30af\u306e\u7279\u5b9a\u3068\u89e3\u6d88<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># config\/initializers\/performance_monitoring.rb\nRails.application.config.after_initialize do\n  # \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0\u306e\u8a2d\u5b9a\n  ActiveSupport::Notifications.subscribe('render_partial.action_view') do |*args|\n    event = ActiveSupport::Notifications::Event.new(*args)\n    Rails.logger.debug \"Rendered #{event.payload[:identifier]} (#{event.duration.round(1)}ms)\"\n  end\nend<\/pre>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u6700\u9069\u5316\u30c6\u30af\u30cb\u30c3\u30af\u3092\u9069\u5207\u306b\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u9ad8\u901f\u3067\u52b9\u7387\u7684\u306aRails\u00d7Bootstrap\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u3053\u308c\u3089\u306e\u77e5\u8b58\u3092\u6d3b\u304b\u3057\u305f\u5177\u4f53\u7684\u306a\u5b9f\u88c5\u4f8b\u3092\u898b\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"i-43\">\u5b9f\u88c5\u4f8b\u3067\u5b66\u3076Bootstrap\u6d3b\u7528\u6cd5<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-44\">\u30e2\u30c0\u30f3\u306a\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30d0\u30fc\u306e\u4f5c\u6210\u624b\u9806<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-45\">1. \u57fa\u672c\u7684\u306a\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30d0\u30fc\u306e\u5b9f\u88c5<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;%# app\/views\/shared\/_navbar.html.erb %&gt;\n&lt;nav class=\"navbar navbar-expand-lg navbar-dark bg-primary\"&gt;\n  &lt;div class=\"container-fluid\"&gt;\n    &lt;%= link_to 'YourApp', root_path, class: 'navbar-brand' %&gt;\n\n    &lt;button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarContent\"&gt;\n      &lt;span class=\"navbar-toggler-icon\"&gt;&lt;\/span&gt;\n    &lt;\/button&gt;\n\n    &lt;div class=\"collapse navbar-collapse\" id=\"navbarContent\"&gt;\n      &lt;ul class=\"navbar-nav me-auto mb-2 mb-lg-0\"&gt;\n        &lt;li class=\"nav-item\"&gt;\n          &lt;%= link_to 'Home', root_path, class: 'nav-link' %&gt;\n        &lt;\/li&gt;\n        &lt;li class=\"nav-item\"&gt;\n          &lt;%= link_to 'Dashboard', dashboard_path, class: 'nav-link' %&gt;\n        &lt;\/li&gt;\n        &lt;% if user_signed_in? %&gt;\n          &lt;li class=\"nav-item dropdown\"&gt;\n            &lt;a class=\"nav-link dropdown-toggle\" data-bs-toggle=\"dropdown\" href=\"#\"&gt;\n              Account\n            &lt;\/a&gt;\n            &lt;ul class=\"dropdown-menu\"&gt;\n              &lt;li&gt;&lt;%= link_to 'Profile', profile_path, class: 'dropdown-item' %&gt;&lt;\/li&gt;\n              &lt;li&gt;&lt;%= link_to 'Settings', settings_path, class: 'dropdown-item' %&gt;&lt;\/li&gt;\n              &lt;li&gt;&lt;hr class=\"dropdown-divider\"&gt;&lt;\/li&gt;\n              &lt;li&gt;&lt;%= link_to 'Logout', logout_path, class: 'dropdown-item' %&gt;&lt;\/li&gt;\n            &lt;\/ul&gt;\n          &lt;\/li&gt;\n        &lt;% end %&gt;\n      &lt;\/ul&gt;\n\n      &lt;%= form_with url: search_path, class: 'd-flex', local: true do |f| %&gt;\n        &lt;%= f.text_field :query, class: 'form-control me-2', placeholder: 'Search' %&gt;\n        &lt;%= f.submit 'Search', class: 'btn btn-outline-light' %&gt;\n      &lt;% end %&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/nav&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-46\">2. JavaScript\u306b\u3088\u308b\u52d5\u7684\u306a\u5236\u5fa1<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/javascript\/controllers\/navbar_controller.js\nimport { Controller } from \"@hotwired\/stimulus\"\n\nexport default class extends Controller {\n  static targets = [ \"collapse\" ]\n\n  connect() {\n    \/\/ \u30b9\u30af\u30ed\u30fc\u30eb\u3067\u30ca\u30d3\u30d0\u30fc\u306e\u80cc\u666f\u8272\u3092\u5909\u66f4\n    window.addEventListener('scroll', () =&gt; {\n      if (window.scrollY &gt; 50) {\n        this.element.classList.add('navbar-scrolled')\n      } else {\n        this.element.classList.remove('navbar-scrolled')\n      }\n    })\n  }\n\n  \/\/ \u30e2\u30d0\u30a4\u30eb\u30e1\u30cb\u30e5\u30fc\u3092\u9589\u3058\u308b\n  closeMenu() {\n    this.collapseTarget.classList.remove('show')\n  }\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-47\">\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306a\u30d5\u30a9\u30fc\u30e0\u5b9f\u88c5\u306e\u30dd\u30a4\u30f3\u30c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-48\">1. \u57fa\u672c\u7684\u306a\u30d5\u30a9\u30fc\u30e0\u30ec\u30a4\u30a2\u30a6\u30c8<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;%# app\/views\/users\/_form.html.erb %&gt;\n&lt;%= form_with(model: @user, class: 'needs-validation', novalidate: true) do |f| %&gt;\n  &lt;div class=\"row g-3\"&gt;\n    &lt;div class=\"col-md-6\"&gt;\n      &lt;div class=\"form-floating mb-3\"&gt;\n        &lt;%= f.text_field :first_name, class: 'form-control', placeholder: 'First Name', required: true %&gt;\n        &lt;%= f.label :first_name %&gt;\n        &lt;div class=\"invalid-feedback\"&gt;\n          Please enter your first name\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\"col-md-6\"&gt;\n      &lt;div class=\"form-floating mb-3\"&gt;\n        &lt;%= f.text_field :last_name, class: 'form-control', placeholder: 'Last Name', required: true %&gt;\n        &lt;%= f.label :last_name %&gt;\n        &lt;div class=\"invalid-feedback\"&gt;\n          Please enter your last name\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\"col-12\"&gt;\n      &lt;div class=\"form-floating mb-3\"&gt;\n        &lt;%= f.email_field :email, class: 'form-control', placeholder: 'Email', required: true %&gt;\n        &lt;%= f.label :email %&gt;\n        &lt;div class=\"invalid-feedback\"&gt;\n          Please enter a valid email address\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n\n  &lt;%= f.submit 'Save', class: 'btn btn-primary mt-3' %&gt;\n&lt;% end %&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-49\">2. \u30d5\u30a9\u30fc\u30e0\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\u5b9f\u88c5<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/javascript\/controllers\/form_validation_controller.js\nimport { Controller } from \"@hotwired\/stimulus\"\n\nexport default class extends Controller {\n  connect() {\n    this.element.addEventListener('submit', this.validateForm.bind(this))\n  }\n\n  validateForm(event) {\n    if (!this.element.checkValidity()) {\n      event.preventDefault()\n      event.stopPropagation()\n    }\n\n    this.element.classList.add('was-validated')\n  }\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-50\">Bootstrap\u30e2\u30fc\u30c0\u30eb\u3068\u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3\u306e\u5b9f\u88c5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-51\">1. \u30e2\u30fc\u30c0\u30eb\u306e\u57fa\u672c\u5b9f\u88c5<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># app\/helpers\/modal_helper.rb\nmodule ModalHelper\n  def modal_dialog(options = {})\n    content_tag :div, class: \"modal fade\", id: options[:id] do\n      content_tag :div, class: \"modal-dialog #{options[:size]}\" do\n        content_tag :div, class: \"modal-content\" do\n          yield if block_given?\n        end\n      end\n    end\n  end\nend<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-52\">2. Turbo\u3092\u6d3b\u7528\u3057\u305f\u30e2\u30fc\u30c0\u30eb\u5b9f\u88c5<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;%# app\/views\/posts\/_modal.html.erb %&gt;\n&lt;%= turbo_frame_tag \"modal\" do %&gt;\n  &lt;%= modal_dialog(id: 'postModal', size: 'modal-lg') do %&gt;\n    &lt;div class=\"modal-header\"&gt;\n      &lt;h5 class=\"modal-title\"&gt;New Post&lt;\/h5&gt;\n      &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"&gt;&lt;\/button&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\"modal-body\"&gt;\n      &lt;%= render 'form', post: @post %&gt;\n    &lt;\/div&gt;\n  &lt;% end %&gt;\n&lt;% end %&gt;<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/javascript\/controllers\/modal_controller.js\nimport { Controller } from \"@hotwired\/stimulus\"\nimport { Modal } from \"bootstrap\"\n\nexport default class extends Controller {\n  connect() {\n    this.modal = new Modal(this.element)\n    this.modal.show()\n  }\n\n  disconnect() {\n    this.modal.hide()\n  }\n\n  close(event) {\n    event.preventDefault()\n    this.modal.hide()\n  }\n}<\/pre>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u5b9f\u88c5\u4f8b\u306f\u3001\u5b9f\u969b\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u3059\u3050\u306b\u6d3b\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u8a2d\u8a08\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u3053\u308c\u3089\u306e\u5b9f\u88c5\u3067\u767a\u751f\u3059\u308b\u53ef\u80fd\u6027\u306e\u3042\u308b\u30c8\u30e9\u30d6\u30eb\u3068\u305d\u306e\u89e3\u6c7a\u65b9\u6cd5\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"i-53\">\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u3068\u30c7\u30d0\u30c3\u30b0<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-54\">CSS\u30af\u30e9\u30b9\u306e\u7af6\u5408\u3092\u89e3\u6c7a\u3059\u308b\u65b9\u6cd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-55\">1. \u30b9\u30b3\u30fc\u30d7\u306e\u7ba1\u7406<\/h3>\n\n\n\n<p>Bootstrap\u306e\u30af\u30e9\u30b9\u3068\u72ec\u81ea\u306e\u30b9\u30bf\u30a4\u30eb\u304c\u7af6\u5408\u3059\u308b\u4e3b\u306a\u539f\u56e0\u306f\u3001CSS\u8a73\u7d30\u5ea6\u306e\u554f\u984c\u3067\u3059\u3002\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u65b9\u6cd5\u3067\u89e3\u6c7a\u3067\u304d\u307e\u3059\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/assets\/stylesheets\/custom\/_scoped_styles.scss\n\n\/\/ 1. \u540d\u524d\u7a7a\u9593\u306e\u6d3b\u7528\n.custom-component {\n  \/\/ Bootstrap\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u30aa\u30fc\u30d0\u30fc\u30e9\u30a4\u30c9\n  .nav-link {\n    color: $custom-color;\n    font-weight: 500;\n\n    &amp;:hover {\n      color: darken($custom-color, 10%);\n    }\n  }\n}\n\n\/\/ 2. \u8a73\u7d30\u5ea6\u306e\u5236\u5fa1\n.custom-button {\n  @extend .btn;\n\n  \/\/ !important\u306e\u4f7f\u7528\u3092\u907f\u3051\u3001\u8a73\u7d30\u5ea6\u3067\u5236\u5fa1\n  &amp;.btn-primary {\n    background-color: $brand-primary;\n\n    &amp;:hover {\n      background-color: darken($brand-primary, 10%);\n    }\n  }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-56\">2. \u30e2\u30b8\u30e5\u30fc\u30eb\u5316\u306b\u3088\u308b\u30b9\u30b3\u30fc\u30d7\u5236\u5fa1<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># app\/helpers\/component_helper.rb\nmodule ComponentHelper\n  def scoped_component(name, options = {}, &amp;block)\n    content_tag :div, class: \"#{name}-scope #{options[:class]}\" do\n      capture(&amp;block) if block_given?\n    end\n  end\nend<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-57\">JavaScript\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u554f\u984c\u5bfe\u51e6\u6cd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-58\">1. \u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u306e\u7af6\u5408\u89e3\u6c7a<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/javascript\/controllers\/plugin_controller.js\nimport { Controller } from \"@hotwired\/stimulus\"\n\nexport default class extends Controller {\n  connect() {\n    \/\/ \u30a4\u30d9\u30f3\u30c8\u306e\u91cd\u8907\u3092\u9632\u3050\n    this.boundHandleEvent = this.handleEvent.bind(this)\n    this.element.addEventListener('click', this.boundHandleEvent, { once: true })\n  }\n\n  disconnect() {\n    \/\/ \u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u306e\u9069\u5207\u306a\u524a\u9664\n    this.element.removeEventListener('click', this.boundHandleEvent)\n  }\n\n  handleEvent(event) {\n    \/\/ \u30a4\u30d9\u30f3\u30c8\u306e\u4f1d\u64ad\u3092\u5236\u5fa1\n    event.stopPropagation()\n    \/\/ \u51e6\u7406\u306e\u5b9f\u884c\n  }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-59\">2. \u975e\u540c\u671f\u8aad\u307f\u8fbc\u307f\u306e\u554f\u984c\u89e3\u6c7a<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/javascript\/packs\/async_plugins.js\ndocument.addEventListener('turbo:load', () =&gt; {\n  \/\/ \u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u521d\u671f\u5316\u3092\u4fdd\u8a3c\n  initializePlugins()\n})\n\nconst initializePlugins = () =&gt; {\n  \/\/ \u4f9d\u5b58\u95a2\u4fc2\u306e\u78ba\u8a8d\n  if (typeof bootstrap !== 'undefined') {\n    \/\/ \u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u521d\u671f\u5316\n    const tooltips = document.querySelectorAll('[data-bs-toggle=\"tooltip\"]')\n    tooltips.forEach(tooltip =&gt; new bootstrap.Tooltip(tooltip))\n  } else {\n    \/\/ \u518d\u8a66\u884c\u30e1\u30ab\u30cb\u30ba\u30e0\n    setTimeout(initializePlugins, 100)\n  }\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-60\">\u30d6\u30e9\u30a6\u30b6\u4e92\u63db\u6027\u306e\u554f\u984c\u3068\u89e3\u6c7a\u7b56<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-61\">1. \u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9\u306e\u4e92\u63db\u6027\u5bfe\u5fdc<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/assets\/stylesheets\/custom\/_compatibility.scss\n@mixin flex-container {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n\n  \/\/ Safari\u7528\u306e\u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\n  @supports not (gap: 1rem) {\n    &gt; * + * {\n      margin-left: 1rem;\n    }\n  }\n}\n\n.flex-component {\n  @include flex-container;\n  gap: 1rem;\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-62\">2. JavaScript\u306e\u4e92\u63db\u6027\u78ba\u4fdd<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/javascript\/packs\/polyfills.js\nimport 'core-js\/stable'\nimport 'regenerator-runtime\/runtime'\n\n\/\/ \u30ab\u30b9\u30bf\u30e0\u30dd\u30ea\u30d5\u30a3\u30eb\nif (!Element.prototype.matches) {\n  Element.prototype.matches = Element.prototype.msMatchesSelector ||\n                            Element.prototype.webkitMatchesSelector\n}\n\n\/\/ \u6a5f\u80fd\u691c\u51fa\u3068\u4ee3\u66ff\u5b9f\u88c5\nconst supportsIntersectionObserver = 'IntersectionObserver' in window\nif (!supportsIntersectionObserver) {\n  \/\/ \u4ee3\u66ff\u5b9f\u88c5\u306e\u63d0\u4f9b\n  const lazyLoadFallback = () =&gt; {\n    const lazyImages = document.querySelectorAll('[data-lazy]')\n    lazyImages.forEach(img =&gt; {\n      if (isElementInViewport(img)) {\n        loadImage(img)\n      }\n    })\n  }\n\n  window.addEventListener('scroll', lazyLoadFallback)\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-63\">\u30c7\u30d0\u30c3\u30b0\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u74b0\u5883\u3067\u306e\u30c7\u30d0\u30c3\u30b0\u8a2d\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u306e\u6709\u52b9\u5316<\/li>\n\n\n\n<li>\u30a8\u30e9\u30fc\u30ec\u30dd\u30fc\u30c8\u306e\u8a73\u7d30\u5316<\/li>\n\n\n\n<li>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u30b9\u30c6\u30c3\u30d7<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30b3\u30f3\u30bd\u30fc\u30eb\u30a8\u30e9\u30fc\u306e\u78ba\u8a8d<\/li>\n\n\n\n<li>\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u76e3\u8996<\/li>\n\n\n\n<li>CSS\u306e\u8a73\u7d30\u5ea6\u306e\u5206\u6790<\/li>\n\n\n\n<li>JavaScript\u306e\u5b9f\u884c\u9806\u5e8f\u306e\u78ba\u8a8d<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u554f\u984c\u306e\u5207\u308a\u5206\u3051<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bootstrap\u306e\u6a19\u6e96\u6a5f\u80fd\u306e\u78ba\u8a8d<\/li>\n\n\n\n<li>\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u90e8\u5206\u306e\u5206\u96e2<\/li>\n\n\n\n<li>\u30d6\u30e9\u30a6\u30b6\u56fa\u6709\u306e\u554f\u984c\u306e\u7279\u5b9a<\/li>\n<\/ul>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u624b\u6cd5\u3092\u7406\u89e3\u3057\u3001\u9069\u5207\u306b\u9069\u7528\u3059\u308b\u3053\u3068\u3067\u3001Rails\u00d7Bootstrap\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u591a\u304f\u306e\u554f\u984c\u3092\u52b9\u679c\u7684\u306b\u89e3\u6c7a\u3067\u304d\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rails \u00d7 Bootstrap\u306e\u57fa\u790e\u77e5\u8b58 Warning: Undefined array key &#8220;is_admin&#8221; in \/home\/xs392991\/dexall.co.jp\/public_html\/arti &#8230; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":{"0":"post-1363","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-ruby","7":"nothumb"},"_links":{"self":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/1363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1363"}],"version-history":[{"count":1,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/1363\/revisions"}],"predecessor-version":[{"id":1365,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/1363\/revisions\/1365"}],"wp:attachment":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}