Vue.jsベースのオープンソースな管理画面テンプレート・「Vuestic Admin」
Vuestic AdminはVue.jsベースのオープンソースな管理画面テンプレートです。40以上のUIコンポーネントも同梱されています。 コンポーネントを含むレイアウトは完全なレスポンシブ対応となっています。管理画面系のコンテンツによく必要とされるコンポーネントは概ね揃えられているので、1から作るよりはかなり工数を減らせそうです。 細かい部分のサポートの充実 更にVuestic AdminはJSONファイルによる他言語化対応、MEDIUMライクなテキストエディターの搭載など、ユーザーフレンドリーな設計となっています。 細かい部分もサポートしてくれているのは嬉しいですね。これだけ揃っても完全にOSSなのは貴重かもです。 ライセンスはMITとの事です。 Vuestic AdminOn Github
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
Bootstrapを使った管理画面テンプレートをまとめて紹介
Webベースの業務システムを開発する場合、えてして管理画面が必要になります。とは言え、ユーザ向けの画面であればともかくシステム管理者や開発者だけが触る画面に対してあまりユーザビリティの高いUI/UXが提供されることは多くありません。 そこで使ってみたいのがBootstrapです。同じように考える人たちは多く、Bootstrapを使った管理画面テンプレートは実に数多く存在します。ぜひ好みにあったものを選んで、使いやすい管理画面を構築してください。 SB Admin 2 大きなアイコンが印象的なダッシュボードです。グラフ、テーブル、フォームなどの機能があります。 SB Admin 2 – Free Bootstrap Admin Theme – Start Bootstrap AdminLTE 地図のグラフやメニューへのバッジ表示、ツールバー部分のアイコンなどの機能があります。 Free Ad
初心者でもWeb制作ができる！CSSフレームワーク「Bootstrap」入門編
「ホームページを制作したいけれども、htmlやCSSに関する知識がない。どう勉強すればいいかもわからない」 そのような悩みを抱えている方には、Twitter社が開発したCSSフレームワーク「Bootstrap」がオススメです。 あらかじめ用意されたテンプレートを使うことで、初心者でも簡単にホームページを制作できます。 今回は、Bootstrapのテンプレートを「無料」「有料」「日本語版」に分けてご紹介します。 ぜひ参考にしてみてください。 無料のテンプレート 1.AWESOMESS PORTFOLIO http://themeforces.com/item/free-awesomess-portfolio/ こちらは、グラフィックデザイナーやWebデザイナーなど、見た目を重視する仕事をされている方にオススメのポートフォリオ制作に適したテンプレートです。 操作が簡単な点も特徴の一つです。 2
【難しく考えすぎ！？】bootstrap臭のしないお洒落なレスポンシブWEBデザインの作り方
「Responsive Web Design JP」を運営されているA40さんのまとめ記事ここまでできる！Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個が今日のGunosyで取り上げられていましたが、twitter Bootstrapを使ったレスポンシブWEBデザインのウェブサイトの事例が国内でもかなり増えてきました。 当社で制作した化粧品ブランド リボーテ -Re:beaute-様のサイトもありがたいことに、このまとめ記事に取り上げて頂いています。 いろいろなメディアに取り上げていただく中でのフィードバックとして、「twitter bootstrapがレスポンシブWEBデザインに便利なのはわかっているけど、どうやったらbootstrapっぽくないデザインにできるのかわからない」という声をよく聞きます。 僕も最初はそう思っていました。 一回触ってしまえば、
Bootstrap
BootstrapBootstrap v5.3 (switch to other versions) v5 releases Latest (5.3.x) v5.2.3 v5.1.3 v5.0.2 Previous releases v4.6.x v3.4.1 v2.3.2 All versions Get Security Updates for Bootstrap 3 & 4 Build fast, responsive sites with Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life w
Gentallela - プログラマでも美しく管理画面を作成できるBootstrapテーマ | ソフトアンテナ
「Gentellela」はBootstrap 3を使った無料の管理画面用テンプレートです。デフォルトスタイルのBootstrap 3をベースとして多数のパワフルなjQueryプラグインやツールを組み込んだもので、美しい管理用パネルやダッシュボードを簡単に作成することができます。 テーマにはチャートや、カレンダー、フォーム検証ライブラリ、ウィザードスタイルのインターフェイス、ナビゲーションメニュー、テキストフォーム、スライダー、プログレスバー、通知メニューなどたくさんの有用なライブラリが組み込まれています。 今回はオンライン上で確認できるデモサイトを元に、どのような画面が実現できるのかスクリーンショットとともに紹介したいと思います。 ダッシュボード ▲ダッシュボードのデモでは多様なチャートが表示できることが確認できます。テーマはレスポンシブ対応で画面サイズに応じて適切に描画されます。 フォー
デザイナーやコーダーがいなくても、BootstrapベースのかっこいいWebページが驚くほど簡単に作成できてしまう -Assembly | コリス
デザインやHTML, CSSの知識は不要。Bootstrap 3ベースのかっこいい縦長ページや複数ページのサイトが簡単に作成でき、デザイナーやコーダーがいなくても、そしてデザインやコードが分かる人には今までの作業がぐっと楽になるオンラインサービスを紹介します。 サンプルを元にカスタマイズしてもよし、ヘッダやコンテンツなど100種類以上のコンポーネントからクリック一つでぽんぽんページのレイアウトが完成してしまいます。 Assembly Assemblyは無料で利用でき、一部のコンポーネントとHTML化が有料（$17）です。 $17は2016年2月現在、1,900円なので、フル機能でこの値段は有りですね。 まずは、Assemblyでどんなページができるか見てみましょう。 縦長スクロールのページで、ヘッダは大きい写真画像、コンテンツが数パターンあり、フッタがデザインされています。コマ数を落として
Bootstrapの画面を手軽に作れるツールまとめ
業務システムの画面やWebサービスの管理画面にBootstrapを採用するケースが増えていますが、それでもBootstrapならではの書き方を覚えないといけません。バージョンが上がるごとに書き方が変わるので習得が面倒と感じる人も多いでしょう。 そこで使ってみたいのがBootstrap用のUIビルダーです。ドラッグ&ドロップで画面が設計できれば作成も簡単ですよね。 lollytin beta 1.4 – A yummy HTML5 blockouterer! Bootstrapのデザインをドラッグ&ドロップで作っていくのですが、見た目はデフォルメされています。その分、細かいところにこだわりすぎずにさくさくと作っていくことができます。 Pingendo – web authoring with comfort PingendoはBootstrap専用のオーサリングソフトウェアです。Mac OS
Bootstrap-シングルページ制作編７（トップへ戻るボタンの配置） | みずかず
Bootstrapを使ってシンプルなシングルページを制作したいと思うのでその手順を何回かに分けて記録。 Bootstrapの初期CSSをなるべくそのまま使ってサイトを作成。 変更箇所用のCSSを最小限にし、デザインを仕上げて完了の予定とする。 制作編７では前回までで一通り完成したシングルページを利用して、ページ下部にスクロールした際によくある「ページ上部へ戻る」ボタンの配置をしてみたい。（jQuery使用、ソースはwebopixel様のを使わせて頂きました） シングルページ制作編 Bootstrap-シングルページ制作編１ Bootstrap-シングルページ制作編２ Bootstrap-シングルページ制作編３ Bootstrap-シングルページ制作編４ Bootstrap-シングルページ制作編５ Bootstrap-シングルページ制作編６ Bootstrap-シングルページ制作編７ シング
Bootstrap-シングルページ制作編６ | みずかず
Bootstrapを使ってシンプルなシングルページを制作したいと思うのでその手順を何回かに分けて記録。 Bootstrapの初期CSSをなるべくそのまま使ってサイトを作成。 変更箇所用のCSSを最小限にし、デザインを仕上げて完了の予定とする。 制作編６ではフッター部を作成。 フッター部左側には会社のロゴや住所などを、右側部分には問い合わせフォームを設置。 スマホでは一列表示となる。 また、最下部にはコピーライト表示をつける。 シングルページ制作編 Bootstrap-シングルページ制作編１ Bootstrap-シングルページ制作編２ Bootstrap-シングルページ制作編３ Bootstrap-シングルページ制作編４ Bootstrap-シングルページ制作編５ Bootstrap-シングルページ制作編６ Bootstrap-シングルページ制作編７ シングルページ作成 HTMLを記述する
Bootstrap-シングルページ制作編２ | みずかず
Bootstrapを使ってシンプルなシングルページを制作したいと思うのでその手順を何回かに分けて記録。 Bootstrapの初期CSSをなるべくそのまま使ってサイトを作成。 変更箇所用のCSSを最小限にし、デザインを仕上げて完了の予定とする。 前回ではサイト上部にグローバルナビゲーションを設置。 制作編２ではサイトのメイン部分となるところを作成する。 シングルページ制作編 Bootstrap-シングルページ制作編１ Bootstrap-シングルページ制作編２ Bootstrap-シングルページ制作編３ Bootstrap-シングルページ制作編４ Bootstrap-シングルページ制作編５ Bootstrap-シングルページ制作編６ Bootstrap-シングルページ制作編７ シングルページ作成 HTMLを記述する 前回記述したHTMLのnavbar以下に新たに追記。今回は「main1-ap
Bootstrap-シングルページ制作編１ | みずかず
Bootstrapを使ってシンプルなシングルページを制作したいと思うのでその手順を何回かに分けて記録。 Bootstrapの初期CSSをなるべくそのまま使ってサイトを作成。 変更箇所用のCSSを最小限にし、デザインを仕上げて完了の予定とする。 制作編１ではグローバルナビゲーション（Static top navbar）を設置するところまでの記録。 シングルページ制作編 Bootstrap-シングルページ制作編１ Bootstrap-シングルページ制作編２ Bootstrap-シングルページ制作編３ Bootstrap-シングルページ制作編４ Bootstrap-シングルページ制作編５ Bootstrap-シングルページ制作編６ Bootstrap-シングルページ制作編７ ＊Bootstrap3.3.4 Bootstrapのファイルはダウンロード済み ダウンロード方法は導入編にて。 シングルペ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrap-シングルページ制作編５ | みずかず
Bootstrap-シングルページ制作編４ | みずかず
Bootstrap-シングルページ制作編３ | みずかず
【やじうまWatch】とほほさん再び！ 「とほほのWWW入門」から新たにBootstrap入門サイトが誕生