2013-11-01から1ヶ月間の記事一覧
DEMO_PAGE Beautiful Background Image Navigation jQueryとCSS だけで簡単にホームページトップがオシャレになります。 サンプルは飲食店をイメージして作成しました。 バックグラウンドイメージで画像を配置しているのがポイント！ jsファイルはDEMO_PAGE…
HTML5でグリッドレイアウト サンプル IEでも対応しています。 HTML5とCSSだけでこのように画像を配置できます。 floatの特性を生かしてチャレンジしてみて下さい。 私の場合は画像を3列に分けることで、レイアウトしやすくしています。 行ごとに分けても可能…
HTML5でMansonryレスポンシブデザインのpinterest風のWebサイトテンプレートを作りました。アメリカではPinterestという、FacebookでもTwitterでもない形式のサイトで物の売り買いが主流になってきました。 日本ではまだ受け入れられていないですが、Pintere…
HTML5、RSS、JavaScriptで私の友人が製作した、２ちゃんファ板まとめ、美容整形、ダイエット健康まとめ、女子向けファ板まとめ、ファッションニュース、ファッションスナップ、ライフスタイル、新着アパレル求人、ファッションに関することをいち早く速報す…
html5を使った、iPhone（スマホ）サイトを紹介します。このサイトは写真を使ったボックスレイアウトでできています。写真を変えるだけでもオシャレで使いやすいサイトになるので是非試してみてみて下さい。 【index.html】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> </meta></meta></head></html>
HTML5、CSS3、jQuery でタヒチ・エコプロジェクト、薄膜キャパシタ特許技術｜enzo planning の企業サイトを作成しました。（SEOのためタイトルを1部分変えました）タヒチ・エコプロジェクトをはじめ、人と地球が必要とする未来を創造する企業であるenzo plan…
DEMO_PAGE 画像横スライド HTML5, JavaScriptを利用して画像スライドメニューを作成しました。 Webページを華やかにする技術として利用できると思います。 jsファイルはDEMO_PAGEのページのソースから取得して下さい。 イメージを変えるだけで、簡単に実装で…
クッキー（1） * クッキー情報をクライアント側に保存してもらうために使用する関数はどれか 1. isset関数 2. getcookie関数 3. setcookie関数 4. unset関数 クッキー（2） * クッキーが保存されているディレクトリとして正しいものはどれか 1. C:\Program F…
<html lang="ja"> <head> <meta charset="UTF-8"> <title>宿泊予約</title> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> </meta></head></html>
【input.php】 <html> <head> <meta charset="UTF-8"> <title>入力されたIDを次回アクセス時まで覚える（Cookie）</title> <style> h1 { font-size: 20px; } dt { margin-bottom: 10px; } dd { margin-bottom: 20px; } </meta></head></html>
・テキストボックス等にあらかじめ入力サンプル文字を表示させることができます ・この設定をしておくことで、ユーザーはどのような文字列を入れたら良いのか理解する手助けとなります ・placeholder属性を設定できるのは、input要素とtextarea要素のみ、値…
HTML5の説明で正しいものはどれか 1. これまでのHTMLを大幅に改定したHTML第5改訂版 2. HTMLやXHTMLの文書作成機能を改良し、より構造化しやすいタグが利用できる 3. 次世代のWeb環境に合うように仕様を作成 4. W3C(World Wide Web Consortium）の管理下で仕…
HTML5の説明で正しいものはどれか 1. これまでのHTMLを大幅に改定したHTML第5改訂版 2. HTMLやXHTMLの文書作成機能を改良し、より構造化しやすいタグが利用できる 3. 次世代のWeb環境に合うように仕様を作成 4. W3C(World Wide Web Consortium）の管理下で仕…
HTML5、CSS3、jQuery でenzo planning｜株式会社 圓蔵プランニング の企業サイトを作成しました。タヒチのエコプロジェクトをはじめ、人と地球が必要とする未来を創造する企業であるenzo planning【 圓蔵プランニング 】です。タヒチの黒真珠養殖業者と提携…
jQueryを実装するのに役立つプラグインサイト、jQuery Toolsを紹介します。このサイトでは、タブやスクロールなどのプラグインをジャンルごとに分かり易くダウンロードできるようになっています。 もちろん無料です。デモページもあります。ただ、すべて英語…
iPhoneサイトを作成するためのデザイン案として大変役に立つサイトを紹介します。近年、ほとんどの大企業のサイトはレスポンシブデザインになってきています。 それは、iPhoneやスマートフォンに対応したサイトが必要不可欠になってきているためです。このサ…
jQueryとCSS3を使って、マウスオーバーすると画像が回転するプラグインを紹介します。このjQueryはgoogle、safari、firefoxで動作確認済みです。 webkit-や-moz-の具合によって動作しなかったりするので、編集する際には注意が必要です。 【index.html】 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title></meta></head></html>…
iPhoneサイト、スマホサイトをjQueryを実装して簡単に作れるサイトを紹介します。日本語訳されたサイトもあるので、簡単にしかも無料で作ることができます。使い方についても詳しく書かれているので是非チャレンジしてみては！？Loading...
RSS自動取得を組み込んだ、 自動車新着情報まとめサイト - CAR-SS です。phpを使ってRSSを自動取得できるように組み込まれています。 【toyota.php】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>自動車新着情報まとめサイト｜CAR-SS</title> <link href="css/style_rss.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <div id="container"> </div></body></html>
無料情報公開｜メルマガから学ぶ副業の道は、一見どこにでもあるようなサイトに見えますが、 PC、タブレット、スマートフォンの画面サイズに合わせてレイアウトが変わるレスポンシブデザインになっています。http://yolo.hippy.jpソースを見ると、 meta desc…
HTML5やjQueryを中心のまとめサイトです。特に最近ではHTML5のレスポンシブデザインの記事を多く取り上げているので、アイディアにお困りの方にオススメです。Webサイト簡単実装 ( HTML5, CSS3, jQuery, JavaScript ) - NAVER まとめ
HTML5、jQueryでヘッダー固定のスムーズスクロール対応メニューのBobMarleyのサイトを作ってみました。ヘッダーは画面上部に固定されており、スクロールしても画面の上にありつづけます。 ナビボタンを押すと、jQueryによって自動スクロールする仕組みになっ…
jQuery Mobileは、jQueryのモバイル環境へのアプローチを簡単に実現できます。タッチパネルに最適化されたUIウィジェットとAJAXによるアニメーション効果のついたスムーズなナビゲーションシステムを実装しています。簡単にiPhone（スマートフォン）サイトを…
HTML、CSS、jQueryを使ってパララックスデザインのサイト、WORLD RESPECTABLE SPORT CARSを作ってみました。 このサイトは世界のスポーツカーをただ単に紹介しているだけですが、デザイン的に気に入っています。構造としては3層になっており、動きとしては上…
HTMLとCSSでヘッダーとフッターを固定するレイアウトサンプルです。ポイント ①ヘッダーとフッターにそれぞれ position: fixed; をつける ②固定する位置は top: 00px; 、left: 00px; 、bottom: 00px 、right: 00px; の様に指定する ③ヘッダーとフッター幅の分…
CSS3でグラデーションを作りたい場合、グラデーションジェネレータを使うのが一般的です。nav部分やfooter部分に適用するだけでオシャレにみえます。私はこのサイトがおすすめです。Ultimate CSS Gradient Generator - ColorZilla.com
CSS3のimage placeholderを使うと、画像の仮置きのスペースを確保することができます。画像がまだ無い場合に使えます。]
HTML5とCSS3で作ったレスポンシブデザイン：固定レイアウトのものをより完璧のものに修正しました。リンク元はこちらです。 http://jsrun.it/vinton/3xm9こちらのものを、よりカスタマイズしやすくしました。 色合いもベーシックに仕上げ、アフィリエイトサ…
HTML5, CSS3 を使ったレスポンシブデザインでの固定レイアウト、 PC、タブレット、スマートフォン対応のテンプレートを作りました。元々はPICKUPxSTREAMというサイトの題材ですが、文書と画像だけ用いて、コーディングしてみました。一応元サイトのリンクを…
JavaScriptを利用して、Google APIでGoogle Mapをサイトに実装する方法を紹介します。非常に簡単ですが、準備する情報として、表示したい場所の緯度経度が必要です。 取得方法は様々ありますが、そのうちのひとつをご紹介します。Geocoding - 住所から緯度経…
