サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
はじめにbootstrap製の管理画面テンプレート。実際に使ってみたけどこれは便利 自分が仕事で使う場合は、以下ぐらいがあればとりあえずok ・画面左のメニュー ・一覧画面 ・詳細画面 ダウンロード cd ~/src/ wget https://almsaeedstudio.com/download/AdminLTE-master unzip ./AdminLTE-master cp -frp ./AdminLTE-master /Path/To/Documentroot/AdminLTE 実装 ベースとなるhtmlを準備 不要な部分の削除とcssとjsへのパスを合わせる 以下が全画面共通のhtmlで★の部分を画面ごとに実装してゆく ベースhtml <!DOCTYPEhtml> <html> <head> <meta charset="utf-8"> <meta http-equiv=
人気のUI作成フレームワークBootstrap 4では手軽にレスポンシブWebデザインを実現することができます。また、定義されているスタイルを学ぶことでレスポンシブなレイアウトを作る上でのCSSの勉強にもなります。本エントリーでは入門記事の一環として、Bootstrap 4でのレスポンシブWebデザインの基本について解説しつつ、定義されているCSSコードの意味にまで踏み込みます。Bootstrap 4のブレークポイントと区間 レスポンシブなWebコンテンツではデバイス幅によってレイアウトが変わっていくのですが、「どの画面幅でレイアウトが変わるのか」という基準になるのが「ブレークポイント」です。Bootstrap 4では4つのブレークポイント(0pxを含めると5つ)が存在し、それぞれのブレークポイントの間には名前がついています。4つのブレークポイントと5つの区間（grid tier）の名前
こんにちは、okutani(@okutani_t)です。Bootstrapデフォルトのinput fileはなんだかダサいです。なぜもっとBootstrap感をダサなかったのか……！ ということでBootstrapっぽく変えてみました。プラグインとか何も使わないので、気軽に試せるかと思います。参考にしてください。 スポンサーリンクBootstrapのfileフォームを装飾する まず最初にデフォルトのfileアップロードフォームを確認してみましょう。 下記HTMLコードで確認できます。 <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">● 〇〇MBまでの画像をアップロ
LESSとはCSSプリプロセッサーの１つで、似たようなものにSASSがあります。CSSプリプロセッサを一言で説明すると、CSSをもっと便利に使えるようになるもの。 例えば変数を使ったり、よく書くコードをテンプレート化（Mixin）しておいたり、ネストを使ってセレクタを何度も書く手間を省いたりなどなど。簡単な使い方を以下の記事にまとめているので詳細はそちらをご覧ください。 SASSの簡単な使い方・書き方 LESSの書き方・使い方 そんなCSSプリプロセッサですが、BootstrapではLESSが使われています（SASS版もあります）。Bootstrapの主な使い方としては、フレームワークとして読み込んで、HTMLタグにclass名をつける方法だと思いますが、LESSで使うことも可能。 以下にBootstrapをLESSで記述する方法を紹介します。Bootstrapのソースファイルをダウンロ
最近よく見かけるシングルページを作るデザイン塾。第2回では、ページの大まかなデザインを作成し、Bootstrapを使ってナビゲーションバーを実装しました。今回はlessファイルをカスタマイズして、オリジナルのデザインに近づけていきましょう。 index.htmlの<ul class="nav navbar-nav">内のリンクを書き換えます。検索フォームやドロップダウンメニューは今回使いませんので削除してOKです。 ■変更前ソースコード（index.htmlの一部、緑色部分を変更） <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="na
BootstrapやFoundationなど人気のフレームワーク、CSSの各フレームワークの比較、WordPressのテーマ作成やコピペで利用できるコード集、Gitのコマンドやフロー、iOS/Androidのグラフィックガイドライン、ChromeのデベロッパーツールやSublimeTextやEmmetなど、Web制作に役立つ便利なチートシートを紹介します。 紹介している主なチートシートBootstrap 3, Foundation 5のチーシートCSSの各フレームワークの比較WordPressのチートシート iOS,Androidのデザイン用のチートシート jQueryのチートシートHTML5,CSS3のチートシート ファビコンのチートシート 検索エンジン最適化2015年版のチートシートChromeのデベロッパーツールのチートシート SublimeText,Emmetのチー
筆者は、このような画面を頻繁に目にします。なぜなら、デザインに疎い筆者自身がWebアプリを開発すると、このようなシンプルな画面がたくさん出来上がるからです。 そもそも業務アプリケーションでは、業務で取り扱う数多くの情報を、データベースや他システムなどから取得し、アプリケーション内でそれらの情報を、安全かつ正確に処理するためのコーディングを行う必要があります。開発規模が大きくなれば、再利用性の高い設計になるようさまざまな知恵を使う必要がありますし、取り扱う情報には機密性の高いものも含まれるため、セキュリティなどにも細心の注意を払う必要があります。そのため、どうしてもビジネスロジックの開発に注力しがちで、画面デザインやレイアウトなどのフロントエンド開発は、ついつい後回しになってしまいます。 しかしながら、Webアプリの操作性は、システムの顧客満足度を左右する重要なポイントになります。また、パソ
「Responsive Web Design JP」を運営されているA40さんのまとめ記事ここまでできる！Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個が今日のGunosyで取り上げられていましたが、twitterBootstrapを使ったレスポンシブWEBデザインのウェブサイトの事例が国内でもかなり増えてきました。 当社で制作した化粧品ブランド リボーテ -Re:beaute-様のサイトもありがたいことに、このまとめ記事に取り上げて頂いています。 いろいろなメディアに取り上げていただく中でのフィードバックとして、「twitterbootstrapがレスポンシブWEBデザインに便利なのはわかっているけど、どうやったらbootstrapっぽくないデザインにできるのかわからない」という声をよく聞きます。 僕も最初はそう思っていました。 一回触ってしまえば、
Posted on: 2012/06/22 レスポンシブウェブデザインに対応したCSSフレームワーク「Bootstrap」の肝Bootstrapの概要Bootstrap とは、Twitter 社が提供するCSS フレームワークです。 実体はCSS とJavaScript で、決められたルールに従ってコーディングするだけで、いま流行りのいろいろなUI を作ることができます。Bootstrap では LESS を採用しており、スタイルをカスタマイズしてCSS をコンパイルすることができます。 LESS についてはこちら。 実際には、コンパイルされたCSS を読み込んで利用することになるので、LESS の仕組みを意識する必要はありません。 もちろん、コンパイルされたCSS を編集することもできます。Bootstrap をはじめて使う時は、まずは一式ダウンロードして、いろいろ
LESSをはじめようと思ったらとりあえずBootstrapのmixinsを入れておくと便利 LESSにはMixinという複数のプロパティをまとめる機能があります。 例えばcss3のベンダープレフィックスなど設定しておけば、あとで１行で呼び出すことができます。 で、実際作成するにあたり一から作るよりTwitterBootstrap を利用すれば、よく使いそうな機能があらかじめまとまってるのでいいかもしれないです。 投稿日2012年04月17日 更新日2012年04月17日css3プロパティ 準備ができたところで早速使ってみましょう。 最初はCSS3で追加された「border-radius」で角丸にしてみます。 たとえば「id="box1"」でマークアップした「div」があります。html <div id="box1"></div> 通常のcssでしたら次のようになりますよね。css
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
