CSS3の「変形・アニメーション関連」のプロパティは面白いですね。これらのプロパティの登場によって、CSSの持つ表現力が「どかーん」と拡大するように感じました。この記事では、WebKit Nightly Buildsでの表示を対象に、 CSS3で新たに定義されたプロパティを色々と使ったサンプルを作ったので、それを紹介したいと思います。 サンプルページは、CSS3のプロパティの練習として作っていたので、 表示の対象はこれらのプロパティを先行実装しているWebKitエンジンのブラウザーの中でも、 描写速度が激的に改善されている開発者向けのWebKit Nightly Buildsになります。 Safari4やGoogle Chromeでも見られますが、アニメーションはスムーズに再生されません。また、HTML5のaudio要素に対応していない場合は音が出力されないようです。非常に高負荷な処理が盛
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
Online Keyboard
`~ 1! 2@ 3# 4$ 5% 6^ 7& 8* 9( 0) -_ =+ delete tab q w e r t y u i o p [{ ]} \| caps lock a s d f g h j k l ;: '" return shift z x c v b n m ,< .> /? shift
5 CSS3 Techniques For Major Browsers using the Power of jQuery Many exciting new functions and features are being thought up for CSS3: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image, etc… CSS3 leads to greater flexibility and makes it much easier to recreate previously complex effects. Not all current browsers support CSS3, but it is however possible to create
Using a relative unit such as EM is a great way to maintain the vertical rhythm of a web page when a user resizes text in their browser. Constantly reaching for a calculator to compute the correct EM value to use every time you need to is also a great way to drive yourself mad. Let’s say you have an H3 that’s 24 pixels. It doesn’t matter how the font-size is set (pixels, EMs, percentages, etc). Yo
A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page. Download the example html file and css file The Road to Enlightenment Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers. We must clear the mind of the past. Web enlightenment
10coin.comのmarbleくんが、Vicuna CMS向けにレイアウト切り替えスクリプトを作成してくれました。どのようなものかは3ping.orgの右上にある「Layout Settings」というボタンで確認する事ができます。 Vicunaではbody要素のクラスでレイアウトを切り替える仕組みになっており、配布している純正のスキンは、全てのページで1カラムと2カラムでの表示を考慮して作られています。たとえば、この3ping.orgで使っているbazookaスキンでは、トップページ、個別ページ、カテゴリーや月別アーカイブも全て1カラムでも2カラムでも表示できます。(bazookaスキンは1,2カラムのみ、標準のスキンは1,2,3カラムのうちどれかを設定できます) このスクリプトは、Vicunaで配布しているスキン全てに対応しています。 今回作成されたJavaScriptは、body
Last tutorial, I showed you how to design a watercolor effect menu in Photoshop. This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property. View Demo CSS men
So you’ve got a web page. You’ve marked it up with structural XHTML. You’ve also been a good little web developer and used style sheets to control what your document looks like. You’ve even gone the extra mile and created several alternative style sheets to show how hardcore you are. Great. But now you need a cross-browser way to dynamically switch between the style sheets. Styling your site#secti
Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 10KB） デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択
Design あなたのデザインに刺激を与えるサイト30選『30+ Sites To Help Inspire Your Designs』 Webデザインの参考になるサイトはないだろうか。 そんなときにおすすめなのが、『30+ Sites To Help Inspire Your Designs』。あなたのデザインに刺激を与えるサイト30選だ。 以下にいくつかご紹介。 » AndyBudd.com 印象的なCSSサイトを数百集めているサイト » BestWebGallery.com たくさんのスタイリッュなサイトが見られて刺激をもらえる » CSSBased.com 1500を超えるCSSベースのデザインサイト » CSSBeauty.com 月に一回更新されるサイトギャラリーやニュース、お知らせなど » CSSClip.com 1700以上のサイトが掲載されていて、評価したりコメントをつけ
ということで、今まで数限りなくネットのあちこちで紹介されてきたCSSデザイン関連のサイトがリスト化されてまとめられたようです。これだけあれば当分はブログなどのデザインのネタに困ることはなさそう。インスピレーションを得るのに使うもよし、デザインの参考にするのもよし、知っておいて損はないものばかりです。 リストは以下の通り。 CSS Beauty | CSS Design, News, Jobs, Community, Web Standards http://www.cssbeauty.com/ CSS Drive- Categorized CSS gallery and examples. http://www.cssdrive.com/ Stylegala - Web Design Publication http://www.stylegala.com/ CSS Mania http:
テーブルは窓から投げ捨てろとtable要素をサイトのレイアウトや視覚的な目的に使う事は、table本来の使用目的とは違うため、やめるべきだと言う流れになっています。しかし、tableを使うなと言うことではなく、表のためにtable要素を使うことは全然構わないわけです。そこで、味気ない表よりは多少見栄えを良くするためにCSSで整えてみます。背景画像を用意して指定することにより、よりデザインチックな表に仕上げる事も出来ますが、画像を使用しなくてもある程度は見栄え良くできる方法だと思います。 サンプルとして以下のtableを使用します。borderやcellpaddingなどの属性は一切設定していません。sample01.html <table summary="表のサンプル"> <tr><th>サンプル１</th><td>もう今年も終わりですね。</td></tr> <tr><th>サンプル２
After Marcotte defined the technique, responsive design frameworks began to emerge that incorporated these principles. Many of these frameworks are open-source, free to download and quickly customizable, and in this article, Jen Kramer will focus on the most popular ones: Bootstrap and Foundation. A responsive design framework might be a helpful tool in your arsenal, for quick prototyping, testing
こんにちは、『livedoor 歌詞』や『livedoor グリーティング』を担当している吉沢です。それらのサービス以外では、モバイルサイトのコーディング関連のとりまとめを担当していることもあり、今回はモバイルサイトのCSSについてご紹介したいと思います。 以前の記事『モバイルサイトのデザイン』でもご紹介させていただきましたように、『ケータイ livedoor』は 3Gケータイを中心とした開発を行っており、XHTML でコーディングする機会が増えてきました。モバイルで XHTML を表示できるということは、スタイルシートに対応していることも意味するので、モバイルサイトの表現力のアップにつながります。 ■モバイルサイトのCSS事情 スタイルシートを採用するメリットとして、通常は HTML 構造の簡略化やデザインの一括管理などがあげられます。しかしモバイルサイトでのスタイルシートの採用は、通常
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
本題の前にお知らせ。RSSの登録先をこっちにしてくれるとうれしいです。近々ディレクトリ整理したいので。 http://feeds.feedburner.jp/csshappylife では、本題に。 2カラムサンプル13種で宣言しておいて、放置してましたが重い腰を動かしてようやっと作りました。 というか、エントリー自体も時間が空いてしまい、申し訳ない限りでございます。。。 一度気が抜けると、中々書こうって思えないっすね。 今回は3カラムですが、ネガティブマージンを使ったサンプルが多い感じです。 殆ど経験が無い中作っていたので、なんか楽しくなってました。 個人的にはふいに思いついた、15番のサンプルとかが使えるかも知れないとか思ってます。 広告って載せたいけど、センターの位置をずらしたくない時とか有ると思うのです。 仕様っぽいことと注意事項っぽいこと DOCTYPEは XHTML 1.0 S
だって、ブラウザには、画像を表示できないブラウザとかがあるんだもんね。IE も Fx も Opera も、そういう意味では同じような違いで、Fx では先行実装を使って段組になってよみやすくなっていたり、IE ではのっぺりだったり、そういうのがあっていいはず。なのに、一個の表示に統一しないといけないみたいな、わけわかんないのに縛られたりする。別に違ってていいと思う。 あと Web と紙は違うから、違うアプローチの仕方 (可変レイアウト) をすべきなのに、紙と全く同じスタンスで作るから、問題になる。いろんな UA にむけてデザインするのがウェブデザインじゃないの？ 今のウェブデザイナーは殆どウェブデザイナーじゃないよね。そんなだから「ウェブデザイナー(笑)」みたいになるんだ。 しかし、ウェブデザイナーでもなんでもない自分がごたごたいうのもおかしいので、あれなんだけど、最近どうも甘く考え気味 (
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
