IEをモダンブラウザのように扱う方法10 – creamu
IEにだけできないことを可能にしたい。 そんなときにおすすめなのが、『10 ways to make Internet Explorer act like a modern browser』。IEをモダンブラウザのように扱う方法です。 便利そうなのが揃っているので、ざっとご紹介しますね。 HTML5をIEでも使用可能にする html5.jsを読み込んで、HTML5をIEでも使用可能にする text-shadowプロパティー IEでtext-shadowプロパティーをfilterを使って実現 IEでのbox-shadow filterを使ってシャドウに見せるテクニック 角丸 モダンブラウザはborder-radiusで、IEにはDD roundiesを適用 マルチカラム div要素にカラムを追加する。IE用にはjQueryプラグインで実装 HTML5の表現はだんだん増えてくるかと思うので、一
Ajaxで動画をポップアップ｜ウェブユーザビリティ向上を支援するWebsite Usability Info
先に公開したコラム記事「Ajaxによる画像の拡大」で、画像拡大のAjaxポップアップの例として、Highslide JSというライブラリーを使用しました。今回は、このHighslide JSを用いて、動画のポップアップ表示について触れたいと思います。 Highslide JSは個人的にオススメのライブラリーですが、数あるポップアップ用ライブラリー（いわゆる「Lightbox系」と呼ばれているもの）の中では、以下の点で秀逸だからです。 開いたポップアップをドラッグで自由に移動できる。 複数のポップアップを同時に開くことができる。 ポップアップを開いた状態で、背景にあるコンテンツ本文側を操作できる。 キーボード操作によって基本操作（ポップアップを開く/閉じる、など）ができる。 そこで今回はAjaxポップアップの応用例として、このHighslide JSを使って、YouTube上にある動画を扱っ
Webサイトをスライド化する·SiteFlow MOONGIFT
通常、Webサイトは縦に長くなる傾向がある。そのため縦書きの文字はほとんど使われず、横書きで下へ、下へ伸びていく。そのため、あまりページが長くなるとページネーションとしてページを区切って読み進めるようになっているのが一般的だ。 Webページをスライド化して読みやすくする だがこのページネーションは果たして便利な機能だろうか。都度マウスでクリックしたりするのが面倒だし、縦長のページを移動するのも大変だ。そこでSiteFlowが登場した。 今回紹介するオープンソース・ソフトウェアはSiteFlow、Webサイトの可読性、操作性を向上するJavaScriptライブラリだ。 SiteFlowはJavaScriptで提供されるソフトウェアで、ブックマークレットとしても動作する。主な機能は二つで、一つはページ内の移動に関する機能で、もう一つはページネーションに関係する機能だ。ページ内の移動処理では、C
ブラウザのCSS3、HTML5絡みの対応が一発で分かるようにできるライブラリ「Modernizr」:phpspot開発日誌
ブラウザのCSS3、HTML5絡みの対応が一発で分かるようにできるライブラリ「Modernizr」 2009年07月07日- Modernizr ブラウザのCSS3、HTML5絡みの対応が一発で分かるようにできるライブラリ「Modernizr」 ライブラリを使って、Canvas、opacity、Multiple backgrounds といったCSS3やHTML5の機能に対応しているかを簡単に調べることが出来るようです。 Google Ghrome の場合で対応を明示 Firefox 3 の場合で対応を明示 JavaScript では、次のように使えるようです。 if (Modernizr.cssgradients) { alert('対応'); } else { alert('未対応'); } cssgradients の他には以下のようなプロパティが利用可能。 Modernizr.ca
HTMLなどのソースを綺麗に表示するSyntaxHighlighterが2.0になってた
SyntaxHighlighter 以前からソースコードを見せるときはこれを使っていたのですが、バージョンが2になっているのには気づかなかった。２にバージョンアップして、表示が良くなったので、すぐにここでも使えるようにして導入してみた。 なにやら使い方が変わっている 以前はclassともう一つ設定することでsyntaxhighlighterが使えたけど、今回はclassだけでいいみたいだ。でも、デフォルトのままだと文法エラーになる記述が必要のようだ。おまけに以前の設定を全部変えないと使えないというデメリットも。。。 このバージョンアップから、class="brush:js;"のようにしないと使えないらしい。ってことで、以前の状態でも使えるように、こんなスクリプトを最初に読み込ませてみた。 $(function(){ $('pre.js').removeClass().addClass('b
JSでモーダルウィンドウを実装する方法20+ – creamu
「DESIGN LABEL」で、JSでモーダルウィンドウやダイアログボックスを実装する方法がたくさん紹介されています。 ざっといくつかご紹介。 » Prototype Window prototypeフレームワークをベースにしたjavascript » Simple Modal いろいろなタイプのモーダルダイアログボックスを作るjQueryベースのプラグイン » Moodalbox Ajaxで外部コンテンツを表示する。mootoolsを使用 » jqModal マルチモーダルダイアログ（モーダルの中にモーダル）が可能なjQueryプラグイン » Lightwindow pdf、flash、QuickTimeなどのファイルをJSダイアログボックスで開ける » Facebox 画像やdiv、ページ全体を表示するためのFacebookスタイルのlightbox クールなインターフェースが揃ってい
技術系サイトに必需品！ ソースコードは鮮やかに (2/2)
Syntax Highlighterの使い方 Syntax Highlighterを使って構文を強調表示するには、以下の手順で行ないます。 まず、HTMLのヘッダー部分に次のような記述を追加して、Syntax HighlighterのJavaScriptとスタイルシートを組み込みます。 <script type="text/javascript" src="http://インストール先/scripts/shCore.js"></script> <script type="text/javascript" src="http://インストール先/scripts/言語別JavaScript.js"></script> <link type="text/css" rel="stylesheet" href="http://インストール先/styles/shCore.css"/> <link ty
技術系サイトに必需品！ ソースコードは鮮やかに JavaScriptもPHPもHTMLもOK！「Syntax Highlighter」の使い方
Webプログラミング/Webデザインのネタを扱うブログやWebサイトを運営していると、HTMLやCSSなどのソースコードを掲載することが多くあります。そんなときにぜひ活用したいのが、ソースコードを読みやすく表示してくれるJavaScriptライブラリです。今回は、そのうちの1つ、「Syntax Highlighter」の使い方を紹介しましょう。 多くの言語の構文強調表示に対応した「Syntax Highlighter」 HTMLなど各種言語のソースコードをWebページの中で表示するのは、HTMLのpre要素を使えば簡単です。ただ、ソースコードをそのまま表示すると、見た目が分かりやすくはありません。そこで、タグなど言語の特定キーワードに色を付けて、他の部分よりも強調して表示することで見やすくしましょう。 こういった「構文強調表示」を行なうJavaScriptは、いくつか公開されていますが、そ
ソースコードの色づけを行う·Google Code Prettify MOONGIFT
ブログや開発者向けのWebサービスなどで、ソースコードのハイライトを行うケースはよくある。言語があらかじめ決まっている場合は良いが、言語がよくわからない場合や、JavaScriptとHTMLのように埋め込みで複数の言語が重なる場合もある。 各種言語に対応したハイライター そのような、特定の言語に依らずにソースコードをハイライト化したい場合に便利なのがこのライブラリだ。 今回紹介するオープンソース・ソフトウェアはGoogle Code Prettify、JavaScriptによるソースコードハイライターだ。 Google Code Prettifyの使い方は簡単だ。prettify.jsとprettify.cssを読み込んで、<pre class="prettyprint">または<code class="prettyprint">タグの中にコードを書き込めば良い。後はprettyPrint
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]画像だけでなく動画やHTMLコンテンツを拡大表示するスクリプト -Clearbox
11 Syntax Highlighters To Beautify Code Presentation
http://kyosuke.jp/yugajs/index.html
画像やhtmlの内部ウインドウ実装:highslideJS - ウェブユーザビリティ.JP