CSSの小技集、20個:phpspot開発日誌
CSS Techniques Roundup - 20 CSS Tips and Tricks I never cease to be amazed at what problems can be solved with pure CSS. CSSの小技集、20個。 どのテクニックも、誰もが使うであろうテクニックで便利なものばかりです。 角丸 画像なしの角丸 投票用スターの作成 テーブルなしのフォーム リストをＣＳＳでデザイン 2カラムレイアウト 3ラムレイアウト 3カラム固定幅、中央寄せ 印刷とＣＳＳ RSSフィードにスタイルシートを指定 固定フッター 要素にHoverエフェクトを加える HRタグへのCSS ＦｌｏａｔのClearに関するテクニック CSSでポップアップ小窓 ボックスの見出し(Box Punch)を表現 CSSボタン オレンジのRSSボタンをP
【HTMLタグの簡単検索】TAG index - ホームページ作成情報
ページ全般 ボックス テキスト リンク リスト イメージ テーブル フレーム フォーム フィルタ CSSの基本 CSSプロパティ一覧［ABC順］ リファレンスについて HTML リファレンス HTML Living Standardに対応したリファレンスです。 HTMLタグ リファレンス HTML4の時代に作成したリファレンスです。古いWebページを更新する際などに参考にしてください。 CSS リファレンス CSS2の時代に作成したリファレンスです。 特集記事 レンタルサーバーの選び方 ～ 選ぶ際のポイントや価格帯の目安を解説 レンタルサーバーの容量はどのくらい必要か ～ 計算方法と目安を解説 おすすめのレンタルサーバー ～ 目的別に推奨サーバーを紹介 記事一覧
CSSだけでイメージマップを作る有用サンプル:phpspot開発日誌
CSS Image Maps - Flickr-like Technique? Below is a sample image map that's built entirely using CSS and XHTML. CSSだけでイメージマップを作る有用サンプル。 画像の特定部分にカーソルを合わせると、説明を画像上に表示できるCSSとXHTMLサンプルが公開されていました。 JavaScript を一切使っておらず、CSSだけで実現されているところがすごいですね。 JavaScript が要らず、次のような綺麗なHTMLで実現できるところも嬉しいですね。 実装も簡単そうです。 <dl id="officeMap"> <dt id="monitor">1. Monitor</dt> <dd id="monitorDef"><a href="#"><span>Here's my 17" M
角丸に関するあれこれ
最近、というか Web2.0 的デザインなんてものが言われ始めてからというもの、「角丸」 ってやつがとっても人気ですね。(X)HTML、CSS 関連の話題でもよく取り上げられています。 ということで、角丸の作り方をいくつかの種類別に、また、数値などを入力するだけで、角丸のソースを生成してくれる角丸ジェネレータなどをいくつかまとめてみました。 角丸の作り方その1、画像を使う方法 ソースがどうこうとか、まったく気にしないで塗りつぶしの角丸ボックスを作るだけなら、4つの角に配置する画像を用意した上で、下記のような感じにすれば得に難しくもなく角丸完成と。しかもフレキシブル。しかしソース汚い。 <!--HTML--> <div class="left-top"> <div class="right-top"> <div class="left-bottom"> <div class="right-b
フォームの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" の属性を付与するのみとなっています。 掲示板なんかにこの機能を組み込んでおけば親切ですね。
Ajax/CSS/PHP等のチュートリアルまとめ:phpspot開発日誌
Tutorials Round-Up: Ajax, CSS, PHP and More | Smashing Magazine Ajax/CSS/PHP等のチュートリアルまとめが公開されてます。 英文のサイトは本当にチュートリアルが充実していますね。 Ajax AJAX Desktop Tutorial AJAX Matters Blog Ajax RSS reader AJAX Tutorial Ajax: What is it Good For? → 続きを読む CSS Advanced CSS Layouts: Step by Step Beginner’s guide from a seasoned CSS designer CSS Advanced Guide CSS and HTML examples and tutorials by Ove Klykken CSS Basic
一番簡単な画像置換の方法-imageReplace.js--とあるWEBクリエイターのblog
一番簡単な画像置換の方法-imageReplace.js- 画像置換は設置がややこしく。 デメリット・メリットの切り分けが困難です。 そんなわけで一番簡単な画像置換の方法として、画像置換javascriptライブラリ-imageReplace.js-を作ってみました。 設定は簡単head要素内にimageReplace.jsを読み込むだけ。 <script type="text/javascript" src="./imageReplace.js"></script> あとは、画像置換したい要素にclass属性に『imageReplace』と記述しスペースを空けて『置換する画像名』、『ロールオーバーする画像名』を記述します。 例えばこんな感じに。 <a class="imageReplace ajax_a.gif ajax_b.gif" href="/ajax/">Ajax</a> 『ロー
footerをウィンドウ下部に固定する『footerFixed.js』
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
小粋なインターフェースを実現する25のコード （パート2） - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
「小粋なインターフェースを実現する25のコード | S i M P L E * S i M P L E」の続編が出たようです。 今回もなかなか小粋な技がそろっていますね。新しくサービスを作られている方は参考にされてみては。 ↑ ツリー構造のテーブルを実現。 ↑ CSSでプログレスバー。 ↑ CSSでちょっとかっこいいボタン。 ↑ CSSでドロップシャドウかな。 世界中でこうした知識が共有できるようになりましたね。いい時代になったものです。さて、あとはこれをどういうアイディアで実現するか、ですな。オリジナリティのあるサービスつくりたいなぁ。 » » 25 Code Snippets for Web Designers (Part2)
[JS]ブラウザの種類を検出して、CSSのセレクタで実装できるスクリプト | コリス
jQuery Browserは、スクリプトでブラウザの種類を検出して、CSSのセレクタとして実装できるスクリプトです。 jQuery Browser jQuery Browserは、ブラウザのもつplatformやuserAgentから、OSやブラウザの情報を取得し、セレクタを利用して、ブラウザごとのスタイルシートを適用することが可能です。 jQuery Browserでのスタイルシートの記述例 <textarea name="code" class="css" cols="60" rows="5"> div#browser-test{ border: 2px solid #000; padding: 10px; } ■Internet Explorer用 div#browser-test.msie{ background-color: #f00; } ■Firefox用 div#brow
inputのtype=fileをCSSでクールにスタイルするサンプル:phpspot開発日誌
Styling File Inputs with CSS and the DOM // ShaunInman.com This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation. inputのtype=fileをCSSでクールにスタイルするサンプル input type=file なエレメントを次のように美しくスタイリングするサンプルが公開されています。 これはなかなかクールですね。Web2.0なサイトでは是非実装したいスタイルです。 関連エントリ サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ CSSでデザインされたテーブルレスでクールなフォームサ
最速インターフェース研究会 :: 萌ディタとSleipnirとWEBrickを使って人のサイトのCSSをリアルタイム編集するデモ
Shiubya.js #1で話したネタですが、Winkでデモを作ってみました。 http://la.ma.la/misc/demo/realtime_cssedit.htm エディタとブラウザが並んでて窮屈ですが、実際はこれを20インチワイド液晶縦置きデュアルでやります。 仕組みは、WEBrickでローカルプロキシを立てて、同名のファイルがローカルにある場合は内容を置き換えて表示する、というもので、CSSやJavaScriptを編集するのに向いています。 プロキシサーバーはPerlで書かれた同等のものがここにあります。 http://www.ornithopter.jp/archives/2006/05/perl_perl.html 自分が使ってるのは必要に応じて行き当たりばったりに拡張していったりするのですが、現時点でのソースを置いておきます。 http://la.ma.la/misc/
CSS＆JavaScriptを使ってサイト利用者の訪問済みor未訪問サイトを分析:phpspot開発日誌
A New Way of Tracking Users' Browsing Habits - techfoolery Jeremiah Grossman came up with a really clever way of using Javascript to find what pages you've visited recently. CSS＆JavaScriptを使ってサイト利用者の訪問済みor未訪問サイトを分析する方法。 自分のサイトに来ている人は他のこんなサイトも見ている、なんてことを管理者側で知ることができるんですね。 早速デモを見ていきましょう。 まずは、サイト訪問済みとするため、www.yahoo.com を見ておきましょう。 そして、サンプルページ を見てみてください。www.yahoo.com が表示されるはずです。 (他にもサンプルページ上で定義されたリストの中
条件付コメント(Conditional Comments)実験ページ
IE5.5については「if gte IE 5.5」は通るのに「if IE 5.5」が通らないようです。 「if IE 5.5000」などとピリオド以下4桁全て書くと通ります。
Devthought - Guillermo Rauch’s Blog » CSS Javascript power. Fancy menu
Update: the code that empowers this menu has been upgraded to the latest MooTools version, and even improved! Now works with vertical, horizontal menus, with more flexible morphing! Let me introduce you to Fancy Menu: Home Plant a tree Travel Ride an elephant When it comes to creating the navigation part of your Website, the first thing you might think of is an unordered list that you style
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ちょっと便利なCSS Tips いろいろ - DesignWalker
Shift: Zoho Writer に待ちに待った機能が・・・
社å´å£«è©¦é¨å¡¾ 社å´å£«è©¦é¨å¦æ ¡ 社å´å£«è©¦é¨å¯¾ç 社å´å£«è©¦é¨åå¼·æ³ ç¤¾å´å£«è©¦é¨åèæ¸ at usrb.in
透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる - DesignWalker
Javascriptでバルーン:phpspot開発日誌