配色パターンを決める時参考にしたい色見本・カラーパレット作成ツール26選
配色は、デザインにおいてとても重要な要素です。だからこそ、配色に頭を悩ませることもありますよね。そこで今回は、配色に迷った時、配色パターンを提案してくれる色見本サイトや、カラーパレット作成ツールをご紹介します。色の組み合わせを決めるだけでなく、色の詳細情報も調べられる便利なサイトばかりなので、ぜひ使ってみてくださいね。 配色とは 配色（Color Scheme）とは、2色以上の色を選び、組み合わせてデザインの中に配置すること、またその色の組み合わせを意味します。 配色パターンを決めるツール26選 それでは、配色パターンを決めるのに役立つツールやサイトをご紹介していきます。 原色大辞典 【用途】 色を探す/色の組み合わせを決める 【色数値】 Hex（16進数）/RGB（10進数）/HSB/LAB/CMYK 【配色パターンの色数】 2色 【URL】 原色大辞典のサイトはこちら 原色大辞典は、色
横メニューの作り方
レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記 2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi
フレームページをHTML5化する方法
普段、残業なんて滅多にしない職場で働いている自分ですが、この２週間ほどは激務でした（どれぐらい激務だったかはいいません。あくまで個人的にそう思っただけで、中にはそんなの激務じゃないと言われそうなレベルの量なので） それはともかく、その間にやっていた仕事がframesetやframeタグを使っているフレームを利用したHTMLファイルをHTML5化するというもの。しかし、知ってる人も多いと思いますが、framesetやframeタグはHTML5で廃止されてしまっています。とりあえず代替方法としてiframeタグを使うことになったのだけれども(この実装方法に突っ込まないでください。時間がなかったのでこうするしかなかった)、最初、うまい実装方法が思いつきませんでした。しかも、対応ブラウザはIE6以上と言われています(HTML5なのに、IE6以上って………)。 例えば、以下のようなコード。 <fra
静的なHTMLサイトをモバイル対応サイトに変換する手順
[レベル: 初・中・上級] 英語版のGoogle公式ヘルプフォーラムでGoogle社員のZinebさんが、CMSへの移行が難しい静的なHTMLサイトをモバイルフレンドリーなサイトに変換する際に考慮すべきことをアドバイスしました。 参考になるので日本語に訳して紹介します。 なおリンク先ページは日本語のものも英語のものもあります。 静的サイトをモバイルフレンドリーに転換する方法 Chromeのデバイスエミュレーションモード（※このブログでの解説はこちら）を使って、異なるスクリーンサイズと解像度でウェブサイト（がどのように表示されるか）をテストする。 viewport（ビューポート）を設定する。このタグによって、ページのコンテンツをさまざまなスクリーンで拡大縮小できるようになる。ビューポートがないと、PCで見たときのようにコンテンツが表示されてしまう。 <font>タグや他のインラインHTML要
レスポンシブWebデザインチェックツール | LIQUID DESIGN
スマートフォン、タブレットなど様々な画面サイズのレスポンシブ表示確認が簡単にできるチェックツールです。拡大縮小や縦横回転も自由自在。
今からでも間に合う！レスポンシブWebデザイン作り方のまとめ
photo by Scolirk 地方でもマルチデバイス対応を求められることが多くなってきました。 徐々に対応しているところが増えてきたためだと思います。 私も昨年からレスポンシブWEBデザインについて、 対応する必要がありましたので、調べたものをまとめてみました。 もくじ レスポンシブWebデザインとは？ ギャラリーサイト レスポンシブWebデザインの作り方 画像の切り替え・最適化 レスポンシブ対応のフレームワーク レスポンシブ対応のライブラリ サイトの高速化 レスポンシブWebデザインとは？ 2年程前から流行し始めたレスポンシブWebデザイン。 基本的な考え方、メリット・デメリットを理解しておかないとトラブルの元になります。 レスポンシブWebデザインの基本 レスポンシブWebデザインの基礎 必読！5分でわかる流行のレスポンシブWebデザインまとめ | 株式会社LIG 5分で分かるレス
デザインをレスポンシブに対応させる時に役立つjQuery・プラグイン6（サンプルあり） - Design Color
レスポンシブ対応jQueryコード 1.スクロールすると現れて追尾するトップへ戻るボタン スクロールすると現れるページ上部へ戻るボタンです。よく見るやつですね。PC版ではスクロールするとふわっと画面右下に現れて追尾しますが、スマホ版（ウィンドウ幅480px以下）ではついてこられると鬱陶しいので画面最下部に固定しています。 まずは、ある程度スクロールするとフェードインして現れるjQueryコード。 <!-- jQuery --> <script> $(function(){ var pageTop = $("#pageTop"); pageTop.click(function () { $('body, html').animate({ scrollTop: 0 }, 300); return false; }); $(window).scroll(function () { if($(th
Web便利ツール TOP - TAG index URLエンコード・デコード
文字列の変換 URLエンコード・デコード 文字列をURLエンコード、またはデコードするフォーム。（エンコードは文字コードの指定も可能） URLエンコード［URL作成用］ URLに含まれる日本語をURLエンコードするツール。デコードにも対応。 Unicodeの文字コード確認 Unicodeの文字コードを確認するツール。エスケープシーケンスや数値文字参照も出力。 Unicodeの文字コード変換 Unicodeの文字コードを文字に変換するツール。エスケープシーケンスなどにも対応。 文字の一括置換・変換 文字を一括で置換・変換するツール。プリセットまたは任意の文字で置換・変換が可能。 コードの生成 パンくずリストの構造化データ自動生成 パンくずリスト用の構造化データを自動で生成するツール。OLのリストに対応。 テーブルタグ自動挿入 テキストをスペースと改行部分で分割してテーブル化するツール。 リス
ButtonMaker webボタン素材 自動生成サイト - 無料
このページはホームページ制作に使えるボタン素材を生成するサイトです。 ご希望の項目を設定し、右上の「create」ボタンをクリックするだけで簡単にボタンを作れます。 ※印の付いた項目は設定必須で、その他の項目は必要に応じて設定してください。 各項目の「カラー」の欄は入力欄をクリックするとカラーピッカーが表示されますので、 ご希望の色をクリックすると自動で入力できます。 背景色の「方向」はグラデーションにする際の１から２への色の向きです。 テキストの位置２は自由に指定したい場合に設定すると、 位置１の指定を無視して、位置２で指定した位置にテキストを表示します。
Expression Web 4を使ってみよう
W3C勧告のWeb標準に準拠し、フリーソフトになったマイクロソフトのホームページ作成・管理ソフト、Expression Web 4の使用方法を解説します。 Expression Web 4を使ってみたい2012年12月21日（日本時間）をもって、Expression Web 4はフリーソフトになりました。FrontPageユーザーの方もダウンロードして使ってみてください。なお、Expression Web 4すでに購入された方も、問題が修正された無料版にアップグレードすることをお勧めします。 Expression Web 4 無料版をダウンロード ContentsChapter 1 Expression Web 4の概要とカスタマイズExpression Web 4の特長をはじめ、起動方法や画面構成、および、カスタマイズ方法について説明します。 Chapter 1の記事一覧はこちらChap
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイナーが考慮すべき「錯視」のあれこれ | Swings
二児の母がつづる子育て節約日記 | 二児の母である管理人が、子育てと節約をテーマにつづる日常ブログです。