Webkit系ブラウザのSafariでよく見かける、角丸のにじみを解消するスタイルシートを紹介します。 Fixing the background 'bleed' Safariでborderとborder-radiusを使用した際に背景色が角丸の箇所でにじむのを解消するには、下記のスタイルシートを該当箇所に追記します。
CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方 まずは、デモページをみてください。 ブラウザのサイズを変更すると、スタイルが変更されます。
WordPressにほんの数行記述するだけで、多くの便利な機能を付け加えるチップスをMegaMagから紹介します。 10 wordpress hacks & tricks that I like 1.コメントがついた記事をサムネイル付きで表示 サイドバーやフッタなどどこにでも、たくさんコメントがついた記事をサムネイル付きで表示します。 「http://an-alternative-image.jpg」はサムネイル画像が無い場合のデフォルトの画像を指定してください。 <textarea name="code" class="html" cols="60" rows="5"> <?php $popular = new WP_Query('orderby=comment_count&posts_per_page=5'); ?> <?php while ($popular->have_po
Googleで使用されているようなグラデーションのスタイリッシュなボタンを画像を使用しないで実装するスクリプトを紹介します。 jQuery imageless buttons a la Google デモページ サポートしているブラウザも多く、下記の通りです。 Opera 10 beta Opera 9.6x Firefox 3 Firefox 2 Safari 4 Safari 3 Internet Explorer 8 beta Internet Explorer 7 Internet Explorer 6 Chrome Adobe AIR 1.5+ 実装方法は簡単で、スクリプトとスタイルシートを外部ファイルとして記述し、適用するボタンのpaddingやfont-sizeを指定します。 UI的にはあまり浸透していないものもあるので、その際は文言など一工夫が必要かもしれません。 styl
CSS3やHTML5などをはじめ、トレンドのフォント、見出しのデザイン、クオリティをアップする背景など2010年に押さえておきたいウェブデザインのトレンドをWeb Designer Wallから紹介します。 Design Trends (Predictions) in 2010 下記は、各ポイントを意訳したものです。 元記事では、サンプルも豊富に掲載されています。 はじめに 1. セリフフォント 2. 大きい見出し 3. 埋め込みフォント 4. 繊細なテクスチャ 5. ミニマリストとグリッド 6. CSS3 7. モバイル対応 はじめに 2010年はウェブデザインが今まで以上に刺激的で試行錯誤に満ちたものになるかもしれません。 HTML5、そしてCSS3の魅力的な新機能をデザイナーとデベロッパーが巧みに取り入れようとしています。 去年からのトレンドだと、現在は手描き風や大きい背景は少なくな
ユーザビリティでやってしまいがちなミスや見落とされがちな10の罪とその解決方法をLINE25から紹介します。 10 Usability Crimes You Really Shouldn't Commit 下記は、やってしまいがちなユーザビリティの10のミスとその解決方法を意訳したものです。 はじめに 1. ラベルがないフォーム 2. トップページにリンクしないロゴ 3. 訪問済みリンクの指定がない 4. アクティブなフィールドが明示されない 5. altの記述がない画像 6. 背景色がない背景画像 7. 長い長いテキスト 8. 下線付きだがリンクではない 9. ココをクリック 10. 均等割付「justified」の使用 はじめに ここで紹介している10のユーザビリティのポイントは、ありがちなミスだったり見落とされがちなものを集めました。 あなたのウェブサイトのユーザビリティを拡張する手
汚した感じの「グランジ」をウェブデザインに上手に取り入れる5つのポイントをSpyre Studiosから紹介します。 form + function グランジと聞くと「いい加減である」といった印象をもつ人もいるかもしれませんが、それは100%間違いです。レイアウトに秩序をもたらすグリッドとの相性を見てください。 グリッドはコンテンツの流れを構築する役割をもっています。グランジにグリッドを取り入れることで、美しくより容易に読み取りが可能なレイアウトになっています。 2. 繊細な背景
ブログツール「WordPress」のインストール時に、簡単な作業でセキュリティをアップするチップスをWP Engineerから紹介します。 Small Security Tipps for your WordPress Install 以下、そのポイントを意訳したものです。 はじめに WordPressの標準のインストールは非常に簡単で、WordPressの人気の要因の一つともいえます。しかしながら、インストールを行う際に少し手を加えることで、不正なアクセスをより難しいものにすることができます。 テーブルのプレフィックス DBで使用するテーブルのプレフィックスを標準の「wp_」から異なる文字列に変更します。 設定方法 「wp-config.php」の「$table_prefix = 'wp_';」の「wp_」を変更します。 認証用ユニークキー WordPressの安全性をアップするために、
使用しているWordPressのテーマファイルにエラーがないか簡単にチェックできるプラグイン「TAC」を紹介します。 TAC (Theme Authenticity Checker) TACのインストールは簡単です。 下記サイトから、プラグインをダウンロードします。 TAC (WordPress Plugin Directory) ダウンロードした「tac.1.4.zip」を解凍し、「tac」フォルダごとプラグインフォルダにアップロードします。 「管理画面」の「プラグインの管理」ページで、「TAC (Theme Authenticity Checker)」の「使用する」をクリックします。 インストールが完了すると、ナビゲーションの「外観」の箇所に、「TAC」が追加されます。 上記キャプチャは当サイトで現在使用しているテーマファイルをチェックしたもので、特にエラーはありませんでした。 エラー
IE6のCSSやJavaScriptなどのバグや仕様で困った時の解決方法をまとめたチートシートをVirtuosi Mediaから紹介します。
CSS-Tricksから、大きい画像を余白を作らずにブラウザのサイズに合わせて、背景に表示するスタイルシートを紹介します。 Perfect Full Page Background Image 下記、それを実装する要件とテクニックを二つ、それぞれポイントをピックアップして紹介します。 実装の要件 前提として、画像のサイズを調整する必要があるため、background-imageプロパティでの配置は不適格とします。 それを踏まえ、以下の条件をクリアさせます。 ページは画像でいっぱいに、余白は無しで 画像の大きさは自動調整 画像の比率は維持 画像はページ中央に 画像はスクロールさせない クロスブラウザ対応 一つ目のテクニックは余分なマークアップが必要で、IE6用にJavaScriptを使用したものを紹介しています。 二つ目のテクニックは、余分なマークアップを無くし、JavaScriptも必要と
先日紹介した「レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編」の続編となる、リスト・カレンダー・表・フォームなどのエレメントの実装や進歩したスタイルシートのテクニック集をSmashing Magazineから紹介します。
ul, ol, dl要素を使用したスタイルシートの5つのトリックをPieter Beulqueから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <ol> <li><span>Lorem ipsum dolor ... elit.</span></li> <li><span>Aliquam ... eu risus.</span></li> <li><span>Vestibulum ... neque.</span></li> <li><span>Lorem ipsum dolor ... elit.</span></li> <li><span>Aliquam ... eu risus.</span></li> <li><span>Vestibulum ... neque.</span></li> </ol> </
スタイルシートのmarginで使用する「ネガティブマージン(マイナスマージン)」について理解しておくべきこと、ネガティブマージンを使用したテクニックなどをSmashing Magazineから紹介します。 The Definitive Guide to Using Negative Margins 1. ネガティブマージンの理解 2. ネガティブマージンの使い方 3. ネガティブマージンのテクニック集 4. ネガティブマージンのバグフィックス 5. 終わりに 1. ネガティブマージンの理解 スタイルシートを使用する際、必ずといっていいほどマージンを使用するでしょう。しかし、ネガティブマージンになると意見は分かれ、それは悪魔の仕事であると考える人たちもいます。 ネガティブマージンをは、例えばこういうのです。
Silverback Giveaway 一見、背景画像をCSSかJavaScriptで配置したように見えますが、CSSで普通に配置されたソリューションです。 テキストやリストが画像に重ならないように、marginを設定します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <h3>Contest Details</h3> <div class="imagery""> <img src="imagery.png" width="205" height="400" alt="Imagery" /> </div> <p>...the introductory paragraph...</p> <ol> <li>...various bullet points went here...</li> </ol> </textar
JPEG画像をより美しく、より軽量に最適化するテクニックをSmashingMagazineから紹介します。 Clever JPEG Optimization Techniques 1. 「8ピクセル」のグリッド 2. カラーの最適化 3. JPEG最適化の一般的なTips 1. 「8ピクセル」のグリッド JPEG画像は、あなたが既に知っているように8x8のピクセルのブロックから成り立っています。画質を低くするとよく分かります。 この8x8ピクセルを利用して、JPEG画像を最適化します。 画質10で作成したサンプル 二つの正方形は同じ大きさ(8x8ピクセル)です。左上のはきれいに見え、右下のは汚く見えると思います。 これらは、それぞれ8x8のグリッドに並べたもので、左上はグリッドに揃えたもの、右下はグリッドに揃っていないものです。 保存する際に画像は、8x8ピクセルのブロックに分けられるため
ウェブページに使用されている全てのテキストと背景のカラーコントラストが充分であるかどうかチェックしてくれるオンラインサービス「Check My Colours」を紹介します。 カラーコントラストをチェックした結果画面 当サイトを試したところ、上記のようになりました。 テキストと背景の判定はスタイルシートから行っているようで、各要素ごとに使用している色とそのサンプル、コントラストが充分かが一覧で表示されています。 テキストが無い箇所や色指定が無い箇所の判定も行うため、一覧は長くなりますが、エラー箇所のみ表示することも可能です。
背景画像にアニメーションのエフェクトを加え、カラーをゆっくりと変更してサイトの印象をガラッと変えるスクリプトをYOU LOVE.USから紹介します。 <textarea name="code" class="js" cols="60" rows="5"> $(function() { // *** // Scrolling background // *** // height of background image in pixels var backgroundheight = 4000; // get the current minute/hour of the day var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); // work out how far through
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く