![Bootstrap 4と互換性のある、120以上のコンポーネントを揃えたWeb開発キット・「Uix Kit」](https://cdn-ak-scissors.b.st-hatena.com/image/square/4e7d246d938c25667b9b91bd9fe788173f850878/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2019%2F06%2Fuixkit01.jpg)
ウェブサイトやアプリ制作に必要なスタイルがあらかじめ定義された、人気CSSフレームワーク Bootstrap。しかし、デザインが他のサイトとかぶってしまうとお悩みの方も多いのではないでしょうか。 今回は、Web制作をより手軽に行うことができる、Bootstrap対応の無料HTML5/CSS3テンプレート素材 Titan をご紹介します。90ページにおよぶ大量のサンプルHTMLページが用意されており、あらゆるプロジェクトに活躍してくれるフリー素材となっています。 Bootstrap を拡張パワーアップ!参考にしたい50個の無料プラグイン、コンポーネントまとめ 無料HTML/CSSテンプレート Titan について Titan はHTML5/CSS3で制作されたBootstrap対応テンプレートで、過去5年間のウェブデザインの傾向を分析して作成されたスタイリッシュな素材です。 じっくりと検討さ
jQuery Validationは名前の通り入力チェックを行うjQuery pluginです。サーバーサイドでチェックを行わないため画面遷移がなく、その場で入力ミスが分かるためユーザービリティーが上がります。 しかし、Twitter Bootstrapでデザインを組んでいると、エラー発生時に入力フォームが赤くならないため、以下のコードを追加します。 errorClass:'error', errorElement:'span', highlight: function (element, errorClass, validClass) { $(element).parents("div[class='control-group']").addClass(errorClass); }, unhighlight: function (element, errorClass, validCla
Webデザイン制作で人気の Bootstrap フレームワークには、役立つツールやコンポーネントがあらかじめパッケージされており、すぐにサイトやアプリの制作をはじめることができます。しかし、ときには必要な機能が十分に揃っていないケースがあるのも事実です。 この記事では、Bootstrap の機能を最大限に拡張できる、50種類のプラグインやアドオン、コンポーネントをまとめてアルファベット順にご紹介します。 ここでは、ボタンやパンくずリスト、カレンダー、ツリーメニュー、ビデオプレイヤー、WYSIWYGエディターなどウェブ制作に必要な機能をすべてまとめています。今後のプロジェクトに活用してみてはいかがでしょう。 制作に活用したいBootstrap 用プラグイン、アドオン、コンポーネント(アルファベット順) アクセシビリティ (英: Accessibility) Accessibility Plu
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習&業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです(サーバ側スクリプト
JavaScript jQueryとBootstrapを読み込んだ後、bootstrapSlideInMenu-1.0.0.min.jsを読み込んでください。 <script type="text/javascript" charset="UTF-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" charset="UTF-8" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script> <script type="text/javascript" charset="UTF-8" src="bo
<2014-06-16> Bootstrap3版にサンプルを変更 <2013-03-03> オリジナルのものがforkされて、より機能が追加されているようです。IE8対応化 & 日付選択用の表示カレンダーを日本語に変換できるようになっています。 スクリプト <link href="css/datepicker.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"> <script src="js/bootstrap-datepicker.js" type="text/javascript"> <!-- 日本語対応用スクリプト --> <script src="js/locales/bootstrap-datepicker.ja.js" type="text/java
これで十分でしょ! Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも! アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
Lightbox・モーダルウインドウ関連 / Bootbox.js / Bootstrap-modal他...全17件
CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア(Apache Licnese 2.0)です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗
Bootstrapいいよね Bootstrapです。大人気の見た目系フレームワークですね。いろんなサイトで見かけます。 自分もそうなのですが、エンジニアでコードは書くけどデザインの事はよく知らない。だけど「使いやすくて、いい感じにしたい」という欲求を満たしてくれてます。ただ、デフォルトは見やすいんだけど、ちょっとカスタマイズしたいなとか、色指定があった場合など困りますね。例えばありそうなのが「コンテンツ管理画面を作りたい、デザインは特にこだわらない、けど使いやすいのがいいな。」とかさらに「イメージカラーが青だからそれベースで」とか。 そんなあなたにぴったりな厳選ツールを紹介しちゃいまっくすぅ〜! Lavish 〜 画像から配色を生成してくれます 〜 このサービスは画像を解析してBootstrapの配色を捻り出します。 何処かの企業向けに作る場合に企業のロゴなどから配色してみるといい感じにな
WordPressで作られたブログをTwitter BootstrapでレスポンシブWebデザインにしてみた!Adsense対応も! 今日の夕方、Webデザイナーの方と最近のjQueryやらレスポンシブWebデザインの話とかしていました。特にレスポンシブWebデザインは3人ぐらいと話をしていて、自分もいずれこのブログのリニューアル時に導入したいと思って居ました。 そんな話をしていて「今日はこれからレスポンシブWebデザイン勉強するわ」と夕方宣言して、勢いでこのブログのリニューアルをしました。勉強からAdsense対応まで実質3,4時間ぐらいでやっつけで終わらせてIEにまだ対応していないのはここだけの話です(笑)。 まずはレスポンシブWebデザインについておさらい なにはともあれ、なんとなく知ったつもりになっていることでも一応網羅的に一通りどんなものだったか復習したく参考サイトを見てました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く