Be the first to know when new stuff drops
さくっと短時間で、慣れれば1分！ デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。 HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。 Froala Design Blocks Froala Design Blocks -GitHub Froala Design Blocksでは170種類以上のレスポンシブ対応のコンポーネントが用意されており、それらを好きなように組み合わせて、誰でも簡単にWebページを作成することができます。 作成したページは個人でも商用でも無料。詳しくはライセンスページをご覧ください。 短時間で、Bootstrap 4ベースのページを作成してみる 用意されているコンポーネント 短時間で、Bootstrap 4ベースのページ
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
Material Design Lite Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now. Templates The MDL components are created with CSS, JavaScript, and HTML. You can use the compone
CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗
BootplusはHTML5/JavaScript/CSS製のオープンソース・ソフトウェア（Apache License 2.0）です。 最近のWebデザインはフラットなスタイルが人気です。そのデザインはGoogleのサービスでも広く取り入れられています。そんなUIを自分のWebサービスでも実現したい、そう考える人に使ってみて欲しいのがBootplusです。 Bootstrapがベースになっていますが、デザインは白色系をベースにしたフラットになっています。 かなり思い切って色をカットしています。 こちらは黒地部分が大きく目立ちます。 メニューなどのウィジェットはもちろんBootstrapをベースにして構築されています。 カード形式のウィジェット。 プロフィールなどの表示に便利そうな表示です。 何となくGoogle+っぽい感じです。 ベースはBootstrapなので多彩なウィジェットやコンポ
P4Dで教えていただいたエンジニアさんに聞かれたので、なんか整理しきれてなくてざっくりなんですが、取り急ぎ、なんかそれっぽくなるコツみたいなのを独断と偏見でまとめてみました。 3色〜5色くらいの色を画面の中で均等に使うのおすすめ 作りたいサービスが何で色分けできるか考えます。ちょうどよく3〜5種類くらいのステータスやカテゴリなどがあったら、それに応じて色が変わるとかするとうまくハマる。かも。 Flat UI Colorで色選び http://flatuicolors.com/ という便利なサイトがあって、ここから3〜5色くらい選ぶとよいです。クリックするとカラーコードがコピーされます。あら便利。赤は他の色と仲良くするのが難しめ。 Sassで彩度を抑えると落ち着いた色調になって、使いこなしの難易度が低くなります 上のサイトもそうなんですが、Flat UIによく使われている色は、鮮やかなが多く
Square UI Free – User Interface Kit FreebiesAndrian Valeanu • February 18, 2013 • 2 minutes READ Square UI is our latest PSD User Interface Pack including a set of beautiful and pure components, which you can use to create startup projects, websites or iOS apps. Square UI Kit for designers featuring the flat design trend. We love the latest flat design trend, and Square UI is made exactly in that
どうも。 書くのが遅くなりすぎてもう半月ほども前のことになってすごく今更感があるのですが、書いておくべきことを書きそびれると、その後出てくる他の書きたい小ネタがどんどん書けなくなっていってドンづまるパターンになるので、やはり書いておきますね。。 先日、第一回 プログラマ向けデザイン勉強会というイベントで下記のスライド発表させていただきました。 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck 反響の大きさに驚き！ありがとうございました。 実はあんまり発表自体は、盛り上がったという手応えがあまりなくて、一方で他の2人の発表が素晴らしすぎて、割としょんぼりしながら帰ってきたんですが、スライドをアップロードしたらあれよあれよという間に2000ブクマ超え…驚きました。読んで下さった皆様、ありがとうございました。何が原因だったのか考えてみたのですが、デザイン
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
« iPhone とかの フリックで操作するカルーセル UI を jQuery mobile で作ってる話 (jquery.mobile.carousel) | Main | FizzBuzz最短回答 もしくは Yahoo!Japan 入社課題提出エントリ » iPhone で position:fixed な UIToolBar を簡単に作る jquery.mobile.iscroll.js を作った iPhoneのWebサイトを作っていて、良くあるアプリの上と下の position:fixed なメニューを実装しようとした時に、iScrollを使えばわりかし楽に実装出来ます。 jQuery mobile (1.0a2) を使ってると header/footer 要素に data-position="fixed" を書いておけばそれっぽい動きになるんですが、スクロールイベントを受け取るた
スタイルシートだけで1px欠けの角丸を作る方法です。この角丸を使用することでシャープすぎるボックスを少し柔らかい印象にすることができます。 HTML 下記の通りHTMLを記述します。 <div class="outer"> <div class="inner">1px rounded corners</div> </div> ボックスにボーダーを付けない場合 .outer { margin: 0px 1px; padding: 1px 0px; background: #0cc; } .inner { margin: 0px -1px; background: #0cc; } ボックスにボーダーを付ける場合 .outer { margin: 0px 1px; background: #E4F2FF; border-top: 1px solid #B1C6D9; border-bottom:
CSSがWebページデザインの主要技術になってから、WebデザイナはCSSの振る舞いに頭を抱えなかったことはない。もっとも悩ましいのは、同じCSSでもWebブラウザごとに表示が異なるところにある。なるべく同じ表示を実現しようと、一見すると奇っ怪にみえる設定を加えたり、意味がないような行を加えたり、背景色と同じ色の画像を調整用に追加したり、涙ぐましい努力は後を断たない。 世界中のWebデザイナやフロントエンドデベロッパが同じ悩みを抱えているから、Webブラウザ間の互換性を実現するCSSライブラリがいくつも登場したり、ベストプラクティスをまとめたCSSリファレンスドキュメントが登場したり、CSS擬似クラスといったテクニックが紹介されたり、IEのCSS/HTML非準拠に対処するライブラリが登場するといったことが相次いで起こっているわけだ。 しかし、ほかのライブラリに依存せずにいちから自力でCSS
ＣＳＳで横三角。「半キャラずらし」 (インターネット帳面) 今回はお題の通りインターネット帳面でもやってる「ＣＳＳで横三角をやる方法」。２バイト文字の三角記号は▲や▼しかないので横方向を示すことができませんでした。これをなんとかどーにかできんものかと。 ↑こんな記事があって、ちょっと面白かったので、 参考までに、ふつうの横三角のコードも書いておきますね！ » (») « («) ▷ (▷) ▶ (▶) ◁ (◁) ◀ (◀) そうそう、この中でも » って結構使えるよ！ よくサイドのメニューとかで、CSS を使って <li> の背景左端に、三角っぽい画像を設定したりするよね！ でも » をつかえば、画像がなくてもこんな感じ！ » Diary » Bookmark » Fotolife »
2006-12-20T02:12:30+09:00 今回のリニューアルでは、これまで px で指定していたコンテンツの幅の値の単位を % と指定変更。 いわゆる liquid (リキッド) レイアウトというものにしました。ユーザが閲覧しているブラウザの幅に合わせてコンテンツの幅も変化します。 div#container { width: 80%; } px で指定していたコンテンツの幅を、% での指定に変更し、リキッドレイアウトに変更したものの、ウィンドウサイズの 80% の幅という指定ですので、ウィンドウサイズを広げればいくらでも大きくなります (もちろん小さくもなります)。それでも問題ないのですが、できればコンテンツの幅に最大幅と最小幅を指定し、小さくなりすぎてレイアウトが崩れるような事もなく、一行あたりの文字数を目で追える程度の幅をキープできればと考え、いろいろ試してみました。 fl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
