GitHubがCSSのパフォーマンス改善のためにおこなったことをまとめたスライド | コリスGitHubのCSSのパフォーマンス改善について、2012年ホノルルで行われた「CSS Dev Conference」のスライドが公開されていたので、紹介します。
これは使いやすい、美しいCSS3グラデーションのボタンが簡単に作成できるオンラインツール -CssGradientButton
パネル右：グラデーションやシャドウなどの編集 作成が完了したら、コードを下部に生成されます。 生成されるコードは下記のようになっています。 <!DOCTYPE html><html><head> <style type="text/css"> .button_example{ border:solid 1px #819bcb; -webkit-border-radius: 3px;width:150px; -moz-border-radius: 3px;border-radius: 3px; font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center;
WordPressにプラグイン無しで、ソーシャルメディアを効果的に取り入れるスニペットのまとめ
ソーシャルメディアはインターネットで非常に重要な存在で、あなたのブログのトラフィックにも大きな影響を与えるものです。 ソーシャルメディアの中でも特に影響力のある、Facebook, Twitter, Google+, PinterestをWordPressに効果的に取り入れる有益なスニペットを紹介します。 WordPress snippets to work with social networks 下記は各ポイントを意訳したものです。 Facebookの「Open Graph」を加える Pinterestの「Pin it」ボタンをつける プラグインを使わずに「ツイート」を表示 「Google+」ボタンの設置 「Google+の更新」を表示 「TwitterとFacebookのボタン」を設置 「お気に入りのツイート」を表示 「Twitterでのシェア数」を表示 「TwitterとFaceb
2012年、ピクトグラムのアイコン素材のまとめ、全部商用無料です！
全部ダウンロードしたら4000種以上！ 商用でも無料で利用できる、小さいサイズからゆる～いデザインのピクトグラムのアイコン素材を紹介します。 ※アイコンをご利用の際は、必ずライセンスを確認してください。
クロスブラウザのためのHTML/CSSのテクニック集 | コリス
anthonyshortのエントリーから、クロスブラウザのためのHTMLとCSSのテクニックの紹介です。 How to get Cross Browser Compatibility Every Time 簡単な意訳なので、詳細やキャプチャは上記エントリーを参考ください。 サマリー doctypeはstrictを使用し、正しいHTML/CSSを使用してください。 スタイルをリセットするスタイルシートを使用してください。 Firefoxでのレンダリングのために、テキストのスタイルシートに「-moz-opacity:0.99」を指定してください。 Safari用には「text-shadow:#000 0 0 0」を使用してください。 画像のリサイズをCSS/HTMLで行わないでください。 全てのブラウザでフォントのレンダリングを確認してください。 「Lucida」は使用しないでください。 テキ
Fireworks用のウェブデザインの無料素材がダウンロードできる -Webportio
アイコン、ボタン、リボンをはじめ、フォーム、スライダー、ツールチップ、メニューなどウェブデザインでよく使用されるようなエレメントをFireworks用のファイルで配布しているサイトを紹介します。 Webportio Graphical resource of Adobe Fireworks [ad#ad-2] 素材の利用にあたってはウェブサイト・ソフトウェアなど、個人でも商用でも無料で使用できます。また、利用の際にはバックリンクの必要もありません。 お願いとして、このサイトを何らかの形で広めてくれると嬉しい、とのことです。 素材はウェブデザインによく利用するエレメントも数多くあり、下記にいくつか紹介します。
スマフォやタブレットに最適なナビゲーションの考察 -見た目のレスポンシブではなく操作性で！
スマートフォン、タブレット、ラップトップタイプのタブレットなど、タッチデバイスに最適なナビゲーションの考察を紹介します。 単に見た目のレスポンシブではなく、操作性を考慮したレスポンシブです。 Responsive Navigation: Optimizing for Touch Across Devices 下記は各ポイントを意訳したものです。 各デバイスのサイズ 各デバイスのタッチ方法 タッチデバイスに最適なナビゲーションの位置 デモ スマフォ・タブレット・ラップトップタブレットのサイズ まずは、デバイスごとのスクリーンサイズを確認してみます。 過去2ヵ月にリリースした主要なスマートフォンのサイズ一覧です。
[CSS]フォームの見栄えをぐっとよくする、テキスト入力欄とボタンをCSS3で美しくスタイルするチュートリアル
CSS3 Form Styling Cheat Sheet CSS3でスタイルするテキスト入力欄 CSS3でスタイルするフォームのボタン CSS3でスタイルするテキスト入力欄 HTMLは非常にシンプルです。 classのhogeは、随時変更して利用してください。 HTML <form> <input type="text" class="hoge" /> </form> まずは、ベースとなるスタイルシートです。 CSS: Basic border:0; padding:10px; font-size:1.3em; font-family:Arial, sans-serif; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; width:300px; 枠線を角丸にします。
ブログやウェブサイトですぐに役立つ「.htaccess」の設定のまとめ | コリス
ブログやウェブサイトのパフォーマンス改善や運営・セキュリティに役立つ「.htaccess」の設定を紹介します。 .htaccess Files for the Rest of Us [ad#ad-2] 下記は各ポイントを意訳したものです。 リダイレクトとリライト オリジナルのエラーページ 特定のリソースへのアクセス制限 特定のIPのアクセス阻止 IEのレンダリングモードの設定 有効期限を設定してトラフィックを軽減 gzip圧縮の利用 リダイレクトとリライト リダイレクト サイトを移転したなど、永続的なリダイレクトには「HTTP301リダイレクト」で設定します。 転送先のURLは絶対URLで指定します。 Redirect 301 ^old\.html$ http://ドメイン/new.html リライト リライト（書き換え）をする場合は、下記のようになります。 RewriteEngine o
最近のインターフェイスデザインから学ぶ、7種類のボタンデザイン
ユーザーのアクションを誘う購入や送信や検索ボタンなど、最近のインターフェイスデザインでよく見かける7種類のボタンデザインを紹介します。 Common elements used in interface button design [ad#ad-2] 下記は各ポイントを意訳したものです。 また、元記事ではそれぞれのボタンを作成するPhotoshopのチュートリアルも掲載されています。 1. テクスチャを使ったボタン 2. パターンを使ったボタン 3. 3Dを使ったボタン 4. 1ピクを使ったボタン 5. 背景をインデントしたボタン 6. グロウを使ったボタン 7. ハイライトを使ったボタン 1. テクスチャを使ったボタン テクスチャはボタンにわずかな奥行きを与え、クリックが可能であることが分かるようにする素晴らしいテクニックです。
2011年のSEOで、これはもう避けておきたい32のチェックリスト
Googleをはじめとする検索エンジンに対して、サイトを最適化する際に気をつけるべき32のチェックリストを紹介します。 32 SEO Tactics to Avoid in 2011 [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに あなたは2011年を迎え、SEO用の膨大なリストをもっていることでしょう。ここで紹介するものは、あなたがやるべきではない32のチェック項目を知ることで、あなたのリストを少なくすることです。 2011年のタスクに下記のリストが残っているのであれば、どうぞそれらを消してください。 Hiding Stuff On-Page 隠されたテキストやリンクはGoogleが最も嫌う存在です。これらは最悪の場合、ペナルティが与えられることがあるので使用は避けてください。 白い背景に白いテキスト 画像の上に隠したテキスト CSSを使って隠したテキスト 極小サイズ
タイポグラフィを基本から学べるオススメの本
ウェブデザインでも非常に重要なタイポグラフィを基本から学べるオススメの本を紹介します。 きれいな欧文書体とデザイン 文字の組み方 欧文組版 デザインの教室 市川崑のタイポグラフィ 欧文書体百花事典 きれいな欧文書体とデザイン -名作書体の特色とロゴづくり ポピュラーな書体の基本情報から、それぞれの特徴をふまえた文字組・ロゴ作成を分かりやすく解説しています。装丁がとても美しい本なので、ぜひ手にとって見てください。 『メイキング「きれいな欧文書体とデザイン」』では、そのコンセプトを垣間見ることができます。 目次 欧文書体の基礎 欧文書体を使ったロゴづくり 欧文書体の特色とアレンジ 響き合う書体たち [ad#ad-2] 文字の組み方 -組版/見てわかる新常識
[JS]ページ遷移にフェードやスクロールのアニメーションを加えるスクリプト -Pageswitch
リンクをクリックしてページを遷移する際に、フェードやスクロールのアニメーションを加えるスクリプトを紹介します。 デモページ Pageswitchの実装 実装は簡単です。 HTML 既存のHTMLに、特に手を加える必要はありません。 idに使用している「example」は適当なものに変更できます。 <div id="example"> <a href="//coliss.com/">Example #1</a><br /> <a href="http://www.example.com">Example #2</a><br /> </div> [ad#ad-2] JavaScript PageswitchはjQueryのプラグインのため「jquery.js」と当スクリプトを外部ファイルにし、下記のように各リンクにエフェクトを指定することができます。 $(document).ready(fun
[CSS]パンくずの実装はどのようにするのがよいかの考察
パンくずは何要素で実装していますか？ ul要素？ ol要素？ p要素？ パンくずをどのように実装するのがよいかの考察を紹介します。 Exploring Markup for Breadcrumbs [ad#ad-2] 先日紹介したCSS-Tricksの「画像を使用しないでApple風のパンくずを作成するチュートリアル」に寄せられたコメントから考察されたもので、各ポイントを意訳したものです。 パンくずのマークアップの考察のきっかけ -ul要素で同列配置 パンくずのマークアップの考察 -ul要素で親子 パンくずのマークアップの考察 -ol要素で順序づけ パンくずのマークアップの考察 -セパレーターの使用 パンくずのマークアップの考察 -Googleを参考に パンくずのマークアップの考察 -HTML5の使用 パンくずのマークアップの考察 -おわりに パンくずのマークアップの考察のきっかけ -ul
[CSS]幅は可変で高さは異なるカラムの高さを等しくするスタイルシートのまとめ
幅は%で指定した可変、高さはそれぞれ異なるカラムを使ったレイアウトで、スタイルシートを使用してカラムの高さを等しくする今までの方法から、これからの方法までを紹介します。 Fluid Width Equal Height Columns [ad#ad-2] 下記は各ポイントを意訳したものです。 Doug Neiner メソッド Nicolas Gallagher メソッド Using Tables One True Layout メソッド Flexbox メソッド メモ 訳者注 各デモは「:nth-child」を使用しているため、モダンブラウザのみ期待通りに表示します。詳しくは「メモ」を参照ください。 Doug Neiner メソッド 「Doug Neiner」メソッドは、CSS3グラデーションからアイデアを得た方法です。 [css] .five-columns { background-i
パンくずのデザイン集と概要やデザインのポイント
ウェブデザインで使用しているパンくずのデザイン集とパンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイントを紹介します。
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
漢字もある！ 全360種以上のミニサイズ（4～15px）のフリーのピクセルフォント -Akashic Design
[CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix
HTML5の勉強に役立つチートシートやリファレンスのまとめ