2013-04-01から1ヶ月間の記事一覧
☆★データーでの確認★☆ floatを使ったレイアウト実践課題をカスタマイズ はてなダイアリー用のデーター保管場所として作成 はてなダイアリーからのデーター確認を確認するためにリンクを設定 変更点 webfont(google) webfont(まきば) jQuery(アコーディオン) …
企業サイト 素材は、テキストデータ（または独自データ）を利用する ナビゲーションは、作成する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>サンプル スタイルシート カンパニー</title> <link rel="stylesheet" href="css/style3.css" media="screen,print"> </head> <body> <div id="container"> <h1 id="logo"></h1></div></body></html>
HTML5, きちんと。 HTML5の概要や目的について説明しています。セクション関連要素についても紹介しています。 HTML5, きちんと 論理構造を意識したアウトライン 見出しでつくる構造の限界（divでの階層構造は、理論構造にはならない） Sections may contain…
HTML5―新しい要素 Time要素 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>その他の新しい要素</title> <link rel="stylesheet" href=""> <script src=""></script> </link></meta></head></html>
HTML5―新しい要素 figure要素、figcaption要素 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>その他の新しい要素</title> <link rel="stylesheet" href=""> <script src=""></script> …</link></meta></head></html>
floatを使ったレイアウト header部の画像を準備 条件コメントを設定 CSSにコメントアウトを記述 条件コメント（Conditional Comments） IEによって解釈されるHTMLソースコード中にある条件付きのステートメント IE6以下のバージョンに適用するCSSを読み込む …
バリエーション ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery Mobile Sample</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css"> </link></meta></meta></head></html>
フッターの基本 data-role属性「footer」を記述する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery Mobile Sample</title> </meta></meta></head></html>
HTML5 Web広告研究会セミナーレポート（Web担当者Forum） HTML5 http://www.w3.org/TR/html5/ W3Cがリリースしている規格 2012年12月17日に勧告候補がリリースされ、今後新しい機能が追加されることはなくなり安定した規格として実装と検証が進められます HT…
文書構造をマークアップする 《div要素を使ったマークアップ》ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5</title> </meta></head></html>
基本形 <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href=""> <script src=""></script> </link></meta></head></html>
フルスクリーンモード data-fullscreen属性「true」 ヘッダー／フッターを固定配置した状態（data-position="fixed"）でページ要素にdata-fullscreen属性「true」を指定すると、フルスクリーンモードを利用できる フルスクリーンモードでは、ヘッダー／フッ…
リストの表示 「リスト表示」のページで解説してあるように分割リストの場合に、デフォルトではテーマ「b」が適用される 見出しのテーマを変更する data-dividertheme属性 ul要素やol要素に対してdata-dividertheme属性を設定すると、見出しのテーマを変更で…
Theme Roller スマートフォンの簡易カスタマイズUI Theme Roller 既存テーマのインポート ①「import」ボタンをクリック②「Import Default Theme」リンクをクリック③「import」ボタンを押す デフォルトテーマ PAGE TOP
URLスキーマ http://maps.google.com/maps?daddr=&saddr=現在地&dirflg=r&t=m daddr 目的地。 緯度・経度、住所やキーワードなど、 Googleマップで検索可能ならOK saddr 出発地。 現在地から出発する場合、日本語なら 「現在地」英語環境なら「Current%20Loc…
ヘッダーの基本 ページのコンテナ要素の直下にヘッダー用のコンテナを用意し、data-role属性「header」を記述する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery Mobile Sample</title> </meta></meta></head></html>
ヘッダー／フッターのカスタマイズ data-role="header、data-role="footer"で表示したヘッダー／フッターは以下のようにカスタマイズできる 「戻るボタン」の表示 data-add-back-btn属性「true」 ページ要素（data-role="page"）にdata-add-back-btn属性「tr…
フッターにボタンを追加 フッター内に配置したa要素も自動的にボタンに変換される ただし、初期値では余白などが反映されていないため、フッター要素の内側に新たな要素を作成し、class属性「ui-bar」を指定する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> <title>jQuery Mobile </title></meta></meta></head></html>…
ボタンの数 ナビゲーションバーはボタンの数（li要素の数）で均等に分割され、数が増えるにつれてボタンは小さくなる ボタンの数（li要素の数）が6つ以上になると1行に2列ずつ、複数行に分割して表示される フッター／ヘッダーの固定配置 data-position属性…
ルート検索 任意の場所を指定してルートを検索する ルートタイプ(車)での設定 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Google Maps ルート検索</title> </meta></meta></head></html>
見出しのテーマの変更 jQuery Mobileでは要素を均等に分割して並べる「グリッドレイアウト」の機能が用意されている 2カラム 2カラムにしたい場合は、class属性「ui-grid-a」を付けた要素の内側に、class属性「ui-block-a」とclass属性「ui-block-b」を付け…
4カラム 4カラムにするには、class属性「ui-grid-c」を親要素に適用します ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> <title>jQuery Mobile グリッドレイアウト</title> </meta></meta></head></html>
見出しのテーマの変更 jQuery Mobileのリスト表示は、ul/ol要素にdata-theme属性でテーマを指定できる ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> <title>jQuery Mobile Sample</title> </meta></meta></head></html>
送信・キャンセルボタンの装飾 jQuery Mobileではスマートフォンで操作しやすいボタンのUIが用意されており、以下のように記述するだけで表示できる ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> <title>jQuery Mobile Sample</title> </meta></meta></head></html>
問い合わせフォームの作成 ２つ以上の選択肢があり複数選択可能な場合は、配列で設定 ２つ以上の選択肢があっても１つしか選択できない場合は、配列で設定しなくても可能 ひとつの値ごとに閉じれば「区切り線」がつき、全体をまとめて閉じればつかない ソー…
Maps JavaScript API パソコンと携帯端末の両方で使える地図アプリケーションのためのソリューション Google Maps JavaScript API v3 【 書式 】 http://maps.google.com/maps/api/staticmap?center=<緯度>,<軽度>&zoom=<ズーム値>&size=<画像横幅>x<画像縦…
ルート検索マップ（詳細） ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Google Maps API SDK</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"> </link></meta></meta></head></html>
出発点から目的地点までのルートマップ（任意の設定） ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Google Maps API SDK</title> </meta></meta></head></html>
複数行入力ボックスの最適化 「お問い合わせ内容」は複数行入力ボックスですので、textarea要素で記述する この複数行入力ボックスは、入力したテキストの長さに応じて自動的にフォームの高さが変わる ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> <title>jQuery Mobile Sample</title> </meta></meta></head></html>
フリップスイッチを表示する jQuery Mobile独自のフォーム部品「フリップスイッチ」を使って「性別」の項目を作る フリップスイッチは2つの選択肢からどちらか一方を選択するUI select要素にdata-role属性「slider」を指定し、内側に2つのoption要素で項目を…
