デザイン性だけでなく使い心地にもこだわった、ウェブデザイン制作をグッと楽にする無料HTMLテンプレート素材をまとめました。 人気のHTMLフレームワーク Bootstrap を利用して作成されており、カスタマイズしやすく拡張性の高いテンプレートが中心に揃います。また、2017年のウェブデザイントレンドをうまく反映した素材も多く、サイト開発のデザインやレイアウトの参考にしてみても良いでしょう。 レスポンシブ対応で無料！ウェブ制作を高速化できるHTMLテンプレート24選 2017年1月度 あまり知られていないBootstrapスタイルテクニック、小技16個まとめ Paper Kit 2 控えめな配色と美しいタイポグラフィーが特長のBootstrap 4対応で、収録されているコンポーネントはどれもレスポンシブ対応で、あらゆる画面スクリーンサイズでも読みやすいうれしい設定も。 デモページ ダウンロ
1. モックアップツールって何使ってる？？ 2017年の11月くらいから、毎日コツコツと作っていたWebアプリケーションをなんとか完成しました （色々あってリリースはまだしていません...）。Webアプリケーションを作り始めるときに、はじめに「設計」と「モック」を作りました。 世の中に出ているモックツールのまとめ https://navi.dropbox.jp/mockup-tool https://www.mockplus.com/blog/post/webux-10 色々と調べた結果「Bootstrap Studio」が良さそうだったので、有料版を購入してみましたが、とても良く、Qiitaにもあまり情報共有されていなかったので、使ってみた感想などを、まとめようと思います。 2. Bootstrap Studioについて Bootstrap Studio https://bootstra
Bootstrap4移行ガイド ※2020/8/7：v4.5.2の公開に伴い更新。 2020/6/25：Bootstrap5設置ガイドの開設に伴いサイト移転 PST（米国太平洋時間）2018/1/18にBootstrap v4.0.0安定版が公開されました。これまでのBootstrap3.xから4.xに変更するにはcssやjsファイルを差し替えただけではデザインが崩れてしまいます。そこでBootstrap4の使い方を3.xからの変更箇所を交えて解説しています。 解説はできるだけ最新版（v4.5.2）に対応するよう更新しています。 ※Bootstrap 4は、v4.4の公開をもって長期サポート（LTS）に移行すると発表がなされています。 ※Bootstrap3.xの解説は、Bootstrap3移行ガイドをご覧下さい。 ※Bootstrap5.xの解説は、Bootstrap5設置ガイドをご覧下
2018年1月18日、Bootstrap 4の安定版がようやくリリースされました。 Bootstrap 4ではFlexboxが採用され、それに伴いFloatは取り除かれ、CSSのソースはLessからSassに変更され、CSSの主要な単位はpxからremに変わり、デフォルトのフォントサイズは大きくなり、サポートブラウザからIE8,9は外れました。 ※pxはメディアクエリとグリッドのみ。 新しくなった、そして改訂された、Bootstrap 4の基本テンプレート、ナビゲーション、コンポーネントを紹介します。 Bootstrap Bootstrap 4の基本テンプレート Bootstrap 4のナビゲーションバーのテンプレート Bootstrap 4のコンポーネントのテンプレート Bootstrap 4の実験的なテンプレート Bootstrap 4の基本テンプレート まずは、Bootstrap 4
管理画面は主に運営元が使う画面になるので、デザインへのこだわりが殆ど感じられないことが多いです。しかし運営元が使いやすい画面でないと細かい制御がしづらかったり、サービスのステータス把握が遅れたりするのではないでしょうか。 そこで使ってみたいのがCoreUIです。VueとBootstrapを使って作られた管理画面テンプレートです。 CoreUIの使い方 スクリーンショット多めで紹介します。まずはダッシュボード。このようなUIの管理画面が簡単に作れます。 ボタン。 ソーシャルボタン。 カード。 フォーム。 モーダル。 スイッチ。 テーブル。 タブ。 アイコン。Font AwesomeかSimple Line Iconsがサポートされています。 ウィジェット。 こんなウィジェットも。 チャート。 ログイン画面。 登録画面。 エラー画面。 CoreUIはVueで作られていますので、表示する際にもW
React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery. As one of the oldest React libraries, React-Bootstrap has evolved and grown alongside React, making it an excellent choice as your UI foundation. Built with compatibility in mind, we embrace our bootstrap core and strive to be compatibl
「Gentellela」はBootstrap 3を使った無料の管理画面用テンプレートです。デフォルトスタイルのBootstrap 3をベースとして多数のパワフルなjQueryプラグインやツールを組み込んだもので、美しい管理用パネルやダッシュボードを簡単に作成することができます。 テーマにはチャートや、カレンダー、フォーム検証ライブラリ、ウィザードスタイルのインターフェイス、ナビゲーションメニュー、テキストフォーム、スライダー、プログレスバー、通知メニューなどたくさんの有用なライブラリが組み込まれています。 今回はオンライン上で確認できるデモサイトを元に、どのような画面が実現できるのかスクリーンショットとともに紹介したいと思います。 ダッシュボード ▲ダッシュボードのデモでは多様なチャートが表示できることが確認できます。テーマはレスポンシブ対応で画面サイズに応じて適切に描画されます。 フォー
Presenting Bootstrap Studio, a revolutionary tool that developers and designers use to create beautiful interfaces using the Bootstrap Framework. Learn more What is it? Bootstrap Studio is a desktop application which you can use to build beautiful interfaces and websites by only using drag & drop. It comes with a large collection of components like charts, maps, data tables, forms, menus, lists,
追記: コメント欄でjQueryを使わないシンプルなコードを紹介していただいたので，そちらも参考にしていただければと思います。 はじめに 先日紹介したサンプルと同じ構成で，ページ内にBootstrapのタブを組み合わせるコードを紹介します。少なくとも日本語ではググってもイイ感じのサンプルが見つからなかったので…… 目標は，各ページをコンポーネントとして実装しているSPAで，「戻る」や「進む」によるページやタブの遷移を自然に行うことです。今回の例で言えば，次のような挙動を実現することです。 /にアクセスする（homeコンポーネントの内容が表示される） リンクから/exampleにアクセスする（exampleコンポーネントの内容が表示される，タブは1個めがアクティブ） タブを2個めに切り替える リンクから/にアクセスする（再びhomeコンポーネントの内容が表示される） 戻るボタンを押す（exa
Rin 3.0 というのを作った。 Rin - A lean, gulp-based HTML and SASS boilerplate by sanographix僕はいわゆるペライチのWebサイトを作ることが多いんだけど、そういう制作時に使っているフレームワークというかBoilerplate的なやつです。 フレームワークといっても、BootstrapのようにCSSをモリモリ書いて汎用コンポーネントを用意しまくる、というふうにはしていない。結局各webサイトでデザインの要件が大きく異なる場合が多いので、CSS部分の記述をできるだけ少なくして、各サイト向けに柔軟にスタイルを書けるようにする方針をとっている。一方でビルドツールに求められることは割と毎回一緒なことが多いので、gulpですばやく環境構築して、スタイルは各サイトでよしなに、みたいな雰囲気。 Rinは、だいたい下記のようなことがすば
PST（米国太平洋時間）2013/8/19にBootstrap3.0.0が正式に公開されました。これまでのBootstrap2.xから3.xに変更するにはcssやjsファイルを差し替えただけではデザインが崩れてしまいます。そこでBootstrap3の使い方を2.xからの変更箇所を交えて解説しています。 解説は最終版（v3.4.1）に対応しています。 ※2019/7/24をもってBootstrap3のサポートは終了したと発表がありました。 ※Bootstrap4.xの解説は、Bootstrap4移行ガイドをご覧下さい。 ※Bootstrap5.xの解説は、Bootstrap5設置ガイドをご覧下さい。 Bootstrapは、Mark Otto（@mdo）、Jacob Thornton（@fat）の両氏によって2010年の中頃にTwitter社で作成されました。オープンソースのフレームワークにな
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
