重要な情報は左上に――効果的なデザインに必要な4つの原則
エンジニアが知っておくべきWebデザインの4原則、「近接」「整列」「反復」「コントラスト」を分かりやすく解説する。 連載目次 エンジニアが作るシステムやアプリケーションには、デザインが欠かせません。デザインというと、「ビジュアル」「見た目がカッコいい」「おしゃれ」など外見のデザインを思い浮かべがちですが、WebアプリやWebサイトのデザインで大切なのは、そこではありません。 Webのデザインで必要なのは、「ユーザーの目的達成を助ける」ことです。本連載「エンジニアのためのWebデザイン基礎の基礎」は、あなたのWebサイトを訪れた人を引きつけ、ユーザーへと転換（コンバージョン）させるためのデザインの基本を伝授します。 良いデザインの4原則 「エンジニアが知るべき最低限のデザイン基礎」とは何でしょう？ 専用ソフトウェアの使い方？ いいえ、違います。IllustratorやPhotoshopの使い
ウェブ制作のフローが劇的に変わる！『Avocode』ベータ版を使ってみました | コリス
PNG Hat, CSS Hatなど、ウェブ制作に役立つツールを数多く開発しているMadeBySourceから、更に強力なツール『Avocode』がリリースされます！ 正式版のリリースはまだ先ですが、中の人からプライベートベータ版をいただいたので、さっそくそのレビューをお届けします。 プロダクトキーは複数あるので、レビューを見て興味をもっていただいた方は、明日か明後日に募集するのでお楽しみに。 Avocode Avocodeは簡単に言うと、PSDのプレビューと書き出しをPhotoshop無しで行うもので、書き出しは.png, .jpgの画像だけでなく、SVGへの書き出し、CSSへの書き出しにも対応しています。 画像のスライスやスタイルシートのコーディング作業を大幅に強化する感じです。 僕もまだ使って間もないのですが、Avocodeの画面を見ながらレビューします。 と、その前に、動画がアップ
SVG初心者に！SVGとCSSでボーダーにちょっとかっこいいアニメーションをつけるデモ
SVGをちょっと始めてみたいな、という人にもちょうどよさそうなテキストの周りに表示するボーダーをアニメーションで表示するデモを紹介します。 SVG Border Animation コードは簡単、コピペで利用できます。 HTML <div class="svg-wrapper"> <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg"> <rect class="shape" height="60" width="320" /> <div class="text">coliss</div> </svg> </div> CSS html, body { background: rgb(20,20,20); text-align: center; height: 100%; overflow: hidden; } .svg
[CSS]リスト要素を左寄せぴったりに配置するスタイルシートのテクニック
中黒のような黒丸、四角、数字など、リストの先頭につくマークを左寄せに揃えるスタイルシートのテクニックを紹介します。 対応ブラウザはIE8+で、ネガティブマージンは使用しません。 Align Lists Flush Left ブラウザごとに異なるサイズのマークでも、数字のリストで1桁から2, 3桁と増えても全てに対応できるテクニックです。 まずは、マークアップから。 HTML ulもolもシンプルな実装です。 <h3>Unordered List</h3> <ul> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ul> <h3>Single Digit List</h3> <ol> <li>Lorem ipsum dol
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sublime Textをとことん使いこなしたい！ウェブ制作に役立つノウハウ満載のオススメ本 -Sublime Textの教科書
