[B! *webdesign] kiririmodeのブックマーク

これが2011年WEB屋に必要とされた厳選情報の数々！今年注目されたWEB屋ネタベスト20！ | バンクーバーのうぇぶ屋

さて、今回の記事は僕自身本当に楽しみにしていた記事のひとつです。今日は僕が毎日色々な所から集める厳選したWEB制作ネタを投稿し続けている、FacebookやTwitter、そして周囲のWEB屋のオススメ、RSSで毎日読んでいる情報等、僕がWEB制作に携わる上で見てきた情報を、ゼーンブ集めてFacebookのLike数やTwitterのRTなどを参考にしつつ、ランキング形式でご紹介させて頂きます！それでは、前置きなんかどうでもいいので、さっさと下記からバンクーバーのうぇぶ屋がまとめた、2011年最も注目されたWEB屋情報ランキングとしてご紹介させて頂こうと思います！ ※このランキングはあくまでバンクーバーのうぇぶ屋が運営するサイトやSNSを元にして集計した物になり、その他団体、企業に属するものではありません。 ※2011年リリースされたサイトや記事だけではありません、2010年とかに公開

kiririmode 2012/02/13

*webdesign

リンク

スマホ対応の新潮流「レスポンシブWebデザイン」とは？ (1/3)

スマートフォンの普及を背景に、﹁レスポンシブWebデザイン﹂︵Responsive Web Design︶という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？　実例で解説する。ウィンドウサイズを基準にデザインを調整レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい

kiririmode 2011/07/12

*webdesign

リンク

枠線付きの吹き出し

ミニブログの隆盛以降ウェブ上でよく見かける吹き出しをCSSで作るお話。単色のものはかなり前に書いた。今回はそれに枠線をつけてみよう！　みよう！　みよう！Demo: Bordered Speech Bubble枠線は単なるsolidなborderで少し角を丸めただけ。尻尾を付ける :before擬似要素を使う。デモの3番目のサンプルのように、まず枠線と同じ色で三角形を作る。三角形は以前のエントリで書いた手法と同じで、左右のborderをtransparentにすることによって作る。 .speech-bubble:before { border-top-width: 16px; border-right-width: 16px; border-bottom-width: 0; border-left-width: 16px; border-color: #369 transparent;

kiririmode 2011/03/06

リンク

第3回　CSS2.1のセレクタのおさらい

2008年8月設立。アクセシビリティ，ユーザービリティ，CMSの導入，SEO/SEMといったWebサイト制作から，ROIを意識したブランディング，ソーシャルメディアを用いたユーザーとのコミュニケーションの最適化など，マーケティング活動までを手がけるクリエイティブユニット。今回は，あらゆるブラウザのデファクト・スタンダードとなっているCSS2.1におけるセレクタのおさらいをします。セレクタとは，HTML側の任意の個所をCSS側で選択し，作成したスタイルを適用するための記述様式のことです。ブラウザがセレクタを解釈して，各要素にスタイルを反映させます。セレクタの種類の確認から，これらのセレクタを組み合わせてどんなことができるのかまでを一通り確認していきましょう。一般的な4つのセレクタ以下で示したセレクタが，現在あらゆるブラウザが実装しており，ほとんどのサイトで利用されているセレクタです︵表

kiririmode 2009/12/02

リンク

https://vanillate.org/blog/wp-content/uploads/minecraftskin_02.jpg

kiririmode 2009/10/12

*webdesign

リンク

文字コード宣言は行いましょう(HTML) - Web標準普及プロジェクト

文字コード宣言は行いましょう(HTML) HTMLで日本語を使用する場合、そのファイルの保存方法が複数存在します。それはいくつかのルールを使用して日本語を保存し、ブラウザがそのルールに則って読みとることで表示するためです。このルールのことを文字の符号化方式と言います。何故文字コードの宣言が必要なのか保存する時の文字コードとブラウザが読みとる時に使う文字コードが違っていると文字化けが発生してしまいます。これは一部の符号化方式を除き、そのファイルがどのような文字コードで保存されたものなのかをブラウザが判別できる確実な手段が無いために発生します。しかし、そのHTMLファイルの作者がブラウザに対してどのような文字コードで保存したのかを明示することによってブラウザは確実に表示できるようになります。それが文字コードの宣言です。文字コードは次のようにmetaタグを使って宣言します。 ISO

kiririmode 2009/07/18

リンク

102,131 個もの商用利用可能なフリーアイコン配布サイト「Icons Etc」 - WebOS Goodies

WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。みんなが Google Developer Day 2009 の話で盛り上がっているときに、ぜんぜん違う話題を投げてみるテスト︵＾＾‥ もしかしたら既に有名なサイトなのかもしれませんが、超太っ腹なアイコン配布サイトを見つけたので、本日はそれをご紹介したいと思います。そのサイトは﹁Icons Etc﹂。なんと10万個以上のフリーアイコンを、それも商用利用可能なラ

kiririmode 2009/06/13

*webdesign

リンク

Route 477(2009-05-06)

■ [web] CSSを﹁ちゃんと﹂書けるようになりたい僕のCSS知識はとほほのスタイルシート入門で止まっている。 borderとかcolorとかは分かる。(positionとかfloatとかはちょっと怪しい。) ちゃんと書ける、というのは、 marginやpaddingはとりあえず0にするものなのか文字のサイズはem, px, pt, %のどれで指定すべきなのか divを3カラムに並べる方法ブラウザの非互換を踏まないために気をつけることとかいう﹁常識﹂を身につけたい、ということだ。なんかお薦めの本とかサイトとかありませんかね。追記コメント欄とかブックマークコメントでいろいろアドバイスをいただきました。ありがとうございます。 muscovyduckさん‥ ごく簡単なHTMLの説明 htmlとかCSSってどこで勉強すればいいんだよ - スチーム速報ＶＩＰ id:K-Onoさ

kiririmode 2009/05/18

リンク

利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」:phpspot開発日誌

Notimo Demos site利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ﹁Notimoo﹂。次のリンクをクリックしてみてください。 → 通知を表示してみるページの右上にフェードインで表示するのはなかなかインパクトが大きいですね。スクロールしても、いやみではない感じにちゃんとついてきてくれます。使い方もかなり簡単で、必要なJSとCSSを読み込んだ後、インスタンスをnewして show メソッドを呼び出すだけです。 showは2回連続で呼び出しても、ちゃんと1個目と区別して表示してくれます。 <script type="text/javascript"> var notimooManager = new Notimoo(); // 通知を表示 notimooManager.show({title: 'タイトル', message: 'メッセージ

kiririmode 2009/04/19

リンク

複雑なWebサイトデザインを容易に実現するテンプレート·YAML MOONGIFT

なぜデザインとYAMLが関係するのだろうと思ったが、ここでは﹁Yet Another Multicolumn Layout﹂の略らしい。つまりマルチカラムのデザインを容易に実現するためのCSSテンプレートということだ。整ったデザインが簡単に手に入るのはすばらしい！ Webプログラマの一番の悩みどころがデザインだ。特にCSSを使ってマルチカラムや入れ子になっているデザインは難しい。高さをそろえたり、メニューを横並びにしつつ、次の要素では違う表示など、複雑になればなるほど放棄したくなってくる。それがFirefox/IE/Safariなどのブラウザにも対応するとなれば尚更だ。そこで登場するのがYAMLだ。今回紹介するフリーウェアはYAML、複雑なマルチカラムデザインテンプレートだ。 YAMLでは多数のサンプルが用意されている。単純な2または3カラムを基本として、グリッド化されてページの幅に応

kiririmode 2009/02/02

*webdesign

リンク

http://icant.co.uk/csstablegallery/index.php?css=3

kiririmode 2009/02/01

*webdesign

リンク

Web 2.0 and grudge free buttons generator!

High quality shape button maker Let's create unique amazing buttons quickly with our online button and badge generator. Full access to all generators, unlimited downloads With our premium subscription you can create, customize and download unlimited buttons and use it for your personal or commercial website, for your mobile or desktop application. Mobile retina display image generator We have rele

kiririmode 2009/02/01

リンク

フォームデザインいろいろ - DesignWalker

今回は、フォームの見た目にこだわっていろいろとフォームのデザインをまとめてみました。登録、ログイン、コメント、検索などなどいろいろな場面で使われるフォームをきれいに見せるアイデアがたくさんつまっています。 Blog Comment Form Design Showcase | Smiley Cat Web Design ブログのコメントフォームを集めたショーケースです。きれいなフォームがたくさんありますね。またこちらのサイトでは、他にもいろいろとフォームをまとめられております。ログインフォームや登録フォーム、別のブログコメントフォームも参考になりますね。 Pattern Tap 現在185種類のフォームデザインがまとめられております。Form Generators, Styling, Inspiration | CSSAddict おしゃれにデザインされたフォームがたくさん。 Web

kiririmode 2009/02/01