【HTMLタグの簡単検索】TAG index - ホームページ作成情報リファレンスについて HTML リファレンス HTML Living Standardに対応したリファレンスです。 HTMLタグ リファレンス HTML4の時代に作成したリファレンスです。古いWebページを更新する際などに参考にしてください。 CSS リファレンス CSS2の時代に作成したリファレンスです。
透過PNGや角丸などをIE6や7でも実装出来るJavaScriptのメモ
cssやプログラミングIEのバグはJSで IE6のPNG透過や6、7での 角丸、ドロップシャドウを実装 するjsライブラリのまとめです。 同じ用途でもライブラリによっ て良し悪しだと思いますので、 備忘録的にメモ。 IE6のPNG透過や6、7での 角丸、ドロップシャドウを実装 するjsライブラリのまとめです。 同じ用途でもライブラリによっ て良し悪しだと思いますので、 備忘録的にメモ。 もうIEはいいよとも思いますが、現実そうも行かないのはもどかしいですね。万能では無いですけど、作業工数を減らせるならjsに頼ってもいいと思います。そういう訳で、透過の問題や角丸、ドロップシャドウを実装してくれるjsのメモ。 IE7.js IE6以下でもIE7と同じようなXHTML / CSSの解釈をしてくれます。要DOCTYPE 宣言。 IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 DD_b
フリーで使える15のHTML5＋CSS3なテンプレートファイル:phpspot開発日誌
15 Free HTML5-CSS3 Templates to Start the Future of Web Design | blogfreakz.com フリーで使える15のHTML5＋CSS3なテンプレートファイルが公開されています。 それぞれ地味なようでいて、HTML5やCSS3のテクニックをふんだんに使っています。 素材として使ってもよいですし、１つの学習用リソースとして活用してみるのも有益ですね。 関連エントリ ハイセンスにデザインされたHTML/CSSテンプレート集 CSSテンプレート配布サイト色々まとめ フリーのビューティフルなCSSテンプレート沢山「Css 4 Free」 フリーで使えるプロ顔負けの美麗CSSサイトテンプレート集 使えるCSSレイアウトテンプレート集「mycelly.com」
CSS3 Dropdown Menu - Web Designer Wall
While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow wi
[CSS]CSS3の効果的な使い方と陥りやすいワナ
CSS3で何ができるのかという「CSS3で何ができるの？ という時にみておきたいサイト集」という記事をとりあげました。 今回は、そのCSS3を実際どのように使うのか？ ウェブページに効果的に使用した例、陥りやすいワナとその対処方法をWeb Design Wallから紹介します。 CSS3 Examples and Best Practices 下記は各ポイントを意訳したものです。 はじめに テキストのエンボス効果 繊細な角丸とシャドウ アニメーションで回転するDVD 半透明のバー 角丸 微妙なテキストのシャドウ 陥りやすいワナと対処方法 はじめに CSS3の人気はいっそう高くなっています。実際CSS3の新しい機能はウェブに多くの新しい可能性をもたらします。 しかしながら、CSS3はまだ完全にすべてのブラウザにサポートされていないので、あまり興奮しないでください。 だからといって、CSS3を
整ったレイアウトのWebサイトを手早く作るためのCSSフレームワーク·Markercss MOONGIFT
MarkercssはCSS製のオープンソース・ソフトウェア。開発者はWebデザインが苦手だ。絵が描けない、デザインのイロハが分からないなどと色々な問題はあるだろうが、その一つにCSSの使い方がよく分からないというのがある。特にブラウザ間の誤差をうまく吸収できないのだ。 こんな感じのデザインも容易に Firefoxで見栄えよく仕上がったと思ったらIEで見たら破綻していた…そんなことを繰り返しているとデザインがいやになってくる。そこで使ってみたいのがMarkercssだ。Markercssは設定を一つ一つ行っていくのではなくシンボル化することで手早くデザインできるようにする。 例えばフォントをArialの12ポイントにしたい時にはクラスに“A s12”と書く。レイアウトを幅900pxにしたい時にはw900と書く。同様に高さはh500といった具合に定義する。Markercssの規定する方式に沿っ
jqueryでウェブサイトをリッチにするプラグインまとめ « vanillate
jqueryのプラグインのまとめです。jqueryはjavascriptベースのライブラリのようなもの。画像やメニューに動的な操作を与えたりすることが可能です。また、HTMLソースも複雑になりにくく、デザインをCSSで操作可能なものが多く、ウェブデザインをより魅力的にすることができます。 フェードしながらスライドするjQueryプラグイン デモ jQuery ListMenu Plugin デモ 大量のアイテムもすっきりとリストにできます。 Sliding login panel with jQuery デモ ログインフォームもおしゃれに。常に表示しておく必要はないですよね。アニメーション付きでぶらさがってくるこんなプラグインはいかがですか。 create a better jQuery stylesheet switcher デモ スタイルシートをjqueryで切り替えるプ
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
CSSの実装状況で変わるボックスのデザイン方法
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
【特集】詳解! HTML 5と関連APIの最新動向 - 新タグ&API編 (1) はじめに - 本特集の趣旨 | エンタープライズ | マイコミジャーナル
Google I/Oの基調講演で大きく取り上げられて以来、HTML 5に対する注目度は増すばかりだ。仕様に関する議論もWHATWGのメーリングリストで日々活発に行われ、ブラウザによる実装も着々と進んでいる。 本記事は、HTML 5の仕様や実装状況に関する現時点での最新レポートとして、実際に動作するサンプルを添えた詳細な解説をお届けするものである。HTML 5の仕様はまだまだ流動的であり、実装状況も刻一刻と変化しているが、HTML 5に対して強く興味を持っている方々に少しでも詳しい情報をお届けできれば幸いである。また、HTML 5で追加される各種の新機能について短時間で把握したい場合は、「5分で把握するHTML 5 - Google Developer Dayセッションリポート」という記事があるのでそちらもお薦めだ。 本特集は全2回から成り、前半となる今回では「HTML5 - HTMLとX
[CSS]ネガティブマージンの理解を深め、活用するテクニック集
スタイルシートのmarginで使用する「ネガティブマージン（マイナスマージン）」について理解しておくべきこと、ネガティブマージンを使用したテクニックなどをSmashing Magazineから紹介します。 The Definitive Guide to Using Negative Margins 1. ネガティブマージンの理解 2. ネガティブマージンの使い方 3. ネガティブマージンのテクニック集 4. ネガティブマージンのバグフィックス 5. 終わりに 1. ネガティブマージンの理解 スタイルシートを使用する際、必ずといっていいほどマージンを使用するでしょう。しかし、ネガティブマージンになると意見は分かれ、それは悪魔の仕事であると考える人たちもいます。 ネガティブマージンをは、例えばこういうのです。
RedLine Magazine : 印刷用CSSのお話
印刷用CSSのお話 最近担当したサイトでは印刷用CSSをたいがいセットにしてます。同業者の方だと経験あるかもしれないですが、昔の鬼級テーブルレイアウトの頃は言われた事なかったんですがCSSを使い始めてから「背景が印刷できない」と、よく言われました。「ブラウザの設定で『背景も印刷する』にチェック入れると出てきますよー。デフォルトではインク節約仕様になってるんすねー（嘘かホントかは知らない）あはははー」とか返してました。 デフォルトの状態で印刷できないってのは問題あるだろってのはもちろんちゃんと分かってたんですよ。ここは背景扱いにしたらデフォ状態で印刷したらエラい事になるぞ、とか使い所の選別はしてましたし。まぁでも「あなた、なんでもかんでも画像化するの大好きなクセに検索対策っ！検索対策っ！さっさと検索対策～！って言うじゃん」とか鬱憤も溜まってました。 印刷用のCSSを用意するようになってからは
Sassから自動でCSSを生成する·saag MOONGIFT
CSSをそのまま書くのは面倒というのは誰しもが感じる所だろう。そこで最近では構造化されたCSSを作成し、変換プログラムを介して別なフォーマットにするという類のソフトウェアが幾つか登場している。PythonではCleverCSS、RubyではSassやLessが知られている。 下がSass、上がCSS だがいずれのフォーマットも変換プログラムを使わなければブラウザに読み取らせることはできない。ファイルを編集するたびに変換プログラムを実行するなんて手間だ、そこで使うのがsaagだ。 今回紹介するオープンソース・ソフトウェアはsaag、Sassファイルを監視して変換するソフトウェアだ。 saagは入力としてSassのあるディレクトリを指定し、出力としてCSSファイルを出力するディレクトリを指定する。後はSassファイルを編集すると自動的に感知してCSSファイルを生成する仕組みだ。Sassファイル
古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log
uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない
スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
ウェブデザインにおける効果的な背景の使い方
Backgrounds In Web Design: Examples And Best Practices 以下、その意訳です。 ウェブデザインのスタイルは常に進化しており、大きな変化の一つに背景の使い方があります。 背景の重要な役割は、ウェブサイトへの興味を視覚的にひきつけることです。 背景はウェブサイトのテーマを支えるものであり、あらゆる可能性を考慮し設計を行う必要があります。 ここではウェブデザインの最近のトレンドをふまえた、背景のベストプラクティスを紹介します。 1. The Basic Background Structures 良い背景を設計する際に、背景の基本構造を知る必要があります。 Body Background bodyの背景は、昔から使用されている背景です。 主にイメージ、イラスト、テクスチャ、パターンなどを使用します。 Content Background コンテ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/11/html5.html
%26utm_content%3DGoogle%2520Reader)
css-lecture.com
HTML5.JP - 次世代HTML標準 HTML5情報サイト