CSSだけで必殺技を作るコンテストのクオリティーが高すぎる件
jsdo.itで「SPEC」というコーディングコンテストを開催しています。 今回のテーマは以下の二つ。 CSSだけを使って必殺技の演出を加えてください ローディングの演出を考えてください 「こんなマニアックなテーマだけど参加してくれる人がいるのだろうか…！」と心配していたのも杞憂に終わり、続々とすごい作品が投稿されています。 開催期間中ですが、ぼくが個人的に「これは！」と思った作品をピックアップして紹介したいと思います。（コンテストの審査とは関係ないですよ！） CSSだけを使って必殺技の演出を加えてください スーファミのRPG風 えい！：forked: CSSで必殺技！ - jsdo.it - share JavaScript, HTML5 and CSS 光が集まる必殺技 forked: CSSで必殺技！第2弾！ - jsdo.it - share JavaScript, HTML5 a
MdN Design｜総合情報サイト
スマートフォンと違い、iPadなどのタブレットに最適化された表示を行っているサイトはまだまだ少ない。 そこで今回は、LESSON 13同様、別HTMLを用意せず、同じHTMLにJavaScriptとCSSを使用して、タブレットタイプ用に表示を最適化させる。 タブレット用にするからといって特別にHTMLの作り方を変える必要はなく、正しくマークアップできていれば基本的に問題ない。 ただ、あまりにも無駄に多い入れ子構造や、レイアウトは避けたほうがよい。あくまでも(X)HTML/CSSを意識して作ろう。 今回はタブレットにも使用されるので、HTML5やCSS3を駆使してPC用も作ってよいが、IEなどの未対応ブラウザへの対応が発生するので注意が必要だ。 【1】のような、ブログ形式のPCページ構成をベースに構築していく。 使用するCSSは ・PC用CSS（デフォルト） ・スマートフォン用CSS ・タブ
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
IE6デザイン新手法 Universal Internet Explorer 6 CSS | エンタープライズ | マイコミジャーナル
For A Beautiful Web - Creative web design and development training and workshops for web designers and developers IE6のシェアが下落しているとはいえ、Net Applicationsの報告によれば2009年4月におけるIE6のシェアはIE7、Firefox3に次いで3位、17%強のシェアを確保している。WebサイトのIE6対応は依然として続ける必要がありそうだ。そうした状況に対し、Andy Clarke氏がUniversal Internet Explorer 6 CSSという興味深い取り組みを開始した。成果物はGoogle Codeでも公開されている。 Andy Clarke氏はIE6に関する6つの疑問に対して次のように自説を紹介。 (デザインは優れたブラウザに合わせてIE
いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0
日本が大型連休に入る少し前の4月23日、W3CはHTML5の新しいドラフトを公開しました。いつも最新のWeb標準化動向を伝えてくれるWeb標準ブログのエントリ「Last Callに向け進むHTML5 | Web標準Blog | ミツエーリンクス」によると、今回のドラフトから仕様書に大きく手が加わり、Webサイトを作る人向け（制作者に関係する要件）と、Webブラウザを作る人向け（実装要件についての要件）ごとに見やすくなるようなスタイルシートが用意されたとのこと。 これまでも何度かこのブログでは、HTML5やJavaScript 2.0などのWeb標準の動向を書いてきましたが、今回は分かりやすいようにその動きをまとめてみました。 HTMLはHTML4でいったん進化が終了し、それ以後はXHTMLで進化していくことになっていました。しかし実際にはXHTMLは期待されたほど普及せず、XHTMLによっ
CSS Spritesのすべて - 技術解説、採用事例、ツールリンク | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Webページ高速化テクニックのひとつにCSS Spritesがある。これはWebページで使われる画像を1枚のマスター画像にまとめて使おうというもの。画像の表示にはCSSの機能が使われる。すでに多くのサイトで採用されており、先日、Yahoo!ニュースでも同テクニックが採用された旨がブログで報告された。簡単で効果的な方法だ。 アイコンから写真データまでWebページには複数の画像が使われていることが多い。画像ごとにHTTPリクエストが発生するため、画像が増えればそれだけHTTPリクエストが発生することになる。同時読み込みには制限があるため、画像が増えるごとに表示が遅くなるという状況になる。この問題を解決するテ
CSS Sprites: What They Are, Why They're Cool, And How To Use Them | CSS-Tricks
That adds up to a total of 14.38KB to load the three images. Putting the three images into a single file weighs in at 16.1KB. The sprite ends up being 1.72KB larger than the three separate images. This isn’t a big difference, but there needs to be a good reason to accept this larger file… and there is! While the total image size (sometimes) goes up with sprites, several images are loaded with a si
便利だがあまり使われないCSSプロパティ5つ | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Craig Buckler氏がSitePointにおいて5 Rarely-Used CSS Propertiesのタイトルで、便利であるにもかかわらずあまり使われないCSSプロパティを5つ取り上げて紹介している。紹介されているCSSプロパティは次のとおり。 text-transformプロパティ: 文字の大文字小文字を切り替える。capitalize(単語の先頭だけ大文字)、lowercase(すべて小文字)、uppercase(すべて大文字)、none(なにもしない) letter-spacingプロパティおよびword-spacingプロパティ: 文字間の空白の幅(letter-spacing)および単語間の空白の幅(word-spacing
jQueryで作るAmazon流リキッドレイアウト (1/5)
国内外を問わず、多くのECサイトがお手本とする「Amazon.co.jp」。この連載でも以前、Amazonが採用する「カルーセル」（回転表示するスライドパネル）の作り方を紹介しましたが（関連記事）、Amazonは優れたユーザーインターフェイス（UI）の宝庫でもあります。 中でも、過去の閲覧履歴などからページの大半が動的に生成されるAmazon.co.jpのトップページは、ユーザーを商品購入へと導くさまざまな仕掛けが組み込まれています。今回は、このAmazon.co.jpのトップページに注目します。 今回のお手本サイト：『Amazon.co.jp』 米アマゾン・ドットコムの日本法人アマゾンジャパンが2000年から運営するECサイト。書籍販売から始まり、現在ではペットボトル飲料水や紙おむつ、キッチン家電まで1000万点超の膨大な商品を扱っている。取扱商品の拡大に合わせて、2008年4月に大規模
これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌
Fun With CSS Shapes - Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {
[CSS]スタイルシートを自動でIE6対応にするオンラインサービス -ie6fixer
手元のスタイルシートをフロートやネガティブマージンなどIE6のバグを回避する記述を自動生成するオンラインサービス「ie6fixer」を紹介します。 ie6fixer IE6に対応したスタイルシートを生成する方法は、以下の手順です。 「master stylesheet」の欄に、スタイルシートを入力。 「Give me my ie6 fixes」ボタンをクリック。 以上で、IE6のバグに対応したスタイルシートが生成。 IE6のバグに対応している箇所は、現在のところ下記の通りです。 「min-height」は、「height」に変更。 「float」は、「display:inline;」を追加。 「position:relative;」は、「zoom:1;」を追加。 ネガティブマージンは、「position:relative; zoom:1;」を追加。 「overflow:hidden;」は、
jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌
Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。 何ができるか？というのは次の図を見て頂くのがはやいでしょう。 ビフォア ↓↓↓↓ アフター これを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。 具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });
RedLine Magazine : カラム落ちとか自分のコーディングとかの話
カラム落ちとか自分のコーディングとかの話 先日の自分もプロパティの書き順とかのエントリに頂いたブクマコメントでこういうのがありました。forestkさん、コメントありがとー。 padding, margin が width, height の側に無いと調整してたら 「カラム落ちした！どこ？どこのサイズがでかいん！？」 とかならないですか？ 結論から言うとならないようにしてます。というか、後からwidthをいじる必要がないように計算機使いながらやってます。探さなくていいように紙も使ってます。 せっかくなのでその辺り含めて、カラム落ちやコーディング手順について書いてみようかなと思いました。（前にもちょっと書いた記憶があるけど） ボックスについて カラム落ちって外枠のボックス自体に問題がある場合と中身に問題がある場合の2パターンあると思うんですが、まずボックス自体について。 頭の中の前提 2段組
Easy Display Switch with CSS and jQuery - DesignM.ag
This tutorial was originally put together by Soh Tanaka during the Spring of 2009. Unfortunately the original demo went offline along with his source codes. I checked out an older archive copy on the WayBack Machine and decided to re-built this tutorial from scratch. I am going to demonstrate how we can make a simple list-style interface that switches over to thumbnails using jQuery. The user may
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3D Clouds
Imageless iPhone 4 by Vasyl Zubach
Components · Twitter Bootstrap
http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/
CSS Spriteを活用しよう - DesignWalker
Blogger