特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
初心者でも分かる！モーダルウィンドウの作り方
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
parallax.js
WOW, that's deep man! parallax.js reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene... Oh, you don't have a smart device? No worries, if no gyroscope or motion detection hardware is available, parallax.js uses the position of your cursor instead. Radical. This project is a collaboration between Matthew Wagerfield & Claudio Guglieri.
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
JSで要素の表示の切り替えをした時にリロードしても状態を維持する - WebDelog
下記のように、Javascriptを使って要素の表示を切り替えて、 非遷移のページを作成する場合があると思います。 Demo 2011-08-07 1st - jsdo.it - share JavaScript, HTML5 and CSS これはCSSのプロパティDiplayをリンクをクリックした際に切り替えているだけですが、 ユーザにとっては画面の遷移が無いのでとても快適ですよね。 ただ、あくまでCSSを切り替えてDivを表示させているだけなので、 うっかり更新ボタンを押してしまったりすると、 初期の画面の状態に戻ってしまいます。 (上記の場合だと最初のリンクだけが表示されている状態) これによって普段と違う動作に利用者が混乱してしまうことがあるかもしれません。 今回はこれを解決します。 解決法 クリックしたときにURLにハッシュが付加されるようにaのhrefを以下のように編集します
要素の高さを揃える超軽量なjQueryプラグインjquery.tile.jsを公開 | URIN HACK
使用方法１―全ての要素の高さを揃える 指定した複数の要素の高さを、その中の最大の高さに揃えます。 各要素の幅が同じであれば、各要素のサイズ（高さ・幅）は全て同じになり、タイル状に要素が並びます。 各要素に対してheightを指定する必要はありません。 javascriptサンプル tile-sample1というclass属性を持つ要素の高さを、その中の最大の高さで揃えるには、以下のように記述します。 1 $(function(){ 2 $(".tile-sample1").tile(); 3 }); 実行結果 使用方法２―同じ行にある要素の高さを揃える タイルの列数を指定して、同じ行に並ぶ要素の中で最大の高さに揃えます。 javascriptサンプル tile-sample2というclass属性を持つ要素が横に４つ並んでいるとき、横に並んだ要素の高さを各行毎に揃えるには、その列数（＝４）を
神戸・阪神間｜家 新築 マンション 戸建｜TC神鋼不動産株式会社
企業理念 私たちは総合生活関連企業として、 信頼性と安定性のある商品・サービスを提供し、 お客さまに夢と希望と笑顔をお届けする 「スマイルライフカンパニー」を目指します。
jQuery基礎文法最速マスター[to-R]
jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri
![jQuery基礎文法最速マスター[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
meca.js
meca.jsとは meca.jsはマークアップエンジニアのコーディングを補助するためのjavascriptです。画像のロールオーバーやIE6の透過png対応などを実装しており、それぞれの機能を簡単にon/offできるので、使わない機能は無効にしてたりできます。その他にも、ターゲットになる要素のセレクタを設定でたりするのである程度柔軟に対応できます。（→元エントリー） 使い方 jQueryとmeca.jsを読み込みます。meca.jsの一番上の方に設定を書いてあるところがありますので、そこを自分の好きな設定に書き換えて下さい。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="meca.js"></script> ページ毎に設定を変更する meca.js本
PhotoshopでのWeb制作効率を向上させる「JSX」とは
ご存じの方もいらっしゃると思いますが、Adobe Photoshop は JavaScript で制御することができます。 Photoshop 用の JavaScript ファイルのことを「JSX」と呼びます。拡張子は .jsx です。 Photoshop を使ってWeb制作されている方は多いかと思いますが、Photoshop は本来写真加工用のソフトでありWebデザイン用のソフトではないため、特にレイアウト機能が Fireworks、Illustrator、InDesign などに比べ貧弱です。 しかし、JSX を使用することにより Photoshop のレイアウト機能やWeb制作向けの機能をある程度向上させることができます。 JSX は昔から Photoshop に搭載されていましたが、書き方の参考になるような書籍やサイトが少ないためかそれ程注目されていなかった気がします。 しかし、最
ページ内の印刷ボタンが押された時だけprint.cssを適応する « JavaScript « Snippet-Editor.com
$(document).ready(function(){ $(".printer").click(function(){ $("body").addClass("print"); window.print(); var timeout = setTimeout(function(){ $("body").removeClass("print"); }, 1000); return false; }); }); Webページを印刷するとき、画面に表示されているそのままを印刷したいと思うか、印刷用に整形された状態を欲しいと思うかは、ユーザーによってまちまちです。 上のjQueryプラグインを使うことで、ブラウザのメニューバーから「印刷」を選んだ時と、ページ上の印刷ボタンから印刷を実行した時で、別々の出力結果を得ることが出来るようになります。つまり、前者は見たままに、後者は整形されて印刷されま
selectボックスをシンプルなプルダウンに拡張するjQselectable(jQuery.selectable.js) :: 5509
セレクトボックスのユーザビリティを劇的に向上できるかもしれないjQueryプラグインです。バージョンアップでjQuery.selectable.jsからjQselectableに名前が変わりました。 サンプルを見てみる トピックス 特徴 ダウンロード 導入方法 スタイル 拡張 表示形式 selectable simpleBox エフェクト 透明度 プルダウン位置の調整(少し高度な設定) プルダウンの高さ カスタマイズ 独自のselectボックスに適用させる id、classの引継ぎ 日付で使う Callback関数を使う 動的にselect要素のDOMを書き換える場合（rebuildメソッド） サンプル 更新履歴・追記 動作環境 特徴 selectボックスの選択ってイライラしないですか？jQselectabeを使えば解決できるかもしれません。以下が主な特徴になります。 セレクトボックスの鬱
jQueryでもっとフォームを使い易くするプラグインのまとめ
本を買わずに解決するWeb制作の小技 ホームページ作成でちょっとしたことを参考書を買わずに解決する方法をPHP CSS Webデザイン jQuery Flashを中心に便利な技をまとめていきます！現在、長野県長野市の制作会社でWeb作成中！ Webサイトでフォームは大事ですよね。 使いにくかったり、分かりにくかったり、入力多ってなったり したら離脱しますよね。 そこで使い易いフォームに改善できるjQueryのプラグインをまとめました。 フォームに先に何を入力するかを入れておいてフォーカスされたら 消すとか必要な時だけにヘルプを表示させるなどフォームをもっと 分かりやすくするライブラりが紹介されてます。 あなたのWebを入力しやすくするjQueryプラグイン10選 チェックボックスやラジオボタンを見映え良く 【1】「Checkbox」 ドロップダウンの領域を節約し見映え良く 【2】「comb
iPhoneでiframeのようにスクロール
知人から、 ・ヘッダーとフッターは固定で表示 ・PCでもiPhoneでもiframeのようにスクロールバーでコンテンツ部分をスクロールさせたい という相談を受けたので、iframeで良いのでは？と思ったけど、iPhoneでは「iframeは非推奨」との事。 なのでいつも通り、Google先生に聞いてみたところ良いJavaScriptライブラリがあった。 Dragdealer JS ブログ：http://blog.ovidiu.ch/dragdealer-js ドキュメント：http://code.ovidiu.ch/dragdealer/ このライブラリで出来る事は、スクロールバー・写真のスライドショー・コンテンツをドラッグでスライドなど。 IEでもSafariでもiPhoneのSafariでも問題無く動作しました。 使いかたは簡単。今回は知人の要望通り「スクロールバー」を実装してみる。
IEやiPhoneでも問題なく動作・ドラッグやスクロール等、多方面で応用出来るjsライブラリ・Dragdealer JS - かちびと.net
なかなか使い勝手が良さそう だったのでメモ。スクロールバー や、コンテンツスライダーなど、 多方面で応用の効くjsライブラリ、 Dragdealer JSのご紹介。 IE6、7、8や、iPhoneでも動作を確認しましたが、何の問題も無く動いてくれますよ。 ↑ 上図はスクロールバーに使用した例です。動作も凄くスムーズです。Flashでよく見かけますね。 ↑ 文字の拡大をドラッグで実装。 ↑ 斜めに移動するコンテンツスライダーにも応用できる。 ↑ こちらではコメント送信に使っています。ユニークですね。 iPhoneでは全てフリックで動作します。 IE6とか7がだいたいネックになるのでどのブラウザでも実装できるjsはいくつ覚えておいても損なさそうですね。加えてiPhoneなどでもスムーズに動いてくれるのでなかなか使えそうです。以下で動作をご確認下さい。 Dragdealer JS
さくらのレンタルサーバ
レンタルサーバなら「さくらのレンタルサーバ」！ 月額換算でわずか131円、缶ジュース1本分のお値段で使える格安プランから、ビジネスにも使える多機能＆大容量プランまで、 用途と予算に合わせてプランを選べます。 さらにマルチドメイン対応でメールアドレスも無制限。無料ウイルススキャンや無料電話サポートもあるので安心して ご利用いただける共用レンタルサーバサービスです。
jQuery – チェックボックスがチェックされたらスタイルを変更する | 1：n – DETELU Blog
なんか久々にjQueryを触りました…。 セレクタ（属性フィルタ）に変数の値を利用する場合の記述を試したんですが、1.3.1はセレクタまわりが変更になっているからなのか、IE6,7、FirefoxでOKだったのですが、safariが動作せず。 で、ちょこっと調べてみると jQuery 1.3系からはsafari2は対応してないと。そういうことですか…。 jQuery: » jQuery 1.3.1 Released ブラウザーのシュアの問題で対応をはずしてるみたいですね。しかし下記ページを見てsafari3.xが6%近いシェアがあるってのでびっくり。safariってそんなにも使ってる人いるんですかね？ Browser market share まあ一応safari2.xもOKなように1.2.6を使っておきました。 作ったものはというと、チェックボックスにチェックをした時に文字のスタイルを変
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Facebook広告 運用代行 | 株式会社グラッドキューブ
https://simplesimples.com/web/markup/javascript/flexcroll/
jQuery ドロップダウンメニュー | CSS Lecture
http://www.designwalker.com/2010/06/jquery-forms.html
