ハマったこと bootstrapのdatetimepickerを利用してカレンダーを表示できたものの、ブラウザを縦に短くすると上の方(ヘッダー)に表示されてしまい、これが解決できずに1日を無駄にした。。 参考ブログ: https://github.com/NetCommons3/NetCommons3/issues/200 実現したいこと【デモ】 ブラウザの縦幅が足りなくなると上にいきすぎてしまうので、 以下のGifのように、bottomが足りなくなった時でもカレンダーの位置を調節したい。 試したこと bottomを増やして上に表示できないようにする ブラウザを縦に縮めて行くとbottomが足りなくなり、カレンダーは上側に表示する仕様になっている。 ここで重要なのが、カレンダーよりしたのbottomは、カレンダー入力フォームの親要素の高さによって決まるということ。 ということは、親要素の高
プロジェクト推進室の服部 (@yhatt) です。現在は社内の福利厚生制度である Speee Library を筆頭とした社内システムを中心に担当しています。 今回は、遡ること 2 年前に公開した、今更聞けない Bootstrap のレスポンシブ の続編として、Bootstrap 4 正式対応版 に内容をアップデートしてお届けします。 『Bootstrap 4 を使って、"柔軟な" レスポンシブ Web を構築したい』という方は、是非この記事を読んで、Bootstrap 4 のレイアウトシステムの基本をおさえていただけると幸いです。また、『Bootstrap 3 から 4 に移行したい(移行した)』という方のために、v3 と v4 の違いを交えながら解説していきたいと思います。 前回の記事については、以下をご覧ください。 tech.speee.jp 以前公開していた記事は、Bootstra
仕事でbootstrapを使う機会があったので、これを機にfigmaでbootstrapデザインテンプレートを構築しました。Figmaとbootstrapの相性と生産性はめちゃくちゃ良いと感じてます。 エンジニアさん御用達！みんな大好きbootstrapは優れたコンポーネントを提供しており、その優れたbootstrapコンポーネントを共有&共同作業に特化したFigmaで事前にコンポーネント化しておく事で、デザイナー以外の人でもパーツの組み合わせを考えるだけで実際の画面に近いプロトタイプを構築することが可能になります。 細かなデザインやパーツ製作に注力しなくて良くなる分、プロジェクトの課題であるビジネス課題やシステム構成にフォーカスする事ができるのが特長です。優れたコンポーネントがデザインされていれば、デザイナー以外でも（チームで）UI/UX課題に対してアプローチしやすくなる思想や考え方は素
管理画面用のUIフレームワークをちょこちょこ見るんですが、一回使ってみたいなと思ってそのまま忘れることが多いのでまとめておきます。 使ったことはないけどかっこいいので使ってみたいというやつをただ貼っていくだけの内容ですが blur-admin 最近見た中で個人的にダントツかっこいいやつ。 ひたすら男心くすぐってくるな〜っていうUI。 bootstrapベースで一通りの機能は揃ってそうなイメージです。 カラーテーマとかはなさそうなので、デモのままのUIになりそう RazorFlow シンプルで使い勝手が良さそうなUIです。 白基調だし、管理画面っぽい感じでちょっとだけ凝ってる風に見せられるかなって気がします。 ひとことで言うと無難な印象 Gentellela 見た目的には前出2つの中間ぐらい？ ただ、デモページのUIがたまに壊れてるとこあるので若干不安、、、 AdminLTE 割りとメジャー
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Collapsible sidebar using Bootstrap 4</title> <!-- Bootstrap CSS CDN --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWn
さくっと短時間で、慣れれば1分！ デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。 HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。 Froala Design Blocks Froala Design Blocks -GitHub Froala Design Blocksでは170種類以上のレスポンシブ対応のコンポーネントが用意されており、それらを好きなように組み合わせて、誰でも簡単にWebページを作成することができます。 作成したページは個人でも商用でも無料。詳しくはライセンスページをご覧ください。 短時間で、Bootstrap 4ベースのページを作成してみる 用意されているコンポーネント 短時間で、Bootstrap 4ベースのページ
Bootstrap 4ではそのインストール方法をはじめ、グリッドの単位やレスポンシブ用のclassが変わり、そしてカードやツールチップなどの新しいコンポーネントやレイアウトにFlexboxも利用できるようになりました。 Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点をまとめたリストを紹介します。 How to Migrate from Bootstrap Version 3 to 4 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Bootstrap 4で変わった点 Bootstrapのファイル構造 Bootstrap 4のインストール グリッドシステムのアップデート リセットは、「normalize.css」から「reboot.css」に classの変更とアップデート タイポグラフィ テー
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
Bootstrapで実装したページをスマホなどの幅が狭いスクリーンで表示した際に、横からオフキャンバスのナビゲーションをアニメーションでスライド表示させるJSとCSSのパックを紹介します。 Off Canvas -Bootstrap Bootstrap Offcanvasの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="../dist/css/bootstrap.offcanvas.min.css"/> </head> <body> ... <script src="../dist/js/bootstrap.offcanvas.js"></script> </body> Step 2: HTML まずは、オフキャンバスのナビゲーションを開くボタン。 <butt
3話で紹介したBootstrapをカスタマイズする方法の1つ「3.LESS/Sassファイルを直接変更、オリジナルスタイルを追加する」方法を説明したいと思います。 今月（2015年8月19日）には「Bootstrap 4 alpha」http://v4-alpha.getbootstrap.com/が公開されました。 CSSメタ言語を「LESS」から「Sass」へ変更し、Internet Explorer 8への対応を終了しました。 Bootstrapの標準CSSメタ言語がSassへ変更されたという事なのでWeb制作者が一番使用しているSassでデザインカスマイズする方が共同で制作する場合には役立つと思います。 1.Preprosを起動させて「bootstrap-sass-3.3.5」ファイルが開いている事を確認します Preprosから下記のようにポップアップ画面が表示されますが購入しな
概要 ▶ Bootstrapで均等分割（均等割）されない.nav-justifiedを修正。table-layout: fixed;がポイント。 Bootstrapでナビバー（navbar）に、均等分割（均等割）にするクラスがあります。 それが「.nav-justified」です。navをjustifyするということで、そのまんまですね。 ●.nav-justifiedは均等分割していない便利なクラスが用意されているものだと、会社のサイトであまり気にせず適用していました。 以下の画像の線で囲った部分です。 でも、よく見ると、本当に均等分割しているのか？って思いませんか。 一番左と一番右はpaddingで15px付けているから少し大きく見えるにしても、一番左の項目がかなり長く見えます。 画像出典：これからのカタログ印刷のカタチ - 分割型カタログ印刷 Stock!&Fresh!（吉田印刷所）
初投稿です。 最近ようやくBootstrap3に触れることになったのですが、 .btn-successとか.alert-dangerとかの色関係のクラスって使いづらくないですか？ 怒られるかもしれないけど.btn-redとか使いたい。簡単に増やしたい。 なので作りました。.◯◯◯-redと.◯◯◯-blueを増やす例です。 SassのMap機能を利用するのでSass3.3以上が必要です。 /assets/stylesheets/bootstrap/内に_custom-theme.scssを作り、 内容を下記に。 @import "mixins"; //== Custom Colors // // //redの基本色 $brand-red: #cc3333; $btn-red-color: #fff !default; $state-red-text: #ee0000 !default; $
Bootstrap 4のデザインを編集するにはCSSの更新が必要ですが、CSSだけを使うよりもBootstrap 4で導入されたSassを使う方が効率的にかつ細かくデザインをカスタマイズできます。本エントリーでは、Sassを使った効率的なデザインカスタマイズ方法を紹介します。 Bootstrap 4のデザインのカスタマイズ方法 Bootstrap 4のコンポーネント機能を用い、タブとボタンを実装したコンテンツを例にとって説明します。デモはjsdo.itにアップしています。 なお、基本的なBootstrap 4の導入方法については記事「5分で導入できるBootstrap 4 超入門 〜タブを作ってみよう〜」を参照ください。 ▲ Bootstrap 4を使って実装したタブとボタン このコンテンツに、下記のデザイン更新を加えてみましょう。 全体の角丸をなくす 青い背景部分を赤い背景にする デザイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
