GLYPHICONS® are precisely prepared monochromatic icons and symbols, created with an emphasis to simplicity and easy orientation.
![GLYPHICONS - Visual language that everybody understands](https://cdn-ak-scissors.b.st-hatena.com/image/square/fcadec1f01b299de0d6c8008e060e31e2562d199/height=288;version=1;width=512/https%3A%2F%2Fwww.glyphicons.com%2Fimg%2Fglyphicons-og.jpg)
パンくずは何要素で実装していますか? ul要素? ol要素? p要素? パンくずをどのように実装するのがよいかの考察を紹介します。 Exploring Markup for Breadcrumbs [ad#ad-2] 先日紹介したCSS-Tricksの「画像を使用しないでApple風のパンくずを作成するチュートリアル」に寄せられたコメントから考察されたもので、各ポイントを意訳したものです。 パンくずのマークアップの考察のきっかけ -ul要素で同列配置 パンくずのマークアップの考察 -ul要素で親子 パンくずのマークアップの考察 -ol要素で順序づけ パンくずのマークアップの考察 -セパレーターの使用 パンくずのマークアップの考察 -Googleを参考に パンくずのマークアップの考察 -HTML5の使用 パンくずのマークアップの考察 -おわりに パンくずのマークアップの考察のきっかけ -ul
HTML5+CSS3の環境で汎用的に利用できるHTML・スタイルシート・スクリプトなどのファイルを一式にまとめたテンプレートを紹介します。 ファイル構成:コメント無し版 各ファイルの説明 index.html HTML5の要素を配置した汎用的に利用できるHTMLファイル。各スタイルシートファイルも埋め込まれています。 css/main.css @import用のスタイルシートです。 css/reset.css Eric Meyerの「Reset CSS」です。 css/core.css ベースとなるスタイルが定義されています。 css/_patches 各ブラウザ用のスタイルシートです。 css/_print プリント用のスタイルシートです。 js Modernizrがセットされています。
歴代人気記事でも上位の ポータルのポータル。 今回は、iPad・iPhone・携帯サイトなど モバイルデバイスのデザインギャラリーを集めてみました! それでは続きからどうぞ。 iPad・iPhone Landing Pad ー an iPad App Gallery 綺麗なiPadアプリがたくさん掲載されています。 iOSpirations iPad/iPhoneのアプリやサイトデザインが紹介されています。 ishowcase 国内のiPhone / iPad最適化対応サイトが掲載されています。 iPhoneサイトデザイン集のiPhoneデザインアーカイブ 公式サイト 国内/海外のiPhoneサイトがたくさん掲載されています。 mobile AWESOMENESS 綺麗なモバイルデザインがたくさん。 Web Design Inspiration for the iPhone iPhoneに
【初めての方はこちらをクリック】 iPhoneデザインアーカイブは、携帯サイトキャプチャ集「モバイルデザインアーカイブ」の姉妹サイトです。 iPhoneサイトを制作する上で参考になる秀逸なデザインを持つサイトのキャプチャを集めています。 iPhoneサイト制作を請け負ったけど、「なかなかデザインがまとまらない」「洗練されたデザインを参考にしたい」といった方のために、 優れたiPhoneサイトのデザインを集めました。また、iPhoneサイトにまだ手を出されていないモバイルデザイナーの方に、iPhone サイトデザインの雰囲気を掴んでいただくことで、「今後の仕事の幅を広げるきっかけになれば・・」、という思いで立ち上げました。 デザインに優れたiPhoneサイトはもちろん、技術的に優れたiPhoneサイト、そして現在のトレンドを捉えたiPhoneサイトを掲載しています。 なお、意識的にiPhon
「WebサイトをiPhoneやAndroidで見やすく表示したい」「スマートフォンをターゲットにしたWebサイトをデザインしたい」――そんなWeb制作者のための新連載がスタートします。PCサイト制作のノウハウさえあれば、「モバイルサイトは未経験」でも大丈夫。スマートフォン(iPhone/Android)向けサイト制作の基礎知識から実践的なテクニックまで、H2O Space.のたにぐちまことさんが解説します。(編集部) iPhoneの快進撃とiPhone 4の登場、Android端末のXperiaとDesireのヒット、au初の国産Android端末「IS01」の発売――と、スマートフォンの勢いが止まりません。いまや一部マニアやビジネスマンにとどまらず、女性やお年寄りなどの幅広い層にまでスマートフォンの利用は広がり、「1台目の携帯電話」として購入する人も珍しくなくなりました。 PCとの連携、
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone(iPod Touch)向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記: iPhone向けサイト制作の書籍を執筆しました! 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5+CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張(CSS)があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
ジャックポットについて特別なキャッシュバック取引約定後に、幸運なプレイヤーは最大100,000円のキャッシュバックが当たります。また、Highlowロイヤルティ・ステータスが高いほど当選確率・金額が上昇します。
January 08, 200923:46 カテゴリイントラブログよりサービス作りの話 「次のページ」は右か左か (いわゆる「前次問題」?) 「前次問題」というのがたまにブックマークで話題に上ってくるのだけど,自分の中ではこれは「横書きか縦書きか」「昇順か降順か」のたった二つのファクターのみに依存する問題として整理できてるつもりなので,この機会にまとめてみる。 (以前,マリオは左から右へ進むので云々といった話にまで拡大してたこともあるみたいだけど,本当はもっとシンプルな話のはず。) I. 第一の要素: 横書きか縦書きか I-a. 横書きの場合 文章の流れは左上から右下。 複数ページが横に並ぶ場合は,ページは左から右へ進む。(左開き) I-b. 縦書きの場合 文章の流れは右上から左下。 ページが横に並ぶ場合は,ページは右から左へ進む。(右開き) ここで原則1。 webは基本的に横書きなので,
CSS3の角丸、テキストシャドウ、ボックスシャドウ、RGBA、グラデーションなどを効果的に使用したサイトをSix Revisionsから紹介します。
Windows7のようにウィンドウを透過させたい。 そんなときに使えそうなのが、『AeroWindow』。Windows7のような透過ウィンドウを実現するjQueryプラグインです。 divを透過させて、重なったときに後ろが透けて見せることができますね。ダブルクリックすると、びよーんと拡大したり、右下をドラッグするとリサイズすることができます。 デモは以下から。 オンラインデモ 動きが気持ちいいので、一度見てみてください。 AeroWindow gihyoさんでの連載が始まりました。最近のかっこいいUIについて考えたり、作り方を紹介したりしていくので、よろしければご覧ください。 第1回 使いやすいメニューはどう作る? ?水平メニュー あと代官山で物件を見てきました。めちゃくちゃかっこいいんだけど、うーんもうちょい探そうかな。
Fireworks コレ、5分で作ります。その1 ※このエントリはFireworks CS4を元に書いています。 Fireworks の日本語チュートリアル少ないなーという話を先日Twitterでしていたので、なんか作ってみます。あまり超大作のチュートリアルは手順を書く気力が途中でなくなりそうだったので、今日は5分くらいでコレ作る方法を書きます。 今回の完成形 見出しの背景画像によくありそうなこういう画像をパパっと作ります。 今回は素材集等、Fireworks の機能以外のものは使いません。 土台を用意 まずは一番下の土台を作ります。よくあるアクア風のやつにしますね。矩形で適当なサイズで長方形作って、塗りを線形のグラデーションに。4色決めてスライダーを調節。外側には1pxの線も加えます。 ここでのサンプルのサイズはW 470 * H 40 としました。 こういう見出し用の背景画像でよく左側
はてブ 「nanapi」に学ぶウェブサイトのコンセプトデザイン delicious livedoor クリップ Tumblr Instapaper メールで送信 IT・Web デザイン・アート 2009.09.18 0 ウェブサイトをどう作っていくか、というノウハウがこんなに詰まった記事を公開しちゃっていいんですか? と心配になるくらい、サイト作りのエッセンスが満載です。 "7分であなたの生活を便利にしちゃう ライフ共有レシピサイト"をコンセプトにした「nanapi(ナナピ)」のサイトデザインを手がけた、エスカフラーチェのpurprinさんのブログでは、よくある「デザインTips」ではなく、「どうやってたくさんの人に読んでもらえる魅力あるサイトを作るか」というコンセプトデザインについての考えがしっかりまとめられています。 具体的にデザインに落とし込むには、「サイトリリース時点でどうあるべき
Shine - Icon Eden すっきり綺麗なWEBに使えそうなアイコンセット「Shine」。 次のようなアイコンセットが公開されています。 ウェブ用というわけではないですが、ウェブサイトに使えそうな多くのアイコンが収録されています。 あまり他では見たことの無いようなものを使いたいという場合によいかも。 次のような形式で配布されており扱いも容易です。
写真の主題を引き立たせるために使用される「ボケ」をウェブデザインにとりいれるためのスタディをPSDFanから紹介します。 Inspirational Examples of the Bokeh Effect 以下、各ポイントを意訳したものです。 ボケとは ボケの実例 デジタルアートでのボケ ウェブデザインでのボケ ボケのチュートリアル ボケとは ボケとは、写真撮影の際にレンズを利用して光の焦点をぼかしたものです。このボケは、レンズによってもさまざまなものを楽しむことができます。 通常、ボケは主題を引き立たせるために使用されるもので、主題以外のものをぼんやりとさせます。 ボケの実例 写真撮影でのボケを実際に見てみます。
jQuery Menu Style 01 (Black) クールにアニメーションする色合い様々なjQueryメニューサンプルが色々と公開されているサイトのご紹介です。 種類が3種類ほどで6種類のカラーの中から選んで好きなものをダウンロードすることができるようです。 個人的には以下のデザインがシンプルでクールだと思いました。 カラーバリエーションは以下のように色々あります。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 jQueryでフリップするカッコいいメニュー作成のチュートリアル jQueryで幅の大きなドロップダウンメニュー作成チュートリアル
昨年くらいからウェブデザインの傾向としてフッタを充実させたウェブサイトが増えてきました。 ユーザーの印象に残り、より利便性の高いフッタを設置する際にヒントとなるアイデアをDesign Shackから紹介します。 10 Techniques for a Fantastic Footer 以下は、そのポイントを意訳したものです。 はじめに 1. プライマリ ナビゲーション 2. 「トップに戻る」ボタン 3. 美しいコントラスト 4. インパクトのあるイラスト 5. 充実したコンテンツ 6. インフォメーション 7. メディア ハブ 8. 新鮮なコンテンツ 9. インフォグラフィックス 10. ビジュアル的なアクセント はじめに 魅力的なフッタは、サイトのユーザーに永続的でポジティブな印象を与えることができます。 フッタのデザインと機能性の両方にフォーカスをあてることで、サイトのフッタを魅力的に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く