図形の認識、カラーの見極め、文字の美しい字詰めなど、Webデザインに大切なスキルが自分はどのくらいなのか分かり、しかも勉強にもなるスキルチェックサイトを紹介します。 ちょっとした暇つぶしにチェックするだけでなく、定期的にやるとスキルがアップしてるのを実感したり、今日は体調悪いなという目安にもなりますね。
![ゲーム感覚で自分のWebデザインのスキルがどのくらいなのかが分かるスキルチェックサイトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/f5df3cf3b6ec7e978ec812f5e8515339379161a7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014120404-01.png)
図形の認識、カラーの見極め、文字の美しい字詰めなど、Webデザインに大切なスキルが自分はどのくらいなのか分かり、しかも勉強にもなるスキルチェックサイトを紹介します。 ちょっとした暇つぶしにチェックするだけでなく、定期的にやるとスキルがアップしてるのを実感したり、今日は体調悪いなという目安にもなりますね。
画像やコンテンツを配置したパネルを次々に水平・垂直にスライドして表示するカルーセルのスクリプトを紹介します。 自由度の高いカルーセルってなかなか無いのですが、「ラスト カルーセル」とサブタイトルがついてるくらい探し回って最後にたどり着くのはこれという出来です。 slick slick -GitHub slickの特徴 slickのデモ slickの使い方 slickの特徴 「the last carousel」とあるだけあって、カルーセルとしての機能は全て備えています。 レスポンシブ対応 CSS3はサポートブラウザ時に動作 オートプレイ対応 ナビゲーションはドット・アローの選択が可能 矢印キーでのキーボード操作に対応 ドラッグ・スワイプ操作に対応 無限ループ対応 slickのデモ デモでは、さまざまなカルーセルの動きを試せます。
既存のウェブサイトのデザインにちょっと手を加えて「Good」から「Great」にする6つのポイントをMyInkBlogから紹介します。 6 Ways To Take Your Webdesign From Good To Great 下記は各ポイントと実例をピックアップした意訳です。 元記事には実例などが他にも豊富に掲載されています。 1. はじめに 1. グラデーション 2. ホワイトスペース 3. グリッド 4. タイポグラフィ 5. ナビゲーション 6. フッタ はじめに ウェブデザインの「Good」と「Great」の差は小さなものです。平均的な人は素晴らしいデザインを構成する明白な相違点を説明することが可能ではないかもしれません。しかし、好きなデザインを見つけることは可能です。いくつかの素晴らしいサイトを分析することで、その相違点を補う小さなディテールをみつけることができるでしょう
ユーザーにあなたのウェブページを容易で、そして楽しくアクセスできるようにする実用的なユーザビリティの10のポイント(ガイドライン編)をSmashing Magazineから紹介します。 Tumblr 多くのフォームは2カラムのレイアウトを採用し、ラベルはフィールドの左に配置されています。一見よさそうに思えますが、これは採用すべきではありません。 なぜなら、フォームは一般に垂直に方向付けがされているためです。ユーザーが左→右→左下と視線を動かすことより、上→下と移動する方が容易です。 また、ラベルを左に配置することはもう一つの問題があります。 あなたはラベルを右揃えと左揃えのどちらで配置しますか? 左揃えはラベルを読みやすくしますが、どのフィールドのラベルか判断するのが難しい場合があります。 右揃えはその逆です。フィールドのラベルを判断するのは容易ですが、ラベルを俯瞰するのが困難です。 2.
IE6のCSSやJavaScriptなどのバグや仕様で困った時の解決方法をまとめたチートシートをVirtuosi Mediaから紹介します。
タブUIの構造や特長、設置の判断、ユーザビリティ、アクセシビリティ、実装のポイントや機能の拡張方法、実装例やスクリプト例をSmashing Magazineから紹介します。 Module Tabs in Web Design 以下、その意訳です。 ※原文では「タブモジュール」となっていますが、タブモジュールやタブUIと記載すると煩雑になるため、「タブ」と略します。 タブのみを指す場合は、「タブ コントロール」としています。 はじめに 1. タブの構造 2. タブはいつ使用するのか 3. タブのユーザビリティとベストプラクティス 4. タブのアクセシビリティ 5. タブの拡張 6. タブの実装集 7. タブを実装するためのチュートリアル集 8. タブを実装するスクリプト集 はじめに タブモジュールは複数のコンテンツを異なるパネルに配置したユーザインターフェースのデザインパターンです。 パネル
異なる時間帯の国へ旅行するときなどに役立ちそうな、たった一晩で睡眠の周期を変える方法をWise Breadから紹介します。 How to Naturally Reset Your Sleep Cycle In One Night [ad#ad-2] この方法は時差ぼけを解消したり、シフト交代制の仕事の順応を改善するでしょう。 睡眠の周期を変える方法は、次の起床予定時刻までの12~16時間は食べるのをやめることだそうです。 次に食事をした時に、それが新しい一日のスタートとして体内時計がリセットされ、睡眠の周期をスムーズに変えることができます。 例えば、2:00 amに起床予定の場合は、前日の10:00 amか2:00 pmから食事を絶ちます。 旅先などで朝食がいつ出されるか確認して、その12~16時間前から食べないようにするとよいとのことです。 サイトではこの方法に基づいた小さい哺乳動物の行
各種チュートリアルをはじめ、写真画像やベクター素材、アイコン、フォント、カラーなどウェブ制作に役立つウェブデザイナーのための検索サイトを紹介します。
コンテンツ箇所をHTMLの上部(ヘッダ・ナビゲーションより上)に配置するスタイルシートのトリックをSoh Tanakaから紹介します。 Markup Hierarchy - Advantages in SEO demo 上記のようなレイアウトをHTMLで記述した際、上左の順番で配置するのが一般的ですが、「float」と「position: absolute;」を使用して、下記のようにコンテンツ箇所を先頭に配置しています。 <textarea name="code" class="html" cols="60" rows="5"> <div id="main" class="container"> <div id="content">Content</div> <div id="header">Header</div> <div id="sidecol">Side</div> </div>
2009年のウェブデザインのトレンドで押さえておきたい10のポイントをSmashing Magazineから紹介します。 Web Design Trends For 2009 1. Letterpress プレスしたようなタイポグラフィ。
スタイルシートの構造設計から、グリッド・フォーム・ナビゲーション・角丸などの実装例、データベースやAJAXの実践的なサンプルが豊富に掲載されているフリーのeBook「The Woork Handbook」を紹介します。 The Woork Handbook The Woork Handbookのテキストは英語ですが、キャプチャやコードが豊富に掲載されているため、英語が分からなくても理解できる箇所は多いと思います。 ダウンロードできる「The Woork Handbook」はPDFファイルで、現在配布されているv.0.1の目次は下記のようになっています。 スタイルシート データベース AJAX MooToolsやScriptaculous、他のJavaScriptのフレームワーク Blogger その他 フォント
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く