ブログのサイドバーに自分のはてなブックマークのRSSフィードを表示する-コハリトりみっと
はてなブックマークウィジェットは、ブログに任意のサイトの注目エントリーを貼り付けられるウィジェットですが、私がしたいのは注目エントリではなく、「自分のブックマーク一覧をブログのサイドバーに表示する」 ただそれだけなので、とりあえずGoogle AJAX Feed APIを利用して作ってみました。 現在（2007-12-27）当サイトのサイドバーには、自分のはてなブックマークのRSSフィードを表示しています。 このサンプルソースはブログのサイドバーに置くことを前提とし、<ul><li></li></ul>内にはまるように出来ています、リストのスタイルの指定は、CSSで適宜好みに合わせてください。 サンプルソースコードここから↓ <script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_FEE
優雅なWeb制作のためのJavaScript「yuga.js」:phpspot開発日誌
inputlog - yuga.js 0.5.1 - 優雅なWeb制作のためのJavaScript バージョンアップはこそこそしていたりする優雅なWeb制作のためのJavaScript yuga.jsの0.5.1を公開します。 優雅なWeb制作のためのJavaScript「yuga.js」のバージョンアップがなされたようです。 csshappylife さんによる デモページをみると、なかなか便利そうです。 以下のようなことが出来るようです。 画像のロールオーバーを簡単にする機能 外部リンクは別ウィンドウを自動で設定 画像のリンクをthickboxで開くよう簡単設定 偶数、奇数行を自動で色分け ページ内リンクのアニメーション機能 サイト作成時の面倒な部分の作業を軽減できそうですね。
CSS擬似クラスを使うべき理由 | エンタープライズ | マイコミジャーナル
A List Apart - For People Who Make Websites HTMLとCSSは規格通りに使うとすれば縦横無尽にさまざまな記述ができる。しかし規格上サポートされているからといって、馬鹿正直にそうした機能を使うのは避けたい。シンプルな記述であとから読んでも理解しやすい、他人が読んでも理解しやすいHTMLやCSSを書けるようになることが理想だ。しかし誰しも最初は素人だ。エキスパートがまとめたドキュメントを参考にして、そうしたテクニックであり勘どころを学んでしまいたい。 フロントエンドデベロッパであるAlex Bischoff氏は5日(米国時間)、A List ApartにおいてKeeping Your Elements' Kids in Line with Offspringという名のもと、CSSやHTMLの記述方法について細かい技巧をまとめて発表した。同ドキュメント
IE7.js登場 - IEのCSS/HTML非準拠はこれで対応 | エンタープライズ | マイコミジャーナル
Dean Edwards氏は7日(米国時間)、IEの動作をW3C標準仕様へ準拠させるためのライブラリIE7.jsの最新版を公開した。IE7.jsはJavaScriptで開発されたMS Internet ExplorerのHTML/CSS表示を調整するライブラリ。IE7.jsを使うことでMSIEのHTML/CSSまわりの表示処理をよりW3C標準規約に準拠したものにする。IE5やIE6で透過PNGを表示できるようにもなる。 IE7.jsは基本的にMSIE5/6向けに用意されていたライブラリをIE7に対応させたもの。これまでのモジュール構造は廃止され、IE7.jsやIE8.jsといったように個別のファイルに分離されている。ホスティング先もGoogle Codeへ変更された。IE7.jsはサイズも縮小され、圧縮した状態で11KBほど。またbase2.DOMのセレクタエンジンを使うことでより高速に動
javascript - カレンダーを作る : 404 Blog Not Found
2008年01月02日02:15 カテゴリLightweight Languages javascript - カレンダーを作る JavaScriptの書き初めにおあつらえ向きの問題。 年間カレンダー どう書く？org nを入力としてn年の年間カレンダーを返すプログラムを作ってください 少なくとも日曜日と土曜日が判別出来るようにしてくださいコピペして再利用しやすいよう、なるべく素直に書いてみました。カレンダーをDOMで作るという作業は結構あると思います。良問ですね。ご自由にお使いください。 CSS .mcal { border: inset 1px; float:left; font-size:smaller } .mcal td,th { width: 2em; text-align:right } .ycal { border: dotted 1px; font-size:smalle
Bookmarklet - link them all! : 404 Blog Not Found
2007年12月11日02:45 カテゴリLightweight LanguagesMedia Bookmarklet - link them all! きっかけは、こちら。 「アルファブロガー・アワード２００７」に１５人を選出 - 毎日ｊｐ(毎日新聞) 問題は、記事の内容ではなくて、リンクの扱い。折角のアルファブロガーアワードなのに、URIがリンクでなくてただのテキストというのは何事か。もっともこれは毎日.jpに限らず新聞Webの記事本文はほとんど全部そうなのだけど、使いにくいったらありゃしない。 それに限らず、URIが表記だけあってリンクになっていないケースというのは多いもの。本blogのコメントもURIはリンクにしない(これはSPAMよけのため)。こういう場合に一発でURIをリンク化しようというというわけで作ったのがこちら。 Link Them All - Bookmarklet B
窓の杜 - 【NEWS】スクリプト対応でさらに高機能化したテキストエディター「Apsaly」v2.00が公開
フリーの高機能テキストエディター「Apsaly」が16日、v2.00へとメジャーバージョンアップした。v2.00の注目点は、新たにスクリプト機能が搭載されたこと。標準で利用できるスクリプト言語は、JScript/VBScript/MikoScriptの3つ。このうちMikoScriptとは作者が独自に開発したもので、オブジェクト指向に対応する高度なスクリプト言語だ。また、これら3つのスクリプト言語以外にも、Windowsへ“ActiveX Scripting Engine”としてインストールされていればPerlやRubyなどのスクリプト言語も利用できる。 スクリプトは［ツール］メニューから実行でき、サンプルとして“自動スクロール”“計算式”“色選択”などいくつかのスクリプトが登録されている。またJScript/VBScript/MikoScriptなど、言語別のサンプルファイルもインストー
リンクホバーを超カッコよくアニメーションするJavaScriptライブラリ「Scrollovers」:phpspot開発日誌
リンクホバーを超カッコよくアニメーションするJavaScriptライブラリ「Scrollovers」 2007年08月07日- Scrollovers - A New Way of Linking Scrollovers are a way to quickly and easily add flair to your web pages, giving your users an experience they weren't expectin g. リンクホバーを超カッコよくアニメーションするJavaScriptライブラリ「Scrollovers」。 例えば、次のアンカーにカーソルを合わせて みてください。 [YOUR TEXT HERE] Scrollovers を使えば、こんなリンクの貼り方が出来ます。 普通のリンクより 分かりやすいだけでなく、訪問者に驚きを与えることが出来ますね
Opera 最新ビルドの Developer Console を試す - WebOS Goodies
インストール方法は従来の開発者向けツールと同じです。 Opera 9.0 で開発者向けツールのページを表示し、「Developer Console」のリンクを適当なツールバーにドラッグしてください。ただ、この方法だとアイコンが表示されないので、 Hideto さんが作成されたボタンを利用されるほうがお勧めです。ご好意により Tips に転載させていただきましたので、ご利用ください。便利なボタンを作成してくださった Hideto さんに感謝です。 Developer Console は現在の正式版（Opera 9.1）には実装されていませんので、最新の Weekly Build をインストールする必要があります。 OPERA DESKTOP TERM のページのタイトルの下に最新版インストーラへのリンクがありますので、そこからダウンロードしてインストールしてください。ただし、場合によっては不
DOMから始めるJavaScriptモダン・スクリプティング---目次：ITpro
近年，Ajaxの台頭をきっかけに，JavaScriptを使ったブラウザのリッチ・クライアント化が進んできました。現在では，ページの表示を変化させるだけであれば，ほとんどのことはJavaScriptのみで対処することが可能です。それを実現するのがDOMなのです。 第1回 DOMから始めるモダン・スクリプティングの世界へようこそ 第2回 ブラウザからHTMLはどう見えているかを理解しよう ～ドキュメントツリー～ 第3回 DOMスクリプティングのことはじめ(1) ～要素（タグ）を狙い撃ち～ 第4回 DOMスクリプティングのことはじめ(2) ～これはどんな要素？～ 第5回 DOMを使ってHTMLを自由自在に書き換える 第6回 イベントハンドラから脱却しよう 第7回 スクリプトを完全に分離しよう ～コンテンツ，プレゼンテーション，ビヘイビア～ 第8回 スクリプトのパッケージ化 ～使い回しできるスクリ
MOONGIFT: » 絶対お勧め！JavaScriptでテーブルソート「Table Sorter」:オープンソースを毎日紹介
Web開発の現場において、データの並べ替え機能の要望は良く出る話だ。開発がある程度終わった段階で言われたりするとショックを受ける事もある。検索条件をパラメータで引き継いで、ページ番号も…なんて考えただけでも嫌になるだろう。 そんな経験のある、またはこれから経験するであろう方にお勧めのソフトウェアがある。これさえ使えばソート処理は怖くない。 今回紹介するオープンソース・ソフトウェアはTable Sorter、JavaScriptのみで実現するソートライブラリだ。 この手のライブラリはこれまでいくつかあったが、iframeを使ったり、表示に特定の手法が必要だったりと、そのままでは使いづらいものが多かった。Table Sorterはそれらの完成版ともいえるかも知れない。 何せ、読み込むのはJavaScriptファイル一つだけ、さらに普通のテーブルタグに対して、ヘッダ部分はtheadタグとthタグ
Ajax Google Mapsを自サイトに設置する - ［JavaScript］All About
*この記事は、Google Maps APIバージョン1(v1)の時点での記事です。v1ベースでは現状動作しますが、バージョン2(v2)については、 Google Maps v2を設置する(1)やv2用意訳とサンプルなどもご参照ください。 9/15と、 9/30のサンプルは、都道府県庁の経緯度データをAjaxな通信で取り出し表示する、というものでしたが、 今回から数回にわけて、このようなAjaxな仕組みも利用しつつ、地図を表示してみます。地図には、Google Mapsを利用します。 Google Mapsは、それがなければ、Ajaxという言葉がこれほど広まらなかったかもしれないほどの影響を与えたAjaxアプリといえますが、もしかすると、それ以上に、世界中にインパクトを与えた特徴があります。 それは、この高機能で精密な地図を、自由にカスタマイズして、なんと、無料で自分のサイトへ設
ants Lab. | その他 | JavaScriptデバッグ ツール作ってみました＜第1回＞
JavaScriptは、開発するのはエディタとWebブラウザがあれば事足りるのに、デバッグが恐ろしく面倒なんです。数千行のコードを書くと、Webブラウザごとの動作の違いだとか、オブジェクトの振る舞いの違いに苦労させられます。そこで、オリジナルでデバッグ ツール「Geranium」を作ってみることにしました。 まず現物を見てもらった方が分かりやすいと思うので、こちらをご覧ください。今回は手軽なサンプルということで、カラー ピッカーを作ってみました。このページにGeraniumを組み込んであります。 ■カラー ピッカー colorPicker.html 「へ？ 何も起きないじゃん……」と思った人は大正解です。このままではGeraniumは動き出しません。ブラウザの別画面で立ち上がったカラー ピッカーのURL欄の末尾に、「?debugger=true」を追加してみてください。 デバッグ出力がモリ
[to-R]JavaScriptやSEO対策、CSS、Movable Typeなどの情報を発信
Tailwind CSSで任意のメディアクエリを指定する Tailwind CSSでは簡単にメディアクエリの指定が可能です。 2023年11月 2日 00:40 カテゴリー CSS Tailwind CSSでdisabled Tailwind CSSでdisabled属性がついた要素に対してスタイルを当てたい場合には、disabled擬似クラスを利用して指定を行います。 2023年10月19日 15:32 カテゴリー CSS Vue.jsでコンポーネントの要素をpropsによって切り替える Vue.jsでボタンコンポーネントなどを作成する場合、ユースケースに応じてHTMLの実体をa要素とbutton要素と切り替えたいケースというのが発生します。 2023年9月15日 11:18 カテゴリー JavaScript Nuxt3でESLintの設定をする 案件でNuxt3のESLint設定をする
Lucky bag::blog
実践 Web Standards Design が電子書籍になりました 概要 拙著「実践 Web Standards Design」通称ホップ本の電子書籍版が改訂新版として10月3日に発売になりました。 公開日 2011-10-03T19:31:53+09:00 URI https://www.lucky-bag.com/archives/2011/10/wsd-epub.html カテゴリ Misc タグ Book CSS HTML XHTML NAVER Japanにジョインしました 概要 10月1日付けでネイバージャパン株式会社に入社してましたというご報告です。 公開日 2009-11-01T17:56:23+09:00 URI https://www.lucky-bag.com/archives/2009/11/joined-with-naver.html カテゴリ Misc タグ
小粋空間_カテゴリーリストにカスタムフィールドの画像を表示する
Movable Type検索結果画面のMTIncludeタグでファイルを読み込む方法を紹介します。 １．はじめに MTで再構築するファイルの拡張子を".php"にして、そのページの中で頻繁に更新される部分を、 <?php include('foo.html'); ?> で読み込むことで、ページ全体の再構築不要で情報を更新することができます。 ただ、検索結果ページはPerlのCGIで動作するため、PHPの方法を利用することができません。 ということで、検索結果画面のMTIncludeタグでファイルを読み込む方法を紹介します。 ２．検索結果画面のMTIncludeタグでファイルを読み込む １項のfoo.phpのパスを、仮に「/var/www/html/foo.html」とします。 このファイルを検索結果画面のMTIncludeタグで読み込むには、下記の手順が必要です。 まず、mt-config
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebクリエイティブのためのDOMScripting
WEB制作者が一度は触ってみておくべきオープンソース『Ext』*ホームページを作る人のネタ帳
gotAPI.com
MacOSXデザインのウィンドウをWEBで表現するAjax導入方法*ホームページを作る人のネタ帳
