Bootstrapの画面を手軽に作れるツールまとめ
業務システムの画面やWebサービスの管理画面にBootstrapを採用するケースが増えていますが、それでもBootstrapならではの書き方を覚えないといけません。バージョンが上がるごとに書き方が変わるので習得が面倒と感じる人も多いでしょう。 そこで使ってみたいのがBootstrap用のUIビルダーです。ドラッグ&ドロップで画面が設計できれば作成も簡単ですよね。 lollytin beta 1.4 – A yummy HTML5 blockouterer! Bootstrapのデザインをドラッグ&ドロップで作っていくのですが、見た目はデフォルメされています。その分、細かいところにこだわりすぎずにさくさくと作っていくことができます。 Pingendo – web authoring with comfort PingendoはBootstrap専用のオーサリングソフトウェアです。Mac OS
普通のHTMLで作成したページの指定箇所のみをブラウザ上から更新・修正できるようにするシンプルなCMS -Sitecake
普通のHTMLで作成したページをブラウザ上から簡単に更新・修正できるようにするオープンソースのCMSを紹介します。 HTMLはごく普通なものでOK、BootstrapやFoundationにも対応しています。 ブラウザ上で編集できる領域を指定できるのもいいですね。特定ページの特定箇所だけ簡単に更新できるようにするとかにも使えます。 Sitecake Sitecake -GitHub Sitecakeの特徴 Sitecakeのデモ Sitecakeの使い方 Sitecakeの特徴 プレーンなHTMLで動作 通常のHTMLファイルをブラウザ上から修正して、保存することができます。PHPやテンプレートなどの知識は不要です。 更新・修正は簡単 テキストを変更する時はクリックするだけで編集可能に、要素を追加・削除する時はドラッグ&ドロップでOK。 データベースは必要無し すべての変更はHTMLファイ
ng-admin - 次世代のWeb管理画面
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近はサーバサイドではHTMLレンダリングせず、RESTfulなWeb APIを使ってデータを取得、表示するといったWebアプリケーションが増えています。そうした中、運営側の管理画面においても求められるものが変わってきています。 そこで今回は次世代の管理画面、ng-adminを紹介します。AngularJSを使ったWeb管理画面になります。 ng-adminの使い方 Web APIを用意しておくことで、ユーザ向けはもちろんのこと管理画面においてもスムーズな操作ができるようになります。pushStateにも対応していますので、URLはユニークになるようです。 ng-adminはJavascript/HTML5製のオープンソース・ソフトウェア（MIT License）です。 Angul
複雑なレイアウトをブラウザ上でWYSIWYGで組み立てられる「Gridmanager」:phpspot開発日誌
Gridmanager Demos 複雑なレイアウトをブラウザ上でWYSIWYGで組み立てられる「Gridmanager」。 次のようにカラムごとにツールを付与して、コンテンツを追加したり消したり、移動できたり、幅を調整したりとかなり高度な事が誰でも簡単にできるUIが実現可能です。 jQueryプラグインの形で誰でも簡単に実現できるところがすごい。複雑なレイアウトのサイトであっても見たまま編集ができるというのはよさそうですね。 ライブプレビューも可能 レスポンシブにも対応 関連エントリ 軽量でシンプルデザインなWYSIWYGエディタ実装ができる「Trumbowyg」 Bootstrap対応でレスポンシブなWYSIWYGエディタ「Summernote」 軽量でシンプルなHTMLのWYSIWYGエディタ「SCEditor」 オンラインで使えるWYSIWYGなCSS3コードジェネレーター「Enj
CSSセレクタの名前を付けるときに考えていること - morishitter blog
idを使うときも同じだけど、話をわかりやすくするためにclassに統一するということで。 個人的にはセレクタにidは使わない派です。 先日、@cssradarさんが「自分の仕事はclass名を決めた時点で8割終了している」みたいなことを言ってて、僕も概ね同意している。 それほどにCSSでは命名が大切だと思う。 そこで僕が普段どう考えてCSSセレクタに名前をつけ、ルールセットを定義しているのか書いてみた。 1. class名は意味を表すようにする（見た目の情報をのせない） 例えば、以下のようなもので .red { color: #f52; } .rounded { border-radius: .25rem; } .left-arrow { ... } 赤色だとか角丸だとか、見た目を表したclass名は付けないようにしている。 というのも、class名はHTMLのclass属性に書くもので、
[JS]一味違ったアイデアでレスポンシブ対応のテーブルを実装するスクリプト -Responsive tables
サイズが変更されても、ハイライト表示はできます。 Responsive tablesの使い方 Step 1: スタイルシート スタイルシートをhead内に外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/rwd-table.min.css"> </head> Step 2: スクリプト スクリプトを</body>の上あたりに記述します。 <body> ... <script type="text/javascript" src="js/rwd-table.js"></script> <script> $(function() { $('.table-complex').responsiveTable({ adddisplayallbtn: true, addfocusbtn: true, fixednavbar: '#n
HTML5/CSS3を使った多機能デザインフレームワーク·HTML KickStart MOONGIFT
HTML KickStartはBootstrapライクなデザインテンプレートフレームワークです。 最近ではWebサイトのベースにBootstrapを利用することが多いのですが、今回はその類似ソフトウェアとしてHTML KickStartを紹介します。こちらもかなり高機能です。 Typography。 リストとメニュー。 メニューは階層対応。 テーブル。 ツールチップ。上下左右自在です。 アイコン。 プログラミングコード。 ボタン。 タブ。 パン屑。 グリッド。 画像。 スライドショー。 動画、地図、カレンダー。 フォーム。 入力フィールドのサイズ。 その他色々。 極力シンプルなHTML構造設計、jQuery利用、HTML5、モーダルウィンドウなどが特徴に挙がっています。唯一残念なのは現状はレスポンシブWebデザインでないことかも知れません。しかし全てのデバイスへの対応を考えないならむしろ手
Bootstrapで使えるWYSIWYGエディタ·bootstrap-wysiwyg MOONGIFT
bootstrap-wysiwygはBootstrap用のリッチなWYSIWYGエディタです。 使い勝手の良さもあってBootstrapを使ったWebサイトが増えています。より便利に使うためには多彩なウィジェットが欠かせません。今回はBootstrap用WYSIWYGエディタ、bootstrap-wysiwygを紹介します。 シンプルなUIで使い勝手が良さそうです。 文字の装飾は簡単にできます。ツールチップが出るのもいい感じです。 画像の埋め込みにも対応しています。ファイルフォームを使って画像を読み込む形になっています。 URLの埋め込み。ダイアログではないのがポイントです。 文字サイズの変更もできます。 bootstrap-wysiwygではさらにマイクアイコンをクリックして音声によるテキスト入力にも対応しています（Google Chromeの機能を使っています）。さらにホットキーへの対
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
新着記事
これはスゴイぞ！Bootstrapのページ作成が積み木感覚で簡単にできてしまうジェネレーター -lollytin
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
新着記事
今求められているHTML/CSSの実践テクニックが丁寧に解説された良書 -HTML+CSS デザインレシピ
Bootstrap用のさまざまなスタイルのボタンを確認しながら簡単に作成できる -BootsButton