スマートフォンサイトのためのHTML5+CSS3 お試し版
|
|
|
- きょうすけ くぬぎ
- 6 years ago
- Views:
Transcription
1 Chapter スマートフォンやタブレットに対応したサイト構築の考え方 スマートフォン & タブレットに対応した Web サイト制作の歴史 2 レスポンシブ Web デザイン 3 density に基づいたビューポート 4 デザインを切り替えるための横幅の決定 03
2 Chapter スマートフォンやタブレットに対応したサイト構築の考え方 BASIC スマートフォン & タブレットに対応した Web サイト制作の歴史 - iphone の登場 初期のスマートフォンは990 年代に登場し PDA (Personal digital assistant) と電話の機能を足し合わせたようなデバイスが中心でした しかし 2007 年に Apple 社から iphone がリリースされたことによって状況が変わります iphone はスタイラスペンやキーボードなどの代わりに大きなタッチスクリーンを持ち フルブラウザを搭載した強力なデバイスであったことから 確たるシェアを確立します -2 iphone に最適化した Web ページ制作の誕生 iphone の普及により デスクトップ用に作られた Web ページは iphone では読みづらいという問題が出てくるようになります そこで iphone の画面解像度 ピクセルに合わせて専用のページを作り iphone に最適化したデザインで閲覧してもらえるようにしようという動きが生まれます iphone は初代のリリース以降 年おきに iphone 3G iphone 3GS iphone 4 iphone 4S と上位機種がリリースされていますが iphone に最適化したデザインの Web ページであれば iphone で閲覧する限り問題が出ることはありません iphone に最適化した Web ページ制作のテクニックが現在まで大きく変わらないのはこのためです iphone の画面解像度に合わせたレイアウトの手引き (Layout and Metrics on iphone and ipod touch) AppleApplications/Reference/SafariWebContent/UsingtheView port/usingtheviewport.html 04
3 スマートフォン & タブレットに対応した Web サイト制作の歴史 -3 Android の登場 しかし 2008 年に Android を搭載したデバイスが登場し iphone の独壇場だったスマートフォンの勢力図が徐々に変化していきます Android は Linux をベースとしたモバイル用の OS で Google 社を中心とした Open Handset Alliance(OHA) によってリリースされています Apple 社が製造している iphone と異なり Android を搭載したデバイスは数多くの企業が開発 製造しているため 多様なスペックのデバイスがリリースされるようになります Open Handset Alliance(OHA) -4 タブレットの登場 モバイル用のデバイスは スマートフォンのみではありません スマートフォンよりも大きなデバイスはタブレットと呼ばれ 200 年には Apple 社が ipad をリリースし 後を追うように Android を搭載したタブレットも登場します さらに タブレットに最適化した Android 3.0 が開発され 20 年には Android ベースの OS を搭載した Amazon の Kindle Fire といったデバイスも現れるなど タブレットデバイスの多様化が進んでいきます -5 多様なデバイスに対応するための Web ページ制作 現在 こうしたデバイスの多様化により スマートフォン用の Web ページ制作は iphone といった特定のデバイスのみをターゲットにしておけばよい時代ではなくなっています iphone ipad はもちろん Android を搭載したスマートフォンやタブレットへも対応することが必要です そのためには レスポンシブ Web デザイン と呼ばれるテクニックを利用することが 現時点では最も有効な手法であると考えられています 05
4 Chapter スマートフォンやタブレットに対応したサイト構築の考え方 2 BASIC レスポンシブ Web デザイン 2- レスポンシブ Web デザイン レスポンシブ Web デザインは 画面の横幅に合わせてデザインを変化させることにより 多様なデバイスに対応するという Web ページの制作手法です たとえば HTML5 や CSS3 の標準規格を策定している W3C(World Wide Web Consortium) のサイトの場合 画面の横幅が大きいときは3 段組みのレイアウトで表示されます この3 段組みはリキッドレイアウトになっており 画面の横幅を小さくしていくと それに合わせて各段の横幅も変わっていくことがわかります そして 最後には 段組み のレイアウトに変わり 横幅が小さな画面でもコンテンツの読みやすさが維持される仕組みとなっています この仕組みを利用すれば 新しいデバイスが出てきたり 想定外のデバイスで閲覧されたとしても 画面の横幅に合わせて Web ページが表示されますので デバイスによって読みづらくなるといった問題を回避することができます W3C のトップページ ( を画面の横幅を変えて表示したもの 画面の横幅に合わせて段組みの数や各段の横幅が変わります 06
5 レスポンシブ Web デザイン 2 NOTES レスポンシブ Web デザインの提唱 レスポンシブ Webデザイン は 200 年にイーサン マルコッテ氏が提唱した制作手法で 右の A List Apart の記事に基本的な考え方がまとめられています また この記事では画面の横幅に合わせて以下のように変化するサンプルが紹介されています "Responsive Web Design" by ETHAN MARCOTTE : A List Apart の記事で紹介されているサンプルを画面の横幅を変えて表示したもの 画面の横幅に合わせて段組みの数や画像の配置 大きさなどが変化していることがわかります NOTES 単一ページでマルチデバイスに対応するメリット ~ One Web と One URL レスポンシブ Webデザインは単一ページでマルチデバイスに対応するためのテクニックです 単一ページでマルチデバイスに対応することは W3Cにおいても推奨されており One Web と呼ばれています One Web は Webが誕生した当初から提唱されている Webページの情報はどのような閲覧環境からでも等しく取得可能であること という基本理念に通じる考え方で どのようなデバイスからページを閲覧した場合でも 同等の情報やサービスを得られるようにすることが求められています 同様に GoogleやBingといった検索エンジンでも SEO( 検索エンジン最適化 ) の観点から同一のコンテンツを単一の URLで管理する One URL という考え方を推奨しており レスポンシブ Webデザイン のテクニックに注目が集まっています Mobile Web Best Practices.0 One Web の考え方が提唱された W3C の勧告 07
6 Chapter 2-2 スマートフォンやタブレットに対応したサイト構築の考え方 画面の横幅 では 画面の横幅とは何でしょうか? ディスプレイサイズから導き出される横幅 ( 通常ディスプレイサイズは対角線の長さを示しているため ) や 画面解像度の横ピクセル数が考えられます このうち Web ページを制作するうえで扱いやすいのが 画面解像度の横ピクセル数です ところが 主要なデバイスのスペックを並べてみると 一筋縄ではいかないことが見えてきます というのも デバイス が進化するにつれて高解像度化が進み 同じディスプレイサイズでも解像度が異なるものが登場していたり 4インチクラスでありながら一世代前の 0 インチクラス並みの解像度を持つものが登場してきているためです そのため ディスプレイサイズと 解像度の両方を考慮した値が必要となります それが density に基づいたビューポートの横幅です デバイス ディスプレイサイズ ( インチ ) デバイスの画面解像度 ( ピクセル ) 2インチクラス 3インチクラス 4インチクラス 5インチクラス 7インチクラス 8インチクラス 9インチクラス 0インチクラス PocketWiFi S iphone 初代 iphone 3G iphone 3GS iphone iphone 4S Xperia Ray Motorola Defy Xperia arc Xperia acro HD Motorola PHOTON HTC J Galaxy Nexus Galaxy Note Galaxy Tab Kindle Fire Optimus Pad ipad 第 世代 ipad 第 2 世代 ipad 第 3 世代 Motorola Xoom Galaxy Tab ios 搭載デバイス Android 搭載デバイス ディスプレイサイズは画面の対角線の長さをインチで示したものです 製造元 販売元のカタログスペックの値を参照しています 値が明示されていない場合は GSMArena ( の情報を参照しています 08
7 density に基づいたビューポート 3 3 BASIC density に基づいたビューポート 3- density とは density は ディスプレイサイズや画面解像度が異なるデバイスにおいて 同じコンテンツが同じ大きさで見えるようにするために考えられたものです ipad 第 世代 ipad 第 3 世代 ipod Touch iphone ( 初代相当 ) iphone 4S Motorola Xoom Motorola Defy Motorola PHOTON Galaxy Nexus 各種デバイスの画面解像度 各種デバイスの density に基づいたビューポートに ピクセルの円を並べたページを表示したもの 09
8 Chapter スマートフォンやタブレットに対応したサイト構築の考え方 各デバイスでは dpi( または ppi) に応じて density の値が設定されています dpi(dots per inch) または ppi(pixels per inch) はデバイスのディスプレイサイズと画面解像度から算出されるもので その値に応じて ldpi ~ xhdpi の4つに分類され density が設定されます そして density が のデバイスを基準とし コンテンツが同じ大きさで見えるように処理が行われる仕組みとなっています ldpi ~ xhdpi という分類は Android で使用されているものですが iphone や ipad でも同様の処理が行われ デバイスごとに density が設定されます たとえば 初代の iphone は 63dpi なため density は iphone 4S は 326dpi なため density は 2 となります なお この値は device pixel ratio とも呼ばれます 00dpi デバイスの dpi 200dpi 300dpi ldpi mdpi hdpi xhdpi デバイスの分類 dpiによるデバイスの分類 基準となる dpi density (device pixel ratio) ldpi (low) mdpi (medium) 60 hdpi (high) xhdpi (extra high) ビューポートとは ブラウザがデフォルトで設定するビューポート ビューポートは デバイスのスクリーンを何ピクセル 何ピクセルとして使うかを設定して作成されるものとなっています ios や Android に標準で搭載されたブラウザは ビューポートの横幅をデフォルトで 800 ピクセルまたは 980 ピクセルに設定します たとえば ios と Android 3.x/4.x では 980 ピクセル Android 2.x では 800 ピクセルとなります そのため 小さなディスプレイでは Web ページの文字が小さくなりすぎて読みづらいといった問題が発生します NOTES モバイル用の OperaやFirefox Chromeといったブラウザは iosやandroidのバージョンに関係なく ビューポートの横幅をデフォルトで 980ピクセルに設定します NOTES Windows Phone 7.5の標準ブラウザは ビューポートの横幅をデフォルトで 024ピクセルに設定します なお デスクトップ環境ではブラウザ画面がビューポートとして扱われます 020
9 density に基づいたビューポート 3 ipad 第 世代 ipad 第 3 世代 ipod Touch (iphone 初代相当 ) iphone 4S 3.5 インチ 3.5 インチ 9.7 インチ 9.7 インチ デバイスの画面解像度に設定したビューポート ブラウザが作成するビューポートの横幅は <meta name="viewport"> の指定で変更することができます たとえば デバイスの画面解像度に設定すると以下のような表示となります この場合 デバイスのディスプレイサイズが同じでも 画面解像度によってコンテンツの表示範囲が大きく変わってくるという問題が発生します ipad 第 世代 ipad 第 3 世代 ipod Touch (iphone 初代相当 ) iphone 4S 320px 640px 768px 536px 02
10 Chapter スマートフォンやタブレットに対応したサイト構築の考え方 density に基づいたビューポート ビューポートをデバイスの画面解像度と density に基づいた横幅に設定すると 異なるデバイスの間でもコンテンツが同じ大きさで見えるようにすることができます レスポンシブ Web デザインでは この横幅を利用します ipad 第 世代 ipad 第 3 世代 ipod Touch (iphone 初代相当 ) iphone 4S 320px 320px 768px 768px 3-3 density に基づいたビューポートを利用する理由 density に基づいたビューポートを利用すると 異なるデバイスの間でもコンテンツが同じ大きさに見えるように表示されます これは density に基づいたビューポートの解像度が以下のように定義されるためです 同様にして導き出された主要なデバイスの density に基づいたビューポートの解像度は右ページのようになります ディスプレイサイズとの関連性がなかったデバイスの画面解像度とは異なり ディスプレイサイズに応じた値が並んでいます デバイスの画面解像度 density に基づいた = ビューポートの解像度デバイスに設定された density の値たとえば iphone 4S の場合 デバイスの画面解像度は ピクセル デバイスに設定された density の値は2となっていますので density に基づいたビューポートの解像度は ピクセルとなります なお デスクトップ環境ではブラウザ画面がビューポートとして扱われますが これまでは density の概念がなく density の値は として扱われてきました しかし Retina MacBook Pro では density が 2 となっており 今後はデスクトップ環境においても density を考慮したページ制作が必要になりそうです 022
11 density に基づいたビューポート 3 2インチクラス 3インチクラス 4インチクラス 5インチクラス 7インチクラス 8インチクラス 9インチクラス 0インチクラス ios 搭載デバイス Android 搭載デバイス ディスプレイサイズデバイスの画面解像度デバイス dpi density ( インチ ) ( ピクセル ) density に基づいたビューポートの解像度 ( ピクセル ) PocketWiFi S iphone 初代 iphone 3G iphone 3GS iphone iphone 4S Xperia Ray Motorola Defy Xperia arc Xperia acro HD Motorola PHOTON HTC J Galaxy Nexus Galaxy Note Galaxy Tab Kindle Fire Optimus Pad ipad 第 世代 ipad 第 2 世代 ipad 第 3 世代 Motorola Xoom Galaxy Tab ipod Touch iphone 初代相当 ( ) iphone 4S Motorola Defy Motorola PHOTON Galaxy Nexus ipad 第 世代 ipad 第 3 世代 Motorola Xoom 320px 320px 320px 360px 360px 768px 768px 800px 023
12 Chapter スマートフォンやタブレットに対応したサイト構築の考え方 NOTES Nexus 7 Nexus 7は GoogleのAndroid 独自ブランドであるNexus シリーズ初のタブレット型端末です 最新の Android 4.(Jelly Bean) に対応した端末として注目されていますが Webデザインという観点から見ても非常に興味深い製品です というのも これまで Androidの端末は 4 種類のdensityに分類されていましたが Nexus 7は Android3.2で新たに設定されていたtvdpiというカテゴリーに属する製品となっているためです tvdpiは Google TVやタブレットなどをターゲットとして設定されたもので 23dpiと設定されており Nexus 7にもこの値が設定されています tvdpiの 23dpiという数字から ブラウザ上で扱われる densityの値を計算すると =.3325 となり mdpiと hdpiの間に位置することが確認できます ただし Androidのアプリケーションの開発などにおいては secondary densityといった位置づけとなっており ユーザーインターフェースのために用意する画像データなどは hdpi 用に用意したデータを変換して利用するとされています density dpiによるデバイスの分類基準となる dpi (device pixel ratio) ldpi (low) mdpi (medium) 60 tvdpi hdpi (high) xhdpi (extra high) Nexus 7 における Android System Info の System 情報画面 ブラウザに関してはどういった扱いになっているのかを確認すると 現時点では Nexus 7の標準ブラウザである Chrome( バージョン ) はdensityの値として という数値を返してきます また Opera Mobileでは従来の分類に合わせて hdpiの.5という数値を返してくるなど アプリケーションレベルでの対応ができていないようで混乱しています これまで tvdpiはその存在も含めてあまり意識されることはありませんでした しかし Nexus 7という 非常に注目度が高いデバイスとして登場してきたことで 今後はしっかりと意識していかなければならなさそうです 024
13 density に基づいたビューポート 3 NOTES Windows Phone 現時点では 国内向けの端末が Windows Phone 7.5に対応した 機種 ( IS2T) しか存在していないこともあり Webデザインの世界ではほとんど存在感の無い Windows Phone ですが Windows 8に合わせて登場すると言われている Windows Phone 8では存在感が増してきそうです そこで Windows Phoneについて確認しておきます ブラウザ OS 標準のブラウザはもちろん Internet Explorerです Windows Phone 7.5では IE9 相当 Windows Phone 8では IE0 相当のブラウザとなっています 解像度 Windows Phoneではハードウェア要件として 解像度は以下のものから選択することになっています 解像度 Windows Phone (5:9) (5:9) Windows Phone (5:9) (6:9) Windows Phone Emulator での表示 ただし 画面サイズに関する規定はなく Windows Phone 7 の場合 3.6インチや 4.7インチの端末も存在しています また 画面サイズが自由ではあるものの Androidにおける densityやiosにおける Device Pixel Ratioに代わるものは Windows Phone 7.5には見当たりません そのため 現時点では Windows Phone 用の処理 (P.6) が必要なわけですが Windows Phone 8で何か変化があるのか 興味深いポイントでしょう 025
14 Chapter スマートフォンやタブレットに対応したサイト構築の考え方 4 BASIC デザインを切り替えるための横幅の決定 レスポンシブ Web デザインの理想は Web ページをあらゆる画面サイズにマッチする形で表示することです しかし 画面サイズごとに個別にデザインを用意するのも つのデザインですべての画面サイズに対応するのも現実的には困難です そのため 画面サイズをいくつかの範囲に分け 範囲ごとに Web ページのデザインを切り替えることになります そこで考えなければならないのが 切り替えるポイントとなる横幅です また同時に 設定した横幅に対応できる柔軟なデザインを考えなければなりません 切り替えのポイントとなる横幅については 表示するデバイスのディスプレイサイズを元に考えていくこともできますし ページの構成要素を元に考えていくこともできます ページのデザインに関しては リキッドレイアウトを元に可変ボックスと固定ボックスをいかに配置していくかがポイントとなります 詳しくは Chapter 2 でサンプルを通して見ていきます スマートフォンで最も小さなビューポートの場合 320px POINT POINT 0 A B C デザインデザインデザイン 026
15 Chapter 2 レスポンシブ Web デザインの実践 レスポンシブ Web デザインにおける主要レイアウトパターン レスポンシブ Web デザインの基本設定 A 可変レイアウトによるレスポンシブ Web デザイン B 固定レイアウトによるレスポンシブ Web デザイン C 可変レイアウト+ 固定レイアウトによるレスポンシブ Web デザイン 027
16 Chapter 2 レスポンシブ Web デザインの実践 SAMPLE レスポンシブ Web デザインにおける主要レイアウトパターン レスポンシブ Web デザインにおける主要なレイアウトパターンをサンプルを通して紹介していきます ここでは 横幅が変化する 可変レイアウト と 横幅を固定した 固定レイアウト の組み合わせに応じて A ~ C の 3パターンのサンプルを紹介します いずれのサンプルにおいても画面サイズを S M L の 3 段階の範囲に分け 範囲ごとにページのデザインを切り替えるようにしています ただし L サイズの画面では常に 固定レイアウト で表示を行い デスクトップ環境の大きな画面で横幅が際限なく広がることがないようにしています 2 A 可変レイアウトによるレスポンシブ Web デザイン S サイズ M サイズ L サイズ 599px 以下 600px~979px 980px 以上 可変レイアウトでページを表示するパターンで レスポンシブ Web デザインでは最も利用頻度の高いレイアウトパターンとなっています ここでは L サイズにおける2 段組みの固定レイアウトをベースとし M サイズでは可変レイアウトに変更した上で ヘッダー コンテンツ サイドバー フッターの各パーツの横幅が画面に合わせて変化するように設定します 同様に S サイズの画面ではこれらを 段組みの可変レイアウトで表示します また ヘッダー画像や本文中の画像も画面に合わせて大きさが変わるようにしています 028
17 レスポンシブ Web デザインにおける主要レイアウトパターン B 固定レイアウトによるレスポンシブ Web デザイン S サイズ 639px 以下 M サイズ 640px~979px L サイズ 980px 以上 各画面サイズで固定レイアウトを行うパターンです ここでは画面サイズに応じて4 段組み 2 段組み 段組みとレイアウトを変え 左右に挿入する余白によって多様な画面サイズに対応するように設定します 2 C 可変レイアウト + 固定レイアウトによるレスポンシブ Web デザイン S サイズ 649px 以下 M サイズ 650px~979px L サイズ 980px 以上 基本的にサンプル A と同じ可変レイアウトですが 固定レイアウトを混在させたパターンで 広告のように横幅を変えることができないパーツがある場合などに有効です ここではサイドバー上の広告の大きさを変えずに表示するため サイドバーの横幅を固定したレイアウトにしています 029
18 Chapter 2 レスポンシブ Web デザインの実践 SAMPLE レスポンシブ Web デザインの基本設定 A ~ C の各サンプルで利用するレスポンシブ Web デザインの基本的な設定を行います ビューポートの横幅の指定 レスポンシブ Web デザインを行う上で重要なのは デバイスの画面サイズとして扱われるビューポートの横幅の設定で 2 す 何の設定も行わないと P.020 のようにデフォルトの横幅 (800 または 980 ピクセル ) に設定されてしまいます ここでは P.022 のようにビューポートの横幅を各デバイスの density に基づいた解像度に設定するため 以下のように <meta name="viewport"> の設定を追加し content 属性の値を width=device-width と指定します なお 各サンプルは HTML5 で記述し sample.html というファイル名で保存して作業していきます 980px ビューポートの横幅を設定しなかったときのサンプル B の表示 320px ビューポートの横幅をデバイスの density に基づいた解像度に設定したときのサンプル B の表示 sample.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> HTML5 の DOCTYPE 宣言を記述 エンコードの種類を UTF-8に指定 ページのタイトルを指定 <meta name="viewport" content="width=device-width"> </head> <body> </body> </html> ビューポートの横幅を指定 NOTES <meta name="viewport" content="~"> で指定できるパラメータについて詳しくは P.36 を参照してください 030
19 レスポンシブ Web デザインの基本設定 2 メディアクエリとスタイルシートの設定 次に レスポンシブ Web デザインでは画面 ( ビューポート ) の横幅をいくつかの範囲に分け 範囲ごとにデザインを切り替えます デザインの切り替えには JavaScript などを利用する方法もありますが ここでは最も手軽に利用することができる CSS3 のメディアクエリの機能を利用します メディアクエリの機能を利用すると 画面の横幅に応じて適用するスタイルシートを指定することができます そこで サンプル A ~ C では S M L の各画面サイズで表示したときに適用する外部スタイルシートファイル style-s.css style-m.css style-l.css を用意します ただし ページのデザインは L サイズの画面をベースに設定していきますので 実際には S サイズの画面では style-s. css と style-l.css を M サイズの画面では style-m.css と style-l.css を L サイズの画面では style-l.css を適用する形になります S サイズ M サイズ L サイズ 2 style-s.css style-m.css style-l.css 03
20 Chapter 2 レスポンシブ Web デザインの実践 デザインのベースとなるスタイルシート 各画面のデザインのベースとなるスタイルシートは右のよう に <link> で指定します sample.html に <link> を追加すると以下のようになります ここでは L サイズ用の設定 (style-l.css) を適用するようにしています <link rel="stylesheet" href="~.css"> sample.html <title>sample</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="style-l.css"> デザインのベースとなるスタイルシート (style-l.css) を指定 </head> 略 特定の画面サイズで表示したときに適用するスタイルシート 2 特定の画面サイズで表示したときにのみ適用するスタイルシートを指定する場合 右のように <link> の media 属性で適用条件を指定します <link rel="stylesheet" href="~.css" media="only メディアタイプ and ( 特性 )"> メディアタイプ ではスタイルシートを適用する閲覧環境 の種類を指定します スマートフォンやタブレット デスクトップ PC のように モニタスクリーンで表示を行う環境を適用対象とする場合 メディアタイプは screen と指定します さらに 特性 では画面 ( ビューポート ) の横幅やデバ 主なメディアタイプ all screen print 閲覧環境の種類すべてモニタスクリーンで表示を行う環境印刷環境 イスの向きといった条件を指定します たとえば minwidth:980px と指定すると 画面の横幅が 980 ピクセル以上の環境を適用先とすることができます なお and でつなげることにより 複数の特性を指定することも可能です 主な特性 閲覧環境の特性 値 width 画面 ( ビューポート ) の横幅 数値 min-width 画面 ( ビューポート ) の横幅の最小値 数値 max-width 画面 ( ビューポート ) の横幅の最大値 数値 orientation デバイスの向き ( 横 / 縦 ) landscape portrait NOTES media 属性による適用条件の指定が メディアクエリ と呼ばれる機能です メディアタイプの指定は CSS2.からサポートされていましたが 特性の指定は CSS3からサポートされた機能となっています 指定できる値などについて詳しくは P.097 ~098を参照してください NOTES デスクトップ環境では ブラウザ画面の横幅がビューポートの横幅として扱われます 032
21 レスポンシブ Web デザインの基本設定 たとえば 画面の横幅が 600 ピクセル以上 ~ 979 ピクセル以下のときに style-m.css を 599 ピクセル以下のときに style-s.css を適用したい場合 以下のように <link> の指定を追加します なお 指定する横幅の範囲はサンプルごとに調節します 以上で レスポンシブ Web デザインの基本的な設定は完了です 次のステップからはサンプルごとの設定を行っていきます スマートフォンで最も小さなビューポートの場合 320px POINT 600px POINT 980px 0 S M L サイズサイズサイズ 599px 以下 600px~979px 980px 以上 style-s.css style-m.css style-l.css 2 sample.html <title>sample</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="style-l.css"> <link rel="stylesheet" href="style-m.css" media="only screen and (min-width:600px) and (max-width:979px)"> <link rel="stylesheet" href="style-s.css" media="only screen and (max-width:599px)"> </head> 略 画面の横幅が 600ピクセル以上 ~979ピクセル以下の場合に適用するスタイルシート (style-m.css) を指定 画面の横幅が 599ピクセル以下の場合に適用するスタイルシート (style-s.css) を指定 NOTES サンプルではスタイルシートの設定を個別のファイルにわけて管理していますが ファイルで管理することもできます P.096 を参照してください 033
名称未設定
エキスパート練習問題 1 以下は,Web サイトの閲覧機器に関する問題である.a d の問いに最も適するものを解答群 から選び, 記号で答えよ. a. レスポンシブウェブデザインのしくみを示した図として, 適切なものはどれか. 解答群 ア. イ. ウ. エ. b. レスポンシブウェブデザインの特徴に関する説明として, 適切なものはどれか. 解答群 ア. すべての機器に対して, 共通のURL,HTML,
ic3_cf_p1-70_1018.indd
章オペレーティングシステム()の基いソフトウェアで 基本ソフトウェア とも呼ばれます 第礎第 章 オペレーティングシステム () の基礎 - の役割と動作 ここでは コンピューターの基本的な構成やオペレーティングシステムの基本的な役割と操作を学習します -- コンピューターの基本構成 現代社会では さまざまな種類のコンピューター機器が各分野で利用されています 身近なものでは パソコン タブレット スマートフォンなどがありますが
3. クラスリンク ( 先生の IP アドレス >:< ポート >) を生徒と共有して生徒がブラウザーから接続できるようにします デフォルトのポート番号は 90 ですが これは [Vision 設定 ] から変更できます Netop Vision Student アプリケーションを使
ブラウザーまたは Netop Vision Student アプリから接続する生徒との画面の共有 Windows ベースの生徒 ブラウザーベースの生徒用デバイス および Netop Vision Student アプリで接続する生徒が混在するクラスルームや ブラウザーベースのデバイスのみで構成されるクラスルームを Vision の先生が作成できるようになりました オープンクラスにより 先生が作成するクラスルームの数が少なくなり
環境確認方法 (Windows の場合 ) OS 動作環境日本語版 Windows 7, 8, 8.1, 10 であること 確認方法 Windows キーを押しながら R キーを押します または [ スタート ] メニューから [ ファイル名を指定して実行 ] ( または [ プログラムとファイルの
環境確認チェックリスト 設定を変更できない場合は この用紙をプリントアウトしてお使いのパソコンの管理者にご相談ください 確認方法がわからない場合はテストセンターヘルプデスクにお電話ください 利用環境チェック 受検のためには以下の環境が必要となります 動作環境機能スペック CPU:1GHz 以上メモリ :1GB 以上 (32bitOS)/2GB 以上 (64bitOS) ディスプレイ解像度 :1024
Qlik Sense のシステム要件
Qlik Sense のシステム要件 Qlik Sense 2.2 Copyright 1993-2016 QlikTech International AB. 無断複写 転載を禁じます Copyright 1993-2016 QlikTech International AB.All rights reserved. Qlik QlikTech Qlik Sense QlikView Sense
Microsoft Word - 11_thesis_08k1131_hamada.docx
23 08k1131 24 i JSP HTML CSS JavaScript Flash ios ii 1.... 1 2.... 1 2.1...1 2.2...2 2.3 Flash...2 2.4...2 2.5...3 2.6...3 2.7...4 3.... 4 3.1...4 3.2...6 3.3...8 3.4...9 3.5... 11 3.6... 12 3.7... 13
THiNQセットアップガイド
12 製 -TH090239-06 第 6 版 :2015 年 12 月 1 日製品バージョン :1.13.0 以降 目次 1. 動作環境...3 1-1. 作成ソフト側 ( 推奨環境 ) エラー! ブックマークが定義されていません 1-2. 閲覧側 ( 推奨環境 )... エラー! ブックマークが定義されていません 2. はじめてインストールする方へ ( 体験版 正式版 )...5 3. 体験版から正式版に切り替える方へ...
Web 設計入門
情報処理技法 ( マルチメディアと表現 )I 第 12 回 CSS によるレイアウトデザイン (2) D.Mitsuhashi 1 クロスブラウジング D.Mitsuhashi 2 クロスブラウジング ブラウザや OS によって レンダリングには少なからず差異が存在する 同じソースで記述しても 表示が異なる場合がある なるべく 表示の差異を最小化し, 共通の視覚的デザインを提供すべき D.Mitsuhashi
Qlik Sense のシステム要件
Qlik Sense のシステム要件 Qlik Sense February 2018 Copyright 1993-2018 QlikTech International AB. 無断複写 転載を禁じます Copyright 1993-2018 QlikTech International AB. All rights reserved. Qlik QlikTech Qlik Sense QlikView
PowerPoint プレゼンテーション
アカデミック認定校 プロフェッショナル認定資格合格者 Lv1: 27 名 Lv2: 5 名 2017 年 6 月現在 https://www.fork.co.jp/ http://4009.jp/ 2 本日解説する主な内容 3 4 HTML4.01 に比べて複雑な処理が容易になり 文書構造をより明確に書けるようになった 動画や音声をシンプルに扱えるようになった 新たな属性が増え フォーム周りの機能が強化された
スライド 1
WELLA POPART アプリ 使用方法 目次 WELLA POPART アプリ使用方法 1. アプリダウンロード方法 2. アプリダウンロード後の設定 3. POPARTのテンプレートを選択 4-1 & 2. POPARTを作成する 5. テンプレートにサロンロゴを挿入する 6. テンプレートにスタンプを挿入する 7. テンプレートの写真 スタンプを削除する 8. テンプレートに価格を挿入する
2004-2006 2004-2006 CSS Web Quiz LOVE PC 2012 4 Windows 8 / CPP Fluid PE CSS3 RWD Quiz 1. 2. 3. 4. 1. 2. 3. 4. CSS3 #btn {! display:block;! width:300px;! font-size:28px;! font-weight:bold;!
在宅せりシステム導入マニュアル
株式会社なにわ花いちば 在宅せりシステム 導入マニュアル 2017 年 2 月 27 日 目次 1. 動作環境について... 2 2. Windows ユーザーアカウントについて... 2 3. ディスプレイの解像度について... 3 推奨解像度... 3 Windows7 の場合... 3 Windows10 の場合... 7 4. 在宅せりを利用するには... 11 前提条件... 11 推奨ブラウザ...
ENI ファーマシー受信プログラム ユーザーズマニュアル Chapter1 受信プログラムのインストール方法 P.1-1 受信プログラムのシステム動作環境 P.1-2 受信プログラムをインストールする P.1-9 受信プログラムを起動してログインする P.1-11 ログインパスワードを変更する
ENI ファーマシー受信プログラム ユーザーズマニュアル P.1-1 受信プログラムのシステム動作環境 P.1-2 受信プログラムをインストールする P.1-9 受信プログラムを起動してログインする P.1-11 ログインパスワードを変更する 更新履歴 日付 頁数 更新内容 2016/ 4/18 - 新規作成 2016/ 5/30 P.4-7 "[ スタートアップの登録に失敗しました ] と表示されたとき
Windows開発者のためのFireMonkeyモバイル開発入門
A1 Delphi チュートリアルセッション Windows 開発者のための FireMonkey モバイル開発入門 エンバカデロ テクノロジーズエヴァンジェリスト高橋智宏 2 アジェンダ Delphi + FireMonkey の仕組み 各種コンポーネント, スタイル, プロジェクトマネージャ ios アプリの開発 準備するもの 実機に転送 Android アプリの開発 準備するもの 実機に転送
Delphi/400活用! スマートデバイスアプリケーション開発
吉原泰介 株式会社ミガロ. RAD 事業部技術支援課顧客サポート Delphi/400 活用! スマートデバイスアプリケーション開発拡張性の高い Delphi/400 ならでは jquerymobile を使用し 見栄えのよいスマート画面開発にチャレンジしよう スマートデバイスでの Web アプリケーション活用 Delphi/400 の Web アプリケーション開発 jquerymobile を利用したスマートデバイス開発
PowerPoint プレゼンテーション
2019/4/26 版 セットアップマニュアル 一般財団法人日本データ通信協会 人材研修部 1. 事前準備 はじめに elpit 学習システムにログインするためには elpit 学習用端末 ( 以下学習端末という ) 及び学習アプリ認証用端末 ( 以下認証端末という ) が必要です 登録手続きにあたり 以下をご準備ください 必要システム構成 Windows ( 学習端末 / 認証端末
< ダッシュボード画面 > 現在開催中の研修 に ご覧いただけるセミナーがすべて表示されます 視聴したいセミナーをクリックします ( セミナーへのお申し込み方法はこちらをご参照ください ) マウスをセミナー名の上に移動すると色が変わります 色の変わる範囲はどこでもクリックすることができます < 講座
動画を視聴する手順 < トップページ > ログイン ID( メールアドレス )/ パスワードを入力して を押します ( 会員登録が済んでいない方はこちらのマニュアルをご参照ください ) 1 < ダッシュボード画面 > 現在開催中の研修 に ご覧いただけるセミナーがすべて表示されます 視聴したいセミナーをクリックします ( セミナーへのお申し込み方法はこちらをご参照ください ) マウスをセミナー名の上に移動すると色が変わります
操作マニュアル
操作マニュアル 動作環境 BookLooper は以下の環境でご利用いただけます デバイス対応 OS 対応ブラウザ タブレット版 ios 8 以上 OS 標準ブラウザ Android 4.1 以上 スマートフォン版 ios 8 以上 OS 標準ブラウザ Android 4.1 以上 PC(Flash) 版 ( 1) Windows 7/8.1/10 Internet Explorer 8/9/10/11
2 ログイン ( パソコン版画面 ) Web サイトのログイン画面が表示されます 通知メールに記載されている ID と仮パスワードを入力して ログイン ボタンをクリックしてください ID パスワードを連続して 5 回間違うと 当 I D はロックアウト ( 一時的に使用不可 ) されるので ご注意く
作成 : 株式会社 TKC 作成日 : 平成 29 年 11 月 16 日 PX まいポータル給与明細等の Web 閲覧サイトの利用マニュアル 1. 利用準備 既に扶養控除等申告書の Web 入力サイトまたは給与明細等の Web 閲覧サイトをご利用の場合 利用準備 は不要です (1) テストメールの受信勤め先での Web サイトの利用開始準備の際 メールアドレスが正しいことを確認するため テストメールが送信されます
AppsWF ワークフロー設定ガイド Ver.1.1 株式会社オプロ
AppsWF ワークフロー設定ガイド Ver.1.1 株式会社オプロ 改訂履歴 Ver. 改訂日改訂内容 1.0 2019/08/22 新規発行 1.1 2019/10/04 1.3 ワークフロー設定画面を開くには に 1.3.2 Salesforce 版の操作手順 を 追加しました 本書に記載されている会社名 製品名 サービス名などは 提供各社の商標 登録商標 商品名です なお 本文中に TM マーク
</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します 背景色を黒色で指定します 画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig
1342-7 応用 1 Rotate 3D Cube 3D Cube が回転するアニメーション サンプル CSS1 CSS3 で 3D の Cube を描いて回転させてみましょう 3DCubeAnime1 の説明 HTML の記述 (3DCubeAnime1.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 cube の div 要素を記述し
コンテンツ作成基本編
コンテンツ作成マニュアル基本編 もくじ コンテンツとは 公開する求人検索サイト内の情報の一つ一つを指します 3~7 サイト作成の流れ 求人検索一覧ページ 求人検索を行うためのページを作成するための一覧の流れです 8~8 その他コンテンツについて 各々のページを作成するための コンテンツ管理画面の項目です 9~0 コンテンツとは 3 コンテンツとは コンテンツとは 公開するWebサイトのページつつを指します
transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動
1225-8 練習 8 Translate Balls(translateX, translatey, translate) transform プロパティの translate 関数を使用して 2 つのボールを斜めに転がすトランジシ ョンを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると 2 つのボールが斜 めに転がります 動きの仕組み このトランジションは
12 SONY XperiaZ2Tablet Android SONY XperiaZ3Tablet Android SONY XperiaZ4Tablet Android Microsoft Surface 3 Windows10 16 Microsoft Su
平成 28 年 6 月 3 日時点 A-3 モバイル POS システム 対象機器 タブレット PC スマートフォン アンサンシステムズ株式会社 1 アップル ipad ios7.1 以上 2 アップル iphone ios7.1 以上 3 アップル ipad Air ios7.1 以上 4 アップル ipad mini ios7.1 以上 5 アップル ipad Pro ios7.1 以上 6 アップル
2. 生田仮想デスクトップ PC の接続方法 生田仮想デスクトップ PC に接続する方法は 次の 2 通りです 1. HTML アクセス Internet Explorer や Safari などのブラウザを用います PC に特別なソフトウェアをインストールす る必要が無いので 管理者権限をもってい
生田仮想デスクトップ PC の利用方法について (Macintosh 版 ) 1. はじめに 2015.8.26 生田メディア支援事務室 生田仮想デスクトップ PC とは 学内サーバーシステム上に構築した仮想的な PC のことです 生田仮想デスクトップ PC を用いると 生田キャンパスの情報処理教室や教育用情報処理室の PC にインストールされているアプリケーションのほとんど 1 を 研究室 / 実験室の
採用試験を受験される皆様へ 採用試験に関して 基礎能力診断及び個人特性診断に関しては インターネット e ラーニング にて受験いただく様になりました 以下の受験方法等を確認の上 受験頂きますようお願い致します 西濃運輸株式会社 人事課
採用試験を受験される皆様へ 採用試験に関して 基礎能力診断及び個人特性診断に関しては インターネット e ラーニング にて受験いただく様になりました 以下の受験方法等を確認の上 受験頂きますようお願い致します 西濃運輸株式会社 人事課 受験の方法について PC タブレット スマートフォンにて受験可能です ガラケーからは受験いただくことはできません 推奨環境等は末項資料にてご確認ください 受験は コチラの
2. 生田仮想デスクトップ PC の接続方法 生田仮想デスクトップ PC に接続する方法は 次の 2 通りです 1. HTML アクセス Internet Explorer や Safari などのブラウザを用います PC に特別なソフトウェアをインストールす る必要が無いので 管理者権限をもってい
生田仮想デスクトップ PC の利用方法について 1. はじめに 2015.8.26 生田メディア支援事務室 生田仮想デスクトップ PC とは 学内サーバーシステム上に構築した仮想的な PC のことです 生田仮想デスクトップ PC を用いると 生田キャンパスの情報処理教室や教育用情報処理室の PC にインストールされているアプリケーションのほとんど 1 を 研究室 / 実験室の PC または自宅等の
m_sotsuron
iphone Web 0848066 1. 1 1 1 2 iphone 2 3 2 4 3 2. 3 1 3 2 iphone Web 6 3 HTML 10 4 CSS 12 5 iphone 14 6 15 7 16 8 ipad 18 3. 22 iphone Web Web 2 iphone Web iphone iphone Web iphone Web PC 1 2000 iphone
WSMGR for Web External V7.2 L50 ご紹介
WSMGR for Web External V7.2 L50 メインフレーム業務の企業外利用を実現するサーバ導入型エミュレータのご紹介 WSMGR for Web External とは? メインフレーム業務の利用を企業外から実現 HTML ベースのディスプレイ機能により 端末側のブラウザだけでメインフレームにアクセス可能 代理店 販売店など外部からのメインフレーム業務の利用に対応 スマートデバイスをサポート
SMILE V / evalue V 推奨環境 2019 年 5 月現在 最新情報はこちらをご参照ください
SMILE V / evalue V 推奨環境 2019 年 5 月現在 最新情報はこちらをご参照ください https://www.kkosk.co.jp/support/smile_v/index.html https://www.kkosk.co.jp/support/evalue_v/index.html 推奨環境 (SMILE V / evalue V 共通 ) やデータベース 等は日本語版が必要です
MD HyBook Reader とは MD HyBook Reader とは 本棚の機能を備えた電子書籍ビューワです ビューワの機能としては 高解像度タブレット端末の機能を充分に生かすことが出来る高画質な電子書籍コンテンツの表示に対応すると共に 高画質化に伴ってファイル容量が大きくなる電子書籍コン
2012 年 5 月 22 日 株式会社メディアドゥ スマートフォンやタブレット端末に最適な電子書籍ビューワ MD HyBook Reader の提供を開始 電子書籍配信プラットフォームを提供する株式会社メディアドゥ ( 本社 : 愛知県名古屋市代表取締役社長 : 藤田恭嗣 ) は スマートフォンやタブレット端末 (iphone/ipad 及び Android) 向けに これまでのスマートフォン向け電子書籍ビューワでは実現出来なかった
SilverlightR について PRONEXUS WORKS は OS と Web ブラウザに従来どおりマイクロソフト社の Windows シリ ーズと InternetExplorer シリーズを採用すると共に 新たにマイクロソフト社のプラグインソフトである SilverlightR を利用い
動作環境.PRONEXUS WORKS の基本 動作環境 以下の環境で動作確認を実施しております Windows 0 Windows 8. OS ブラウザ InternetExplorer.0 その他 MicrosoftSilverlight 5 Windows 7 SP 上記に記載のないOS Webブラウザは稼働確認されておりません なお Windows0をご利用の場合 Microsoft Edge
ミガロ.製品 最新情報
セッション No.1 ミガロ. 製品最新情報 株式会社ミガロ. RAD 事業部 アジェンダ はじめに 1. Delphi/400 最新情報 Delphi/400 バージョン 機能リリースの遷移 Delphi/400 で追加された新機能 2. JC/400 最新情報 JC/400 バージョン 機能リリースの遷移 JC/400 で追加された新機能 3. Business4Mobile 新製品 Business4Mobile
スタイルシートでデザインを整えよう
スタイルシートでデザイン (2) CSS (Cascading Style Sheets) ここまで HTML は文章の意味的な役割を記述するもので 表示はブラウザ次第であることを強調してきました あるブラウザでの表示方法を前提に HTML で見た目を制御しようとすると 他の環境では意味が通じにくい 相互運用性の低い情報となってしまいます Web の表現を作者が指定するには HTML ではなく スタイルシートという別の機能をもちいます
Microsoft PowerPoint _3a-SEO.pptx
3.Web の使いやすさ 検索エンジン最適化 Web アクセシビリティ 1 検索エンジンのシェア 2018 年 5 月現在の世界シェア (%) モバイル にはタブレット端末も含む デスクトップ モバイル Google 70.0 81.3 Baidu ( 百度 ) 17.2 12.7 Bing ( マイクロソフト ) 7.6 0.8 Yahoo! 3.6 0.8 その他 1.6 4.4 出典: http://netmarketshare.com/
サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out
1339 アウトラインのアニメーション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースと して使用されることが多い機能です また outline でボックスの輪郭をアニメーションさ せることもできますが あまり使われることはないかもしれません アニメーションで変化させることができる outline 関係のプロパティ outline-color animation
目次 1. ログイン ログアウト デスクトップ ( 例 :Word Excel 起動中 ) Dock( 例 :Word Excel 起動中 ) Finder ウィンドウ メニューバー ( 例 :Word 起動中 )...
2017 年 9 月 19 日 目次 1. ログイン... 1 2. ログアウト... 3 3. デスクトップ ( 例 :Word Excel 起動中 )... 4 4. Dock( 例 :Word Excel 起動中 )... 5 5. Finder ウィンドウ... 9 6. メニューバー ( 例 :Word 起動中 )... 10 7. 文字の入力 ( 例 :Word で入力 )... 11
1. インストール方法 STEP 1 ダウンロードしたファイルを任意の場所に解凍します Windows 標準の機能を用いて解凍する場合は ファイルを選択して 右クリックメニューから [ すべて展開 ] を選択し 表示されたメッセージに従って解凍します STEP 2 解凍されたフォルダにある Setu
スマホで議事録 体験版 取扱説明書 本取扱説明書で記載している画像は Windows 10 ( 一部 :Windows 7) で取得したものです OS の種類によっては 異なる画面イメージになります - 1 - 1. インストール方法 STEP 1 ダウンロードしたファイルを任意の場所に解凍します Windows 標準の機能を用いて解凍する場合は ファイルを選択して 右クリックメニューから [ すべて展開
( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ
1330-2 Radial Gradation のアニメーション (2) 背景 (background) を円形グラデーション (Radial Gradation) のアニメーションにして みましょう radial-gradient と repeating-radial-gradient の仕様は 別本 Transition を使いこな す編 の 1238-1 円形グラデーション Radial Gradation
ウェブデザイン技能検定 1 級実技 平成 28 年度 第 4 回 ウェブデザイン技能検定 1 級 実技試験概要 試験にあたっての注意事項 試験者は本試験の留意事項 注意事項に留意して作業を行うこと ペーパー実技試験は 課題 1 から 5 までの 5 課題を 60 分間で行うこと 作業実技試験は 課題
平成 28 年度 第 4 回 ウェブデザイン技能検定 1 級 実技試験概要 試験にあたっての注意事項 試験者は本試験の留意事項 注意事項に留意して作業を行うこと ペーパー実技試験は 課題 1 から 5 までの 5 課題を 60 分間で行うこと 作業実技試験は 課題 1 から 4 までの 4 課題を 180 分間で行うこと 試験問題の詳細は 試験当日配布する 1 1. 試験実施にむけての留意事項 試験は
1 グループ管理者とは ページ設定 ( グループページの設定 ) を行うことができるのがグループ管理者です グループ管理者はパーツのレイアウト変更や グループメンバーの権限設定 メンバーの招待などグループページ内の管理について様々に設定することができます 例えば町内会でグループページを作成し運用して
ページ設定や参加メンバーの設定 eコミのデザインを決めるスキンの設定など 一般ユーザー にはできず グループ管理者 / 副管理者 のみができる操作について説明していきます 1 グループ管理者とは ページ設定 ( グループページの設定 ) を行うことができるのがグループ管理者です グループ管理者はパーツのレイアウト変更や グループメンバーの権限設定 メンバーの招待などグループページ内の管理について様々に設定することができます
ISM CloudOne Ver.6.2i スマートデバイス検証済み機種一覧 更新 :2017 年 12 26 対応状況凡例 : すべての機能が利 可能 : 部機能に制限があります 詳細はISM CloudOneサービス提供事業者までお問い合わせください : 更新箇所 ios 端末検証済み機種一覧 機種名 iosバージョン 確認日 対応状況 iphone3gs 5.0.1 2014/11/20 iphone4
【別冊】FENICS II ユニバーサルコネクト デバイス証明書認証サービス 接続確認機器
別冊 デバイス証明書認証サービス 接続確認機器 第 2.4 版 2018 年 9 月 富士通株式会社 Copyright FUJITSU LIMITED 2014-2018 改版履歴版数 更新月 更新内容 1.0 2014/01 初版 1.1 2014/04 対応 OS から WindowsXP を削除対応ブラウザから IE6 を削除 1.2 2014/07 接続確認機器にソフトバンクモバイル-iPhone5S-iOS
UTF-8への文字コード変更に伴う自作CSSとJavascript修正について
UTF-8 への文字コード変更に伴う自作 CSS と Javascript 修正について Google の推奨により お店ページの文字コードを現在の EUC-JP から UTF-8 へ変更します 文字コードを UTF-8 にすることで 検索結果の順位や数にプラスに働くことが期待できます 今回の文字コードの変更により 店舗さん自身で設置しているスタイルシートや Javascript がある場合 お店ページのレイアウトが崩れる
PowerPoint プレゼンテーション
情報システム基礎演習 B 2016/01/28 (Thurs.) テーマ 4 JavaScript による電卓 Web アプリを作成しましょう 健山智子 ([email protected]) 広島工業大学情報学部知的情報システム学科知的情報可視化戦略研究室 (ival) 講義のアウトライン 2 1. グループの決定 : 1. 5 人での 6 グループ ( ランダム
目次 1 サービス概要 3 あんしんフィルター for auとは 4 動作環境 5 2 利用開始 6 アプリをインストールする 7 サービスを開始する 8,9 あんしんフィルター for au アプリアイコンの移動 10 3 設定変更 11 管理者を登録する 12 管理者画面を表示する 13 管理す
保護者様向け設定ガイド 2017 年 2 月版 目次 1 サービス概要 3 あんしんフィルター for auとは 4 動作環境 5 2 利用開始 6 アプリをインストールする 7 サービスを開始する 8,9 あんしんフィルター for au アプリアイコンの移動 10 3 設定変更 11 管理者を登録する 12 管理者画面を表示する 13 管理するiPhone,iPadに名前をつける 13 フィルタリング強度を設定する
スライド 1
MyET マニュアル資料 1 ダウンロードとログイン方法 Windows/Mac/ スマートフォン 2 パスワード変更方法 Windows/Mac/ スマートフォン 3 受講方法 1 お願い MyET をインストールし ログインができましたら 1 パスワードの変更をしてください p21 参照 変更したパスワードは忘れないようにしてください 2 メールアドレスは自分のアドレスへの変更をしてください p21
デジタルブック作成ソフト FLIPPER U製品紹介
クイズ アンケート作成ソフト 単純なテキスト文の 問題では満足できない 概要紹介 本物の教育担当者のための本格派クイズ テスト作成ソフト 東京オフィス 110-0016 東京都台東区台東 4-13-21TOWA SKY BLDG. 3F つくばオフィス 305-0817 茨城県つくば市研究学園 5 丁目 20 番地 2つくばシティア モアビル5F 文書番号 :09 製 -TH040001-13 2017/10/10
◎phpapi.indd
PHP や HTML の知識がなくても大丈夫 PHP や HTML の基本も学べる FileMaker データベースを Web に公開したい FileMaker を使って動的な Web サイトを作りたい FileMaker しか知らない人が Web アプリケーションを作れるようになる! はじめに まず 本書を手に取ってくださりありがとうございます 本書はある程度 FileMaker Pro の扱いに慣れ
Release Notes
Concur リリース ノート Concur Mobile アプリ 年/月 対象 バージョン 9.53.1 - 関連 Web リリース: 2018 年 1 月 英語版の投稿: 1 月 13 日 月曜日 9:00 AM 太平洋時間 Concur をお使いのお客様 最終版 コンテンツ 概要... 3 Windows Phone / BlackBerry ** サポート終了 **... 3 Android...
Notesアプリが iPadで動くDomino Mobile Apps ご紹介
Notes アプリが ipad で動く Domino Mobile Apps ご紹介 Copyright 2019 HCL Technologies Limited www.hcltechsw.com Domino Mobile Apps のご紹介 Domino Mobile Apps とは? Domino サーバー アプリケーション XPages 既存の Notes アプリ (nsf) を そのまま実行する
ヘルスアップWeb 簡単操作ガイド
6. 歩数計アプリケーション ヘルスアップ Web の歩数記録の機能を利用するには 3 つの方法があります それぞれの特徴を踏まえて ご利用ください 1 データ登録方法とその特徴 データ登録方法 手入力 ヘルスアップ Web の画面にて 日単位で手入力 概要費用 無料 健康ポイント 非対象 YAMASA 用歩数計アプリ ヘルスアップ Web からダウンロードして 認証コード等の接続設定を行う PC
INDEX 1. はじめに... 2.IE11 の設定 IE11 バージョンの確認方法 IE11 ポップアップの許可設定 IE11 HTML 明細書印刷の設定 IE11 互換表示設定... 3.Chrome の設定 Chrome
インターネットブラウザ 設定マニュアル INDEX 1. はじめに... 2.IE11 の設定... 2.1 IE11 バージョンの確認方法... 2.2 IE11 ポップアップの許可設定... 2.3 IE11 HTML 明細書印刷の設定... 2.4 IE11 互換表示設定... 3.Chrome の設定... 3.1 Chrome バージョンの確認... 3.2 Chrome ポップアップの例外設定...
居場所わかるくん CMX 連携設定 操作ガイド 2019 年 4 月
2019 年 4 月 目次 1 はじめに... 3 2 とは... 3 3 人から探す... 4 3.1 社内電話帳での位置情報 ( ウェブ )... 4 3.1.1 社内電話帳一覧画面... 4 3.1.2 社内電話帳詳細画面... 5 3.1.3 フロア MAP... 6 3.2 社内電話帳での位置情報 ( スマートフォン )... 7 3.2.1 ステータス... 7 3.2.2 位置情報...
SSB_G_ver1.0_2013.8
Ver.1. 014.9 3 4 5 6 8 8 9 19 19 0 3 4 4 5 10 10 1 13 15 15 16 17 Step1 Step -1 - Step3 3-1 3-3-3 Step4 4-1 4-4-3 Step5 5-1 5- Step6 6-1 6- Step7 7-1 7- Step8 8-1 8- Step9 7 7 8 9 31 31 はじめに 本資料では スマホサイトビルダー
<4D F736F F D E835A A C98AD682B782E98E77906A89FC92F994C52E646F63>
1. はじめに 1 1-1. ガイドラインを策定するにあたって 1 1-1-1. ウェブアクセシビリティとは 1 1-1-2. ウェブアクセシビリティが求められている背景 1 1-1-3. 高齢者 障害者の閲覧時の利用特性 2 1-1-4. 視覚障害者への対応 2 1-1-5. ウェブアクセシビリティの JIS 規格化 3 1-1-6. ガイドラインの重要性 3 1-2. ガイドラインの適用範囲 4
IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 2014 IBM Corporation
IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 目次 1. はじめに ( 資料の目的 ) 2. Coach View 構造の基本 2.1 CSS の基礎 2.2 Coach における CSS 記述場所 2.3 標準 Coach View 構造の基本 2.4 Coach における CSS セレクター指定の基本 3. 実践
PALRO Gift Package 操作説明書
5 章 PALRO What's up? を使おう この章では 専用アプリケーションの PALRO What's up? をインストールして PALRO をリモコン操作する方法について説明します 5 章 PALRO What's up? を使おう 129 5-1 PALRO What's up? とは 専用アプリケーションの PALRO What s up? の概要について説明します PALRO What's
「MS Office Online on あずけ~る」の提供開始について
2015 年 4 月 14 日 MS Office Online on あずけ ~ る の提供開始について ~ 利用頻度が高い Word Excel PowerPoint に絞った国内唯一の安価なビジネス向けクラウドサービス ~ NTT 東日本は オンラインストレージサービス フレッツ あずけ ~ る のオプションサービスとして フレッツ あずけ ~ る 上に保存した Word Excel PowerPoint
自宅でJava言語の開発環境を作る方法
自宅で Android アプリ 開発環境を作る方法 2011 年 3 月 8 日現在 あいあいスクール代表 畠茂雄 ( はたけしげお ) もくじ はじめに... 3 第 1 章 : 開発に必要なソフトウェアのインストール... 4 (1)Java SE Development Kit (JDK) のインストール... 5 (2)Android SDK のインストール... 11 (3) 統合開発環境
はじめにデザイン管理について デザイン管理でできること デザイン管理では ショップの画面レイアウトや ヘッダー フッターなどの HTML 編集を行うことができます また CSS( カスケードスタイルシート ) の編集など 高度なサイトデザイン調整も可能です 以下の端末ごとに デザイン管理が可能です
カゴラボ管理画面操作 設定マニュアル CHAPTER 9 デザイン管理編 カゴラボバージョン 4.1.4 お問い合せはこちらまで カゴラボサポートセンター 0120-713-362 ( 携帯電話からは 0985-23-3362 ) E-mail : [email protected] 受付時間 : 平日 10:00~12:00/13:00~18:00 ( 祝祭日及び弊社休業日を除く ) 提供企業
Office365マニュアル_学生向け
はじめに このマニュアルでは Office365 の使い方について説明します 必ず 2.Office365 ご利用に関する注意事項 をお読み頂いたあとにご利用下さいますようお願いします 目次 1. Office365 とは 2. Office365 ご利用に関する注意事項 3. サインイン方法 4. ブラウザ版 Office アプリの利用方法 5. Office アプリのインストール手順 1.) パソコンに
Microsoft Word - 操作マニュアル(PowerPoint2010).doc
PowerPoint2010 基本操作 P.1 PowerPoint2010 基本操作 1.PowerPoint の起動... 2 2. スライドのサンプル... 3 3. スライドの作成... 4 4. 文字の入力とテキストボックス... 5 5. 図の作成と書式設定... 5 6. グラフの作成... 5 7. 背景デザインと配色... 7 8. アニメーション効果... 8 9. スライドショーの実行...
ホームページ・ビルダー16
Part 2 テンプレートからページを作る (3) Part 2-3 テンプレートを使ってページを作ろう テンプレートを利用してホームページを作りましょう テンプレートを利用すると 文字や画像を差し替えるだけで魅力的で華やかなページを作ることができます 特にフル CSS テンプレートを利用して作ったページは ページのデザインやレイアウトをスタイルシートで管理しているため あとから簡単にデザインやレイアウトの変更ができます
