保存版：タイポグラフィの勉強になるインフォグラフィックのまとめタイポグラフィの基本や歴史、フォントの選び方、デザイナーに人気のあるフォントなど、タイポグラフィの勉強になるインフォグラフィックを紹介します。 各インフォグラフィックはリンク先に、大きいサイズのものがあります。
最近リリースされたシンプルでミニマルながら一味違うフリーのアイコン素材のまとめ
ここ最近立て続けに素晴らしいアイコン素材がリリースされたので、まとめて紹介します。 ほとんどが商用利用も無料です。
秀逸なウェブサイトたくさん！Site of the Year 2012のノミネートサイトを全部紹介
世界中の素晴らしいウェブサイトの中から最も素晴らしいウェブサイトを投票で決める「Site of the Year 2012」の候補となったウェブサイトを全て紹介します。
[JS]ブラウザとそのバージョンだけでなくOSもデバイスもスクリーンサイズも判定し、CSSのセレクタで利用できる便利なスクリプト -CSS Browser Selector+
IE6/7/8/9, Firefox, Chrome, Safari, Operaは当たり前、Win, Mac, LinuxなどのOS、iPhone, Android, iPod, iPadなどのデバイス、スクリーンのサイズ、言語などを判定し、それらをCSSのセレクタで利用できるスタンドアローンのスクリプトを紹介します。 CSS Browser Selector+ CSS Browser Selector+の特徴 CSS Browser Selector+の使い方 CSS Browser Selector+の特徴 CSS Browser Selector+はハック無しで、さまざまなUAをCSSのセレクタで指定できるスクリプトです。ブラウザごとに異なるスタイルシートの適用、スマフォやタブレット用のレスポンシブなスタイルにも利用できます。 CSS Browser Selector+が判別するの
レトロヴィンテージなかわいいウェブ用のエレメントやテクスチャ素材のまとめ
最近リリースされたものを中心に、レトロヴィンテージなかわいいリボンやバッジ、アイコンなどのウェブ用のエレメントやテクスチャ素材をDesign Shackから紹介します。
これはかなりの優れもの、スマートフォン・タブレット対応WordPressのテーマファイル -Skeleton
商用利用も無料、Responsive Web Designに対応したWordPressのテーマファイルを紹介します。 ボタン、タブ、パネルなどのページでよく使用するエレメントをはじめ、さまざまなカラムも簡単にショートコードで利用できます。 デモページを幅600pxで表示 Skeletonの主な特徴 Formalizeを使用して各ブラウザ間のエレメントの相違に対応。 Skeletonを使用してMedia Queriesを使った可変カラムに対応。 Option Frameworkを使用してテーマオプションのカスタマイズが可能。 bbPressのフォーラムスキンをインクルード。 見出しや本文などバランスの取れたタイポグラフィ。 デモ：Typography and Elements スマートフォン用のマルチレベルのメニューをサポート。 テーマオプションパネルからフォントや背景画像を設定可能。 タブ
あなたのウェブページが機能しているか7つの面からチェックできるオンラインツール -Spur
Spur [ad#ad-2] Spurの使い方 入力フォームにチェックしたウェブページのURLを入力して、「Spur it on」ボタンをクリックします。 画像でチェックしたい場合は、「Spur it on」ボタンの下にある「Upload an image」をクリックします。 クリックすると、ウェブページに7種類のエフェクトを与え、そのままでは気がつきにくい面からさまざまなポイントを確認することができます。 以下、その7種類のエフェクトを紹介します。 Grayscale グレースケールはデザインからカラーを取り除くことで、ユーザーの目がページのどこに引き寄せられるか確認するのに役立ちます。 見出しはブラックの背景にホワイトのテキストで高いコントラストを確認できます。 ロゴとナビゲーションはコンテンツサイトにドロップバックしています。 最新情報のコンテンツはグレースケールになると、コントラス
全653種、商用利用無料、再配布可能な太っ腹のフリーアイコン -Default Icon
全653種、商用利用無料、再配布可能だけでもすごいですが、更にベクターのEPS付きとフリー素材として至れり尽くせりのアイコンを紹介します。 アイコンのデザインもシンプルなので、使い勝手もよさそうです。 Default Icon [ad#ad-2] ダウンロードできるアイコンのフォーマットはEPS, PNG（16x16, 32x32, 48x48, 64x64, 128x128, 256x256）です。 アイコン全653種はウェブサイト・ウェブアプリケーション用にさまざまなものが揃っています。 以前紹介した際はver.1で168種類でしたが、作者様よりver.2にして数も増やしたよ、と連絡を受けました。 [ad#ad-2] アイコンのライセンスはCC 3.0で、個人でも商用でも無料で利用できます。また、再配布も可能、とのことです。
見た目はそのままで、JPEG画像のファイルサイズを1/5に軽量化するオンラインサービス -JPEGmini | コリス
JEPG画像の見た目の品質を維持しつつ、ファイルサイズを1/5に軽量化するオンラインサービスを紹介します。 ※1/5は画像によって差があります。 JPEGmini 左：オリジナル（3662KB）、右：JPEGmini（628KB） [ad#ad-2] サイトではデモのJPEG画像が4種類あり、中央のスライダーを操作することで左：オリジナル、右：JPEGmini、見た目の品質を比較することができます。
CSS3対応、スタイルシートの記述で気をつけるべき19のポイント
The CSS Lint Rules [ad#ad-2] 以下は、スタイルシートをオンラインでチェックできるツール「CSS Lint」で使用しているルールを意訳したものです。 スタイルシートの記述で気をつけたい19のポイント スタイルシートの記述ミスはしない これは一番大切なことです。 1文字でもタイプミスをしないようにしましょう。 隣接クラスは避ける 「.foo.bar」のような隣接クラスはIE6などでサポートしてないので、使用には注意してください。 空のルールを残しておかない 空のルールとはプロパティを指定していないものです。 .foo {} これは単にファイルの容量を肥大化させるだけなので、削除します。 display使用時のプロパティに注意 スタイルシートではプロパティのグループを一緒に定義することができますが、displayを使用する際には下記のものがそれぞれ無視されます。 di
サイトやブログの運営でよく使いそうな.htaccessの設定のまとめ
ウェブサイトやブログの運営でよく使いそうな便利な.htaccessの設定を紹介します。 こういうまとめは定期的にあがってきますが、やっぱり必要なのでシェアします。 10 useful .htaccess snippets to have in your toolbox [ad#ad-2] 下記は各ポイントを意訳したものです。 URLからwwwを削除 hotlinkingの防止 feedをfeedbunnerにリダイレクト カスタムエラーページ ダウンロードファイルの処理 PHPのエラーのログ URLからファイルの拡張子を削除 ディレクトリのファイルリストを見せない ファイルを圧縮して軽量化 文字コードの指定 URLからwwwを削除 SEOなどの理由で、URLからwwwを削除して使うことがあるかもしれません。このスニペットは、あなたのウェブサイトにwww付きでアクセスしてきてもwww無しに向
最近リリースされた高品質なフリーのデザインフォント -2011年4・5月
最近リリースされた高品質なフリーのデザインフォントを紹介します。 Elega 個人・商用利用無料。 Decani 個人・商用利用無料。 Dalle 個人・商用利用無料。 [ad#ad-2] Fabri
美しい日本語を使いたい、ワンランク上のビジネスメールの作法
「お世話になっております」、「了解しました」、「取り急ぎ、お礼まで」など、ビジネスメールでよく使用する言い回しの間違った使い方、正しい使い方など、ビジネスメールのワンランク上の作法を紹介します。 [ad#ad-2] 下記は、月刊誌「日経おとなのOFF 4月号 美しい日本語」で紹介されている「『美メール』の作法」から、特に気になった箇所をピックアップしてまとめたものです。 日経おとなの OFF 2011年 4月号（amazon） マナー以前のビジネスメールの常識 ワンランク上のビジネスメールの作法 シーン別のビジネスメールの作法 マナー以前のビジネスメールの常識 メールの件名は具体的に 内容が分かる具体的な件名にしましょう。 「こんにちは」「お願い」「なるはやで」は、ダメ。 返信メールの件名は変更しない 同じ議題であれば件名は変更せずに、「Re: 」を付加して返信しましょう。 議題を変更する
[CSS]box-shadowを使って洗練されたエフェクトを加える二つのテクニック
CSS3の「box-shadow」を使用して、ウェブデザインに洗練された美しいエフェクトを加えるテクニックを二つ紹介します。 How to create slick effects with CSS3 box-shadow デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 box-shadowプロパティとは ページ全体に奥行きを加えるエフェクト 紙がめくれたようなエフェクト 対応ブラウザ box-shadowプロパティとは 「box-shadow」は、ボックス要素の内側・外側に多数のシャドウを加えることができるプロパティです。フォーマットは下記のようにオフセット、サイズ、ブラー、カラーの値を指定します。 <shadow> = inset? && [ <length>{2,4} && <color>? ] 簡単な例をみてみましょう。 box-shadow: 3px 3px
人間のために分かりやすい実用的なURLを設計する方法
URL Design [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに URLを設計する理由 トップレベルのセクションは重要 URL構造を増強する方法 クエリの文字列 URLにはASCIIを URLは検索エンジンのためにではない URLは合意 全てがURLを持っているべき リンクはリンクらしく 再利用できないURL 素晴らしいURLの例 おわりに はじめに あなたは、URLの構造を設計するのに時間をかけるべきです。この記事を読んだ後で、あなたに一つだけ覚えておいてほしいことは、URLの構造を設計するのに時間をかける、ということです。 URLデザインは簡単ではなく、正しい解決方法があると言うことはできません。しかしそれは、他のデザインと同じです。良いURLデザインがあり、良くないURLデザインがあり、そしてその中間もあります。 しかし、それは素晴らしいURLデザインを作るこ
中小企業のウェブサイトで陥りやすい5つの落とし穴とアドバイス
Top 5 Web Design Mistakes Small Businesses Make [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 1. 役に立たないナビゲーション 2. ゴールが不明瞭 3. カラーとコントラスト 4. 分かりにくいコンテンツ 5. 情報の詰め込み過ぎ はじめに もし、あなたが中小企業のオーナーであるなら、あなたのウェブサイトはあなたの会社の中枢であり、マーケティングとブランディングにおける極めて重要なパートでもあります。 見込みのある顧客がサイトのコンテンツを目的にあなたのサイトを訪問します、それはあなたの会社がどのように見えるかを意味しており、サイトのアピアランスとユーザビリティは成功への重要なポイントとなります。 しかしながら、サイトのデザインを間違ったものにしてしまうと、あなたのビジネスに悪影響を与えてしまうことになります。ここにあ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
創造力と遊び心がくすぐられるHTML5でつくられたウェブサイトのまとめ
[CSS]金属の質感が美しすぎる、スタイルシートで実装されたボタン
使い勝手のよいエレガントなOpenTypeのフリーフォント -Lufthamn Studio
HTML5で制作されたサイトをまとめたギャラリーのまとめ