-
- いいね！1
風見聡
@kazami7
メディアクエリ＝@ media(max-width:画面サイズpx){ セレクタにプロパティ適用}。フルードイメージ＝画像を画面サイズで拡大縮小。グリッドデザイン＝px指定で画面デザイン。フルードグリッド＝グリッドデザインを可変対応。フルードデザイン＝横幅でサイズを拡大縮小。
2014-11-29 14:02:13
風見聡
@kazami7
CSS3勉強中。.class:nth-of-type(2) = 要素:nth-of-type(2) = 要素:nth-child(2) = class:nth-child(2) = # id+要素 =classとidを持つ2番目の要素を指定。position:static 初期値
2014-11-30 12:28:02
風見聡
@kazami7
HTML5勉強中。メディアタイプ media="all" 全部、"screen" ディスプレイ、"handheld" 携帯機器、"print" プリンタ、"speech" 音声ブラウザ、"braille" 点字ディスプレイ、"projection" プロジェクタ、"tv"テレビ。
2014-12-06 17:23:02
風見聡
@kazami7
HTML5勉強中。レスポンシブデザインのメディアクエリ設定 1:linkタグ内に media="(max-width:480px)"。2:CSS内に @media(max-width:480px){ セレクタ{ } }。max-width 適用する最大画面幅※高さはheight
2014-12-06 18:45:51
風見聡
@kazami7
HTML5勉強中。device-width デバイス指定の横幅 ※widthはブラウザの表示サイズ。media(orientation:portrait){ } デバイスの向き※横向きは:landscape。device-aspect-ratio:16/9 アスペクト比16:9。
2014-12-06 18:58:32
風見聡
@kazami7
HTML5勉強中。横幅320px-480pxの指定 @media(min-width:320px) and (max-width:480px){ }。※メディアタイプの初期値はall。andでメディア特性と同時に指定可。※メディアクエリはIE8未対応、Javascriptが必要。
2014-12-06 19:05:39
風見聡
@kazami7
HTML5勉強中。ブレイクポイント=メディアクエリのdevice-width等で指定したCSSによるレイアウト変更の基準となる画面幅。メジャーブレイクポイント=シェアの高いデバイスに対応したブレイクポイント。グリッドシステム=画面を格子状に12分割したレイアウトデザイン。
2014-12-06 19:24:25
風見聡
@kazami7
HTML5勉強中。メディアクエリの他に、フルードデザイン=横幅を%指定することによる可変レイアウトの実装がある。フルードイメージ=img {max-width:100%}。可変の背景画像 background-size:contain; フルードグリッド=グッドデザインの%置換。
2014-12-06 19:34:12
風見聡
@kazami7
HTML5勉強中。スマホ等のピクセル比2の高解像度ディスプレイにおいて画像がぼやける=2倍サイズの画像を半分のwidth,height指定する。※メディアクエリのwebkit-device-pixel-ratio:2で別の画像使用も可。
2014-12-06 19:54:27
風見聡
@kazami7
HTML5勉強中。スマホのiOS等では横幅980pxのウィンドウ(viewport)で表示される。これを最適化するには meta name="viewport" content="width=device-width,initial-scale=1.0" デバイスの横幅、倍率1倍
2014-12-06 20:11:07
風見聡
@kazami7
HTML5勉強中。CSSスプライト=アイコン等の4つの画像を1つに結合した画像を用意し、CSSで4分割して背景指定することで、1枚の画像を4つのアイコンとして使用する。要素に背景を設定した上で、background-position:0px -100px; ←画像ファイル内の座標
2014-12-06 20:39:12
風見聡
@kazami7
HTML5勉強中。script 初期値=スクリプト読込完了後にページ表示、async ページ表示中でもスクリプト実行、defer ページ表示後にスクリプト実行。※両方指定時はasync優先。リセットCSS=ブラウザ毎の初期値を統一するため最初に読み込ませるCSSファイル。
2014-12-06 20:50:11
風見聡
@kazami7
ファビコン=ブクマアイコン。16*16px、ico形式、link rel="shortcut icon" href="img/favicon.ico"。電話番号リンク解除 meta name="format-decoration" content="telephone=no"。
2014-12-06 20:55:18
風見聡
@kazami7
HTML5勉強中。スタンドアローンモード=アドレスバーを非表示にする=フルスクリーンモード。※safariのみ meta name="apple-mobile-web-app-capable" content="yes"。
2014-12-06 21:00:50
風見聡
@kazami7
HTML5勉強中。@media (orientation:portrait) 縦向き :landscape 横向き。style media="xx"も有り。scriptにはメディアタイプ指定できない。※javascript内でif分岐させる。「幅640pxを超える」<640px。
2014-12-07 13:46:59
風見聡
@kazami7
HTML5勉強中。オフラインWebアプリケーション＝アプリケーションキャッシュの技術により、オフラインでも使用できるWebアプリ＝Googleドライブ等。アプリケーションキャッシュ＝HTML、Javascript、画像等のリソースをローカル上に保存する仕組み。
2014-12-07 14:06:28
風見聡
@kazami7
仕組み。マニフェストファイルでキャッシュするリソースを指定する。 ファイル名:manifest.appcash 内容:CACHE MANIFEST xxx.html xxx.css サーバ側の設定:mime.typesに、 text/cache-manifest manifest
2014-12-07 14:51:17
風見聡
@kazami7
マニフェストファイルの設定続き。 サーバ側の設定・別の方法 .htaccessに、 AddType text/cache-manifest manifest マニフェストファイルをHTMLで読込む <html manifest="manifest.appcache">
2014-12-07 15:04:34
風見聡
@kazami7
※アプリケーションキャッシュの更新はマニフェストファイルの変更を基準とするため、リソースを更新した場合は必ずマニフェストのタイムスタンプを更新する必要がある。 # Timestamp: 201412071513 ※コメントアウトする。
2014-12-07 15:14:06
風見聡
@kazami7
アプリケーションキャッシュのマニフェストファイルで指定するセクション。CACHE キャッシュするリソースのURL、NETWORK オフライン不可のファイルのURL、FALLBACK アクセスできない場合のリダイレクト先 ※指定ない場合、CACHEセクションと看做される。
2014-12-07 15:37:56
風見聡
@kazami7
HTML5勉強中。ブラウザからサーバへのHTTPリクエストのメソッド。GET リソースの取得、POST サーバへデータ送信、HEAD HTTPヘッダ取得、PUT リソース保存、DELETE リソース削除、OPTIONS 対応メソッド等のサーバ情報の取得、TRACE ループバック。
2014-12-14 17:40:34
風見聡
@kazami7
続き。CONNECT プロキシを使用。HTTPリクエストのヘッダフィールド(抜粋)。HOST ホスト名、Connection 持続的接続の制御、Cache-Control キャッシュの制御、Accept 受け入れ可能コンテンツタイプ、User-Agent クライアントの識別情報。
2014-12-14 17:44:22
風見聡
@kazami7
続き。Authorization 認証情報、Cookie 保持するクッキーの内容、Set-Cookie クッキーの設定、Referer リクエストの送信元、Location リソースの場所、Expires 有効期限。
2014-12-14 17:48:10
風見聡
@kazami7
HTTPレスポンスでのステータスコード。200 OK 成功、301 Moved --リソースの恒久的移動、304 Not Modified リソースが更新されていない、307 Temporary --リソースが一時的に移動、400 Bad Request 不正なリクエスト。
2014-12-14 17:52:52
風見聡
@kazami7
続き。401 Unautorized 認証不可 ※Basic認証等、403 Forbidden アクセス禁止 ※パーミッション設定や.htaccess設定等、404 Not Found リソースがない、408 Request Timeout タイムアウト。
2014-12-14 17:57:50