注意点 本投稿ではWebpackerがインストールされてないRails5以前のアプリを対象にBootstrap4を導入する手順を掲載しております。 Webpackerが標準となったRails6アプリにBootstrap4を導入する際には以下の記事がとても参考になりました🙇♂️ RailsでBootstrapとFont-AwesomeはWebpackerで今時っぽく使おう - Qiita はじめに Bootstrap 4のComponentsの中にちょうど使いたいと思っていた部品があったので、Bootstrap 4をRailsに導入する手順を確認しました。 公式サイト Bootstrap · The most popular HTML, CSS, and JS library in the world. 注意点 投稿時点でのBootstrapのバージョンは~~v4.0.0-beta.2~
ユーティリティ 空白ユーティリティ Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。 空白ユーティリティ（Spacing） v4.0.0新設 v4.2.1一部追加 Bootstrapには、要素の外観を変更するための幅広い簡潔なレスポンシブマージンとパディングユーティリティクラスが組み込まれている。 使い方（How it works） 可変性に優れた margin や padding 値を、要素またはその周辺のサブセットに簡略なクラスで割り当てる。個々のプロパティ、すべてのプロパティ、垂直方向と水平方向のプロパティのサポートが組み込まれている。クラスは、.25rem から 3rem までのデフォルトのSassマップから構築。 記法について（Notation） xs から xl までの全てのブレークポイントに適用される空白ユーティリティには、ブレ
最近Bootstrapを使う機会が増えたので、カスタマイズする上で知っておきたい考え方を紹介します。 今回は特にCSSについてのお話です。 Bootstrapのカスタマイズパターン 現状、CSSのカスタマイズ方法として考えられるパターンが3つあります。 梅パターン すでに用意されているスタイル・コンポーネントをそのまま使う方法。 定義済みの スタイル や コンポーネント の組み合わせにより、ページを作成します。配置するのみ。 見た目のカスタマイズができないので、簡素でオリジナリティの無いデザインになります。 ザ・Bootstrap。 竹パターン すでに用意されているスタイル・コンポーネントをカスタマイズして使う方法。 定義済みのCSSを継承（上書き）して、元のデザインを変更します。 少ない作業で効率的にコーディングができます。 松パターン すでに用意されているスタイル・コンポーネントをカス
Bootstrap3のNavbarを使うとヘッダー領域が50px確保されます。 しかし、野暮ったい…。どのサイトを見ても、ページロゴとメニューとユーザー管理機能くらしか置いていないんだし、夏のビーチのお姉ちゃんのように、Navbarはキュッと締まっていた方がいいと思うんだ。 気になったので、手短なサイトのヘッダーを調べてみると、やっぱりヘッダーの高さは50pxより低く設定されている。 Hatena Blogのヘッダーは37px JIRA/Bitbucketは40px StackOverflowは32px（これは流石にやりすぎな気がスル） Facebookは42px ちなみに、ヘッダーが50pxより高くされているサイトもある。検索と閲覧が中心で、あまり画面内でコメントを書いたりしないサイトが多いようだ。 Githubは60px Googleも60px RubyGemsは75px 閑話休題。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
