[CSS]クロスブラウザ対応、CSSグラデーションを使ったボタンの実用的な実装方法
IE6, 7, 8を含めたクロスブラウザに対応した、画像を使用せずにCSSでグラデーションを適用したボタンを実装する実用的なチュートリアルを紹介します。 Cross-browser CSS gradient buttons デモページ [ad#ad-2] ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。 ホバー時のキャプチャ 実装のポイント スケラｰビリティ 文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小 アジャスタビリティ padding, font-sizeを変更することでサイズ調整可能 フレキシビリティ あらゆるHTML要素に適用可能 コンパチビリティ 主要ブラウザに優雅なグラデーションを提供 ユーザビリティ ノーマル時、ホバー時、アクティブ時を用
Zen Codingでできる、あんなことこんなこと | Zen Coding 1-2 | HTML+CSSコーディングが10倍速くなるZen Coding
HTMLタグをいちいち手で入力していると、時間もかかりますし、入力間違いやスペルミスなど、間違いの原因にもなります。それはCSSでも同じです。 DreamweaverなどのWebオーサリングツールには、標準でタグや属性の補完機能や「スニペット」といわれる入力支援機能があります。スニペットは、登録されているよく使うコードを呼び出して、コピー＆ペーストの要領で入力します。 Zen Codingでは、このスニペットのようによく使うコードを呼び出して入力するものですが、「省略形」（abbreviation）といわれるコードの略語のようなものを入力するだけで、さらにかんたんにコードを入力することができます。 Zen Codingを使えばコーディングはこう変わる！HTMLコーディングでは、「<h1>見出しタイトル</h1>」のようにテキストを開始タグと終了タグで囲み、見出しを指定します。 Zen Co
サイトに使用するフォントのCSSを選ぶ際に役立つ「CSSTYPE」:phpspot開発日誌
CSSTYPE - web safe typography on screen for pixel perfectionists サイトに使用するフォントのCSSを選ぶ際に役立つ「CSSTYPE」。 次のようなＵＩが用意されていて、フォントやサイズを選択すればすぐさまプレビューされ、確認を簡単に行うことが出来ます。 このサイトを知っておくことで、サイト構築時のフォントの表示調整にかなり役立ちそう。 確認できるのは、font, font-size, text-decoration, word-spacing, line-height, letter-spacing, text-align, color, background, width, padding, text-indent, button-text。 次の図は、実際のプレビュー画面。 letter-spacing とか line-h
HTMLのリスト要素を視覚的に階層表示する「StyleMap」:phpspot開発日誌
Scott Jehl, Designer/Developer, Boston, MA | Process: StyleMap: Visual Sitemap If you've ever had to produce a sitemap for a client using tools like Visio or OmniGraffle, you know that it can be tedious to visual organize a complex hierarchy of pages. Having experienced this myself, I developed a simple and efficient way to make a sitemap through the benefits of standards-based HTML and CSS. HTMLの
javascript - Text to HTML Entities Encoder : 404 Blog Not Found
2006年10月06日17:30 カテゴリTips一日一行野郎 javascript - Text to HTML Entities Encoder Sourceを貼付ける際に実体参照化するとき、みなさんはどうしていますか? 404 Blog Not Found:ソースを貼付ける50の方法 コピペのしやすさでtextareaで囲む方法に比べて一歩及ばず、そしてtagの実体参照化が必要だという欠点はあります。 私はPerlのOne-Liner、 perl -Mencoding=utf8 -MHTML::Entities -ple '$_=encode_entities($_, "<>&")' でやっていたのですが、どうせならブラウザーを離れずに出来た方がいいですよね。というわけでこちら。 Text -> HTML Entities Encoder 何度目の車輪の再発明かわかりませんが、気に入
フォームのtextareaをより使いやすくすることが出来る「Textarea tools」:phpspot開発日誌
Textarea tools Small collection of tools for use with textareas (or input fields). フォームのtextareaをより使いやすくすることが出来る「Textarea tools」。 上記画像では、右端にはるボタンを押して、textarea部分のリサイズや、フォントサイズの変更が可能になっています。 使い方は非常に簡単で、必要なJavaScriptファイルとCSSファイルを読み込んでおき、textarea に class="resizable" の属性を付与するのみとなっています。 掲示板なんかにこの機能を組み込んでおけば親切ですね。
デフォルトのフォームをクールにカスタマイズする方法:phpspot開発日誌
maratz.com archive Fancy checkboxes and radio buttons Many young guns ask about how to style custom checkboxes and radio buttons in forms. I prepared a typical markup, a few lines of CSS and some JavaScript functions (Safari label behavior fix included). デフォルトのフォームをクールにカスタマイズする方法。 以前、「Niceformでエレガントなフォーム生成 」というので独自フォームにデザイン変更する方法をお伝えしましたが、どういう仕組みか気になっていました。 独自フォームデザインの実装方法について書かれているサイトを発見したので仕組みを説
A library of DHTML and Ajax scripts - DHTMLgoodies.com
- March, 28th, 2017: DHTML Chess for WordPress. DHTML Chess is now available as a WordPress plugin in a free and PRO version. Learn more. - January, 16th, 2017: LudoJS Progress Bar. Samples of progress bars in the LudoJS Javascript framework on my site ludojs.com. - January, 13th, 2017: DHTML Chess 3.0. The new DHTML Chess 3 has been ported to jQuery. New demos are also available. The home of DHTM
HatenaをXHTML+CSSで組みなおす
授業中、生徒は課題制作で忙しく僕は用無し。ってことで、○○○をXHTML+CSSで組みなおすシリーズ(?)第二段を勝手にこっそり作ってた。 なるべく皆が知ってるサイトで、コーディングが楽しそうなサイトを探してたのだけど、なかなか決まらず、結局、生徒のリクエストでhatenaのトップページを組みなおす事にしました。 hatenaは一部レイアウトにテーブルを使っているものの、基本はCSSでの段組がされているので、mixiを組みなおすような大きな軽量化は出来そうにない。なので、楽しみ方としては、いかに無駄なマークアップを減らしてシンプルなXHTMLで同じ見栄えを再現するかだ。 これがまた、パズルで遊んでいるときの感覚に似ていてとっても楽しい。近い将来、CSSで１つの要素に複数の背景画像がおけるようになったとき、このパズル感が失われてしまうと思うと残念でならない。(半分ホンキ) で、帰ってきて手直
テーブルをJavascriptで自動的に見やすくする:phpspot開発日誌
Automatic colored rows - Example for BiteSize Standards テーブルの背景って次のイメージのように行ごとに交互に色分けされていると見やすいですね。 かといって、サーバサイドでアイテムを回して、１個１個設定するのも結構面倒だったりします。 リンク先のサンプルでは、JavaScriptを使って、trエレメントを探索し、交互にクラスを割り当てていくことで、自動でテーブルに色をつけてるようです。 これで、テーブルはシンプルにHTMLでコーディングでき、サーバサイドの技術なしで見やすいテーブルが作成できますね。
CSS Nite Vol.7: Web制作現場の対立を解消する！ XHTML CSSガイドライン作り [1]
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.
Online CSS Optimizer / Optimiser
Your Andy's account is now active and you're logged in. All available coupons will be applied automatically in your shopping cart! Your Andy's account is now active and you're logged in. All available coupons will be applied automatically in your shopping cart! Every once in a while, we at Andy's peer outside the industry and share a glimpse of things we find interesting. That's what you'll find b
CSSを使ってキーボードのアイコンっぽく表示させる - にわか鯖管の苦悩日記 ＿|￣|● (2006-01-11)
携帯にメールや電話の着信が急に増えたり スマホで今まで使用していなかったロック機能を使うようになった お出かけや外泊の機会が増えた 衣装が派手になった というケースは浮気の可能性があるかもしれません。 もし浮気を続けられると、された側は精神的に苦しい思いを続けることになり、する方も後ろめたい気持ちが膨れ上がり良いことはありません。 やめてもらいたいか、いっそのこと別れて人生をやり直すかはしっかりとした証拠がそろってから考えてもよいかと思います。 そのためには下手に動かず、東京都で興信所のプロによる浮気調査をするのが良いでしょう。 その理由としては、浮気が原因で離婚となれば慰謝料の請求が可能となり、その法的な証拠を得るには素人よりプロの方の作りだすものが決定的なものになるためです。 全てをすっきりさせて今後の人生をやり直しやすくするためにも利用することをおすすめします。
良いハック・悪いハック | Web標準Blog | ミツエーリンクス
サトウマサシさまより、CSS Nite Vol.3に寄せてCSSハックに関するご質問をいただきました。ちなみにCSSハックとは、Webブラウザ間でのCSS仕様の解釈の相違やバグの有無を振り分けの条件として利用し、特定のブラウザに対しスタイルを適用あるいは非適用とする手法のことです。 2005年10月13日の［IEBlogより：お使いのCSSハックを一掃してください］で取り上げていた良いHACK、悪いHACKについて、具体的に解説いただけたら嬉しいです。 MicrosoftのIE開発チームが、「Call to action: The demise of CSS hacks and broken pages」のなかで使用を控えるよう呼びかけた「悪いハック」には、以下のものがあります。 html > body 子供セレクタを利用するCSSハックです。子供セレクタを解釈するかどうかを振り分けの条件
参考になる CSS 集
テンプレートいろいろ 特定の文書構造とセットの CSS ばかり。まあ、「テンプレート」ですからね、私の不満はいちゃもんに過ぎないのでしょう。これからはスタイルシートでデザインする時代だ、なんていってみても、レイアウト用の div 要素などはたくさん書いても、本文のマークアップには無頓着な人がほとんど。だからきちんと HTML の主要な要素について装飾を指定したスタイルシートには需要がない。 個人的には、以下のリストに示すスタイルシート群の方がずっと「参考になる」と思うのだけれど……。 Appendix > CSS List - outsider reflex CSS カタログ 「言葉 言葉 言葉」スタイルシートギャラリー スタイルシートライブラリ - W.F.N. CSSギャラリー ちなみに私の書くスタイルシートは、自分が使わない要素の装飾についてまともな指定がなされていないので、あまり汎
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML/CSS Tutorials | Web Design Tutorials and Front-end Development Blog by Soh Tanaka
[CSS]背景画像に関する実用的なスタイルシートのテクニック集