Posted by アイ・エス・シーシステム事業部
on 2011年09月15日 in デザイン,便利ツール,技術


商用利用も無料、Facebookファンページの作成に役立つPSD素材(ワイヤーフレーム付き)

先日も言ったようにFacebookにうとい私です。
が・・・、いつまでもそんなこと言ってられないのでいろいろ調べたりテストしたりしています。

Facebookファンページって作ったことないんですがこんな記事を見つけました。

ピクセル単位で正確に作られたFacebookファンページのGUIがまとめられたPSD素材を紹介します。

こちらは「個人」でも「商用」でも無料!
すごいですね。

Posted by アイ・エス・シーシステム事業部
on 2011年08月17日 in HTML,HTML5/CSS3,WEB,デザイン


PHP SPOT開発日誌より
CSS3だけで実現する幅広で使えそうなドロップダウン実装チュートリアル

こちらの記事で紹介されているドロップダウンメニューがすごいなーと思いご紹介します。

こちら(Creating CSS3 Drop sliding list Menu #6)が紹介先のページなんですが
CSS3だけで実装されている?
というのがソースコードを見るとよくわかります。

一見するとなんちゃらJSとか書いてあるんですが、それはメニューの中のリンクであってJavaScript自体は一切使っていないです。

デモサイトも見てみてください。

これは導入する際にjQueryなのかprototype.jsなのかを気にしないでいいですね。

Posted by アイ・エス・シーシステム事業部
on 2011年07月18日 in WEB,デザイン,雑記


PHP SPOT開発日誌の記事「クリエイティブな404ページいろいろ30種」より

このページは存在しません!ってだけなのに
こんなかっこいいページが存在するとは・・・・というのが次の記事
30 Creative 404 Error Pages|FlashUser

こんな 404 Not Found が出るならわざと存在しないアドレス打ってみたい!
というデザインが満載です。
(仕事でサイトつくるのにこんなにNot Foundで凝られるとちょっと引きますねw)

とくに気に入ったのはこれです。(個人の感想です)

Posted by アイ・エス・シーシステム事業部
on 2011年06月06日 in ANDROID,HTML,iphone,JavaScript/Ajax,jQuery,WEB,デザイン,技術


スマートフォンサイトでアドレスバー隠すようなサイトが多くてやってみよう!と思いました。

まずは、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

Posted by アイ・エス・シーシステム事業部
on 2011年05月23日 in WEB,WEBサービス,デザイン,便利ツール,技術


smart4me というサイトで簡単にスマフォ向けモバイルサイトが作成出来るということを
Android SDK逆引きハンドブックの著者のn_aoiさんのツイートで知ったのでちょっといじってみようと思います。

こちらです!↓↓↓
とっても簡単!綺麗にデザインされたスマートフォンサイトが作れます! – smart4me

まずは・・・ユーザー登録から・・・

アイ・エス・シーの方もその他の皆さんも試してみてください!

サイトが出来たらURL公開します!(予定)

ページトップへ戻る

Get Adobe Flash player