ASCII.jp：jQueryで自作するフローティングウィンドウ｜Web制作の現場で使えるjQuery UIデザイン入門
「フローティングウィンドウ」は、Webページ本文に重ねて表示し、ドラッグ＆ドロップ操作で移動できる子ウィ ンドウのことです。といっても、ブラウザーの画面内にウィンドウのように表示するだけですので、ブラウザーやウイルス対策ソフトのポップアップブロック機能に規制されることもありませんし、追加的な情報を元のWebページのレイアウトを崩さずに表示できるメリットがあります。 基本のフローティングウィンドウを作成する 今回は、「フローティングウィンドウを表示」のリンクをクリックするとフローティングウィンドウを開くWebページを作成します。開いたウィンドウはドラッグ＆ドロップ操作でページ内を自由に移動でき、右上に配置した「×」ボタンで閉じられます。 まず、以下のようなHTML／XHTML（以下、HTML）を用意します。リンクのテキストをa要素で包み、class属性に「open」を付けます。このa要素は、
jQueryでiPhone風スライドパネルを作ろう (2/5)
左右にスライドするパネルを作る jQueryを使ってスマートフォンサイトで活用できる実用的なスクリプトを作成します。最初に作るのは、iPhoneでおなじみの「左右にスライドするパネル」です。 iPhoneの設定画面で項目を選ぶと、画面が左方向にスライドして、代わりに次の画面が右から表示されます。このとき、画面の上部には左向きの矢印ボタンが表示され、矢印ボタンをタップすると逆には右方向にスライドして元の画面に戻ります。こうしたスライドの動きによって、直感的で分かりやすいUIを実現しています。 まず、目次部分のHTMLを用意します。 <div id="index" class="iPhoneBody panel active"> <div class="iPhoneHead"> <h1>スライドパネルを作る</h1> </div> <h2 class="iPhoneListTitle">実践！
JavaScriptで振り分けてスマホサイト完成！ (2/5)
電話番号にリンクを設定する 続いて、ページ内に記載した問い合わせ用の電話番号にリンクを設定しましょう。といっても制作中のページをiPhoneで閲覧すると電話番号の部分にはすでにリンクが張られています。この状態で番号部分をタップするとすぐに通話アプリが起動して電話がかけられます。iPhoneはページ内に電話番号らしき数字の組み合わせを見つけると自動的にリンクを張ってくれるのです。しかし、この自動リンク機能は便利な反面、問題点もあります。 ・iPhoneでしか利用できない 自動リンク機能はiPhoneにしか搭載されておらず、Androidではリンクが張られません。 ・認識が不正確 自動リンク機能は数字の羅列とハイフンの組み合わせなどを解析してリンクを張っており、必ずしも解析が正しくない場合があります。たとえば、次のような電話番号ではない数字を誤って認識してしまう場合があります。 そのため、基本
11インチMacBook AirにWindows 7をインストール！ (1/3)
今のMacならMac OS X付属のユーティリティ「Book Camp」を使ってWindows 7が動く！ ということでMacBook Airにもインストールしてみました 史上最軽量となる11インチモデルが追加されて話題を集めているMacBook Air。既存のMacユーザーだけでなく、現在、Windowsを使っている人でも「欲しい！」と物欲を刺激されている人も多いはず。 そのWindowsからの乗り換えで気になるのが、MacでWindowsを動かす「Boot Camp」の存在だろう。第1弾「11インチに絶賛の嵐 MacBook Airがやってきた！」、第2弾「フラッシュストレージが速い！ MacBook Airを徹底ベンチ」に続き、MacBook Airレビューの第3弾では、Windows 7を使う方法をまとめた。 MacでWindows 7を動かすには？ 実はMacでWindowsを使
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
