カテゴリー: HTML

iframe内のページの高さに自動変更してくれるjQueryプラグイン

投稿者:isc_blog

iframeタグにて他のページのコンテンツを取り込む際に
内容に応じてiframeの高さを自動調節してスクロールバーを出したくない時、ありますよね。
そんなときに重宝しそうなjQueryプラグイン「Auto iFrame Height」を見つけました。

こんなソースでiFrameに埋め込んだ中のコンテンツの高さを取得し自動で高さ調節してくれます。

[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>autoheight</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autoheight.js"></script>
</head>
<body>
IFRAME内のページの大きさに自動で高さ調整するサンプル<br />
<iframe id="myframe" name="myframe" class="autoHeight" frameborder="1" scrolling="no" src="heightpage.html"></iframe>
</body>
</html>
[/html]

サンプルはこちら
↑このページで簡単なサンプルをダウンロードできます。

上記はJavaScriptで20段までのテーブルをランダムで作成しています。
リロードごとに高さが変わっているのがわかるはず・・・

iframeの中身は同一ドメインのコンテンツに限ります。
でないとアクセス権がない・・・とかなんとか

中身がYahoo!だと高さ調節してくれないサンプル

2011年7月20日

15秒でHTML5のプロジェクトを始めるテンプレート生成サイト

投稿者:isc_blog

Initializr というサイトで
15秒でHTML5のテンプレート的なコードを生成出来てしまいます!

こんな感じで・・・・

【HTML&CSS】
サンプルページにするとサンプルページのコードがくっついてきます。

【Javascript】
jQueryのminバージョンを付けて!

【Compatibility】※互換性
Modernizr!・・・ってモダンブラウザ的なことだろう・・・ と思う。

【Server Configuration】
サーバーコンフィグ・・・いらない

【Analytics】
いらないかな・・・・


この設定で作った物をダウンロードしたページ・・・

中身のコードはこんな感じ・・・(抜粋)
[html]
<!doctype html>
<!–[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]–>
<!–[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]–>
<!–[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]–>
<!–[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]–>
<!–[if (gt IE 9)|!(IE)]><!–> <html lang="en" class="no-js"> <!–<![endif]–>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title></title>
<meta name="description" content="">
<meta name="author" content="">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="css/style.css?v=2">

<script src="js/libs/modernizr-1.7.min.js"></script>
</head>
<body>
<p class="info">Your HTML5 project is almost ready! Please check the <a href="TODO.txt">TODO list</a>.</p>
<div id="header-container">
<header class="wrapper">
<h1 id="title">Your title</h1>
<nav>
<ul>
<li><a href="#">Some</a></li>
<li><a href="#">navigation</a></li>
<li><a href="#">links</a></li>
</ul>
</nav>
</header>
</div>
<div id="main" class="wrapper">
<aside>
<h3>Something aside</h3>
</aside>
<article>
<header>
<h2>Your article heading</h2>

    ・
    ・
[/html]

冒頭に[if IE]の嵐がっ!
モダンブラウザ対応した証拠ですね。
No Contentsを選べば手っ取り早い雛形の完成です。

2011年6月7日

スマートフォンサイトでアドレスバーを隠す方法(iPhone/Android)

投稿者:isc_blog

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

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

2011年6月6日

ウェブ用世界の国選択htmlのselectタグ

投稿者:isc_blog

国一覧選択セレクトボックスをつくろうと思ったらサンプルが転がってないので・・・

抜粋しました。

切り取って使ってください。(日本がデフォルト選択されています。)

[html]
<select name=”country”> <option value=”AD”>アンドラ公国</option><option value=”AE”>アラブ首長国連邦</option><option value=”AF”>アフガニスタン・イスラム国</option><option value=”AG”>アンチグア・バーブーダ</option><option value=”AI”>アンギラ</option><option value=”AL”>アルバニア共和国</option><option value=”AM”>アルメニア共和国</option><option value=”AN”>オランダ領アンチル</option><option value=”AO”>アンゴラ共和国</option><option value=”AQ”>南極</option><option value=”AR”>アルゼンチン共和国</option><option value=”AS”>米領サモア</option><option value=”AT”>オーストリア共和国</option><option value=”AU”>オーストラリア</option><option value=”AW”>アルバ</option><option value=”AZ”>アゼルバイジャン共和国</option><option value=”BA”>(ボスニア・ヘルツェゴビナ共和国)</option><option value=”BB”>バルバドス</option><option value=”BD”>バングラデシュ人民共和国</option><option value=”BE”>ベルギー王国</option><option value=”BF”>ブルキナファソ</option><option value=”BG”>ブルガリア共和国</option><option value=”BH”>バーレーン国</option><option value=”BI”>ブルンジ共和国</option><option value=”BJ”>ベナン共和国</option><option value=”BM”>バーミューダ諸島</option><option value=”BN”>ブルネイ・ダルサラーム国</option><option value=”BO”>ボリビア共和国</option><option value=”BR”>ブラジル連邦共和国</option><option value=”BS”>バハマ国</option><option value=”BT”>ブータン王国</option><option value=”BV”>ブーベ島</option><option value=”BW”>ボツワナ共和国</option><option value=”BY”>ベラルーシ共和国</option><option value=”BZ”>ベリーズ</option><option value=”CA”>カナダ</option><option value=”CC”>ココス諸島</option><option value=”CF”>中央アフリカ共和国</option><option value=”CG”>コンゴ共和国</option><option value=”CH”>スイス連邦</option><option value=”CI”>コートジボアール共和国</option><option value=”CK”>クック諸島</option><option value=”CL”>チリ共和国</option><option value=”CM”>カメルーン共和国</option><option value=”CN”>中華人民共和国</option><option value=”CO”>コロンビア共和国</option><option value=”CR”>コスタリカ共和国</option><option value=”CU”>キューバ共和国</option><option value=”CV”>カーボベルデ共和国</option><option value=”CX”>クリスマス島</option><option value=”CY”>キプロス共和国</option><option value=”CZ”>チェコ共和国</option><option value=”DE”>ドイツ連邦共和国</option><option value=”DJ”>ジブチ共和国</option><option value=”DK”>デンマーク王国</option><option value=”DM”>ドミニカ国</option><option value=”DO”>ドミニカ共和国</option><option value=”DZ”>アルジェリア民主人民共和国</option><option value=”EC”>エクアドル共和国</option><option value=”EE”>エストニア共和国</option><option value=”EG”>エジプト・アラブ共和国</option><option value=”EH”>西サハラ</option><option value=”ER”>エリトリア</option><option value=”ES”>スペイン</option><option value=”ET”>エチオピア</option><option value=”FI”>フィンランド共和国</option><option value=”FJ”>フィジー共和国</option><option value=”FK”>フォークランド(マルビナス)諸島</option><option value=”FM”>ミクロネシア連邦</option><option value=”FO”>フェロー諸島</option><option value=”FR”>フランス共和国</option><option value=”FX”>フランス本国</option><option value=”GA”>ガボン共和国</option><option value=”GB”>グレートブリテン及び北部アイルランド連合王国(英国)</option><option value=”GD”>グレナダ</option><option value=”GE”>グルジア共和国</option><option value=”GF”>仏領ギアナ</option><option value=”GH”>ガーナ共和国</option><option value=”GI”>ジブラルタル</option><option value=”GL”>グリーンランド</option><option value=”GM”>ガンビア共和国</option><option value=”GN”>ギニア共和国</option><option value=”GP”>グアドループ島</option><option value=”GQ”>赤道ギニア共和国</option><option value=”GR”>ギリシア共和国</option><option value=”GS”>南ジョージア島・南サンドイッチ諸島</option><option value=”GT”>グアテマラ共和国</option><option value=”GU”>グアム</option><option value=”GW”>ギニアビサオ共和国</option><option value=”GY”>ガイアナ協同共和国</option><option value=”HK”>ホンコン (香港)</option><option value=”HM”>ヘアド島・マクドナルド諸島</option><option value=”HN”>ホンジュラス共和国</option><option value=”HR”>クロアチア共和国</option><option value=”HT”>ハイチ共和国</option><option value=”HU”>ハンガリー共和国</option><option value=”ID”>インドネシア共和国</option><option value=”IE”>アイルランド</option><option value=”IL”>イスラエル国</option><option value=”IN”>インド</option><option value=”IO”>英領インド洋地域</option><option value=”IQ”>イラク共和国</option><option value=”IR”>イラン・イスラム共和国</option><option value=”IS”>アイスランド共和国</option><option value=”IT”>イタリア共和国</option><option value=”JM”>ジャマイカ</option><option value=”JO”>ヨルダン・ハシミテ王国</option><option value=”JP” selected=”selected”>日本</option><option value=”KE”>ケニア共和国</option><option value=”KG”>キルギスタン共和国</option><option value=”KH”>カンボディア王国</option><option value=”KI”>キリバス共和国</option><option value=”KM”>コモロ・イスラム連邦共和国</option><option value=”KN”>セントクリストファー・ネイビス</option><option value=”KP”>(北朝鮮=朝鮮民主主義人民共和国)</option><option value=”KR”>大韓民国</option><option value=”KW”>クウェート国</option><option value=”KY”>ケイマン諸島</option><option value=”KZ”>カザフスタン共和国</option><option value=”LA”>ラオス人民民主共和国</option><option value=”LB”>レバノン共和国</option><option value=”LC”>セントルシア</option><option value=”LI”>リヒテンシュタイン公国</option><option value=”LK”>スリランカ民主社会主義共和国</option><option value=”LR”>リベリア共和国</option><option value=”LS”>レソト王国</option><option value=”LT”>リトアニア共和国</option><option value=”LU”>ルクセンブルク大公国</option><option value=”LV”>ラトビア共和国</option><option value=”LY”>社会主義人民リビア・アラブ国</option><option value=”MA”>モロッコ王国</option><option value=”MC”>モナコ公国</option><option value=”MD”>モルドバ共和国</option><option value=”MG”>マダガスカル共和国</option><option value=”MH”>マーシャル諸島共和国</option><option value=”ML”>マリ共和国</option><option value=”MM”>ミャンマー連邦</option><option value=”MN”>モンゴル国</option><option value=”MO”>マカオ(澳門)</option><option value=”MP”>北マリアナ諸島</option><option value=”MQ”>マルチニーク島</option><option value=”MR”>モーリタニア・イスラム共和国</option><option value=”MS”>モントセラト</option><option value=”MT”>マルタ共和国</option><option value=”MU”>モーリシャス共和国</option><option value=”MV”>モルジブ共和国</option><option value=”MW”>マラウイ共和国</option><option value=”MX”>メキシコ合衆国</option><option value=”MY”>マレーシア</option><option value=”MZ”>モザンビーク共和国</option><option value=”NA”>ナミビア共和国</option><option value=”NC”>ニューカレドニア</option><option value=”NE”>ニジェール共和国</option><option value=”NF”>ノーフォーク島</option><option value=”NG”>ナイジェリア連邦共和国</option><option value=”NI”>ニカラグア共和国</option><option value=”NL”>オランダ王国</option><option value=”NO”>ノルウェー王国</option><option value=”NP”>ネパール王国</option><option value=”NR”>ナウル共和国</option><option value=”NU”>ニウエ</option><option value=”NZ”>ニュージーランド</option><option value=”OM”>オマーン国</option><option value=”PA”>パナマ共和国</option><option value=”PE”>ペルー共和国</option><option value=”PF”>仏領ポリネシア</option><option value=”PG”>パプアニューギニア</option><option value=”PH”>フィリピン共和国</option><option value=”PK”>パキスタン・イスラム共和国</option><option value=”PL”>ポーランド共和国</option><option value=”PM”>サンピエール島・ミクロン島</option><option value=”PN”>ピトケアン島</option><option value=”PR”>プエルトリコ</option><option value=”PT”>ポルトガル共和国</option><option value=”PW”>パラオ</option><option value=”PY”>パラグアイ共和国</option><option value=”QA”>カタール国</option><option value=”RE”>レユニオン</option><option value=”RO”>ルーマニア</option><option value=”RU”>ロシア連邦</option><option value=”RW”>ルワンダ共和国</option><option value=”SA”>サウジアラビア王国</option><option value=”SB”>ソロモン諸島</option><option value=”SC”>セイシェル共和国</option><option value=”SD”>スーダン共和国</option><option value=”SE”>スウェーデン王国</option><option value=”SG”>シンガポール共和国</option><option value=”SH”>セントヘレナ島</option><option value=”SI”>スロベニア共和国</option><option value=”SJ”>スバールバル諸島・ヤンマイエン島</option><option value=”SK”>スロバキア共和国</option><option value=”SL”>シエラレオネ共和国</option><option value=”SM”>サンマリノ共和国</option><option value=”SN”>セネガル共和国</option><option value=”SO”>ソマリア民主共和国</option><option value=”SR”>スリナム共和国</option><option value=”ST”>サントメ・プリンシペ民主共和国</option><option value=”SV”>エルサルバドル共和国</option><option value=”SY”>シリア・アラブ共和国</option><option value=”SZ”>スワジランド王国</option><option value=”TC”>タークス諸島・カイコス諸島</option><option value=”TD”>チャド共和国</option><option value=”TF”>仏領極南諸島</option><option value=”TG”>トーゴ共和国</option><option value=”TH”>タイ王国</option><option value=”TJ”>タジキスタン共和国</option><option value=”TK”>トケラウ諸島</option><option value=”TM”>トルクメニスタン</option><option value=”TN”>チュニジア共和国</option><option value=”TO”>トンガ王国</option><option value=”TP”>東チモール</option><option value=”TR”>トルコ共和国</option><option value=”TT”>トリニダード・トバゴ共和国</option><option value=”TV”>ツバル</option><option value=”TW”>台湾</option><option value=”TZ”>タンザニア連合共和国</option><option value=”UA”>ウクライナ</option><option value=”UG”>ウガンダ共和国</option><option value=”UM”>米領太平洋諸島</option><option value=”US”>アメリカ合衆国(米国)</option><option value=”UY”>ウルグアイ東方共和国</option><option value=”UZ”>ウズベキスタン共和国</option><option value=”VA”>バチカン市国</option><option value=”VC”>セントビンセント及びグレナディーン諸島</option><option value=”VE”>ベネズエラ共和国</option><option value=”VG”>英領バージン諸島</option><option value=”VI”>米領バージン諸島</option><option value=”VN”>ベトナム社会主義共和国</option><option value=”VU”>バヌアツ共和国</option><option value=”WF”>ワリス・フテュナ諸島</option><option value=”WS”>西サモア</option><option value=”YE”>イエメン共和国</option><option value=”YT”>マイヨット島</option><option value=”YU”>(ユーゴスラビア連邦共和国)</option><option value=”ZA”>南アフリカ共和国</option><option value=”ZM”>ザンビア共和国</option><option value=”ZR”>ザイール共和国</option><option value=”ZW”>ジンバブエ共和国</option> </select>
[/html]

サンプル

コード横丁 国名コード(X0304)というJIS X0304 で設定された国コードを HTML TAG化しました。
ありがとうございます!
コード横丁 コード横丁はJISやISOなどの各種コードを網羅したホームページです。

2011年4月28日