IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
HTML5とCSS3をページ全体or少しずつ導入するチュートリアル
デモページの全体のキャプチャ 下記は各ポイントを意訳したものです。 全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。 ウェブページにHTML5を導入 ウェブページにCSS3を導入 ウェブページにHTML5を導入 デモページのHTMLの構造は、下記のようになっています。 HTML5：ページのベース 各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh
[JS]JS/CSSの管理、ユーザー環境の検出など便利な機能がつまった超軽量スクリプト -Head JS
複数のJSファイルの管理、CSSのサポートが異なるブラウザへの対応、ブラウザとバージョンの自動検出、スクリーンサイズの自動検出など、headで制御したい便利な機能がつまった超軽量（2.3KB）スクリプトを紹介します。 Head JS [ad#ad-2] 下記に、Head JSでできることを簡単に説明します。 詳しい使い方は下記ページで解説されています。 Usage: Head JS 外部JSファイルの読み込み JavaScriptの管理 CSSのサポートが異なるブラウザへの対応 HTML5非対応ブラウザへの対応 スクリーンサイズに合わせた表示 Dynamic CSS CSSを特定のページのみに CSSをブラウザごとに指定 外部JSファイルの読み込み 通常、複数のJavaScriptファイルを外部ファイルとして読み込ませるとブロッキングが生じます。 そのブロッキング解消し複数のファイルを並列
無駄なdiv要素やclassだらけのマークアップから卒業する方法
グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 はじめに CSSのフレームワーク：960.gsの場合 classの乱用を避ける リスト要素の使用 画像とキャプションの使用 複数の見出しとパラグラフの使用 子要素のclassは親要素に はじめに 数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。 しかしながら、このCSSのフレームワ
あなたのブログを魅力的にする8つのデザインエレメント
今運営しているブログをより魅力的したい、これからブログをつくる、という人向けにブログに必要な8つのデザインエレメントをSmashing Shareから紹介します。 8 Design Elements Your Blog Should Have はじめに 1. RSS/E-mail購読 2. 独自性のあるヘッダ 3. 分かりやすいナビゲーション 4. コメント 5. ソーシャルメディアのアイコン 6. グラフィックのガイドライン 7. スポンサーのスペース 8. リッチなフッタ はじめに ブログのユーザーを幸せにし、あなたのコンテンツに関心を抱くようにしておくために必要な特定のデザインエレメントがあります。 ユーザーは記事を簡単に読め、素早くコメントができ、TwitterやFacebookのアカウントでシェアできることを期待しています。 ブログのデザインはクリーンで、整合性のあるレイアウトを
ウェブサイトのレイアウトを一から作成するPhotoshopのチュートリアル集
繊細なテクスチャ、透明感のあるパネル、充実したフッタ、光源を模したグラデーション、1ピクラインにこだわったディテールなど最近のウェブデザインのトレンドを取り入れた、ウェブサイトのレイアウトを作成するPhotoshopのチュートリアルを紹介します。
2010年に備えて、知っておきたいウェブデザインのトレンド
2010年に向けて押さえておきたいウェブデザインのトレンドの14のポイントをWeb Design Ledgerから紹介します。 Web Design Trends for 2010 下記は、その意訳です。 また、同著者の別エントリーに対応したものもあります。 これはもう使用しない方がいいウェブデザインのトレンド はじめに 1. 特大のヘッダとロゴ 2. 手描き風のデザイン 3. 大胆で大きなフォント 4. タイポロジー 5. 1ページ レイアウト 6. インパクトがある画像 7. パースの活用 8. インタラクティブで直感的なデザイン 9. モーダルボックス 10. ミニマリズム 11. オーバーサイズのフッタ 12. レトロ 13. イントロボックス 14. 雑誌風のレイアウト はじめに このリストは、2009年に人気が高かったものからさらに発展するであろうトレンドを紹介しています。 ト
Photoshopでの作業をより早くより簡単にする20のTips
Photoshopでの作業を今までより早く、そしてより簡単にする20のTipsをSpoonGraphicsから紹介します。 20 Handy Photoshop Tips For a Faster Workflow デザイナーの人には常識的なものだと思いますが、実用的で多用するものが多く紹介されています。 ※コマンドはWin XP+Photoshop CS4のものです。 Macの場合は、下記置き換えてください。 Ctrl = Cmd Alt = Opt 作業ファイル上で、[space] 使用してるツールを手のひらツールに変更し、画像を移動させることができます。 [編集]-[環境設定]-[テキスト]の「フォントプレビューのサイズ」 サイズを「特大」にすると、フォント選びが楽になります。 「文字パレット」のサイズにフォーカスをあてて[矢印] 上下の矢印キーでフォントサイズを増減することができま
960pxのグリッドシステムを使用する際に役立つサイト集
960pxのグリッドシステムをサイトデザインに使用する際に役立つ、サンプルや実装例、テンプレート、フレームワーク、グリッドの設計ツール・確認ツールなどを紹介します。
エクセルのデータを見やすくする5つの簡単なテクニック | コリス
Chandoo.orgのエントリーから、条件付き書式を利用して、エクセルのデータを見やすくする5つのテクニックを紹介します。 Learn Cool Microsoft Excel Conditional Formatting Tricks テーブルの横列・縦列をハイライト 条件付き書式を使用したガントチャート セル内に配置するグラフ ミスやエラー・データ欠落などのハイライト表示 直感的に把握できるデータテーブル [ad#ad-2] エクセルデータは、Chandoo.orgのエントリーの一番下からダウンロードできます。 テーブルの横列・縦列をハイライト テーブルのデータを見やすくするために、横列・縦列を交互にハイライト表示にします。 ハイライトにするテーブル全体を選択します。 メニューより、[書式] - [条件付き書式] を選択。 「数式」を選択し、「=MOD(ROW(),2)=0」を入力し
Photoshopを便利にする30のショートカット | コリス
Web Design WallでPhotoshopの30のショートカットが紹介されていました。 Photoshop Secret Shortcuts 下記に、コマンド別に紹介します。 ※Win XP+Photoshop CS2でのコマンドです。 Macの場合は、下記置き換えてください。 Ctrl = Cmd Alt = Opt [選択ツール] + [space] 選択範囲を作成中、スペースキーで移動できます。 [Ctrl] + [マウスのスクロールアップ or ダウン] ドキュメントを上下のスクロールではなく、左右にスクロールできます。 文字パレットのフォントリストにカーソルを入れて、[↑ or ↓] フォントのリストを一つずつ表示します。 テキストを選択して、[Ctrl] + [Shift] + [< or >] フォントサイズを2pt単位で変更できます。 [Ctrl] + [Alt]
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
第二水準漢字にも対応、油性マジックで書いたフリーの日本語フォント -たぬき油性マジック
コリス
日本語入力も可能なオープンソースのマインドマップ「XMind」
GIFやJPEG画像をベクター化できるオンラインサービス -VectorMagic | コリス