すっかり秋らしい季節になり、朝夕の寒さも日に日に増してきましたね。
寒暖差が激しいので、みなさま体調を崩されたりしていませんか？みなさん気をつけてくださいね！
この度、弊社の「シンプルプラン」のデザインをリニューアルいたしました！
「コーポレートサイト・ビジネス」「不動産」「ショップ・カフェ」「病院・クリニック」「美容・ファッション」などの
使いやすいカテゴリーでのデザインです♪
「急にホームページが必要になった」
「新規で事業（お店）をオープンするのでホームページを作成したい」
「ホームページが古くなったので、簡単にリニューアルしたい」
「ホームページの予算は、あまりかけたくない・・・」
そんなお客様にぴったりの短納期＆格安なプランになります！
まずはお気軽にご連絡ください！
お見積もり＆ご相談は無料になります＾＾
03-5992-2624（システム事業部 Web 制作部門）
webdesign〇isc-tokyo.co.jp
※〇は@に変更してください。
までご連絡くださいませ！
すっかり年が明けてもう１か月もたってしまいました。
寒い日が続きますが、いかがお過ごしでしょうか。
年末年始、制作実績を更新しました。
スバル興業株式会社
リニューアル(CMS化/スマホ対応)
道路事業、レジャー事業、不動産事業など幅広く手掛けられている会社です。
ユーメディア
スマホ対応
２年前からお世話になっているウェブサイトをスマホ対応いたしました。
スカパーの法人契約をご検討されている方はぜひ！
googleの検索について色々調べていたところ、
弊社の記事をまた見つけました。
サムネイル画像が古いページのままなのが気になるところですが、
取り上げていただいてありがとうございます。
あれ、もしかして自分たちで登録してたのかな？・・・昔のことは忘れました。|дﾟ)
そのほか、会社のイメージキャラクター？マスコットキャラクター？に豚のキャラクター「ikeboo」が正式に公認されそうです。
また正式にリリースされたらお知らせします。
商用利用も無料、Facebookファンページの作成に役立つPSD素材（ワイヤーフレーム付き）
先日も言ったようにFacebookにうとい私です。
が・・・、いつまでもそんなこと言ってられないのでいろいろ調べたりテストしたりしています。
Facebookファンページって作ったことないんですがこんな記事を見つけました。
ピクセル単位で正確に作られたFacebookファンページのGUIがまとめられたPSD素材を紹介します。
こちらは「個人」でも「商用」でも無料！
すごいですね。
PHP SPOT開発日誌より
CSS3だけで実現する幅広で使えそうなドロップダウン実装チュートリアル
こちらの記事で紹介されているドロップダウンメニューがすごいなーと思いご紹介します。
こちら（Creating CSS3 Drop sliding list Menu #6）が紹介先のページなんですが
CSS3だけで実装されている？
というのがソースコードを見るとよくわかります。
一見するとなんちゃらJSとか書いてあるんですが、それはメニューの中のリンクであってJavaScript自体は一切使っていないです。
デモサイトも見てみてください。
これは導入する際にjQueryなのかprototype.jsなのかを気にしないでいいですね。
PHP SPOT開発日誌の記事「クリエイティブな４０４ページいろいろ３０種」より
このページは存在しません！ってだけなのに
こんなかっこいいページが存在するとは・・・・というのが次の記事
30 Creative 404 Error Pages｜FlashUser
こんな 404 Not Found が出るならわざと存在しないアドレス打ってみたい！
というデザインが満載です。
（仕事でサイトつくるのにこんなにNot Foundで凝られるとちょっと引きますねｗ）
スマートフォンサイトでアドレスバー隠すようなサイトが多くてやってみよう！と思いました。
まずは、TAM テクニカルチーム|jQuery Mobileでスマートフォン用サイトを作成するを参考にスマートフォン用のページを作りました。
こんな感じ
※ぜひスマートフォンで見てください。
そして、アドレスバーを隠すようにしてみました。
※iPhone Memo | 画面読込時にアドレスバーを隠すを参考にしました。
[html]
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<title>jQueryMobileで作ったページ</title>
<style type="text/css">
body {
min-height: 416px;
-webkit-text-size-adjust: none;
}
footer{
font-size:10px;
height:30px;
line-height:30px;
text-align:center;
}
.pagebtn{
margin:0 auto;
}
.formbox{margin-bottom:10px;}
</style>
<script type="text/javascript">
function hideAdBar(){
setTimeout("scrollTo(0,1)", 100);
}
</script>
</head>
<body onLoad="hideAdBar()" onOrientationChange="hideAdBar()">
<div data-role="page">
<header data-role="header">
<h1>サンプルページ</h1>
</header>
<div id="content" data-role="content">
<p>株式会社アイ・エス・シー</p>
<p>jQueryMobileデモサイトへようこそ！</p>
<ul data-role="listview" data-filter="true" data-inset="true">
<li><a href="http://www.iscw.jp/">サイト制作アイ・エス・シー</a></li>
<li><a href="http://www.isc-tokyo.co.jp/">株式会社アイ・エス・シー</a></li>
<li><a href="http://blog.iscw.jp/">アイ・エス・シー実験室</a></li>
<li><a href="http://www.yahoo.co.jp/">Yahoo!</a></li>
<li><a href="http://www.google.co.jp/">Google</a></li>
<li><a href="http://jquerymobile.com/">jQuery Mobile</a></li>
</ul>
こんな簡単にスマートフォンサイトが作れると楽しいですね！
<a href="#contact" data-role="button" data-icon="arrow-r" class="pagebtn">サービス概要</a>
</div>
<footer data-role="footer">
Copyright(C) ISC. All Rights Reserved.
</footer>
</div>
<!– サービス概要 –>
<div data-role="page" id="contact">
<header data-role="header">
<h1>サービス概要</h1>
</header>
<div id="content" data-role="content">
<h2>新規ウェブサイト制作</h2>
ご依頼の時点から弊社担当者を決めウェブサイトの構成やデザインについてご連絡させていただきます。<br />
ヒアリングシートに必要事項を記述していただき、担当者からのアドバイス等踏まえウェブサイト制作にあたります。<br />
もちろん、途中で確認していただきながら進めますので「完成」時に困ることがないようにいたします。<br />
ウェブに備えたい機能など、お気軽にご相談ください。<br />
ウェブ以外の印刷物についてもご相談ください。<br />
<h2>既存ウェブサイトリニューアル</h2>
ご依頼の時点から弊社担当者を決め現行のサイトについてのヒアリングやリニューアルに際するご希望をお知らせいただきます。<br />
その上で、現行サイトに足りないものや機能改善について担当者よりアドバイスさせていただきウェブサイトのリニューアルにあたります。<br />
もちろん、途中で確認していただきながら進めますので「完成」時に困ることがないようにいたします。<br />
ウェブ以外の印刷物についてもご相談ください。<br />
<br />
ドメイン取得・サーバーレンタルについても取得・契約代行いたします。また、他社にて取得したドメイン等移管等についてもお気軽にご相談ください。
</div>
<footer data-role="footer">
Copyright(C) ISC. All Rights Reserved.
</footer>
</div>
</body>
</html>
[/html]
アドレスバーを隠すのはここがキモです。
[html]
・
・
・
<script type="text/javascript">
function hideAdBar(){
setTimeout("scrollTo(0,1)", 100);
}
</script>
</head>
<body onLoad="hideAdBar()" onOrientationChange="hideAdBar()">
・
・
・
[/html]
ソースはこんな感じなんですが
ひとつ注意点があります。
[html]
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1" />
[/html]
はじめ、これがなくてなかなかアドレスバーが隠れてくれませんでした。隠れない！非表示にならないって方はこれが原因かも・・・
それにしても
jQuery Mobileすごいですね！簡単ですね。
参考資料：jQuery Mobile
smart4me というサイトで簡単にスマフォ向けモバイルサイトが作成出来るということを
Android SDK逆引きハンドブックの著者のn_aoiさんのツイートで知ったのでちょっといじってみようと思います。
こちらです！↓↓↓
とっても簡単！綺麗にデザインされたスマートフォンサイトが作れます！ – smart4me
まずは・・・ユーザー登録から・・・
アイ・エス・シーの方もその他の皆さんも試してみてください！
サイトが出来たらURL公開します！（予定）
ホームページ制作・システム開発のご依頼はアイ・エス・シーにお任せください！
お電話またはお問い合わせフォームからお気軽にお問合せ下さい。
