企業でWebサービスを作る際に、決まったデザインフレームワークがあると全体的に統一感が出て、かつデザインに対する悩みが少なくなるのが利点です。その結果、開発がスムーズに進むことでしょう。 今回はその一つ、Scooterを紹介します。作成したのはDropbox社になります。 Scooterの使い方 ScooterはSCSSで作られているので変数やMixinなどが定義されています。実際のデザインについて紹介します。まずはグリッド。 写真と説明。 リスト。 右寄せ。 アラート。 ボタン。 吹き出し付き。 フローティングカード。 フォーム。 アイコン。 こんな感じで文字だけのアイコンも表現できます。 モーダル。 ツールチップ。 ラベル。アイコン付きなのが良い感じ。 塗りつぶしたラベル。 タブ。 カレンダー。 Scooterはデザインはもちろんのこと、カラーリングにもDropboxっぽさが溢れていま
こんにちは。デザイナーの王です。 Webアプリはデスクトップアプリとは違い、まだまだ発展途上の技術のため、色んな所でまだ未熟な部分があります。デスクトップアプリでは当たり前のことでもWebアプリではできなかったりすることも多いのです。中でも、UIのコンポーネント化問題が以前から指摘されてきました。 通販サイトにある「購入ボタン」を例に説明すると分かりやすいと思います。 この手のボタンを作るには以下の手続きを要すると考えられます。 外観を整える CSS HTMLマークアップ クリックした際の挙動 JavaScript 何が厄介かというと、「再利用」が難しいというところなんですね。 例えば、同サイトの別のページで同じボタンを使いたい場合、js、CSS、HTMLを再度記述しなければなりません。しかも場合によってはHTMLのマークアップが非常に冗長化していることもある。 「購入ボタン」はあくまで一
CSS3のコードを生成する便利サイト４つ+1 -swordsmith
マウスでぐりぐりやれば、見た目が変わって、CSSコードがもらえちゃう。コードジェネレーター系のサイトを４つほど紹介。
cssの情報まとめです。ローカル 環境にストックしていた情報を 開放してみますのでシェアして 頂ければ幸いです。内容は 結構偏っていると思いますので 参考程度になさってください。 全てのcss情報が有るわけではありません。主観でストックしていたリンク集です。ツールとかメニュー関連とかハックとかいろいろ188の情報です。 ツール オンラインのcssツール。 CSS Validation Service / W3C検証サービス日本語版 RoundedCornr / 角丸のHTML・CSSコードを生成してくれる CSS Type Set / ファミリー、色、単語間、行間等をプレビューで確認 CSS Text Wrapper / 様々な形のテキストの回りこみを簡単に実現できる CSS Builder / オンラインでスタイルを生成可能 Spiffy Box / cssによる角丸を簡単に生成 The
可変グリッドシステム用のスタイルシートのフレームワーク「Fluid Grid system」を紹介します。 Fluid Grid system ※グリッド表示は右上の「SHOW GRID」をクリック 上記ページではブラウザのサイズを小さくすると、それに合わせてグリッドも小さく変更されます。 ブラウザのサイズを小さくしたキャプチャ 「Fluid Grid system」は成果物としてのレイアウトと同様、プロトタイプでも素早く使えるように設計されたものです。 デザイナーは素早くレイアウトがデザインでき、しっかりと設計された水平や垂直のリズムをもつ複雑なページの変更をすることもできます。 ダウンロードできるデモファイルには、6カラムと9カラムのレイアウトが用意されています。
More than 5,000 companies count on our digital courses and more to guide their teams through the tools and technologies that drive business outcomes. We can help yours too. New AI policy for O’Reilly authors and talent O’Reilly president Laura Baldwin shares the company’s ethical approach to leveraging GenAI tools and ensuring O’Reilly experts are compensated for their work. See it now It’s time t
複雑化するWebブラウザの検証 WebデザインのHTMLコーディングでは、複数のOSやWebブラウザ、またバージョン別による検証確認は必須です。OSやWebブラウザの種類によって見え方が違っていたり、時にはレイアウトが崩れたりすることもあるからです。 テーブルレイアウトでコーディングしていた時は、OSのフォントサイズの違いによる段落検証が中心でした。しかし、CSSレイアウトへ移行すると、WebブラウザごとにCSSの解釈が変わってくるため、検証がより複雑になってきます。今回はWebブラウザ検証方法と、その対処策をマスターしていきます。 現在、一般的に使用されている主なWebブラウザは、Internet Explorer（通称IE）のバージョン6と7、Firefox、Safari、Operaです。これらのWebブラウザシェアは日々推移していますが、ユーザ環境リサーチを行っているW3Counte
CSSでリストを横式ナビゲーションに では、次に同じXHTMLソースをそのまま使い、Webサイトの上部に配置されるような横式のナビゲーションにカスタマイズしてみましょう（図3）。 横式ナビゲーションの手順 ここで前回に解説した「floatプロパティ」浮動ボックスを再び使用します。前回はカラム（段組）を浮動ボックス化して回り込みを設定しましたが、今回は各リスト項目を浮動ボックス化します（リスト4）。 まずナビゲーション全体の横幅を<ul>タグに固定します。それぞれのナビゲーションボタンが120pxで、これが5個並ぶので合計600pxです。 次に<li>タグにfloat:left;の設定を記述します。これですべての項目が左に回り込む設定になりました。そしてfloatプロパティのルール上、設定したボックスには必ず幅widthを指定します。また、今回はリストの背景にグラデーションを表示させて、ボタ
【即実践！HTML+CSS】 テーブルレイアウトから脱出せよ！ 第2回：カラムを理解する！ 著者：米倉 明男 公開日：2008/04/08（火） float（フロート）を使った3段組カラム作成 次は3段組を作ってみましょう。「ナビゲーション」エリアを左に、「メインコンテンツ」エリアを真ん中、追加で「サブ」エリアを右側に配置します。 一見、複雑になったかのように見えますが、配置方法は先ほどの2段組と同じです。今回は「ナビゲーション」エリア<div id="navi">と「メインコンテンツ」エリア<div id="main">を包括する<div id="wapper">を作ります。ボックスを入れ子状態にするのです。 まず<div id="wapper">と<div id="sub">ボックスを左右にフロートします。次に<div id="wapper">の子ボックスにあたる<div id="ma
【即実践！HTML+CSS】 テーブルレイアウトから脱出せよ！ 第2回：カラムを理解する！ 著者：米倉 明男 公開日：2008/04/08（火） float（フロート）の概念 floatプロパティは、元々ボックスの外側にテキストを回り込ませるためのプロパティです。例えば<div>ボックスにfloat:leftと指定すると、そのボックスは浮動ボックスとなり、左端に配置され、その後に続くテキストが右側に回り込みます。 同様にfloat:rightと指定すると浮動ボックスは右端に配置され、続きのテキストは左側に回り込みます。 floatを使用する場合に注意する点は3つあります。 1つ目は、CSS2の仕様ではfloatプロパティを指定する場合に、そのボックス自身の幅を（width）を指定しておく必要があることです。この幅（width）を指定しないと一部のWebブラウザで回り込みが反映されない場合が
【即実践！HTML+CSS】 テーブルレイアウトから脱出せよ！ 第2回：カラムを理解する！ 著者：米倉 明男 公開日：2008/04/08（火） テーブルレイアウトでのカラム作成 Webデザインのレイアウトではカラム（段組）という手法がよく使われています。この語源は「Column」表計算ソフトで使う「列」からきています。 Webサイトでは左側のカラムをナビゲーションにして、右側のカラムをコンテンツエリアとするパターンや、ポータルサイトのように情報量が多いWebサイトでは3段組カラムを使い、左側がナビゲーション、真ん中にメインコンテンツ、右側にバナーや関連へのリンク、という区分けもスタンダードな形式といえるでしょう。 テーブルレイアウトでのコーディングによるカラム作成は、まず全体をテーブル<table>タグで囲み左右にセルを作ります。そして左カラムは左のセルに入れ子のテーブルを新規作成して、
印刷用CSSのお話 最近担当したサイトでは印刷用CSSをたいがいセットにしてます。同業者の方だと経験あるかもしれないですが、昔の鬼級テーブルレイアウトの頃は言われた事なかったんですがCSSを使い始めてから「背景が印刷できない」と、よく言われました。「ブラウザの設定で『背景も印刷する』にチェック入れると出てきますよー。デフォルトではインク節約仕様になってるんすねー（嘘かホントかは知らない）あはははー」とか返してました。 デフォルトの状態で印刷できないってのは問題あるだろってのはもちろんちゃんと分かってたんですよ。ここは背景扱いにしたらデフォ状態で印刷したらエラい事になるぞ、とか使い所の選別はしてましたし。まぁでも「あなた、なんでもかんでも画像化するの大好きなクセに検索対策っ！検索対策っ！さっさと検索対策～！って言うじゃん」とか鬱憤も溜まってました。 印刷用のCSSを用意するようになってからは
Cheatography https://cheatography.com Download This Cheat Sheet (PDF) 14 CommentsRating: () Home > Programming > CSS Cheat Sheets CSS2 Cheat Sheet by DaveChild A quick reference guide for CSS, listing selector syntax, properties, units and other useful bits of information. CSS2 Selectors * All elements div <div> div * All elements within <div> div span <span> within <div> div, span <div> and
Blueprintcss Tutorial の和訳 に続いて、こちらも日本語に翻訳してみることにしました。 BlueprintCSS 初級講座 HTML と CSS を使って数多くのデザインをつくり出していると、毎度処理する問題の中にいつも決まった問題がいくつかあることに気がつくだろう。例えば、ブラウザーをリセットして白紙状態にする作業。それからデザインを配置していくためのレイアウトやベースライングリッドを設定する作業。まともな文字サイズと位置合わせ、間隔を決める作業も。ほかにもまだある。こういった事柄を前もって処理し、デザイナーたちが好きな本当に楽しい作業に取りかかれるとしたら便利じゃないだろうか？ Blue Flavor に入る前、私はカンザス州ローレンスに本拠地を持つニュースメディア企業、ワールド社で働いていた。その当時、私とデザイナーの Nathan Borror および Chri
まだ日本語のドキュメントがないみたいなので、Tutorial - Blueprintcss - Google Code を日本語に翻訳してみます。 チュートリアル さあ Blueprint の使い方を解説しましょう。 このチュートリアル以外に、Blueflavor によるチュートリアル（BlueprintCSS 101）もいいですよ。 インストール Blueprint は、あなたのサイトの CSS ディレクトリに置く必要があります。それを済ませた後、以下の２行をあなたのページのヘッダー内に書き加えてください。href に正しいパスが指定されていることを確認してください。 <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="s
Welcome to Construct, a visual layout editor based on Blueprint & jQuery! This is version 1.0, finalized on March 5, 2010 and released for public consumption under the FreeBSD License. This project was built by Christian Montoya, and exists both as a useful tool for CSS designers and as proof that a visual layout editor is possible to acheive with clean CSS & semantic HTML. Read on for an explanat
YUI Grids CSS The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. Other features include: Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily custom
If you are like me, as in more of a developer than a designer, then you are familiar with the process of starting a new project and not knowing what to do with your CSS. You know that your design will likely change as the project goes on, but you want to have a nice looking design from the beginning. So you spend some time writing some CSS that works in Firefox and Safari, oh wait, don't forget IE
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
