[JS]機能も充実、設置も簡単、デザインも素敵！モーダルウインドウを実装する超軽量のスクリプト -Pop Easy
Google Maps Pop Easyの使い方 使い方は非常にシンプルです。 Step 1: 外部ファイル スクリプトを</body>の上あたりに、外部ファイルとして記述します。 <script type='text/javascript' src='js/jquery.modal.js'></script> <script type='text/javascript' src='js/site.js'></script> Step 2: HTML 最低限必要なHTMLの構造は、こんな感じです。 L.1がトリガー、L.2がオーバーレイ用の空div、L3-6がモーダル内のコンテンツです。 <a class="modalLink" href="#">Click Me</a> <div class="overlay"></div> <div class="modal"> <a href="#"
faviconに数字のバッジを付けられるJavaScript「Tinycon」｜skuare.net
twitter facebook hatena google pocket faviconに数字を乗せられると新着記事数や日付など様々なお知らせをお知らせすることができます。 tommoor/tinycon - GitHubはそんなJavaScriptです。 sponsors tommoor/tinycon - GitHubからファイルをダウンロード。 <script type="text/javascript" src="tinycon.js"></script> <script> (function(){ Tinycon.setBubble(2); //()内の数字が表示されます。 Tinycon.setOptions({ //オプション width: 7, //幅 height: 9, //高さ font: '10px arial', //フォント colour: '#ffffff'
画像、動画、Flash、HTMLなどをオーバーレイ表示させるJavascript「Lightview」｜Webの道草
LightviewはLightbox2と同じように画像などをオーバーレイ表示させます。しかしLightviewの利点は画像だけではなく、動画、Flash、HTMLなどのさまざまなファイルをオーバーレイ表示させることが可能です。設置も簡単なのでおすすめです。 追記：現在Lightviewは商用・非商用に関わらずライセンスの購入が必要となっています。 準備 ファイルのダウンロード Lightviewのページからダウンロードします。 Javascriptの読み込み CSSの読み込み 使用方法 Lightviewの適用 「class="lightview"」を追加します。 My image イメージギャラリー 「rel="gallery[mygallery]"」を追加します。 Image 1 Image 2 タイトルと説明 「title="タイトル :: 説明"」を追加します。 Leopard G
Lightview “Overlay anything width style”
Lightview allows you to easily create the most beautiful overlay windows using the jQuery Javascript library. By combining support for a wide range of media with gorgeous skins and a user-friendly API, Lightview aims to push the Lightbox concept as far as possible. Lightview uses HTML5 to help you deliver the best experience across every browser. Let it enhance your media automatically or create c
SimpleViewerの設置方法とカスタマイズ（iPhone、Android対応FLASHギャラリー） - digilog.blog
このエントリーでは、誰でも簡単にフォトギャラリーを設置できるオープンソース、「SimpleViewer（シンプルビューアー）」の解説を行っています。 SimpleViewerを使うと、自分のWebサイトに写真や画像を一覧表示させるギャラリーを簡単に設置することがでます。また、見た目や表示方法をカスタマイズできる豊富なオプションが用意されており、配布元は英語ですが、画像の説明文に日本語やHTMLタグを使うこともできます。更にiPhoneなどのスマートフォンに対応しているのでタッチスクリーンでも快適に操作できます。 おかげさまで沢山の方からお問い合わせを頂いておりますが、SimpleViewer自体が度々アップデートを行っているので、どうしても古いバージョンの説明では不十分な箇所が発生してしまいます。あらかじめご了承下さい。 分からない部分があって、なるべく早く返事が欲しい方は直接メールフォー
初心者さんのためのWebサイト制作に役立つリンク集
2017年6月29日 Webサイト制作 「Webサイト勉強するのにおすすめのサイトを教えてください！」との声が多いのですが、日本のWeb関連チュートリアルサイトをあまり見たことがなかったので、今までおすすめできませんでした…。ということでちょっとググって初心者さんによさそうなサイトをいくつか紹介します。小難しい単語が並んであるようなサイトは避けているつもりですが、わかりにくかったらすみません。他にもおすすめサイトがあればぜひコメント欄にて教えてください！ ↑私が10年以上利用している会計ソフト！ Webサイトを作る流れ まずはWebサイトを作る目的を考える 誰のため？何のため？Webサイトを作り始める前に。 サイトマップと呼ばれる構成図を作成 Webサイトの構成図を簡単に作れる便利ツール ワイヤーフレーム（Webサイトのレイアウト）を作成 Webサイトの骨組み: ワイヤーフレームを素早く・
フォントサイズを変える「大・中・小」ボタンを実装する方法
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。 CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し
dwa-net.com - dwa net リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
【インフォシーク】Infoseek ： 楽天が運営するポータルサイト
日頃より楽天のサービスをご利用いただきましてありがとうございます。 サービスをご利用いただいておりますところ大変申し訳ございませんが、現在、緊急メンテナンスを行わせていただいております。 お客様には、緊急のメンテナンスにより、ご迷惑をおかけしており、誠に申し訳ございません。 メンテナンスが終了次第、サービスを復旧いたしますので、 今しばらくお待ちいただけますよう、お願い申し上げます。
[php + js]読み終えたページによって登場人物紹介ページの内容を変える
質問サイト見てたら面白いネタを発見！ 私は今、長編小説をHPに公開しようと思っています。 キャラクター紹介のページを作ろうと思っているのですが、 読んだ読者さんによって表示される内容を変えたいのです。 例えば第一章で登場するAとBというキャラがいたとします。 読者さんが第一章を読んだらキャラ紹介のページにAとBのキャラクターの紹介が加わる。 という形にしたくて、cookieを使用しようと思うのですが、 なにぶんこのような操作ははじめてでしてどうしたらよいのかわかりません。 各章の最後のページにクッキーを食べさせるjavascriptを書いて、 キャラ紹介のページでクッキーを読み込み、キャラの説明文を表示したいです。 物語が進むにつれて、他キャラが増えたり、説明文に追記が加わるようにするにはどうしたら良いでしょう。 cookie使用があまりなく、調べましたがよくわかりませんでしたので詳しく教
![[php + js]読み終えたページによって登場人物紹介ページの内容を変える](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
towano.net - towano リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
[JS]セレクトボックスにアイコンを配置してグラフィカルにするスクリプト -image combobox
セレクトボックスの各アイテムにアイコンを配置して、グラフィカルに認識しやすくするスクリプトをMarghoob Sulemanから紹介します。
bookreader.js
bookreader.jsは、長文を縦スクロールではなく、横スクロールで表示し読みやすくするJavaScriptライブラリです。 →プロジェクトのホーム (Google Code) - New!! →ダウンロード(ver 0.4.6) - 2009/04/18公開 ※ダウンロードの詳細については、こちらのページをご覧下さい。 まずは、このページで体験してみて下さい。キーボードの[→]/[←]キーが、「進む」あるいは「戻る」に対応します。画面上に表示される、半透明の▶/◀ボタンをクリックしてもOKです。使い方の詳細は「ヘルプ」を参照ください。 次期バージョンの開発状況 幸いにしてさまざまな方からフィードバックをいただきました。ありがとうございます。それを元に機能の絞り込みとWEBサイトへの「組込み方」について検討を行っています。まだ、実装の方針が定まった、という段階ですが次期0.8.x系のサ
Nice Entry
「Nice Entry」はブログに組み込んで、読者から「良かったよ！」というメッセージを受け取るためのツールです。 指定のソース(JavaScript)を組み込むと、ブログのエントリータイトル横に「」のようなアイコンが表示されます。読者がこのアイコンをクリックすると、電球アイコンの横に「」のような goodアイコンが追加されます。 goodアイコンはいくつでも付けてもらえます。 「はてなスター」とほとんど同じサービスのように見えますが、本サービスはログイン等の必要は無く、誰でもマークを付ける事が出来ます。 「Ｗｅｂ拍手」も誰でも拍手を送れますが、本サービスは画面遷移しないので、読者のブログチェックを妨げません。 また、「Nice Entry」設置にユーザー登録は必要ありません。ソースをお持ち帰りいただき、ご自分のブログに設置するだけで使えます。
これは驚きの、どんな画像もジグソーパズル化してしまうJavaScript「snapfit.js」:phpspot開発日誌
これは驚きの、どんな画像もジグソーパズル化してしまうJavaScript「snapfit.js」 2009年03月19日- snapfit.js (javascript jigsaw puzzle functionality for images) これは驚きの、どんな画像もジグソーパズル化してしまうJavaScript「snapfit.js」。 JavaScriptだけでこんなことが簡単なの？と、最近はJavaScriptでもいろんなことができるから驚かなくなってきたんですが、これはたまげました。 画像があったとします。 どんな画像もパズル化しちゃいます。 パズルの難しさも選べます。 ハードレベルはかなり難しそう・・・ 使い方） 1) スクリプト読込み <script type="text/javascript" src="snapfit.js"></script> 2) imgのonl
CSS-EBLOG - (X)HTML+CSS/JavaScript Tips site.
デザインを体感して学べるデザインブログです。Illustrator（イラレ）やPhotoshop（フォトショ）の使い方やWordPressやSWELLのCSSやJavaScriptカスタマイズやアフィリエイトまで読むだけで楽しめる情報を発信しています。
WordPress で「続きを読む」の折りたたみ Web2.0
WordPress で追記文章を書いた時、「続きを読む」のリンクをクリックすると、スライドダウンで本文下に続きを表示するカスタマイズをご紹介します。 １．特徴 JavaScript エフェクトライブラリ script.aculo.us（スクリプタキュラス）を利用し、「Read more（続きを読む）」のリンクをクリックすると追記文章をスライドダウンで表示します。 JavaScript が無効の場合は記事ページにジャンプします。 「Hide more（続きを隠す）」リンクは追記文章の前後に表示されますので、長い追記文章でも折りたたみやすくなっています。 スクリプタキュラスのライブラリを編集せずに、折りたたみ速度の変更が可能です。 ２．サンプル 以下にサンプルを作りましたので、動作をお試しください。折りたたみ速度は0.5秒に設定しています。 追記文章の折りたたみ 2.0 サンプル ３．Word
代替スタイルシート切替JavaScript
概要 HTML文書の代替スタイルシートをMSIEで切替・閲覧できるようにする外部JavaScriptファイルです。MSIE 5.05.5以上やMozillaなどのブラウザでJavaScriptが有効な場合、恐らくこのページの右上にスタイル切り替えのためのフォームが見えると思いますので、動かしてみてください。一度選んだスタイルはクッキーに保存され、次回訪問時に再び適用されます。 代替スタイルシートの詳細については以下のページをご覧ください。 HTML 4.01仕様書の外部スタイルシートに関する項とその邦訳 title属性をつけてスタイルシートを読み込む場合の注意点(もじら組) 動作環境 MSIE 5.5、Mozilla 1.0、Opera 9で動きます。MSIE 5.0、NN4では動きません。Opera7、Safariでも動くかもしれませんが、正確には動きません。 利用許諾 いわゆるX11ラ
IE6でabbr要素を使えるようにする - mayokara note
元ネタはie7-js。JavaScriptを無効にしていると機能しません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>ie6-abbr-fix</title> <!--[if lt IE 7
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]ブラウザのサイズに合わせてスタイルシートを変更する方法