珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD
概要： Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基本的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に
完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
作成：2014/01/27 更新：2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 １．仕様書の確認 ２．入稿データの確認・スケジューリング HTML5 マークアップ ３．テンプレート作成 ４．条件付きコメント ５．GCF＋キャッシュクリア ６．OGP記述 ７．ファビコン ８．アウトライン作成 ９．バリデーターをチェック CSS の設定 １０．ノーマライズスタイル レスポンシブデザイン設計 １１．モバイルファーストを基準に設計 １２．プログレッ
Designing in the Browser ver. 1.0 RC
2013/09/14 (土) - 第15回リクリセミナー「Frontrend in Osaka」
Naming Media Queries | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. It would be pretty cool if we could do this someday in CSS. The best idea for it that I’ve come across is to define it in a <meta> tag in the <head>. That way (perhaps) CSS could use it and JS could use it. Like window.matchMedia(nameOfMyMediaQuery) or @media (nameOfMyMediaQuery) { }. But since we
Choosing A Responsive Image Solution — Smashing Magazine
If you read Smashing Magazine, you’re probably already on board with creating the best possible website experience for your audience. And if you go the responsive design route then you’ll need a strategy to make images flexible, too — a responsive image solution. This article leads you through the basics, and then arms you with the information you’ll need to pick the best responsive image solution
Working around a lack of element queries | Filament Group, Inc.
Lately, we’ve been running into a recurring dilemma when building responsive designs. We want to build responsive layouts comprised of many modular, independent HTML components that fluidly fill any layout container we drop them into, but CSS3 media queries don’t currently offer a way to make content respond to its container’s dimensions (as opposed to the overall viewport size). Nearly all of the
使えるとレスポンシブWebデザインに便利なCSS
デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。 #box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; } 特にコンテンツの幅を指定するときや、Fluid Grid Systemを作成するときに計算が簡単になります。 例えば以下の図のような4カラムのGrid Systemで2カラム分の相対幅を求めるとします。 デフォルトの場合2カラム分の幅は60px×2+20px=140px、全体の幅は320pxとなるので、140÷320×100=43.75%となります。これにmarginやpaddingでガターの幅
Resolution Independence With SVG — Smashing Magazine
In this article, we’ll look at Scalable Vector Graphics (SVG), one of the most underused technologies in website development today. Before diving into an example, let’s consider the state of the Web at present and where it is going. Website design has found new vigor in recent years, with the evolving technique of responsive design. In this article, we’ll look at Scalable Vector Graphics (SVG), on
レスポンシブWebデザインについて
レスポンシブWebデザインについて CSS2012年12月15日 レスポンシブWebデザインとは レスポンシブWebデザインとは、PC、スマホ、タブレットなど異なるスクリーンサイズにおいて、HTMLを1ソースでスタイルを変えることによりそれぞれのデバイスにおいて柔軟にレイアウトやデザインを調整する手法のことを言います。 レスポンシブWebデザインを構成する技術 主にレスポンシブWebデザインは下記の3つの技術的な要素意で実装されることになります。 メディアクエリー レスポンシブWebデザインでは、スクリーンの幅やデバイスの向きなどによって適用するスタイルを切り替えます。 フルードグリッド 従来のグリッドデザインに加え、ブラウザの幅が変わってもレイアウトを維持ししたまま柔軟に可変していくフルードデザインを組み合わせた手法を指します。 レスポンシブWebデザインでは、pxベースで設計・実装した
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
click.com.cn
株式会社まぼろし
Build Bootstrap in Minutes Using Emmet | Envato Tuts+
404页面
Ease into Browser-Based Design with Style Guides | Blog | nGen Works
The Five Elements Of Modular And Adaptive Content - Vanseo Design
CSS Nite LP, Disk 25：Webデザイン行く年来る年（Shift6）
Responsive Coming Soon HTML5 Page Tutorial « Flashuser
http://blog.ryodesign.net/2012/11/15/less-for-responsive-web/
http://css.studiomohawk.com/in-browser-design/2011/04/16/designing_in_browser/