Popover API - JavaScript不要、HTMLのみでポップオーバーUIHTML Standardにpopover属性をはじめとしたPopover APIが正式にマージされました。Open UIによって提案されていた[1]APIで、名前がPopoverなのかPopupなのか紆余曲折の末、やっとHTML Standardとなります。 現段階で実装されているブラウザは少ないですが、簡易サンプルを作ったので体験しながら読んでいただくといいかもしれません。
[CSS]画像に美しい角丸とボックスシャドウを適用する方法
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。 それを下記のように美しく適用されるようにします。 角丸とボックスシャドウをこういう風にしたい 左：角丸と外側にシャドウ、右：角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。
jQueryプラグインを探す際にだいたい見て回る巡回サイトまとめ
cssやプログラミングjQuery探し 個人的にjQuery関連のブクマ が分かりにくくなってきたので 整理も兼ねてシェア。プラグ インを探す時にだいたい巡回 しているサイトをまとめます。 個人的にjQuery関連のブクマ が分かりにくくなってきたので 整理も兼ねてシェア。プラグ インを探す時にだいたい巡回 しているサイトをまとめます。 かなり情報が多くなってきたjQuery。使いやすいし、知識の無い僕でも簡単に使えるので重宝してます。そんなjQueryですが、多すぎて探すのも大変ですね。以前ご紹介したサイトも兼ねて、ブックマークの整頓がてら、順回しているサイトをご紹介します。 codrops jQueryと言えば個人的にここを思い浮かべます。情報も新しく早い。英語OKならRSS購読推奨です。 codrops css-tricks こちらはWebデザイナー目線で情報を配信しています。有益j
IE6〜IE8をCSS3に対応させるスクリプト「Kick-ass CSS3 Support in IE6, 7, and 8」
TOP > WebDesign > IE6〜IE8をCSS3に対応させるスクリプト「Kick-ass CSS3 Support in IE6, 7, and 8」 WEBサイト構築においてもはや常識となったCSS。新たな仕様のCSS3が整備されつつあり、表現の幅をさらに広げてくれるものになっていますが、最新のブラウザのみ対応しており、IE6のようなシェアがある旧世代のブラウザは対応していないというのが現状です。そこで今日紹介するのはIE6〜IE8をCSS3に対応させるスクリプト「Kick-ass CSS3 Support in IE6, 7, and 8」です。 全てのCSS3のプロパティが適応されるのではなく、角を丸くしたり、ボックスに影を入れたりテキストに影を入れたりといったCSS3の機能をスクリプトにｙほって再現するというものです。 詳しくは以下 スクリプトを読み込ませると言
ページに動画を埋め込む際につい使ってしまいたくなるjQueryプラグイン「Video LightBox」:phpspot開発日誌
ページに動画を埋め込む際につい使ってしまいたくなるjQueryプラグイン「Video LightBox」 2010年06月10日- Video LightBox - Embed video to your website with beautiful Lightbox effect! ページに動画を埋め込む際につい使ってしまいたくなるjQueryプラグイン「Video LightBox」。 名前から推測するに、単に動画をLightBox化しただけでしょう、と思いきやなかなか素晴らしいプラグインになっていたのでご紹介です。 動画のサムネイルを次のように様々なスキンによって修飾できます。クリックすればニュイーンとLightBox表示されるというオシャレさ加減がいいです。 更に埋込可能な動画形式が豊富で、flv, mp4, 3gp や、外部動画サイトのYoutube, Facebook, Goo
CSSオンリーでJSを使った風のよく使われるテクニック集１０:phpspot開発日誌
Creating 10 Most-Used Javascript Techniques Using Pure CSS Styling | DevSnippets CSSオンリーでJSを使った風のよく使われるテクニック集１０。 よく使われているかどうかは実際はよくわかりませんが、ピュアCSSということでなかなか凄いテクニック集がまとまっています。 我こそはCSSマスターという方は覚えておいてもよさそうです。 写真ギャラリー カーソルを合わせると拡大するアイコン アニメーションするコンテンツスライダー アニメーションするプログレスバー ピュアCSSなLightBox かなり色々なテクニックがなされているようですが、実用的なものが多いですね。 関連エントリ JavaScript使ってないのに使ってる風のピュアCSSなテクニック集 ピュアCSSで実装された吹き出しのデザイン例色々 クリーンなデザイ
初心者さんのためのWebサイト制作に役立つリンク集
2017年6月29日 Webサイト制作 「Webサイト勉強するのにおすすめのサイトを教えてください！」との声が多いのですが、日本のWeb関連チュートリアルサイトをあまり見たことがなかったので、今までおすすめできませんでした…。ということでちょっとググって初心者さんによさそうなサイトをいくつか紹介します。小難しい単語が並んであるようなサイトは避けているつもりですが、わかりにくかったらすみません。他にもおすすめサイトがあればぜひコメント欄にて教えてください！ ↑私が10年以上利用している会計ソフト！ Webサイトを作る流れ まずはWebサイトを作る目的を考える 誰のため？何のため？Webサイトを作り始める前に。 サイトマップと呼ばれる構成図を作成 Webサイトの構成図を簡単に作れる便利ツール ワイヤーフレーム（Webサイトのレイアウト）を作成 Webサイトの骨組み: ワイヤーフレームを素早く・
CSSだけでJavaScriptのような動きを実装するサンプル30 – creamu
96332132, iStockphoto/ Thinkstock CSSでかっこいいUIを実装したい。 そんなときにおすすめなのが、『30 Pure CSS Alternatives to Javascript』。CSSだけでJavaScriptのような動きを実装するサンプル集です。 なかなかいい感じのものが揃っています。 Valid Non-Javascript Lightbox JavaScriptを使わずに、libhtbox系の動きを実装。反応が速くていい感じです Create a Content Slider Using Pure CSS さくさくと切り替わるコンテンツスライダー Pure CSS speech bubbles CSSで作る吹き出し型のデザイン Accordion Using Only CSS CSSを使ったアコーディングメニュー CSS-Only Tabbed
[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3
<textarea name="code" class="css" cols="60" rows="5"> .box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ box-shadow: 10px 10px 20
border-radius.js - Javascriptライブラリ - HTML5.JP
border-radius.js は、class属性に値を追加するだけで、ブロックボックス要素の角を丸くするライトウェイトなJavaScriptライブラリーです。 CSSでborderとmarginを指定し、class属性に "html5jp-border-radius" を追加するだけで、角が丸くなります。JavaScriptのコードは一切必要ありません。また、このライブラリーは単独で動作するため、他のJavaScriptフレームワーク等を読み込む必要もありません。 このライブラリーは、指定のブロックボックス要素の上下に角を追加します。Internet Explorerの場合はVMLを、それ以外のブラウザーではCanvas（Canvasがサポートされていれば）を使っています。 ダウンロード Release Date Size (byte) Download
Firefox対応！スクロールバーをCSS+js+画像でカスタマイズする
※株式会社マイスタンダードでは、実在性の証明とプライバシー保護のため、グローバルサインのSSLサーバ証明書を使用し、SSL暗号化通信を実現しています。 株式会社マイスタンダードをご覧いただくには、最新のFlashPlayerが必要です。 ・株式会社マイスタンダードをご覧いただくには、最新のAcrobat Readerが必要です。 ・JavaScriptを利用しています。JavaScriptの設定を有効にする必要があります。 [サービス対応地域] 北海道,青森,岩手,宮城,秋田,山形,福島 東京,神奈川,埼玉,千葉,茨城,栃木,群馬,山梨 新潟,長野,富山,石川,福井 愛知,岐阜,静岡,三重 大阪,兵庫,京都,滋賀,奈良,和歌山 鳥取,島根,岡山,広島,山口 徳島,香川,愛媛,高知 福岡,佐賀,長崎,熊本,大分,宮崎,鹿児島,沖縄 システム開
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2010/06/jquery-forms.html
[CSS]ブラウザのサイズに合わせてスタイルシートを変更する方法
http://youmos.com/news/jsscrolling
CSSデザインできるスクロールバー表示JavaScript （fleXcroll） - youmos