うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
JSF and Twitter Bootstrap Integration | Hatem Alimam
Bootstrap is a popular front-end framework for developing responsive websites, and as the mobile devices are taking a good share of the web browsing, it’s important to consider a mobile friendly website (mobile first). Starting from PrimeFaces 5.1, PrimeFaces will focus on improving the responsiveness of the components (e.g. p:panelGrid ) depending on the screen size will adjust, so this is a good
Gentallela - プログラマでも美しく管理画面を作成できるBootstrapテーマ | ソフトアンテナ
「Gentellela」はBootstrap 3を使った無料の管理画面用テンプレートです。デフォルトスタイルのBootstrap 3をベースとして多数のパワフルなjQueryプラグインやツールを組み込んだもので、美しい管理用パネルやダッシュボードを簡単に作成することができます。 テーマにはチャートや、カレンダー、フォーム検証ライブラリ、ウィザードスタイルのインターフェイス、ナビゲーションメニュー、テキストフォーム、スライダー、プログレスバー、通知メニューなどたくさんの有用なライブラリが組み込まれています。 今回はオンライン上で確認できるデモサイトを元に、どのような画面が実現できるのかスクリーンショットとともに紹介したいと思います。 ダッシュボード ▲ダッシュボードのデモでは多様なチャートが表示できることが確認できます。テーマはレスポンシブ対応で画面サイズに応じて適切に描画されます。 フォー
Bootstrapのテンプレートが簡単に作成・カスタマイズできる国産の無料ツール -Bootstrap Editor
Bootstrapはページ作成に役立つ機能がたくさん用意されており便利ですが、ファイルをダウンロードしたり、テンプレートを用意したりなど、始めるまでに少し手間がかかってしまいます。 そんな手間をすべて解消し、初心者の人でもプロの人でもすぐにBootstrapのテンプレートが簡単に作成・カスタマイズできる国産の無料オンラインツールを紹介します。 Bootstrap Editor Bootstrap Editorの特徴 Bootstrap Editorの機能 Bootstrap Editorの使い方 Bootstrap Editorの特徴 Bootstrapを初心者でも手軽に使えるよう開発された日本製のオンラインツールで、ダウンロードやインストールなどの準備は不要、すぐにBootstrapでさまざまなページを作成できます。 Emmetなどにも対応しているので、使い慣れた人にも便利です。 作者様
Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点のまとめ
Bootstrap 4ではそのインストール方法をはじめ、グリッドの単位やレスポンシブ用のclassが変わり、そしてカードやツールチップなどの新しいコンポーネントやレイアウトにFlexboxも利用できるようになりました。 Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点をまとめたリストを紹介します。 How to Migrate from Bootstrap Version 3 to 4 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Bootstrap 4で変わった点 Bootstrapのファイル構造 Bootstrap 4のインストール グリッドシステムのアップデート リセットは、「normalize.css」から「reboot.css」に classの変更とアップデート タイポグラフィ テー
簡単にBootstrapのプロトタイプを作れる『Pingendo』がめっちゃパワーアップしてた | バンクーバーのうぇぶ屋
友人に教えてもらってからちょっと使って、結構感動したのでここでもシェア〜！どっかでシェアした事があると思うんですが、PingendoというBootstrapを使ったプロトタイプがめちゃめちゃ速攻で作れるアプリとして昔からあったんですが、それがいつの間にかめっちゃ使いやすくなっていたので、ここでも共有させて貰えればと思います。 Pingendo自体でサイトを作るというより、あくまでもプロトタイプの段階でのサイトレイアウトをぱぱっと作る上では結構使える場面もあるんじゃないかと思うので、是非一度使ってみるのも良いかと思いますー！ それでは行ってみましょう！ とりあえずサイトからアプリをダウンロード Mac版と、Win版、それからLinux版とあるみたいですね。とりあえず、Macから見てるので、Mac版で見てみようと思います。っていうか、Boostrap4っていつになるんだろ。 テンプレートを選択
レスポンシブ対応のCSSフレームワーク22選
手軽に素敵なホームページを作成することができるCSSフレームワークが沢山登場しています。アイコンなども全てセットになったものなどもあり、コーダーでなくとも簡単に作業できることから人気を博しています。 今回は、レスポンシブに対応したCSSフレームワークをに紹介します。CSSフレームワークを選ぶ際の参考にしましょう。 CSSフレームワークとは？その特徴とメリット CSSフレームワークを簡単に言うと、Webサイトに必要なパーツや主な機能などがセットになったパックのことです。Webサイトをデザインするとき、通常はイチからデザインを考えて、パーツを揃え、CSSを記述していく必要があります。これは時間がかかる上、Webデザイナーやエンジニアなどの専門家がいない場合、整ったデザインのWebサイトを制作することは非常に困難だと言えるでしょう。 そんなときに便利なのがCSSフレームワークです。CSSフレーム
Bootstrapの画面を手軽に作れるツールまとめ
業務システムの画面やWebサービスの管理画面にBootstrapを採用するケースが増えていますが、それでもBootstrapならではの書き方を覚えないといけません。バージョンが上がるごとに書き方が変わるので習得が面倒と感じる人も多いでしょう。 そこで使ってみたいのがBootstrap用のUIビルダーです。ドラッグ&ドロップで画面が設計できれば作成も簡単ですよね。 lollytin beta 1.4 – A yummy HTML5 blockouterer! Bootstrapのデザインをドラッグ&ドロップで作っていくのですが、見た目はデフォルメされています。その分、細かいところにこだわりすぎずにさくさくと作っていくことができます。 Pingendo – web authoring with comfort PingendoはBootstrap専用のオーサリングソフトウェアです。Mac OS
\[Perl入学式] Mojoliciousの復習ついでにクリスマスっぽいこともする - mahoyaya’s diary
2015/12/12に実施された「Perl入学式 in 東京 第5回」でPerl入学式デヴューを果たしたmahoyayaです。 懇親会でよっぱらったT氏にAdventCalenderへの投稿を 強要 お勧めされたので、Perl入学式Advent Calendar 2015の24日目に参加してみます。 昨日はhakata_oyukiさんのPerl入学式のもう一つの歴史でした。感想は人それぞれだと思いますが、自分はこの投稿を読んで震えました。 自分もPerl入学式をきっかけに色々なものへ貢献していきたいと強く思いました。 っていうか、いい話の後の投稿つらいｗｗｗ Mojolicious::Liteを利用したwebアプリ開発 この記事はPerl入学式で教材として利用されているMojoliciousを利用したwebアプリ開発の学習をちょびっとだけ延長した内容です。 Perl入学式のwebアプリ開発
![\[Perl入学式] Mojoliciousの復習ついでにクリスマスっぽいこともする - mahoyaya’s diary](https://cdn-ak-scissors.b.st-hatena.com/image/square/a756ad65e17c3eafbad0e4097db8fb77d66e69cf/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6653586347148473075%2F6653586347148521099%2F1450881204)
公開されているReact Componentを利用してみる - Qiita
今回はちょっと趣向を変えて公開されているComponentの利用について書きたいと思います。 Componentは基本的にはPropがI/Fとなっているのでドキュメントを見てよくわからなかった場合は、Propを見るとどのようなI/Fがあるかわかると思います。 自分が公開する場合は、PropTypesやgetDefaultPropsを使ってI/Fを明確にしておくといいと思います。 Bootstrap 何はともあれまずは定番のBootstrapですがやはりちゃんとあります。 前回のRouterのサンプルでも使っていました。 使う場合は、react-bootstrapの他に別途bootstrapのCSSを読み込む必要があります。 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/boo
React でも Bootstrap のコンポーネントを使う - present
React で SPA を実装する場合も、 デザインは Bootstrap のお世話になりたい。 クラスを指定するだけで使えるコンポーネントは普通に使えそうだけど、 Tooltip や Dropdown や Modal のような、 jQuery に依存したコンポーネントは React でそのまま使えないのが残念。 そこで Bootstrap のコンポーネントを React コンポーネントとして実装した、 React-Bootstrap を試してみた。 github.com JavaScript の部分を jQuery から React に実装し直したシロモノなので、 別途 Bootstrap の CSS は必要。 Bootstrap を使って自分がよくやるレイアウトを React-Bootstrap で再現してみた。 var React = require("react"); var Re
Timepicker for Twitter Bootstrap
This project is registered as a Bower package, and can be insalled with the following command: $ bower install bootstrap-timepicker You can also download our latest release (and any previous release) here. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" href="css/bootstrap.min.css" /> <link type="text/css" href="css/bootstra
日本語も美しく表示できるBootstrapテーマ Honoka が使いやすくなった - windyakinってなんて読む
これは Bootstrap Advent Calendar 2015 1日目の記事です。 リリースから半年が経った、日本語も美しく表示できるBootstrapテーマ Honoka ですが、コリス様に取り上げていただいてからは知名度も増し、GitHubリポジトリのStarも300個になり、今では企業サイトのベースにも使われるようにもなるなど、予想以上の反響に若干戸惑っています。 この半年間、Honokaもちゃんとメンテナンスを続けていて、Bootstrap(本家)と同等のアップデートを施したり(v3.3.5・v3.3.6)、色違いのForkテーマの Umi や Nico が出てきたりと賑やかさもあるプロジェクトとなっています。その結果、公開当初に比べて格段に使いやすくなっていっているので、この場を借りてアップデート内容を紹介させてもらいたいと思います。 Travis CI / AppVeyo
サーバーサイドエンジニアだらけのチームでフロントエンドを改善するためにやったこと | FiNC Developers Blog
サーバーサイドエンジニアだらけのチームでフロントエンドを改善するためにやったこと はじめまして、エンジニアインターンの田中です。 各企業の従業員の健康状態を調べるアンケートシステムであるウェルネスサーベイというプロジェクトのリニューアルを行っています。 サーバーサイドはともかくフロントエンドは再利用性の低い負債となるコードが多くあったので、1から綺麗に設計をして寿命の長いコードにしていく必要があると考えました。 そこで、リニューアルの時にどのようなプロセスを踏んでフロントエンドを改善していこうとしたのかについて書きたいなと思います。なお今回は主にHTML/CSSについて話します。 今までの問題点開発環境リニューアル前のフロントエンドの開発環境は以下のとおりでした。 ERBSCSSCoffeeScript要するにデフォルトのRailsの設定のままですね。 それでは今までは具体的にどこが問題だ
ClockPicker
A clock-style timepicker for Bootstrap (or jQuery). Download ZIP CSS < 6KB, JS < 9KB, after minified. Browser support All major browsers are supported, including IE 9+. It should look and behave well enough in IE 8. Device support Both desktop and mobile device are supported. It also works great in touch screen device. Dependencies ClockPicker was designed for Bootstrap in the beginning. So Bootst
Bootstrap Studio - The Revolutionary Web Design Tool
A powerful desktop app for creating responsive websites using the Bootstrap framework. Run Browser Demo Bootstrap Studio is a powerful desktop app for designing and prototyping websites. It comes with a large number of built-in components, which you can drag and drop to assemble responsive web pages. The app is built on top of the hugely popular Bootstrap framework, and exports clean and semantic
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
react-bootstrap/docs/examples at master · react-bootstrap/react-bootstrap · GitHub
http://frogstech.com/blog/2015/08/28/bootstrap-datepicker/
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
「SEO×SNS×ブログ」で作る最効率化収益システム｜うきだいらブログβ
