スマホ・タブレットの縦向き・横向き、ノートブック・デスクトップなど、さまざまなデバイスでのページの見え方をさくっと確認できる便利なオンラインサービスを紹介します。 デバイスごとのモックアップにも使えるレベルですよ！ Responsive View 使い方は簡単、登録など面倒なことも一切不要です。 ページにアクセスし、「Enter your URL」に表示したいページのURLを入力します。 ※「https://」には対応していません（2016年2月現在）。
スマホ・タブレットの縦向き・横向き、ノートブック・デスクトップなど、さまざまなデバイスでのページの見え方をさくっと確認できる便利なオンラインサービスを紹介します。 デバイスごとのモックアップにも使えるレベルですよ！ Responsive View 使い方は簡単、登録など面倒なことも一切不要です。 ページにアクセスし、「Enter your URL」に表示したいページのURLを入力します。 ※「https://」には対応していません（2016年2月現在）。
DuoTone Themes DuoTone Dark -GitHub コードがはっきりと見やすいカラー DuoTone Themesの5つのテーマ DuoTone Themesのダウンロードとインストール コードがはっきりと見やすいカラー DuoToneは2つの色相をベースに色調を変化させた7つのカラーで構成されています。 コードで重要な部分には強調したカラー、それほど重要ではない部分には和らいだカラーが適用され、はっきりとした見やすいテーマになっています。 DuoToneは5種類あり、Darkのベースカラーはパープルとゴールドです。 ↓縮小してますが、見やすくないですか？ Colorscheme DuoTones - Dark 対応言語は下記の通り。これからも増えていくそうです。 C Clojure CoffeeScript C# CSS GF Markdown Go Haskell
顔、化粧、瞳、髪、肌、小物などのカラー、対象物のカラーのハイライトやシャドウなど、イラストやマンガを描く時の参考になるカラーパレット・Photoshopのスウォッチ素材を紹介します。
フォントはデザインにおいて、非常に重要な要素です。 プロのデザイナーが当たり前のようにやっていることが、初心者には見落とされていたり、実践されていないこともあります。 持っている日本語フォントがそんなに多くなくても、文字デザインの表現の幅を広げる日本語フォントの組み合わせ方を紹介します。 先週紹介したスライドと同じく、日本語デザイン研究会中部の勉強会でプレゼンされた日本語のタイポグラフィのスライドで、特別に掲載許可をいただきました。 DTPの勉強部屋（名古屋）で登壇しました 日本語デザイン研究会中部は、タイポグラフィの大切さと楽しさを伝えるため・学ぶための交流の場として結成されました。 スライドは全部で51ページ。 フォントに含まれている全ての字形がバランスよく、カッコいいものはあまり多くはありません。多くのデザイナーが使用している各フォントの特徴を理解し、漢字と仮名、そして英数字・約物・
ピッカピカのゴールド、つやつやのゴールド、ざらっとしたゴールド、延べ棒・金箔・砂金など、さまざまなゴールドの美しい質感をデザインに適用できる素材を紹介します。 通常は有料ですが今週末まで無料なので、この機会にダウンロードしておくのをオススメします。個人でも商用でもクライアントワークでも利用できます。
HTML5でWebページを作成する時に役立つ、必要最小限のブランクのテンプレート、ナビゲーションを上部に固定配置、写真画像などの背景画像をブラウザいっぱいに表示させるシンプルなテンプレートを紹介します。 画像: Girly Drop HTML5で作成する時の必要最小限のテンプレート ナビゲーションを上部に固定配置 背景画像をブラウザいっぱいに表示 ※以前、当ブログで紹介したものもバージョンアップされています。 HTML5で作成する時の必要最小限のテンプレート まずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。 A Generic HTML5 Template -GitHub ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。 テンプレートはIE9や8以下への最低
紙・布・生地・黒板・皮・木目・石こうなど、繊細な質感を表現したテクスチャをシームレスに使えるパターン素材を紹介します。 下記の素材は全て個人でも商用でも無料で利用できます。 詳しくは下記ページをご覧ください。 ライセンスページ ダウンロードできるファイルには小さい画像とPhotoshopのパターンファイル（.pat）があり、シームレスに利用できます。
aqua .bg-aqua-gradient { background: rgba(127,219,255,1); background: -webkit-linear-gradient(top, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%); background: linear-gradient(to bottom, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%); } blue .bg-blue-gradient { background: rgba(0,116,217,1); background: -webkit-linear-gradient(top, rgba(0,116,217,1) 0%, rgba(0,65,122,1) 100%); background: linea
Photoshopの知ってると便利な作業効率をアップするTipsを12個、紹介します。 全てPhotoshop CC2014対応ですが、ほとんどのものはCSでも使用できます。 Photoshop外からカラーを抽出 スポイトツールをドラッグしながら、カラーを抽出 通常の操作だとスポイトツールはPhotoshopの枠外に移動すると普通のカーソルに変わってしまいますが、Photoshop内でドラッグしながら移動すると、Photoshop外のカラーを抽出できます。 スポイトツールで複数のカラーを抽出 スポイトツールで抽出できるカラーは、一つだけではありません。 複数のカラーを抽出 Shift を押しながら、カラーを抽出 カラーは、10個まで抽出できます。 ※CSは、4個まで。 ブラシツールからスポイトツールに一時的に変更 選択ツールの選択時に「Ctrl (Macは、Cmd)」を押すと、一時的に移動
先日紹介した「sanitize.css（紹介記事）」や「Marx（紹介記事）」などリセット用CSSの新しいアプローチが増える中、ブラウザごとの要素の相違を吸収するのに人気なのはまだまだ「normalize.css」でしょう。 そのnormalize.cssも細かい改良が重ねられ、最新のバージョンは3.0.3になっています。 normalize.cssで使用されている各スタイルが、どのように機能しているか確認してみましょう。 normalize.css normalize.css -GitHub ※3.0.3はGitHubからダウンロードできます。 normalize.cssの特徴 html, body, :rootなどの全体系の定義 HTML5の新要素用の定義 リンク系の定義 テキスト系の定義 埋め込みコンテンツ系の定義 グルーピングコンテンツ系の定義 フォーム系の定義 テーブル系の定義
ボタンやパネル、レイアウトなど、最近はWebのユーザインターフェイスでさまざまなアニメーションが利用されています。WebページのUIに使用しているアニメーションを今よりもっと魅力的に動かせるようになるチュートリアルを紹介します。 アニメーションを魅力的に動かすテクニックを段階的に解説しているので、それぞれの効果がよく分かります。 Giving Animations Life 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Step 1: まずはシンプルに動かしてみよう Step 2: バウンドを加える Step 3: バウンドを自然な動きにする Step 4: ディズニー®の12の基本原則を取り入れる Step 5: アニメーションを誇張する Step 6: アニメーションに命を吹き込む キーフレームを簡単に設定できるスクリプト St
Chameli Sans Typeface 個人利用無料。 なんとレスポンシブ対応のフォントがついに！ 文字の全体的な印象はそのままで、タブレット・スマホ、そして時計のような小さいスクリーンのそれぞれで美しく表示されるようデザインされています。
美しいぼけやブラーを描いたり、写真の背景に目立つようテキストを磨りガラスに載せたり、モザイクやラインを使って幾何学状にしたり、美しい背景をつくるPhotoshopのチュートリアルを紹介します。 各チュートリアルは30分くらいで出来るものなので、ぜひお試しあれ。
モダンブラウザを基準にページ制作をする人が増えてきましたが、IE8を完全に切るのはなかなか難しいのが現状です。 そんなIE8で、あれ表示がおかしいぞ！という時に、その原因のアドバイスをしてくれる便利なオンラインサービスを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く