CSSとButtonタグを使ったクールなボタンサンプル集:phpspot開発日誌
Digital Web Magazine - Push my button If there’s one element I think doesn’t get enough respect, it’s gotta be button. It’s played second fiddle to input in tutorials and form examples for as long as I can remember. CSSとButtonタグを使ったクールなボタンサンプル集。 Formのsubmit ボタンを作る場合、<input type="submit" value="送信"> の形式が最も使われていますが、 <button type="submit"></button> タグを使い、その内部にHTMLを入れこんでCSSでデザインすることでリッチなボタンが作れる実例。 <in
hail2u.net - Weblog - pre要素へのスタイル指定
idea * ideaでエントリになっていたので、言及されていることだしうちのサイトのことだけちょっと書こうかなとか考えてみたら結構色々あって、エントリのネタになりそうだったのでまとめてみた。どっかにもちょろっと書いたけど。 実際にスタイル指定を書く前に抑えておくべき知識として以下のようなものが挙げられると思う。 ほとんどのブラウザでpreは等幅フォントで表示される ほとんどのブラウザでpreのwhite-spaceはpreになっている フォント・ファミリを指定する場合は最後にGeneric font familiesが必要になる overflow: scroll;では縦横どちらにあふれた場合でも縦スクロール・バーと横スクロール・バーが両方とも出る overflow: auto;ではあふれた方向にのみスクロール・バーが出る Internet Explorerではoverflow: auto
Color Codes Matching Chart HTML (Pantone, CMYK, RGB Hex)
Color Codes Matching Chart HTML (Convert CMYK, RGB Hex) Note that the conversions in this color codes chart are best described as “nominal”. They will produce an invertible conversion between the RGB code and a subset of CMYK; that is, one can take an RGB color code and convert to certain CMYK colors, and from these CMYK colors obtain the matching, original RGB codes. However, conversion of CMYK c
HTMLから登録フォームを自動生成するWeb Form Factory:phpspot開発日誌
Web Form Factory (v0.1.2 beta) - Open Source Web Form Generator HTMLから登録フォームを自動生成するWeb Form Factory。 formを記述したHTMLファイルをアップロードして自動でサーバサイドのスクリプトも生成してくれるサービス。 <input>の値を読み込んで、専用のmodelクラスを作成してくれるのでHTMLの知識があればDB登録スクリプトが簡単に生成できます。 例えば、次のような場合のフォームの場合、 <form> <input type="text" name="name" value=""> <input type="text" name="message" value=""> <input type="submit" value="register"> </form> nameとmessageをメン
デフォルトのフォームをクールにカスタマイズする方法: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でエレガントなフォーム生成 」というので独自フォームにデザイン変更する方法をお伝えしましたが、どういう仕組みか気になっていました。 独自フォームデザインの実装方法について書かれているサイトを発見したので仕組みを説
CSSとHTMLをリアルタイムに書き換えてプレビューできる「rendr」 - GIGAZINE
「CSS」タブをクリックして、中のコードを書き換えると、リロードせずにそのままリアルタイムにページ全体を再レンダリングしてくれます。「Markup」タブをクリックすればHTMLコード自体を書き換え可能。元に戻すには「clear markup and css」をクリック。 Firefoxの拡張である「greaseMonkey」バージョンもあるので、自分のサイトで同じようなことができるようになり、CSSデザインの試行錯誤が楽になります。 詳細は以下から。 rendr http://gregtaff.com/rendar2.html greaseMonkey版はキャッシュが有効な場合に、ローカルキャッシュのHTMLファイルを直接書き換えてリアルタイムプレビューするというモノになっています。 インストールするにはgreaseMonkeyをインストールした状態で上記ページの「greaseMonkey
d.aql - scriptタグの中にJavaScriptを書く正しい方法
XHTMLでCDATA区間を使う。以上。 経緯 HTML4のscriptタグでJavaScriptをちょろっと書く時、中にHTMLタグがあるとダメという話が発端である。例えば、以下のようなのがダメだ。 <script type="text/javascript"> document.write('<p><a href="http://www.hikoboshi.org">hikoboshi.org</a></p>'); </script>ちなみに、ブラウザで動かせば多分動く。（試してないけど。）じゃあ何がダメかというと、HTMLの仕様的に。ちなみにこういう書き方をすると、多分HTML4でもXHTML1でもダメだと思われ。 そんな話をきっかけに、いろいろ調べた。 何故ダメか まずはHTML4のDTDを調べる。（別にstrictを選ばなくても良いんだけどとりあえず。） http://www.w
blockquote要素内に普通のテキストを書くことはできない
ばけらの HTMLリファレンス:blockquote要素 blockquote要素の中身は body要素と同じです。HTML4 Strict では blockquote の直下にテキストを書くことができませんので、さらに p要素などを入れる必要があります。 知りませんでした…（汗 確かに、Another HTML-lintで検証するとエラーが出まくります。 73:<TAG>～</TAG> 内に普通のテキストを書くことはできません。 一瞬、マジで驚きました。普通のテキストを書くことはできない？！！ 言い方があるんじゃないの？ こうやって説明されると能書きはわかるんですが、ただMovable Typeのデフォルトの改行設定で、<blockquote>内のテキストに自動でp要素付かないよね～とか言ってみたくなります。 いちいち手打ちでタグ入力？ そんな前近代的なことやってられっかとか思いませ
Tips/WebPage/HTML, CSS のあまり知られていない便利な機能 - outsider reflex
はじめに HTML ・ CSS にはさまざまな機能が盛り込まれていて、有効に活用すれば非常に便利なのですが、そういう機能の存在自体、一般にはあまり知られていません。そこで、裏技と言うほどでもありませんが、 HTML の便利な機能をいくつかピックアップして紹介しようと思います。 ※ HTMLの機能は大概はブラウザごとの実装に依存しています（必ずしも特定のブラウザの実装が絶対とは限らない）が、ここでは話を分かりやすくするため、わざと短絡している場合があります。 HTML blockquote, q 要素の cite 属性の利用 （ HTML 4 ～） blockquote 要素は長い引用、 q は短い引用を示しますが、 HTML 4 以降、どちらにも共通の属性に cite 属性があります。 cite 属性は引用元文書の URI を記述するためのもので、引用元が Web ページならその URL
案ずるより生むが易し: ubicast Bloggerではじめる複数ブログ運営
AFTERTOUCH surreal SxGx maniac cinema&book; review *めぐりあうたびに溺れて 見失うたびに胸焦がしてた* InverseDiaryFunction SxGx ｷｪｪｪｪ Ｎ山家の人々 Dairy ☆質問ﾀﾞｲｱﾘｰ☆ ネタ帖 むらみぃ 世の中とあたしの繋がり GOOBERS ++今日のechiko++ ロストマインドガール * mayumi blog * モウソウｔagebuch 読書感想日記☆ネタバレ注意警報！ 癌と煙草と酒と 俺の道 toro's bｌog. ++ torog ++ ココアシガレット・アンダーグラウンド Deportare gorf net AFTERTOUCH surreal ２ちゃんねるの超怖い話 maniac cinema&book; review CARLTON1976 平凡な日々 秘密のホンネ ゴリラ秘話。 Ｌ
Safariで検索窓を角丸で表示
Safariで検索窓を角丸で表示。 さっき仕事で調べ物をしていたら面白いネタを発見しました。 こういうところがさすが純正アプリだなぁ。 A leaf of PowerBookより 検索窓をSafariだけ角丸に [HTML] スタイルシートスタイルブックの Safari Web という記事に Safari の form の TEXTフィールドを 左のように角丸にする方法が紹介されていた。方法としては、以下のように書くようだ。という事なので変更してみた。一応、Windows IE6でチェックしてみたが、type="text" と同様にというか、nameの属性があるのでそれと、そのデータを送ってるって事なんだろうけど、Safari以外でも動作しそうだ。 さっそく仕事をほっぽりだして片づけて改造開始。 おぉ！虫眼鏡アイコンも付いて角丸になって、しかも検索履歴まで表示できちゃうんですね。すばらしい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.cybergarden.net/blog/2005/11/heading_of_a_list.html
【HTMLタグの簡単検索】TAG index - ホームページ作成情報