いますぐ使えるCSS3テクニック集！ コピペ用サンプル付き！
面白法人カヤックがサイトリニューアル！ いきなり手前みそで恐縮ですが、今年の夏、面白法人カヤックがコーポレートサイトを2年ぶりにリニューアルしました。 「世界一更新頻度が高く、カヤックの活動がひと目で分かるコーポレートサイト」をコンセプトに、可読性が高く容量も軽いサイトに仕上げました。 ひと目見るだけで、最近のカヤックの動向が分かるようにニュースでTOPページを構成し、日々リアルタイムにカヤックの最新の情報を発信します。 技術的には、ブラウザのウィンドウサイズによって拡縮する画像はベクターファイルであるSVG（Scalable Vector Graphics）画像で置き換えたり（SVGはベクトル形式の画像のため、拡大してもボケない）、CSS3を用いることで画像の使用を極力控えたりするなど、ページの軽量化を実現しています。 カヤックサイトのCSSテクニックを丸ごと伝授！ 本稿では、サイトリニ
スマフォサイトでよく見るパーツのコードサンプル集 | 07design.blog
最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。 すべてのデモ（chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください） download ヘッダーの右にメニュー <h3>ヘッダーの右にメニュー</h3> <!--ヘッダーの右にメニュー--> <header class="header1"> <h1><a href="#"><img src="title.png" alt="SIT
HTML5サンプル集 - 株式会社あゆた
このページでは、HTML5のAPIを利用した簡単なサンプルを公開しています。 このサンプルの多くは、弊社技術顧問の白石氏がマイコミジャーナルに寄稿した記事で使用したプログラムを元に、多少の改変を加えたものです。 どれも非常にシンプルなものではありますが、HTML5の各機能を試すためのとっかかりとしてご利用頂けると思います。 白石氏が寄稿した記事はこちらになります。これらの記事と合わせてサンプルをご利用になって頂く事で、各機能の理解がより深まることでしょう。 詳解! HTML 5と関連APIの最新動向 - 新タグ&API編 詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 アプリケーションキャッシュのサンプル (ダウンロード) (Safari4、Google Chrome3で動作確認済み。Firefoxだと、アプリケーションキャッシュのイベントが正しく発生せず、動作しないと
CSSの実装状況で変わるボックスのデザイン方法
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
デザインに役立つ美麗サイトデザイン集やロゴデザイン・写真集:phpspot開発日誌
PHPからOffice・Photoshop・PDF等の各種ファイルを操作するためのライブラ... 次の記事 ≫：アプリケーションを有無を言わさず終了させるAlt+F4の強力版が使える... 最近話題になった、デザインに役立つ美麗サイトデザイン集やロゴデザイン・写真集をまとめてみました。 沢山にあるのですが、参考にできそうなものばかりです。 サイトデザイン・サイトの特定部分のデザイン集 15 Creative WordPress Header Designs | Web Design Tutorials | Creating a Website | Learn Adobe Flash, Photoshop and Dreamweaver クリエイティブなWordPressのヘッダーデザイン集。どれもインパクト大なものばかり 25 Inspiring Examples of Sign-Up P
jQueryのサンプルTOP10 – creamu
MyPHPDuniaというサイトで、jQueryのサンプルTOP10がまとまっています。 かなり使えるものばかりな感じですね。 » スライドタブボックス » Appleのサイトで使われているようなメニュー » 画像をズーム » 画像の上にスライドするキャプション » メニューの背景にスライドする画像 » タブで画像を切り替える » メニューにフェード効果 » アコーディオンメニュー » タブによるコンテンツ切り替え » タブメニュー 詳しくは以下からどうぞ。ソースコードもダウンロードできますね。 » Top 10 Jquery Examples with Live Demos わいわいと飲み会。超たのしかったぞ。
公開APIを利用したサンプルサイトを作っていくよ
新着記事一覧 2011/06/18 : 「allow_url_fopen=Off」の環境にて 2009/03/13 : Google AJAX Feed API 2009/02/27 : Twitter API 2009/02/24 : flickr API 2009/02/14 : JugemKey Web ad Fortune 無料API 2009/02/08 : 公開APIリンク集1-サムネイル系API 2009/02/06 : サムネイルAPI 2009/02/04 : Mozshot 2009/02/02 : HeartRails Capture 2009/01/30 : SimpleAPI ウェブサイトサムネイル作成API 次のページへ＞＞ 公開API活用ガイドの第4章のサンプルや、その他のサンプルにおいて、「simplexml_load_file()」関数を使っているコードが
JavaScriptでHTMLをダイナミックに書き換える 前編
もともとは存在しなかったタグ要素を新たに追加したり、変更、削除するテクニックを学ぶ。こうした処理ができるのはDOMならではの魅力だ。 旧来のDHTMLの手法では、JavaScriptから操作できるHTML要素には限りがありましたが、DOMでは、HTML上のありとあらゆる要素を自由自在に読み取ったり、書き換えることができるようになります。本連載では、主にDOM Level 1で規定されている手法を使い、JavaScriptでどのようにHTML上の要素へアクセスするのか、そして、それをどうやって書き換えるのかを詳しく解説します。これにより、JavaScriptからHTML要素を手に取るように操れるようになります。 DOMスクリプティングでは、HTMLをJavaScriptから自由自在に書き換えられる点が大きな魅力です。これまで、HTMLに存在する要素の参照方法や属性の扱い方を学んできましたが、
「MySQL」と「PHP」を連携させたデータベースサンプル < ドメインキーパー
「MySQL」と「PHP」を連携させたデータベースサンプル こちらのページでは、お客様サイト内にMySQLとPHPを使用したデータベースをphpMyAdminというデータベース管理ソフトを使用して、導入されるまでの手順をサンプル用データベースの作成を例にご紹介させて頂いております。 データベースの作成 まず、MySQLデータベース使用権限を与えられましたユーザでphpMyAdmin管理画面にログイン致します。 ログインの後、データベース作成を行う為に以下の画面の「新規データベースの作成」入力欄にデータベース名を入力し"作成"ボタンでデータベースを作成致します。 テーブルの作成 データベースを作成致しますと以下の画面に移動致しますので、作成されたデータベース上にテーブルを設置する為、「新規テーブルの作成」入力欄にテーブル名とフィールド数を入力し"実行"ボタンでテーブルを作成致します。 テーブ
サンプルコードによるPerl入門
文字列 数値をASCII(アスキー)コードに対応する文字に変換するには、chr関数を使用します。 #!/usr/bin/perl use strict; use warnings; # ASCII文字コードでは65,66,67はそれぞれ 'A','B','C'に対応する。 my $a_num = 65; my $b_num = 66; my $c_num = 67; print chr( $a_num ), "\n"; print chr( $b_num ), "\n"; print chr( $c_num ), "\n"; __END__ 続きを読む
セレクトメニューで選択された場所を表示する
フォームのセレクトメニューで選択された地点を表示するには、表示したい地点の座標をoptionタグのvalueに設定しておきます。続きは書籍で、どうぞ... サンプルコード [実行] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Sample</title> <script src="http://maps.google.com/maps?file=api&v=2
Javascriptの条件文
目次 日付オブジェクト if条件分岐文 if文の演習 Switch条件分岐文 Switch文の演習 目次 日付オブジェクト まずJavascriptで日付を取得する方法を紹介する。 Javascriptで日付情報を得るには、Dateオブジェクトを使う。 オブジェクトの使い方は使用例を見ながら慣れていくこと。 次は、スクリプトとその結果である： UTC+0900とは、日本時間はUTC（世界協定時刻）から+9時間ずれていることを示している（示されている時刻[13:29:52]がUTCではない）。 <script type="text/javascript"> <!-- var today = new Date(); var year = today.getYear(); var month = today.getMonth(); var date = today.getDate(); var
GoogleMaps活用するぞ！（21） - 情報ウィンドウの数を増やそう (SUZUMOTO HITOSHI'S BLOG)
今、鈴元仁は歴史小説をブログで連載しています。内容は、二千二百年前（！）の古代中国です。 始皇帝・項羽・劉邦・韓信・張良・虞美人・呂太后、、、 これらの名前にピンと来た方、あるいは、 郡県制・儒教・陰陽思想・法家思想・孫子兵法、、、 こういったことどもにちょっと興味をそそられる方、 よろしければ読んでやってください。 もしお気に入れば、ついでにランキング投票も。 Google Mapには、タブつきとタブなしのインフォウィンドウが用意されています。たとえばマーカーをクリックしたらインフォウィンドウが飛び出るように作りこめば、まずこれで一種類の情報をユーザーに渡すことができます。 さらにアイコンをカスタマイズして、情報の中身によってアイコンを変える。都合これで二種類の情報になります。しかし、まだ足りないと感じたらどうするべきでしょうか。今回以降、もう一種類情報を追加するために、例えばマウスオー
指定位置にマップを移動させる
指定位置にマップを移動させるにはsetCenter()またはpanTo()を使います。どちらのメソッドもパラメータには表示する位置をGLatLng形式で指定します。setCenter()は瞬時に指定した座標に移動するのに対し、panTo()では移動地点が表示されている範囲にあればスムーズに地図をスクロールさせて表示します。範囲外にある場合にはsetCenter()と同じように瞬時に指定した地点に移動し表示を行います。panBy()は指定したオフセット分だけマップを移動させます。panDirection()は指定した経度、緯度の分だけマップを移動させます。 サンプルコード [実行] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt
SUZUMOTO HITOSHI'S BLOG: GoogleMaps アーカイブ
今、鈴元仁は歴史小説をブログで連載しています。内容は、二千二百年前（！）の古代中国です。 始皇帝・項羽・劉邦・韓信・張良・虞美人・呂太后、、、 これらの名前にピンと来た方、あるいは、 郡県制・儒教・陰陽思想・法家思想・孫子兵法、、、 こういったことどもにちょっと興味をそそられる方、 よろしければ読んでやってください。 もしお気に入れば、ついでにランキング投票も。 GoogleMaps アーカイブ GoogleMaps活用するぞ！（1） - はじめに。関連サイトから --->2006年07月15日 GoogleMaps活用するぞ！（2） - Google アカウント登録 --->2006年07月16日 GoogleMaps活用するぞ！（3） - Google Maps API への登録 --->2006年07月17日 GoogleMaps活用するぞ！（4） - Google Mapsを呼び出
AJAXのサンプルが山ほどダウンロードできるサイト「Ajax Rain」 - GIGAZINE
jQuery、ProtoType、.Netなどのフレームワークを使ったサンプル、デモが豊富にあります。しかも、サンプルをダウンロード可能。サンプルやデモを見ているだけでも、インスピレーションが沸いてきます。 詳細は、以下から。AjaxRain かなりのサンプル数があるので探していた物を見つけることができるかも。タグで分別されているので、探すのは意外と簡単にできそうです。ちなみにサンプルの1ページあたりの表示数を変更できるのですが、100以上を入れると100にされます。 毎月このサイトでAJAXなどを使ったコードのコンテストをしているので、腕に自信のある方は応募してみては。詳しくはこちらから。 AjaxRain.com Rain Fest
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://neta.ywcafe.net/000740.html
jQueryサンプル集 | DesignWalker
一晩で覚えるjQueryの逆引き基礎サンプル7つ*ホームページを作る人のネタ帳
http://www.cybergarden.net/blog/2005/11/google-maps-api.html