タグ

CSSとjavascriptに関するmrnoonのブックマーク (22)

  • artcodeグループ - 2007 CSS Study Meeting

    はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28

    artcodeグループ - 2007 CSS Study Meeting
    mrnoon
    mrnoon 2007/04/11
    CSS の勉強会を行いました。発表資料は随時リンクします。
  • 【Dreamweaver】スニペット使わないと後悔するよ!::::::STOPN' LISTEN::::::to the silence:::::::

    免責事項:サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら

    mrnoon
    mrnoon 2007/04/11
    スニペットとは、よく使う汎用的なコードを登録しておく事で、登録済のコードについてはスニペットパネルからダブルクリックでコードの挿入が可能になるとても便利なものです。
  • MT & HTML Slidy でスライドを作る | WWW WATCH

    プレゼンテーションに使用するスライド資料といったら、パワーポイントのようなソフトウェアで作るのが一般的ですが、最近は、ブラウザ上で動作するスライドショーを使用し... プレゼンテーションに使用するスライド資料といったら、パワーポイントのようなソフトウェアで作るのが一般的ですが、最近は、ブラウザ上で動作するスライドショーを使用している方をセミナーなどで頻繁に見かけるようになりました。 このブラウザ上で動作するスライドは、(X)HTML + CSS + JavaScript で実現できます。スライド制作用 JavaScript ライブラリとしては、W3C で公開されている 「HTML Slidy」 が使いやすく有名ですが、個人的にもこの 「HTML Slidy」 を利用したスライドをどこかで使ってみようと思っていたところでしたので、いい機会ということで、テンプレートを作って公開してみることにし

    MT & HTML Slidy でスライドを作る | WWW WATCH
    mrnoon
    mrnoon 2007/04/11
    このブラウザ上で動作するスライドは、(X)HTML CSS JavaScript で実現できます。スライド制作用 JavaScript ライブラリとしては、W3C で公開されている 「HTML Slidy」 が使いやすく有名ですが、個
  • CSSで角がまるい吹き出しを作る「CSS Speech Bubbles」とか吹き出しいろいろ - GIGAZINE

    CSSを使って吹き出しを作成することができるCSSファイルとJSファイル、それから画像ファイルをひとまとめにしたセットです。XHTML1.0準拠で、Internet Explorer 6 と 7、Firefox 2.0、Safari 2.0、Opera 9.0で動作確認ができています。 ダウンロードは以下から。 willmayo.com >> CSS Speech Bubbles 実際のサンプルは以下にあります。 CSS Speech Bubbles 角をまるくしているのは、「curvyCorners」を使用しているとのこと。 ほかにもこの吹き出し方のものは以下に多くあります。 入力欄(フォーム)部分をマウスでクリックすると吹き出しが出てくるタイプ Tooltip for forms リンクの上にマウスを乗せると吹き出しが表示されるタイプ Ajax tooltip リンクの上にマウスを乗せ

    CSSで角がまるい吹き出しを作る「CSS Speech Bubbles」とか吹き出しいろいろ - GIGAZINE
    mrnoon
    mrnoon 2007/04/11
    CSSを使って吹き出しを作成することができるCSSファイルとJSファイル、それから画像ファイルをひとまとめにしたセットです。XHTML1.0準拠で、Internet Explorer 6 と 7、Firefox 2.0、Safari 2.0、Opera 9.0
  • div要素をクロスフェード表示するJavaScript | WWW WATCH

    結構前に公開されているので、すでに使っている人もいるかと思いますが、最近、個人的な用途で使わせていただいたので紹介。 Brand Spanking New で公開されている、「Javascript / CSS Crossfader」 は、JavaScript ひとつで簡単に、任意の div 要素 (じゃなくてもいいんですが) をクロスフェード表示で切り替えてくれるスクリプト。スクリプト自体が軽いのと、設定も簡単なので、ちょっとした画像の切り替えなんかに重宝しそう。 デモがこちらで公開されています。 必要なのは JavaScript ファイル 1つのみ。ダウンロードした JavaScript ファイルをサーバに上げたら、(X)HTML ファイルに読み込みます。 <script type="text/javascript" src="/js/bsn.Crossfader.js"></scrip

    div要素をクロスフェード表示するJavaScript | WWW WATCH
    mrnoon
    mrnoon 2007/04/11
    Brand Spanking New で公開されている、「Javascript / CSS Crossfader」 は、JavaScript ひとつで簡単に、任意の div 要素をクロスフェード表示で切り替えてくれるスクリプト。スクリプト自体が軽いのと、
  • JavaScriptとCSSで特定DIV要素の表示/非表示を切り替えるサンプル:phpspot開発日誌

    Harry Maugans How to Create a Collapsible DIV with Javascript and CSS One of the most handy (and cool) tricks a web developer could learn to use is collapsible DIVs. JavaScriptCSSで特定DIV要素の表示/非表示を切り替えるサンプル。 次のように数行で行える簡単なサンプルが紹介されていてライブラリに依存しない&軽い、簡単な実装を行いたい時に使えます。 <div id="mydiv" style="display:none"><h3>This is a test!<br>Can you see me?</h3></div> <a href="javascript:;" onmousedown="if(document

    mrnoon
    mrnoon 2007/04/11
    JavaScriptとCSSで特定DIV要素の表示/非表示を切り替えるサンプル。 次のように数行で行える簡単なサンプルが紹介されていてライブラリに依存しない&軽い、簡単な実装を行いたい時に使えま
  • CSSとJavascriptだけでスライド効果を実現する方法(script.aculo.usとか抜きで) | SIMPLE*SIMPLE

    テキストなどがするすると現れたり消えたりするスライド効果はときどき使いたくなりますよね。ただ、それだけのためにPrototype.jsとかscript.aculo.usを使うのもね・・・という方のためのスライド効果作成講座。 細かいところはコードを見てもらうとして、素敵なスライド効果をシンプルなスクリプトだけ(CSSJavascript)で実現できます。ダウンロードもできます。 » Firblitz: Re: How to Create Digg Comment Style Sliding DIVs with Javascript and CSS 応用例としてスライドする時間を設定したり、スライド終了時にアラートしたりする方法も紹介しています。 個人的にはまだまだJavascriptを勉強中なので、このサイトの丁寧な説明がうれしかったですね。 setTimeoutとかこう使うのねー、と読

    CSSとJavascriptだけでスライド効果を実現する方法(script.aculo.usとか抜きで) | SIMPLE*SIMPLE
    mrnoon
    mrnoon 2007/04/11
    テキストなどがするすると現れたり消えたりするスライド効果はときどき使いたくなりますよね。ただ、それだけのためにPrototype.jsとかscript.aculo.usを使うのもね・・・という方のためのスラ
  • javascript - CSSをいじくる : 404 Blog Not Found

    2007年03月12日02:00 カテゴリLightweight LanguagesiTech javascript - CSSをいじくる JavaScriptでDOM要素のstyle属性をいじるのは簡単ですが、これがCSSともなるとobject treeが深くて大変で、Webを見回してもほとんど参考例がありません。動的にCSSをいじっているサイトの例は徳保さん趣味Webデザインぐらいしか見かけません。 というわけで、習作を兼ねて、style属性ではなくCSSをまるごと書き換える関数を作ってみました。 CSS Manipulation via JavaScript http://www.dan.co.jp/~dankogai/css/css_handlers.html 解説 動作確認はFirefox 2, Opera 9, Safari, Mac IE5で行っています。Safariでのみ

    javascript - CSSをいじくる : 404 Blog Not Found
    mrnoon
    mrnoon 2007/04/11
    JavaScriptでDOM要素のstyle属性をいじるのは簡単ですが、これがCSSともなるとobject treeが深くて大変で、Webを見回してもほとんど参考例がありません。動的にCSSをいじっているサイトの例は徳保
  • Webデザイナー/開発者が覚えておくとよい25のテクニック:phpspot開発日誌

    25 Code Snippets for Web Designers (Part1) There are loads of handy scripts, bits of html and widgets that you can incorporate into your websites and blogs - here we bring together 25 of the most helpfull in the first part of this series … Webデザイナー/開発者が覚えておくとよい25のテクニックが紹介されていました。 知っておいてサイトに組み込めば、一歩レベルが上のサイトを構築できるはずです。 CSSを使うものだけでなく、JavaScriptPHP も絡んでくるものもありますが、サンプルを改変することで設置をすることも出来るはずです。 バブルツー

    mrnoon
    mrnoon 2007/04/11
    Webデザイナー/開発者が覚えておくとよい25のテクニックが紹介されていました。 知っておいてサイトに組み込めば、一歩レベルが上のサイトを構築できるはずです。 CSSを使うものだけで
  • lockエラー | 月額200円からのレンタルサーバー JSN

    auのトップページのような、伸縮してスライドするメニューをjavascript+cssで作れるみたいです。「Image Menu」というライブラリで、動かすにはmootools.jsが必要のよう。 <script type="text/javascript" xsrc="imagemenu.js" mce_src="imagemenu.js" ></script> <div id="kwick"> <ul class="kwicks"> <li><a class="kwick opt1" xhref="" mce_href="" ><span>TOP</span></a></li> <li><a class="kwick opt2" xhref="" mce_href="" ><span>CSS</span></a></li> <li><a class="kwick opt3" xhref

    mrnoon
    mrnoon 2007/04/11
    auのトップページのような、伸縮してスライドするメニューをjavascript cssで作れるみたいです。「Image Menu」というライブラリで、動かすにはmootools.jsが必要のよう。
  • 透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる - DesignWalker

    mrnoon
    mrnoon 2007/04/11
    これで、IE6や5.5のバージョンでも綺麗に透過PNGを、CSS(スタイルシート)で操ることができますね〜!
  • 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

    mrnoon
    mrnoon 2006/11/30
    HTMLのリスト要素を視覚的に階層表示する「StyleMap」。 dl, dd, dt で定義したリストを次の図のように視覚的に階層表示することが可能です。
  • 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. CSSJavaScriptを使ってサイト利用者の訪問済みor未訪問サイトを分析する方法。 自分のサイトに来ている人は他のこんなサイトも見ている、なんてことを管理者側で知ることができるんですね。 早速デモを見ていきましょう。 まずは、サイト訪問済みとするため、www.yahoo.com を見ておきましょう。 そして、サンプルページ を見てみてください。www.yahoo.com が表示されるはずです。 (他にもサンプルページ上で定義されたリストの中

    mrnoon
    mrnoon 2006/08/29
    自分のサイトに来ている人は他のこんなサイトも見ている、なんてことを管理者側で知ることができるんですね。
  • JavaScriptを使わずにページのCSSを切り替える:phpspot開発日誌

    ページのデザインを利用者好みにカスタマイズできるように、javascript を使い、CSSを切り替えることでデザイン変更できるサイトがありますが、 JavaScriptオフでも同様のことを実装したい場合のサンプル。 JavaScriptを使わずに、PHP+クッキーを使ってページのCSSを切り替えてみましょう。 PHPの知識がなくても、次のサンプルを使えば簡単に誰でもCSSを切り替えることが出来ます。 次のサンプルは、main.css , blue.css , red.css , pink.css というCSSを切り替えたい場合のサンプルです。 (1) まずは、レイアウトを保存するクッキー設定用のPHPスクリプト( index.phpとして保存 ) <?php $valids = array( "main", "blue", "red", "pink" ); $layout = (isse

    mrnoon
    mrnoon 2006/08/29
    ページのデザインを利用者好みにカスタマイズできるように、javascript を使い、CSSを切り替えることでデザイン変更できるサイトがありますが、JavaScriptオフでも同様のことを実装したい場合
  • aplus moments

  • JavaScript/HTML5, iPhone/Android, ハイビジョン映像, 自動化関連:[OpenSpace]

    Web関連およびアプリケーション、映像関係、静止画素材、自動処理、4K/8K/ハイビジョン素材関連などを扱っています。 誤字脱字等、お気づきの点がありましたら、お気軽にメールをください。 この目次にないアプリケーション等の使い方などに関してはその他のリファレンス/アプリケーション...のページを参照してください。

    mrnoon
    mrnoon 2006/08/18
    フォトショ・イラレのプラグイン集やJS制御方法、その他いっぱい
  • jmblog.jp - IEでa要素以外に:hover擬似クラスを適用させる

    IE6以下では、:hover擬似クラスが <a> 以外では適用されません。が、この問題の解決策が紹介されているサイトを発見しました。 » WEBFACTORY ::: BLOG: IEでhoverをa以外に効かせる » Hackadelic: csshoverを使ったWeb StandardなCSSコーディング それぞれで紹介されているとおり、Whatever:hover で配布している csshover.htc というスクリプトを使えば、IEでもいろんな要素に:hoverを適用させることが出来ます。(ダウンロードの場所がちょっとわかりづらいですが、Changes のなかにあります。) 使い方は、css で以下のように書くだけ。

    mrnoon
    mrnoon 2006/08/18
    これで、IEでも hover し放題です。素晴らしい!
  • Hackadelic: csshoverを使ったWeb StandardなCSSコーディング

    IEのせいで、:hoverとか:activeとか使いたいが為に無理やりanchorを使うマークアップを良く見かけますが、 これを極力Web Standardに近づける為の方法にcsshover2.htcってのがあるのでご紹介。 使い方はサイトにも書いてあるけども、 body { behavior:url("csshover.htc"); } みたいに読み込むだけです。 ただIEだけに適用すべきなんで条件付コメント(Conditional Comments)とか使うと良いと思います。 実際にTokyo Graffitiって言うSNSでも使ってます。

    mrnoon
    mrnoon 2006/08/18
    これを極力Web Standardに近づける為の方法にcsshover2.htcってのがあるのでご紹介。
  • GIGAZINE - ファイルサイズわずか3KBのオーバーレイ効果「Litebox」登場

    オーバーレイ効果を作り出す「Lightbox」というスクリプトの超軽量版です。 実際の例やダウンロードは以下から。 Litebox- Same great taste, less calories http://www.doknowevil.net/litebox/ 上記ページの画像をクリックするとどういう効果なのかがよく分かります。 Liteboxで使われているのがこの「moo.fx」という軽量なJavaScriptエフェクトライブラリ。 moo.fx - the next small thing http://moofx.mad4milk.net/ また、類似品としてはこんなのもあります。 GIGAZINE - オーバーレイ効果を作り出す軽量スクリプト「iBox」

    GIGAZINE - ファイルサイズわずか3KBのオーバーレイ効果「Litebox」登場
  • CSSを無効化するブックマークレット・改 - LogJET

    CSSを無効化するブックマークレット・改 CSSを無効化するブックマークレットを更に改造してみました。 CSS無効化・改 (クリックするとこのページのスタイルが無効になります) 右クリックからお気に入りに登録してください。 今回のブックマークレットはCSSの無効、有効を切り替えることができます。 このブックマークレットについて 先日、うちのアクセスログ見てたら2ちゃんねるSafariスレからアクセスがあったので、何だろ?と思って見てみたら、CSSを無効にするブックマークレットでアクセスがありました。 その時、同時に紹介されていたリンク先のPimp My Safariというサイトで、CSSのオン、オフを切り替えるブックマークレット「Toggle linked CSS」が公開されていたのですが、どうもFirefoxやIEでうまく動かない。trueというページが返ってきてしまう。 ブックマークレ