CSS3のMedia Queries(メディア クエリ)を使用して、デスクトップのブラウザ用をはじめiPhone, iPadなどのモバイル用にスタイルシートを分けるためのフレームワークを紹介します。 Hardboiled CSS3 Media Queries [ad#ad-2] スタイルシートの分け方は2種類あります。 プロパティ単位 ファイル単位 プロパティ単位でデバイスごとにスタイルシートを設定 「/* Styles */ 」の箇所にスタイルシートを記述。 スマートフォン((縦長・横長)
IE6にも対応した、DOMエレメントをLightboxのエフェクトで表示するjQueryのプラグインを紹介します。 Lightbox_me - Stupidly Simple Lightboxing Lightbox_meは他のLigtbox系スクリプトのソリューションにはない特徴をもっています。 DOMエレメントをLightbox化。 ウインドウのリサイズ時はオーバーレイもリサイズ。 ドキュメントがウインドウよりサイズが小さい場合はオーバーレイのサイズを変更。 全てのブラウザで固定配置(fixed)で表示。 ウインドウがモーダルボックスより小さい場合は固定配置(fixed)が自動的に絶対配置(absolute)に切り替え。これによりユーザーはスクロールが可能に。 そして、軽量でシンプル、という素晴らしい特徴も備えています。 対応ブラウザはIE6+, Fx2.5+, Safari, Chr
ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。 テーブルの「(エクセルでいうところの)行と列」の表記は、「横列と縦列」に統一しています。 はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクション はじめに テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単
ウェブのUIでよく利用されるエレメントがセットになった無料のPSD素材をMediaLootから紹介します。 Freebie: Massive Web UI & Button Set UIセットにはコントロールボタンやアロー、ベーシックなシンボルをはじめ、インフォボックス、テキストボックス、パンくずやボタンなどのナビゲーション、ドロップダウン、スピーチバブル、検索フォーム、ローディングエレメントなどが揃っています。 ダウンロードできるPSDファイルは、3つのスタイル、7つのカラーがあらかじめ用意されています。 素材の利用にあたっては個人・商用ともに無料で利用が可能で、再販などは不可とのことです。 詳細はサイトおよび添付のテキストを参照ください。
floatを解除する際にclearを使用せずに解除する「clearfix」の改良版をPerishable Pressから紹介します。 The New Clearfix Method いわゆる旧タイプのclearfixはMac IEも対応ブラウザに含まれているため、スタイルシートは下記のようになります。 旧タイプのclearfix <textarea name="code" class="css" cols="60" rows="5"> .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-table; } /* Hides from IE-mac */ * html .cle
既存のウェブサイトのデザインにちょっと手を加えて「Good」から「Great」にする6つのポイントをMyInkBlogから紹介します。 6 Ways To Take Your Webdesign From Good To Great 下記は各ポイントと実例をピックアップした意訳です。 元記事には実例などが他にも豊富に掲載されています。 1. はじめに 1. グラデーション 2. ホワイトスペース 3. グリッド 4. タイポグラフィ 5. ナビゲーション 6. フッタ はじめに ウェブデザインの「Good」と「Great」の差は小さなものです。平均的な人は素晴らしいデザインを構成する明白な相違点を説明することが可能ではないかもしれません。しかし、好きなデザインを見つけることは可能です。いくつかの素晴らしいサイトを分析することで、その相違点を補う小さなディテールをみつけることができるでしょう
ウェブサイトのデザインに、ビジュアルエレメントを追加したり、細部をブラッシュアップしたりしてクオリティをアップするPhotoshopのチュートリアルをPsdtuts+から紹介します。
ユーザーにあなたのウェブページを容易で、そして楽しくアクセスできるようにする実用的なユーザビリティの10のポイント(ガイドライン編)をSmashing Magazineから紹介します。 Tumblr 多くのフォームは2カラムのレイアウトを採用し、ラベルはフィールドの左に配置されています。一見よさそうに思えますが、これは採用すべきではありません。 なぜなら、フォームは一般に垂直に方向付けがされているためです。ユーザーが左→右→左下と視線を動かすことより、上→下と移動する方が容易です。 また、ラベルを左に配置することはもう一つの問題があります。 あなたはラベルを右揃えと左揃えのどちらで配置しますか? 左揃えはラベルを読みやすくしますが、どのフィールドのラベルか判断するのが難しい場合があります。 右揃えはその逆です。フィールドのラベルを判断するのは容易ですが、ラベルを俯瞰するのが困難です。 2.
当サイトで使用しているWordPressのサーバー移転をしたので、その際に行ったWordPressの旧データのバックアップの手順の覚え書きです。 セットアップ編に続く予定です。 はじめに:移転先の確認 1. WordPressのサイトデータのバックアップ 2. WordPressのデータベースのバックアップ 3. WordPressの設定と現況のバックアップ 4. バックアップしたファイルのリスト はじめに:移転先の確認 現在使用しているWordPressのデータを保存する前に、移転先が現在と同じ環境で利用できるのか、それともバージョンが異なるかなどを確認する必要があります。 移転先で使用するWordPressのバージョン 移転先のPHPのバージョン 移転先と異なる場合は、事前に旧環境でバージョンアップを済ませてから各データの保存を行います。 ※バージョンアップの前には別途、データのバック
ウェブサイトやアプリケーション用の16x16ピクセルのミニサイズのアイコンをFree Icons Webから紹介します。
Photoshopの設定を変更して、動作を軽快にするための10のステップをSmashing Magazineから紹介します。 10 Simple Steps to Better Photoshop Performance はじめに もし、あなたがPhotoshopの設定をデフォルトのまま使用していたり、パフォーマンスを改善するために再点検することを望むなら、ここで紹介する10のポイントをチェックしてみてください。 1. ヒストリーの数を調整 作業履歴を記録するヒストリーはRAMを肥大化させるため、できるだけ数を少なく設定します。 一つの目安として、RAMが2GB以下の場合はヒストリーを使用しない方が軽快に動作します。 [編集] - [環境設定] - [パフォーマンス]の「ヒストリー&キャッシュ」で設定を変更できます。 2. キャッシュレベルの数を調整 レイヤーの数が少なく高精細の画像の場合
エクセルの設定をカスタマイズして、作業効率をアップする15のTipsをChandoo.orgから紹介します。 15 MS Excel Tips to Make you a Productivity Guru 各Tipsの表記は、当方のエクセル2003に準じています。 会社時代、納品したエクセルのプロパティに変な名前があってナミダモノでした。14番のTipsを知ってれば、全員に設定したのになぁ。 入力後のセルの移動方向を変更 新規ファイルのシート数を変更 デフォルトのフォントを変更 カスタマイズしたリストでオートフィル 使用できる色を増やす 数値の桁区切りの記号を変更 数式のエラーを非表示 自動修正に用語を登録 常にすべてのメニューを表示 画像を圧縮し、ファイル容量を軽減 自動計算で時間がかかるのを解除 テンプレートを設定 オフィス間でグラフをコピペ ファイルから個人の名前などを取り除く メ
Leigeberのエントリーから、以前紹介した「軽量でシンプルなアコーディオンのスクリプト」より更に軽量(1.3KB)になったアコーディオンのスクリプトを紹介します。 Animated JavaScript Accordion V2 demo Accordion V2はjQueryやPrototypeなどの他のスクリプトに依存することなく、単独で動作するスクリプトで、対応ブラウザはIE6, 7, 8, Fx2, 3, Op, Safari, Chromeとなっています。 ※Op9.6.0, Safari3.1.2 for Winで正常に動作しました。 仕様自体に大きな変更はなく、アコーディオンの開閉のタイミングやスピードを調整することができます。 アコーディオンの各項目はdl要素となっており、CSSオフ時やスクリプトオフ時にも情報入手の差し支えないように表示されます。
Unit Interactiveのエントリーから、透過PNG画像をIE6で表示する、超軽量(2KB)の設置も簡単なスクリプトを紹介します。
Chandoo.orgのエントリーから、条件付き書式を利用して、エクセルのデータを見やすくする5つのテクニックを紹介します。 Learn Cool Microsoft Excel Conditional Formatting Tricks テーブルの横列・縦列をハイライト 条件付き書式を使用したガントチャート セル内に配置するグラフ ミスやエラー・データ欠落などのハイライト表示 直感的に把握できるデータテーブル [ad#ad-2] エクセルデータは、Chandoo.orgのエントリーの一番下からダウンロードできます。 テーブルの横列・縦列をハイライト テーブルのデータを見やすくするために、横列・縦列を交互にハイライト表示にします。 ハイライトにするテーブル全体を選択します。 メニューより、[書式] - [条件付き書式] を選択。 「数式」を選択し、「=MOD(ROW(),2)=0」を入力し
Super Tablesは、テーブルのヘッダを固定表示にし、縦横にスクロールバーを表示させるスクリプトです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く