「CSSがいじれるようになった」とは言ってもあまり目新しさも感じないようにも。。。しかしサンプルを見せられた瞬間に「これは!」と感じざるを得ませ
CSSによってデザインされたサイトをまとめるサイトはかなり多く、それらすべてを網羅しようにもなかなか大変だったわけですが、そういったCSSギャラリーサイト自体をまとめたサイトが出現しました。その名は「GALLERY GALLERY」、さまざまな条件で並び替えることも可能で、100個近いサイトを見ることができます。 詳細は以下から。 GALLERY GALLERY http://www.triangling.net/gg/ この記事の執筆時点では98個のサイトが登録されており、それぞれのサイトについてRSSはあるか、タグによる分類はあるか、ユーザーによる投票は可能か、などの情報が簡潔にアイコンで示されています。 また、各種条件で並び替えることも可能となっているため、自分の入手したい情報をまとめたCSSギャラリーサイトを見つけることも簡単にできます。なかなかいい感じです。
DiaryTechnology クリエイティブなCSSサンプル&チュートリアル50選『Using CSS to Do Anything: 50+ Creative Examples and Tutorials』 クリエイティブなCSSを実装したい。 そんなあなたにおすすめなのが、『Using CSS to Do Anything: 50+ Creative Examples and Tutorials』。クリエイティブなCSSサンプル&チュートリアル50選だ。 以下にいくつかご紹介。 » Better Ordered Lists (Using Simple PHP and CSS) ↑のキャプチャはこちら。今までのリストとは違った見せ方をしたいときに。 » List Based Calendar リストでカレンダーを作成する方法。 » Create Custom Search Bars C
「Safari 3.1」に搭載された「Webインスペクタ」という機能があります。ちゃんと見たことがなかったのですが、HTML+CSS構造をチェックできて面白いですね。 Three Powerful Safari Features That Few People Useというエントリーで紹介されていたので、改めて見てみました。 The functionality is similar to the Firebug extension for Firefox, and gives you all sorts of information that’s helpful during web development and design. Firefoxの「Firebug」機能拡張に似た機能で、ウェブ開発やデザインの助けになるような情報を提供してくれる、とあります。 開発メニューからアクセスします
画像をサイトで一気に紹介したいことがある。ただ画像のサムネイルやリンクを並べるだけでも良いが、それでは味気ない。写真や画像は見せ方次第でその印象が大きく異なる。 専用のソフトウェアを使っても良いが、もっと手軽なのはJavaScriptベースのライブラリだ。 今回紹介するオープンソース・ソフトウェアはGalleria、JavaScriptとCSSを使ったスライドショーライブラリだ。 GalleriaはjQueryを使ったスライドショーライブラリで、導入が手軽で見た目もかっこうよく仕上げることができる。デモは二つ用意されており、一つは下にサムネイルの一覧、上にクリックした画像を表示している。 二つ目は左側に一覧が、右側に大きな画像が表示される。イメージタグのtitle属性に記述した内容が表示されるので、画像ごとにメッセージをつけるのも簡単だ。マウスが当たった画像だけ明るく表示されたり、写真の切
SitePoint CSS Reference SitePointは31日(米国時間)、CSSのリファレンスサイトSitePoint CSS Referenceを公開した。同サイトはTommy Olsson氏およびPaul O'Brien氏という著名な2人のCSSエキスパートによって執筆されたもの。そのままコピー&ペーストして使えるようなCSSのコードと説明がまとめられたサイトで、CSSを編集するWebデザイナはぜひともブックマークしておきたいサイトだ。 SitePoint CSS Referenceは公開以前となるプライベートベータテストの状態で、すでにSitePointコミュニティからのフィードバックを受けて改善が実施されている。いわば現状でのCSSベストプラクティスがまとまっているコンテンツだ。 SitePoint CSS Reference - そのまま使えるサンプルとブラウザでの
Web Designer Wallにエントリーされている、テキストにグラデーション効果をつけるスタイルシートの紹介です。 CSS Gradient Text Effect 仕組みは、見出し要素(h1)に空のspanを記述し、グラデーションの背景画像を表示しています。 デモページでは、下記のようなさまざまなグラデーションをつけたテキストがあります。 CSS Gradient Text Effectのデモページ 利点としては、下記のような点が挙げられています。 テキストなので、ブラウザからのサイズの拡大・縮小が可能。 背景画像を変更することで、グラデーションを変更することが可能。 見出し画像をいちいち作成する必要がない。 数が多い場合、作成時間・帯域の節約になる。
Microsoftが新たに投入する「Internet Explorer 7」は、競合ブラウザが取り組んできた厳しい標準テストに合格することができないようだ。 Microsoftは自社のブラウザ関連ブログで、各ブラウザによるW3C(World Wide Web Consortium)勧告のサポート状況を調査するWeb Standards Projectの「Acid2」テストにIE 7が合格できないことを認めた。W3C勧告にはCSS1(Cascading Style Sheets)、HTML4、およびPNG(Portable Network Graphics)などが含まれる。 「IE7は、出荷時点ではこのテストに合格できないだろう」と、IEのウェブプラットフォーム主任プログラムマネジャー、Chris Wilsonはこのブログに記している。「われわれは、IEが現在CSSのサポートで後れを取ってい
自分のブログをカスタマイズしてみませんか?CSSと聞くと良くわからない方が多いかと思います。特にこんなことを思ったことがありませんか? 「ブログのスタイルを変更したい」 「変更したいけど設定が良くわからない」 「スタイルシート独自のセレクタ等がどこを弄ればいのかわからない」 そんなあなたに!このツールは視覚的に直感的に入力すればだれでも編集可能です。
FC2ブログ・CSSジェネレーターは、マウス操作だけでFC2ブログ用テンプレートを製作するツールです。 CSSジェネレーター2公開しました。 テンプレートを自作したいけど変数が分からない 1から作るのは面倒だ テンプレートを視覚的に確認しながら作りたい という方にお勧めです。テンプレートを「ぬり絵」感覚で作れます。作成後は自分でカスタマイズしてみましょう。 ■yoshiさんがこのツールの作成手順・解説ページを作って下さりました。丁寧なキャプチャー付きでわかり易いので是非参考にして下さい。 完成例:全て作成時間5分以内 作成する CSSジェネレーター2 2カラム/右メニュー/幅770px 2カラム/右メニュー/幅可変 2カラム/左メニュー/幅770px 2カラム/左メニュー/幅可変 3カラム/幅770px 3カラム/幅可変 利用について 利用規約 ヘルプ 御意見・ご要望・ご感想 Specia
Standards compliant? Take The Acid2 Test and compare it to the reference rendering. Hello World!
この記事は更新が必要とされています。 この記事には古い情報が掲載されています。編集の際に新しい情報を記事に反映させてください。反映後、このタグは除去してください。(2022年1月) Acid2(アシッドツー)はウェブブラウザやオーサリングツールにおけるウェブページのレンダリング上の問題点を特定するためにウェブスタンダードプロジェクト(WaSP)が作成したテストケースである。Acid2は同様のテストケース・Acid1(1998年開発)を後継したが、ほぼ主流ブラウザの対応完了およびさらなる後継版であるAcid3の公開(2008年3月)によって役目を終えつつある。 HTML や CSS 2.1などの W3C 勧告等に、どの程度準拠しているかを測るために用いられる。完全に準拠したレンダリングで描かれるはずの画像とそのソースがあり、レンダリングイメージと画像の相違によりどの程度準拠しているかを測る。
最近、サイト全体をブログで構築するケースが増えている。時事性が強く求められている現在のネット状況では、ブログというサイト構成が向いている。 しかしありがちなデザインでは誰も見向きもしてくれない。そこでクールなデザインを簡単に導入しよう。 今回紹介するオープンソース・プロジェクトはfree CSS Templates、2.0的なデザインを提供しているテンプレートサイトだ。 free CSS Templatesでは200を越えるテンプレートを提供している。全体的にブログ向けのテンプレートが多い。検索がないのでリストで見ながら、サムネイルで好みに合うデザインを探す必要がある。 眺めてみた限りでは2カラムのものが多いように思える。画像を使っているか、リキッドデザインになっているかどうかの記述が掲載されている。 画像があるのでデザインをオリジナルに変えるのは難しいかも知れない。だが、そのまま利用して
JavaScriptの開発環境、要するにJavaScript用IDEという位置づけなのですが、HTML、CSSの構造をアウトラインで示してくれたり、文法の間違いを指摘してくれたり、やっていることはほとんどDreamweaverの持っている機能と同じです。 特に面白いのはJavaScriptやCSSなどがInternetExplorerとFirefoxに対応しているかどうかが一発で分かる点。JavaScriptのエラーについても細かい部分まで指摘してくれます。つまり、実行しなくてもエラーがドコにあるのか分かる「静的解析」が可能というわけ。 Windows、Macintosh、Linux版があり、Eclipseプラグインとして動作するバージョンもあります。 スクリーンショットや実際に動かして機能を解説しているムービー、ダウンロードは以下から。 Aptana: The Web IDE http:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く