ASCII.jp：jQueryによるLightbox風モーダルウィンドウの作り方｜Web制作の現場で使えるjQuery UIデザイン入門
HTMLとCSSによる表現を考える 複数のサムネイル画像を並べておき、画像をクリックするとモーダルウィンドウで拡大画像を表示するWebページを作成します。はじめに、HTML／XHTML（以下、HTML）とCSSでどのようにモーダルウィンドウを表現するか、静的なページを作って考えてみましょう。 HTMLは、ul/li要素で並べたサムネイル画像の後に、「glayLayer」と「overLayer」というid属性をつけたdiv要素を配置します。glayLayerはページ全体に重ねる半透明のレイヤーを表示するための要素で、overLayerは子ウィンドウを表示するための要素です。子ウィンドウに表示したい要素（今回はimg要素）はoverLayer内に配置します。 ▼サンプル01（HTML部分） <h1>jQueryを利用したモーダルウィンドウの作成</h1> <ul> <li><a href="i
iframe対応！初めてのFacebookページの作り方 (1/4)
Facebookを企業で活用するために、Facebookページの開設・運用方法を解説する本連載。第1回では、Facebookページの概要と基本的な機能について、事例を挙げながら紹介しました。今回はASCII.jp Web ProfessionalのFacebookページを例にとって、Facebookページの作成方法を具体的に解説しましょう。 さっそくですが、完成したWeb ProfessionalのFacebookページを紹介します。 Web Professional編集部では、「固定読者を育てることで媒体価値をアップさせる」ことを目的にFacebookページを開設しました。「いいね！」をしてくれたユーザー（ファン）に対して、ニュースフィードを通じて最新情報を提供し、ウォールによる記事へのフォードバックや、ファンの友人を通じた潜在的な読者へのリーチも狙います。Web Professiona
jQuery＋CSSによるカルーセルパネルの作り方 (1/3)
「カルーセルパネル」は、画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるUIです。Amazonの「この商品を買った人はこんな商品も買っています」で利用されているので、名前は知らなくてもご存じの方は多いでしょう。カルーセル（Carousel：回転木馬）は、メリーゴーラウンド（merry-go-round）のことで、パネルをスライドしていくと一周して元のスライドに戻ることから「カルーセルパネル」と呼ばれています。今回はjQueryでカルーセルパネルを作成する方法を解説します。 HTML/CSSでカルーセルのベースを作成する 今回作成するカルーセルパネルのHTML／XHTML（以下、HTML）は次のようになっています。カルーセル全体を囲むdiv要素を配置し、id属性に「carouselWrap」を設定します。div要素の内側にはパネルを左方向にスライドさせる「戻る」ボタン用のp
Dreamweaver CS5.5でスマホアプリ作ってみた (1/3)
たった1年で新バージョンの登場となったDreamweaver（関連記事）。5月下旬発売の「Dreamweaver CS5.5」はCS5からのアップグレードでも1万5750円という価格設定に驚かされる。だが、ベータ版を触って価格以上に驚いたのがスマートフォン対応機能の“本気度”だ。 Dreamweaver CS5.5では、オープンソースのJavaScriptフレームワーク「jQuery Mobile」をテンプレート的に利用することで、iPhoneやAndroidに最適化されたスマートフォンサイトをわずか数ステップで作れてしまう。jQuery Mobileは、iPhone/Android/Windows Phone/BlackBerryなどで利用できるクロスプラットフォーム設計のフレームワーク。以下のようなシンプルなスマートフォンサイトなら、PhotoshopもFireworksも使わず、Dr
iPhoneを携帯サーバー化！ ServersManを試す (1/3)
フリービットが4日に公開したiPhoneをサーバー化するアプリケーション「ServersMan@iPhone」（iTunes Storeで見る）。このアプリを使えばiPhoneをサーバーとしてネットワークに公開して、パソコンなどとデータをやりとりできるようになる。 通信経路は3G／無線LANの両方に対応しているため、極端な話、海辺でも山の中でもケータイの電波が届いていればアクセスが可能。サーバーというと、専用ルームに収められたデカいデスクトップマシンを想像しがちだが、ServersMan@iPhoneとiPhoneを使えば「持ち歩ける」ほどコンパクトになるわけだ。 そんなにスゴそうな機能を備えているのに無料で使えるのは驚き。それにiPhoneをサーバー化できるってだけで、なんだかいろいろと可能性を感じさせるじゃないですか！ 早速、編集部でiPhoneにインストールして使ってみました。 「ど
絶対見ておきたい有名企業のスマホサイトまとめ (1/5)
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。
美人すぎる理系アーティスト・スプツニ子さんはなぜ歌う？ (1/9)
※編注:文章中に一部性的な表現がありますが、アーティストの作品との関係からそのままの表記となっております。予めご了承願います。 ルー・リードの妻でもあるメディアアーティスト、ローリー・アンダーソンのJ-POPバージョンを目指すという「スプツニ子」さん。彼女はマシンを作り、プログラムを書き、そしてネットに自作の音楽も投稿する、新しいタイプのアーティストだ。 1985年生まれで、現在はロンドン在住。日本人の父、英国人の母を持ち、両親はともに数学者だ。自身もロンドン大学のインペリアル・カレッジで数学を専攻し、現在はロイヤル・カレッジ・オブ・アートの大学院で勉強している。 2009年には、メディアアートの世界的イベント、アルスエレクトロニカで、セザール原田さんとの共同作品「Open_Sailing」がゴールデン・ニカ賞を受賞した。 ▲ 右側でプレゼンテーションしているのが尾崎ヒロミ(スプツニ子)さ
スマートフォン対応サイトの作り方、教えます (1/3)
「WebサイトをiPhoneやAndroidで見やすく表示したい」「スマートフォンをターゲットにしたWebサイトをデザインしたい」――そんなWeb制作者のための新連載がスタートします。PCサイト制作のノウハウさえあれば、「モバイルサイトは未経験」でも大丈夫。スマートフォン（iPhone/Android）向けサイト制作の基礎知識から実践的なテクニックまで、H2O Space.のたにぐちまことさんが解説します。（編集部） iPhoneの快進撃とiPhone 4の登場、Android端末のXperiaとDesireのヒット、au初の国産Android端末「IS01」の発売――と、スマートフォンの勢いが止まりません。いまや一部マニアやビジネスマンにとどまらず、女性やお年寄りなどの幅広い層にまでスマートフォンの利用は広がり、「1台目の携帯電話」として購入する人も珍しくなくなりました。 PCとの連携、
荻窪圭の“這いつくばって猫に近づけ”
2023年04月26日 12時00分 第813回 神社でくつろぐ猫を「10倍ズームレンズ＋猫優先AF」を使って離れた所から撮る 前回に引き続き、キヤノンの「EOS R8」に「RF24-240mm F4-6.3 IS USM」という高倍率ズームレンズを装着して猫を撮ってきた、という話。しかも、またもや“神社猫”である。神社で猫に遭遇してしまったのだからしょうがない。 2023年04月19日 12時00分 第812回 発売したてのキヤノン「EOS R8」と10倍ズームレンズを持って休日の神社猫を撮る うちから徒歩だと遠くて行く気にならないけど、自転車ならそこまで気合いを入れなくても行けるかな、という微妙な距離感のところに、とある神社がある。2018年の冬のこと、たまたま夕方に休憩がてら立ち寄ったら、数匹の猫がのんびりと過ごしてて、毎日世話をしているというおじさまが猫を撫でながら座り、のったりし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門