ベスナ さん プロフィール

  •  
ベスナさん: ウェブ制作のまとめ
ハンドル名ベスナ さん
ブログタイトルウェブ制作のまとめ
ブログURLhttp://vesna-memo.com/
サイト紹介文PHP,javascript,HTML,CSSなどコーディングの情報を紹介します。
自由文主にウェブ制作に必要な情報をコーディング面から紹介しています。コーディングが苦手な方の手助けになれば幸いです。
参加カテゴリー
更新頻度(1年)情報提供0回 / 365日(平均0.0回/週) - 参加 2015/10/03 07:56

ベスナ さんのブログ記事

  • トグルスイッチを設定する
  • トグルスイッチ(toggle switch)とは、〇型のつまみを左右にドラッグして2つの値のうちどちらかを選択するウィジェットです。ウィジェットをタップ・ するとツマキが現在とは反対の位置に移動して、設定される値も変更されます。ウィジェットにはツマミのほかに選択した内容を示す文字列が表示されますが、その部分の幅全角3文字程度、半角文字で8文字程度です。文字列が長くなってもこの幅は変わりません。文字列が表示し [続きを読む]
  • 項目選択の複数ウィジェットをグループ化する
  • 年月日など、複数のリストから同時に選択したいとき、ウィジェットのグループ化が有効です。グループ化されたウィジェットは縦、横に密着して設置されて、全体の四隅が丸く表示されます。縦に並べてグループ化するには、ウィジェットを囲むにdata-role=”controlgroup”を追加し、このとき、ウィジェットの表示はグループ化された全てのウィジェットの横幅がほぼ画面いっぱいに広がります。また、選択された値に対応する文字列がこ [続きを読む]
  • <select>により項目選択
  • ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するかで、ラジオボタンかチェックボックスかを分けて作成しなければなりません。ですが、今回書く、による選択はでは、どちらのときも同じウィジェットで作成できます。でsyが、ウィジェットでの表示は、画面が小さい端末にも対応するため、選択肢が画面内に表示しきれない時は、それらがダイアログとして表示されます。一方で、選択肢が2つしかないときはト [続きを読む]
  • 値を選択するボタンを表示する
  • 値を選択するボタンは以下の2つがあります。・複数の値から1つだけを選択するウィジェット ラジオボタン・いくつかの値を同時に選択できるウィジェット チェックボックスこれらによる値の選択は かタップでします。デスクトップ画面で表示しているときは、マウスのカーソルが重なると、その位置の選択肢の表示に変化が起きます。これらは同じ種類でのグループ化が可能で、縦、横それぞれに並べて表示できます。レイアウ [続きを読む]
  • ボタンを設定する
  • 前回の記事ではによるボタンを取り上げましたが、ここでは以外の、のボタンについて記事を書いていきます。ボタンには、「 かタップのみのボタン」と「値を選択するボタン」があります。これらを単独かグループ化してくっつけて表示できます。また空間次第では複数のボタンを横一列に並べて表示することができます。ボタンに関連する属性一覧要素属性名と属性値設定補足ボタンdata-theme=”a〜b”テーマデフォルトでは”a” [続きを読む]
  • jQueryMobileとフォームを組み合わせてみる
  • フォーム(user-submittable form)は、HTMLタグではタグで表されます。フォーム自体はウィジェットではないですが、フォーム内にはデータを入力するためのウィジェットを表示できます。それとフォームは以下のことを同時に設定できます。●同時にサーバーへ送信されるデータのまとまり●データの送信方法内には、データを入力するためのフィールドが配置されます。例と挙げると、ログイン画面に配置されたユーザーIDとパスワードを [続きを読む]
  • アイコンとサムネイルを表示する
  • 各項目のレイアウトを設定するの中には、色々なレイアウトを設定できます。いずれもHTMLタグと属性を追加するだけで大丈夫です。の中のレイアウト・文字列のレイアウト とかを内に作成・アイコンとサムネイル 項目の左端に画像を表示・バルーン内の文字列を表示(次回の記事で書きます。) 小さい楕円の囲み内に文字列を表示する(位置は文字列の右隣)・分割して表示 2つのリンクにより右端を分割ちなみに内に表示する文字列のレ [続きを読む]
  • 項目リストを設定する
  • 項目リスト(listview)は、ふくすうの項目を列挙するためのウィジェットで、項目には文字列や、画像、数値を出力する部分を設けたり色々な事ができます。HTMLタグに追加できる属性一覧設定対象名称=”設定値”(太字はデフォルト)説明ウィジェットdata-role=”listview”項目リストの作成data-inset=”true|false”各項目を角丸で表示ウィジェット・項目data-theme=”テーマの名称”ウィジェットや項目のテーマウィジェットdata-coun [続きを読む]
  • ナビゲーションバーを表示
  • ナビゲーションバーは、ヘッダ、フッタ内の複数のリンクをボタンのようにして表示するウィジェットです、よく利用するコンテンツへのリンクをメニューとして常時表示すれば、操作性の向上になります。ナビゲーションバーに設定できる属性一覧設定対象名称=”設定値”(太字はデフォルト)説明ウィジェットdata-role=”navbar”ナビゲーションバー項目data-icon=”アイコン名称”リンクに表示するアイコンdata-iconpos=”top|bottom|l [続きを読む]
  • 折りたたみを設定する
  • おりたたみ(collapse)は、予め概要を示す文字列が表示されている領域を かタップすると、その下に詳細を示すコンテンツが表示されるウィジェットです。同じ領域を すると詳細が閉じられて、元の形に戻ります。複数のウィジェットをグループ化して表示したり、ウィジェットを入れ子構造にできたりします。概要と詳細とでコンテンツを分割して表示したいときや、コンテンツ表示する面積を小さく留めておきたいときに使 [続きを読む]
  • ボタン内にアイコンを表示したり、デザインを変更する
  • ボタン内にアイコンを表示するには、リンクと同じように、data-icon属性、data-iconpos属性の2つを設定します。アイコンのみのボタンもこれにより設定します。アイコンと文字列を同じボタンに表示するとき、アイコンが左右にある時は、アイコンが文字列と同じ行に表示されるため、ボタンの高さは1行分ですが、アイコンを上下どちらかに表示させるときは、ボタンの高さが2行分です。ちなみに、ボタンにアイコンのみを表示したい [続きを読む]
  • ボタンを配置する
  • リンクを表すaタグに「data-role=”button”」を追加すると、画面にはボタンが表示されます。、のボタンはdata-role属性が設定されていなくても自動的に同様の表示となります。今回の記事ではによるボタンについて触れます。ボタンに関連する属性は以下の表があります。これらを駆使すると、ボタンそのものやボタン内のアイコンの配置、ボタンの形状を設定できます。設定対象名称=”設定値”(太字はデフォルト)説明ウィジェットdat [続きを読む]
  • リンク先を設定したり、アイコンを利用する。
  • リンク(link)とは、次の画面に表示するコンテンツを表すもので、HTMLではaタグで表します。jQueryMobileを利用しないならaタグで囲まれたリンク先を示す文字列は青色で、文字列の下にアンダーバーが引かれています。下記の表に挙げた属性をaタグに追加することで、リンクを画面に表示するときにアイコンを追加したり次のコンテンツを表示するときにアニメーションをつけたりと、入りいろな効果を付加できます。設定対象名称=”設定 [続きを読む]
  • class属性によりレイアウトとテーマを設定する
  • ウィジェットが画面に表示されるとき、HTMLタグには様々なclass属性が追加されます。これらはCSSの設定を反映してレイアウトやテーマを表示するのに利用されます。今回は、前回までの記事で紹介したdata-属性とは異なる設定で追加できるclass属性の値について書いていきます。下記の表は、設定の種類と、それに対応するclassの属性値、それらに関連するウィジェットを表します。classの属性値で「-*」は「-a〜-z」のうち有効なもの [続きを読む]
  • ページのURLを設定する
  • ユーザーにページのURLを知らせる時に使用するのがdata-url属性です。data-url属性を使用したサンプルコードの実行結果はこちら jQueryMobile 移動しないヘッダ、フッタIDを利用する To page2 To page2 2ページ目のコンテンツ サンプルコードの実行結果を確認すると、初めに表示されるページにはページ2へのリンクが2つあり、リンク先はそれぞれ”page_2″,”#page2″ [続きを読む]
  • 移動しないヘッダ、フッタにIDを設定する
  • MozillaやWebkitベースのブラウザでは、リンクにdata-transition=”slide”などのアニメーションが設定されていると、ページ遷移時に、サンプルコードの実行結果のようにヘッダ、フッタも同じアニメーションで切り替わります。ヘッダ、フッタにdata-id属性で同じIDを指定すると、ページ遷移時どちらにも移動せず、画面にそのまま残り続けます。内容は遷移後のページのものに切り替わります。ですが、条件があり、遷移前後のページ [続きを読む]
  • コンテンツをフルスクリーンで表示する
  • ヘッダ、フッタにdata-position=”fixed”とdata-fullscreen=”true”を設定すると、表示されるコンテンツの周囲に余白が全くないフルスクリーンで表示されます。これは動画、画像など画面全体で楽しむコンテンツを表示するときに使用します。このとき設定で追加されたヘッダ、フッタはCSSでopacity:0.9に設定されるので、背景ページが少し透過して見えます。サンプルコードの実行結果はこちら jQueryMobile data-属性でコン [続きを読む]
  • data-属性により、ヘッダとフッタを常時表示する
  • 前回の記事の続きです。ヘッダとフッタを常時表示ページのヘッダとフッタにdata-position=”fixed”を書くと、ページの縦の長さが画面より大きく、その画面をスクロールさせた後でも、常に画面の上部にヘッダ、下部にフッタを表示します。これを設定することにより、ユーザーはメニュー操作をいつでもすることができます。また、画面を 、タップすることでヘッダとフッタは表示と消去を交互に繰り返すことができます。サン [続きを読む]
  • data-属性によるウィジェットの設定
  • テーマの他にもウィジェットにdata-属性を追加して、色々な事ができます。ウィジェット名称=設定値(太字は初期値)説明ページ、ダイアログdata-title=”文字列”タイトルの設定で文字列を指定する。戻るボタンdata-add-btn-back=”true|false“戻るボタンを追加するdata-back-btn-text=”文字列”戻るボタンに表示する文字列data-back-btn-theme=”a〜z”戻るボタンのテーマヘッダ、フッタdata-position=”fixed”ヘッダ、フッタの [続きを読む]
  • テーマを設定する
  • テーマとは、統一化された各ウィジェットの外観などのデザインの事で、それぞれに名前がついています。同じ画面に表示される別々のウィジェットに対して同じ名前のテーマを設定して表示すると、画面全体のデザインに統一感がでます。テーマの種類jQueryMobileでは、a,b,c,d,eというテーマが設定されていて、、それぞれのテーマ別のCSSが用意されています。ページ、ダイアログ、ポップアップのデフォルトのテーマって?ページのデフ [続きを読む]
  • ポップアップを表示する
  • ポップアップ(popup)とは、pageの上に付加情報や画像などのコンテンツを重ねて表示するウィジェットのことです。ウィジェットの隅にはアイコンを表示することができます。ダイアログと似ている点もありますが、それとは違い、ヘッダは表示しなくてもいいので、コンテンツのレイアウトをダイアログより自由にできます。また、ページの中に作成するのもポップアップのよくあります。ポップアップの表示ポップアップは、ウェジェット [続きを読む]
  • ダイアログ
  • ダイアログは、ユーザーに対して警告や注意をひくために、伝えたいことを表示します。ダイアログが表示されると、デフォルトでは背景が別の色に変わってダイアログ以外のウィジェットが操作できなくなります。これを閉じるには左上の「×」か、ブラウザの戻るボタンを します。ダイアログは以下の順序で作成します。1.ダイアログに表示する内容をdata-role=”dialog”を追加したタグで囲む。ダイアログの構成はページとほ [続きを読む]
  • 同じHTML文書に複数ページを作成してみる
  • jQueryMobileでは、同じHTML文書内に複数ページを作成することができます。手順は以下の通りです。1.data-role=”page”を付したHTMLタグを内に必要なページの分だけ追加する。2.1で追加したタグに、書くページを判別するためのid属性を付す3.それぞれのページで遷移(表示)するためのリンクを作成する。data-role=”page”を付したHTMLタグを内に必要なページの分だけ追加する。ページを作成するには、data-role=”page”を [続きを読む]