作成日
2015/07/14最終更新
2021/09/07記事区分
一般公開関連記事
- CSS 設計に関するヒントCSS は構造化が難しくスタイルを宣言していくだけで目的が達成できてしまいます。上書きの繰り返しによって肥大化しないための設計ヒントをまとめます。 詳細度の高騰が発生した CSS は破綻しやすい CSS の詳細度はルーティングテーブルのロンゲストマッチのようなものです。一致度の高いとされるセレクタで指定したスタイルが優先的に適用されます。同じ詳細度の場合は後から指定したスタイルで上書かれて適用され...
- フォーム入力 (Bootstrap 3)フォーム関連の Bootstrap 3 の機能をコード例とともに列挙します。公式ページは CSS/Forms です。JavaScript には依存せずに動作します。 標準的なレイアウト <div class="container"></div> に含めて使用します。まとまりごとに form-group で囲います。 <form> <!-- 一行入力 -...
- Sass チートシートSass (Syntactically Awesome Stylesheets) のチートシートです。インデントを多用した SASS 記法ではなく、広く普及している SCSS 構文の Sass を対象とします。 継承 (extend) 基本 .class1 { background-color: #f00; } .class2 { @extend .class1; colo...
- グリッドレイアウトでレスポンシブ Web デザイン (Bootstrap 3)グリッドレイアウトによるレスポンシブ Web デザインを Bootstrap 3 で行う方法を記載します。 すべての要素の入れ物であるコンテナ要素 公式ドキュメントの一番最初に記載されている container はすべての要素の入れ物です。コンテンツ全体を container で囲みます。container には四種類の幅があります。container の左右にはマージンが作られます。入れ子にする...
- Bootstrap 3 公式ドキュメントの利用例Bootstrap のメジャーバージョンは 2015-2-01(Sun) 現在 3 であり、最も人気のある HTML, CSS, JS のフレームワークです。Grid system という、いわゆるレスポンシブデザインを行うために便利な機能も利用できます。デザインの独自性にこだわらない業務アプリケーションなどを短期間で作る場合にも便利ですし、インターネットに公開する独自性が求められるアプリケーショ...