On HTML and CSS best practices – CSS Wizardry
11 December, 2011 On HTML and CSS best practices Written by Harry Roberts on CSS Wizardry. Table of Contents Further reading Best practices are exactly that; best. Not ‘better’, not ‘good when…’ or ‘best if…’, just best. They’re always the best, no matter what. This is something I learned whilst undertaking the single biggest project of my career so far; the complete (and not-yet-live) rebuild of
2011年のウェブデザインのトレンドを振り返る
2011年のウェブ制作の話題の中心はHTML5とCSS3でしょう。 ここではデザイン面を中心に、2011年に人気が高かったウェブデザインのトレンドを紹介します。 Popular Web Design Trends in 2011: Over 50 Inspiring Examples [ad#ad-2] 下記は各ポイントを意訳したものです。 Responsive Web Design 点線 サークル レトロスタイル リボン マジックナンバー『3』 少しめくれてるペーパー ボーダーレス グリッド 対角線 Responsive Web Design Responsive Web Designとは、ユーザーが利用する環境（スクリーンサイズなど）に合わせて最適なレイアウトを提供する方法です。デスクトップ用のブラウザだけでなく、iPhoneなどのスマートフォン、iPadなど、あらゆるデバイスに最適な
Webクリエイターボックスのデザインをリニューアルしました！
2014年8月19日 Webサイト制作, お知らせ ブログを開始してほぼ２年！初めてデザインを変更してみました。古臭いコーディングとはさようならです。デザインコンセプト自体はそのままですが、より見やすく、使いやすくなっているんじゃないかな…と思います。リニューアル時のポイントや使ったプラグインなどをまとめておきます。 ↑私が10年以上利用している会計ソフト！ リデザインの理由 ブログ立ち上げたばかりの頃は、日本のブログをほとんど見たことがなく、日本のWeb業界に知り合いもいなかったため、ブログを読んでもらうにはまず「インパクト」が大切だと思いました。記事の内容はもちろん大切ですが、一度見たサイトを覚えて頂くことも大切かな、と。なのでレイアウトも通常のブログとはちょっと変えて、大きなヘッダーで「なんか他のブログとは違う」デザインにしました。 ただそれでは読みづらい、使いづらいサイトになるだろ
Style Guide - hail2u.net
Posted on 07 Dec, 2011 in Web Design? hail2u.netで使われているスタイルの解説兼プレビューのページです。スタイルのコードそのものについてはその公開リポジトリを参照してください。このページのマークアップにはおかしいところが多々ありますが、その多くはやむを得ない事情によるものです。 コンテンツの見出しはh2でマークアップされます。ブログでは見出しに続けてfooterが配置され、更新日時とカテゴリをそこで示します。 FacebookのLikeボタンやはてなスターはその対象の最後にまとめて配置されます。つまり、それらが記事に対するものの場合はarticle要素内の最後になりますが、ページに対するものの場合はdiv#mainの最後になります。対してAdSenseの広告は常に最初のセクションの直後に挿入します。 ベース ブラウザーのデフォルト・スタイルシー
“Mobile first” CSS and getting Sass to help with legacy IE – Nicolas Gallagher
Taking a “mobile first” approach to web development poses some challenges if you need to provide a “desktop” experience for legacy versions of IE. Using a CSS pre-processor like Sass can help. As of Sass 3.2, there is another way of catering for IE, described by Jake Archibald. One aspect of a “mobile first” approach to development is that your styles are usually gradually built up from a simple b
New Navigation / New Primary Sponsor | CSS-Tricks
I just pushed out a new main navigation on the site. The reasons were twofold. One, I needed to add a few new sections to the site. Go check em out! I added a gallery section where I can post screenshots of design stuff that I like. I've been using LittleSnapper to capture that stuff forever, so I thought I'd actually post it somewhere online too. There is also an Almanac section that is currently
リッチに見せるデザインテクニック。美しいぼかしで魅せる 『MAX 塗り』のすすめ。
こんにちは、イメージ担当の長谷川です。 今回は 1px にこだわったリッチな Web や UI デザインを更に立体的で奥行きのある雰囲気にする『MAX 塗り』を取り入れたグラフィック作成手法をご紹介します。 ところで『MAX 塗り』ってご存知ですか？ガンプラなどが好きな方はピンと来たと思いますが、プラモデルなどに興味がない人は全く分かりませんね。 『MAX 塗り』とはプラモデルに立体感を出すためにエッジから中央に向かってぼかしていく、昔からある「ぼかし塗り」や「グラデーション塗り」の技法です。 この技法で塗装されたプラモデルは単純に塗装したものより格段に迫力や存在感が上がります。プロモデラーの MAX 渡辺さんが良く使うプラモデルの塗装技術として通称『MAX 塗り』と呼ばれています。 Web や UI にこの『MAX 塗り』を取り入れる方法は簡単です。 作ったボタンや背景などのグラフィック
CSS box-shadow Can Slow Down Scrolling
By Ross Allen Working on one of the Chromebooks Google lets you borrow on Virgin America flights, I noticed scrolling down the page on my airbnb.com dashboard was much slower than on my normal laptop. I chalked it up to weak Chromebook hardware, but other sites were scrolling just fine. box-shadow had caused slow scrolling on our search results page before, so I did some investigation. I used Chro
mf2md
本気のメモです。メモなのでタイトルをわかりづらくしておきました。SEO対策ですね。 hAtom From: <article class="hentry"> <h2 class="entry-title"> <a rel="bookmark" href="/blog/webdesign/document-structure.html"> 文書構造を見なおした(ている) </a> </h2> <footer> <p> Posted on <time datetime="2011-11-09T19:31:06+09:00" pubdate class="published"> 09 Nov, 2011 </time> in <a rel="tag" href="/blog/webdesign/"> Web Design </a> </p> </footer> <div class="entry
SVGのフィード・アイコン
背景を完全に透明にして白い丸と円弧の部分だけのフィード・アイコンを作ってみました(上の画像は背景がオレンジ色になっていますが、CSSで背景色を指定しているだけです)。Wikimedia CommonsにあるSVGアイコンをエディタでいじっただけですけどね。SVGファイルのソースにコメントとして書いてあるように元ファイルと同じくMPL/GPL/LGPLのトリプル・ライセンスです。 Demo: SVG Feed Icon SVGファイルのソースはデモ・ページの最後に載せてあるのでそれをHTMLファイルにコピペしても良いですし、普通にドラッグ・アンド・ドロップや右クリックで保存してimg要素で参照しても良いでしょう。このページやデモ・ページではData URIスキーム化したものを直接使っています。500バイト強の小さなものなのでData URIスキーム化して使うのが良いと思います。 アイコンの丸
HTML5の新要素「data要素」に繋がる Microdataのプロパティについて - kojika17
time要素の廃止、そしてdata要素の登場により、Microdataを扱う機会が増えてくると予想されます。 またHTML5 の Microdata が主にGoogleなどで取り入れられているケースが出てきているので、 Microdataで利用できるプロパティを紹介致します。 Microdata とは HTML5の独立した仕様です。 HTML文章に、コンピュータが可読できるデータにすることができ、RDFやJSONなどの多数の他のデータ形式と互換性を持たせることができます。 記述方法は以前の記事を参照して下さい。 MicroformatsとMicrodataの違いについて : Web Design KOJIKA17 なぜコンピュータが可読できるデータにする必要があるのか？？ HTMLでは、人や時間、場所など細かくマークアップすることができません。 例として、機械翻訳したカンナダ語を見てみまし
Fully fluid, responsive CSS carousel – CSS Wizardry
31 October, 2011 Fully fluid, responsive CSS carousel Written by Harry Roberts on CSS Wizardry. Table of Contents Demo The fluidity CSS powered Update Wait, CSS?! If you follow me on Twitter you’ll know I’ve been pretty enthused about this fluid CSS carousel of mine. There are two aspects to it; the fluidity and the CSS functionality. Demo The demo features photos of me, taken on various mountains
Reset vs Normalize
CSSの記述法として、ブラウザごとの違いを「Reset」して一から指定するという方法が長らくマジョリティを占めていました。まだまだその方向で書いている人が大半ですが、「Normalize」するという方法を採る人達も増えています。なぜリセットではなくノーマライズなのかというような話をなんとなくダラダラ書いてみたい感じです。 以下、リセットはYUI 2のCSS Resetを、ノーマライズはNormalize.cssをイメージして読んでみてください。 リセットとノーマライズ まずは両者の違いから。リセットはなかったことにするというもので、ほぼ全ての要素に対するスタイル指定を排除しブラウザごとの違いを吸収するものです。対してノーマライズはブラウザのデフォルト・スタイルシートを生かしつつ、各ブラウザ間の挙動を擦り合わせるものです。リセットが負の方向で統一しているとすれば、ノーマライズは正の方向で統一
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
見るだけでもワクワクする、CSS3とjQueryのかっこいい7つのエフェクト
今年(2011年)参考になったWeb制作者向けのスライドのまとめ - かちびと. net
ウェブデザインのセンスを磨こう、素敵なUIデザインのまとめ
Good night, Posterous
Good night, Posterous
『スマートフォンサイト制作時にデザイン・UIの参考になるサイト集 – creamu』へのコメント
PageSpeed Insights