HTML5.JP - 次世代HTML標準 HTML5情報サイトHTML5.JP は、HTML5 の国内での普及を目指し、2007 年に個人プロジェクトとして運営が開始されました。2019 年現在、すでに HTML5 は当たり前のように活用され、多くの情報がネットから入手することができるようになりました。 当サイトの役割は終えたことに加え、当サイトの更新もままならず情報も古いままであったことから、当サイトを閉鎖することにいたしました。これまで当サイトをご支援頂きました皆様には心より御礼申し上げます。 2019 年 8 月 15 日 管理人より
[JS]条件付きでJavaScriptやCSSファイルをロードできるスクリプトローダー -Yepnope
プレフィックス（接頭辞）を使用して、ロードのタイミング、UAごとに必要なファイルだけをロードなど、条件付きでファイルをロードさせることができるスクリプトローダーを紹介します。 yepnope.js -A Conditional Loader For Your Polyfills! [ad#ad-2] yepnope.jsの書式 yepnope.jsの基本書式は、下記のようになります。 yepnope(resources /* string | object | array */ [, $LABchain]) css! プレフィックス「css!」を使用して、指定したファイルをCSSファイルとしてロードします。 ※「.css」で終了していない名前はJavaScriptファイルとして認識されます。 例：cachebusted.css?version=1452318 yepnope({ load
body要素のid属性またはclass属性をJavaScriptのディスパッチャーに使う - あと味
最近、実案件で実験していたのですが、仕様が固まってきたのでメモしておきます。 JavaScriptを特定のページで実行したいというニーズがあるけれど、head要素内に書くとか、body要素内に書くとか、そのページ限定でscript要素を使って読み込むとかいろんな方法があります。 ただ、コードが散らばると管理が面倒なので、一つのファイルにまとめたい派です。まとめれば、HTTPリクエストが減るし、キャッシュもされるし、何かと都合が良かったりします。 ひとつにまとめると、「そのページで実行するスクリプト」を一つのファイルから切り分けないといけなくなるので、ディスパッチャーが必要です。 @kyo_ago さんの「そこそこ規模が大きくても何とかなるjavascriptの設計（URL dispatcherの薦め） | tech.kayac.com - KAYAC engineers' blog」という
約700項目のHTML／スクリプト言語リファレンスを公開
日経LinuxとITproは、総計約700項目のHTML／スクリプト言語リファレンスを公開しました。「HTML」（295項目）、「CSS」（73項目）、「Dynamic HTML」（98項目）、「JavaScript」（295項目）、「Perl」（125項目）あわせて698項目。各項目にサンプルコードを掲載しており、コピーし貼り付けてすぐにお使いいただけます。JavaScriptは「この用例を実行する」という文字をクリックすれば、その場でサンプルコードを実行してみることもできます。 ファンレンスを使いこなすための記事や、「JavaScript入門」「Perlの使い方入門」「CSSの基本」「Linuxコマンド道場」「シェル・スクリプト工房」といった入門記事もご用意しました。 これらのリファレンスはここ2～3年かけて作成してきたものです。そのため一部に内容の古いものもありますが、順次更新してい
米Yahoo!で議論された、フロントエンドエンジニアリングの将来（後編）
米Yahoo!が11月8日から3日間にわたり開催したWebテクノロジーのイベント「YUIConf 2010」。主にWebアプリケーションのフロントエンド技術を中心にしたセッションが並ぶ中で、著名人によるパネルディスカッション「The Future of Frontend Engineering」が開催され、そのビデオが公開されています。 この記事は「米Yahoo!で議論された、フロントエンドエンジニアリングの将来（前編）」の続きです。 後編では会場からの質問を中心に、IE9問題、HTML5とWebのセキュリティ、そしてフロントエンドエンジニアの採用などについてディスカッションしています。 左から、司会のDion AlmaerとBen Galbraith。Tantek Çelik、Joe Hewitt、Elaine Wherry、Doug Crockford、Thomas Sha、Ryan
米Yahoo!で議論された、フロントエンドエンジニアリングの将来（前編）
Dion Almaer みなさんこんにちは。このディスカッションでは、ここにいるBen Galbraithと、私Dion Almaerで司会をします。まずパネリストを紹介しましょう。 左から、司会のDion AlmaerとBen Galbraith。Tantek Çelik、Joe Hewitt、Elaine Wherry、Doug Crockford、Thomas Sha、Ryan Dahl 私とBenのとなりにいるのが、Tantek Çelik（テンテク・チェリック）。IE 5.5の開発に携わり、その後Web標準に関する活動もしてきました。 Joe Hewitt（ジョー・ヒューイット）はFacebookに所属していますが、Firebugの開発者でもあり、Facebook for iOSの開発もしています。もともとはNetscapeからMozillaになるときのFirefoxのオリジナル
Firebugの使い方 | THE HAM MEDIA
Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLやCSSのコーディングを担当している人の多くはいれているアドオンですね。 Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会（SaCSS）にて発覚！使っているといっても、一部の機能に限られてしまっているようなのです。 もちろん「そんな機能知ってるよ！」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない！という人も勉強会の時に多かったように、実際にも多いはず！ Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ！と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。 HTML&CSSの確認
CSSオンリーでJSを使った風のよく使われるテクニック集１０:phpspot開発日誌
Creating 10 Most-Used Javascript Techniques Using Pure CSS Styling | DevSnippets CSSオンリーでJSを使った風のよく使われるテクニック集１０。 よく使われているかどうかは実際はよくわかりませんが、ピュアCSSということでなかなか凄いテクニック集がまとまっています。 我こそはCSSマスターという方は覚えておいてもよさそうです。 写真ギャラリー カーソルを合わせると拡大するアイコン アニメーションするコンテンツスライダー アニメーションするプログレスバー ピュアCSSなLightBox かなり色々なテクニックがなされているようですが、実用的なものが多いですね。 関連エントリ JavaScript使ってないのに使ってる風のピュアCSSなテクニック集 ピュアCSSで実装された吹き出しのデザイン例色々 クリーンなデザイ
透過PNGや角丸などをIE6や7でも実装出来るJavaScriptのメモ - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 IE6のPNG透過や6、7での 角丸、ドロップシャドウを実装 するjsライブラリのまとめです。 同じ用途でもライブラリによっ て良し悪しだと思いますので、 備忘録的にメモ。 もうIEはいいよとも思いますが、現実そうも行かないのはもどかしいですね。万能では無いですけど、作業工数を減らせるならjsに頼ってもいいと思います。そういう訳で、透過の問題や角丸、ドロップシャドウを実装してくれるjsのメモ。 IE7.js IE6以下でもIE7と同じようなXHTML / CSSの解釈をしてくれます。要DOCTYPE 宣言。 IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 DD_belatedPNG.js IE6でも透過PNGを実装できるライブラリ。class名等を指定
[JS]JavaScript無しでも動作するダイナミックなタブコンテンツ
JavaScriptがオンだとダイナミックにコンテンツが切り替わり、JavaScriptがオフでも正常にコンテンツが表示されるタブコンテンツを実装するチュートリアルをCSS-Tricksから紹介します。 Dynamic Page / Replacing Content デモページ 上記デモではJavaSciprのオン・オフに関わらず、タブをクリックするとそれに対応したコンテンツが表示されるようになっています。 仕組みはオフ時にはタブをクリックするとページ遷移し表示され、オン時にはAJAXを使用してコンテンツを表示しています。 タブ箇所のHTMLは、下記のようになります。 HTML <textarea name="code" class="html" cols="60" rows="5"> <nav> <ul> <li><a href="index.php">Home</a></li> <l
[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
YOUもCSSプロパティ覚えてJavaScript楽しんじゃいなよ - 三等兵
YOUもJSやっちゃいなよー！ジースジュニア(ジースJr.)に入っちゃいなよー！ええ？どんな活動をするかって？そりゃ決まってるよー、歌をうたったりダンスしながらJavaScriptのコーディングするんだよーアーハー！ さあ今日からキミもジースジュニアの一員だよー！やっぱりダイナミックが売りだからね！最新最先端技術（笑）のDHTMLやるよー！ダサイHTMLじゃないよー！死語じゃないよー！最低限これ覚えておくとジースジュニアとしてダイナミックに活躍できるプロパティ覚えたらどうかなーウーハー！ プロパティはここから選ばさせてもらってるZE☆ http://css-happylifezero.com/property/ ダイナミックに使いがちなCSSプロパティ の前にちょっと注意。moonshellというの使ってみました。横▲んとこ押すと実行されます。あとちょっと読み込みに時間かかるかもしれません
JavaScriptの有効無効で見た目を変える - 檜山正幸のキマイラ飼育記 (はてなBlog)
とあるWebページのbody内に、次のJavaScriptコードが埋め込んでありました。 <script> document.body.className += ' js'; </script> これは何だろう？ と思ったのですが、CSSスタイルシートのほうに、次の記述がありました。 body.js .section-tabs .tab { display:none; } JavaScriptが動く環境では、"js" というクラス名が設定されるので、それを使ってJavaScriptのあるなしを判断しスタイルを変えているようです。あー、なるほどね。CSSを使っている人には常識なのかもしれませんが、僕はnoscriptしか知りませんでした。
マークアップ効率化 - zen-codingでコーディングを倍速に
HTMLの記法について 基本的には「div」の様に要素を省略せずに記述して、それを展開すると「<div></div>」という形に展開されます。 このときに展開できる要素は以下の公式ドキュメントに明記されていますのでそちらを見るとよいです。 Zen HTML Elements Zen HTML Selectors Zen CheatSheets 基本的な記法 ひとつずつ順番に記述して説明していきます。しばらく初歩的な説明になるのである程度知っている方は飛ばしていただいて良いかと思います。 まずものすごく基本的な記法である、単独タグの記法について説明を行います。 cssのセレクタをイメージしながら見ていくと納得しやすいと思います。 タグだけ変換 変換前 div 変換後 <div></div> デモ 文末でtabを押してください div 変換後、div要素の間にカーソルが移動するので、すぐにテキ
CSSのrotationを使ったアナログ＆デジタル時計実装例:phpspot開発日誌
Jon Combe | Code | HTML clocks using JavaScript and CSS rotation 次のような、CSSのrotationを使ったアナログ＆デジタル時計実装例が公開されています。 Flashっぽいのですが、Flashは一切使っていません。 左のアナログ時計もいいのですが、右のデジタル時計も前後の分と秒が若干rotateされて表示されてるのがクールですね。 こういうことも出来るんだ、ということで一度見ておいてもよさそうです。 実装ですが、JavaScript によって次のようにCSSのrotateプロパティをsetIntervalで定期的にあてていってるだけのようです。 -webkit-transform: rotate(42deg); -moz-transform: rotate(42deg); このプロパティがなかったらかなり大変そうですが、こ
CSSとJavaScriptを巧みに使用した面白いデモンストレーション -PushingPixels
PushingPixelsからPNG画像の影をコントロールするデモとアニメーションで二つの画像を表示するデモを紹介します。 dynamic PNG shadow 「dynamic PNG shadow」では左下のスイッチをオンにすると、その光源の位置に従ってロゴに影が表示されます。 また、ロゴと光源はマウスのドラッグ操作で移動させることができます。 Animated HDR Photo 「Animated HDR Photo」では真ん中のスライダーを移動させることで、二つの画像のビフォーアフターを表示することができます。 スライダーはアニメーション動作に対応しており、画像の任意の場所をクリックするとそのポイントにアニメーションでスライドします。
PHP・CSS・jQueryを使った横向きのタイムライン実装例:phpspot開発日誌
Advanced Event Timeline With PHP, CSS & jQuery ? Tutorialzine PHP・CSS・jQueryを使った横向きのタイムライン実装の例とチュートリアル、サンプルプログラムが公開されています 次のような、横にスクロールするイベント表みたいなものが作れます。ツールなどに組み込む場合に参考にできるかもしれません。 デザインもカッコよくてスクロールバーの細かな部分も綺麗に実装されています。 関連エントリ 1.5KBで実装できるスライドショー用JavaScript ライブラリ「TinySlider」 JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Under Maintenance
[JS]CSSスプライトにフェードや移動、不透明度の変更を加えるスクリプト -bgFade
[JS]テキストリンクのホバー時に背景をアニメーションで変更するスクリプト