animationプロパティとは @keyframe規則で定義したアニメーションを要素に適用するためのプロパティ 主なアニメーション関連のプロパティ プロパティ名 説明 animation アニメーション関連のショートハンドプロパティ animation-name アニメーションのキーフ…

＠keyframes規則とは アニメーションのキーフレーム(通過点)を定義するための規則 ＠keyframes規則の記述例 @keyframes fadeout { from { margin-left: 0%; opacity: 1; } to { margin-left: 100%; opacity: 0; } } from、toは％に変更可能

transitionプロパティとは 変化速度を制御する。 主なトランジション関連プロパティ プロパティ 説明 transition トランジションのショートハンドプロパティ transition-duration 変化にかかる時間を秒(s)、またはミリ秒(ms)で指定する transition-property …

caption-sideプロパティとは キャプションの表示位置を指定するプロパティ。 キャプションを上下のいずれかの位置に表示できる。 左右への表示はCSS2.1で削除された。

transformプロパティとは 要素を移動、回転、拡大/縮小、傾斜することが可能。 transformプロパティの主な設定値 設定値 説明 translate(X軸[,Y軸]) 要素を移動する。 rotate(角度) 要素を回転する。 scale(数値) 要素を拡大/縮小する。 skew(角度) 要素を傾…

可変ボックスとは さまざまなディスプレイサイズに適応するためのレイアウトモードの1つ。 ディスプレイサイズに応じて、要素の大きさやマージンなどを最適化できる。

Webフォントとは Webサーバ上のフォントデータを取得して、ブラウザ上で文字を表現するフォント。 クライアントマシン環境の影響を受けずに同一のフォントで文字を表現できる。 webフォントの設定例 @font-face { font-family: "myfont"; src: url("https://…

list-styleプロパティとは list-style-typeプロパティとlist-style-imageプロパティ、list-style-positionプロパティをまとめて設定できる。 list-styleプロパティでまとめて指定できるプロパティとその概要 プロパティ名 概要 記述例 list-style-type li要…

HTMLの要素を非表示にするCSSプロパティの設定例 opacity: 0; visibility: hidden; display: none; opacityプロパティとvisibilityプロパティを用いた場合、HTML要素が占めていたスペースは確保される。 displayプロパティで非表示にした場合、HTML要素が占…

clipプロパティとは HTML要素の特定の部分のみを可視化するCSSプロパティ。 可視化する位置をrectで指定する。 ★rectは4つの値で位置を指定する。 1つ目は要素の上からの位置。2つ目以降は順に、右からの位置、下の位置、 左からの位置 「position: absolute…

clipプロパティとは HTML要素の特定の部分のみを可視化するCSSプロパティ。 可視化する位置をrectで指定する。 rectは4つの値で位置を指定する。

疑似クラスとは 要素の状態やタイミングに対してスタイルを適用し、セレクタと組み合わせて記述する。 疑似クラスの書式 セレクタ : 疑似クラス名 { プロパティ:値; } 疑似要素とは 疑似クラスと同様に、要素のタイミングに対してスタイルを適用する。 疑似…

インラインスタイルシートとは 特定の要素にスタイルを指定する場合、スタイルを指定する要素にstyle属性として記述するもの 複数の要素に同じスタイルを指定するには一つ一つ指定する必要がある インラインスタイルシートの記述例 <h1 style="color: red; text-decoration: underline">お知らせ</h1> １つの要素に複…

名称 説明 BMP Windows標準のフォーマット。圧縮されないため、画像劣化はほとんどない。 ファイルサイズが大きくなりやすく、Webサイトでの使用は不向き。 GIF 256色までしか表現できない。アニメーションを表現できる。 PNG GIFよりも圧縮率がよく、圧縮後…

Ajaxとは 非同期通信によってサーバとデータのやり取りを行い、動的なページの書き換えを行う技術 JavaScriptの組み込みオブジェクトであるXMLHttpRequestを利用して非同期通信を行い、通信結果をJavascriptで処理してWebページに反映する データのみ取得 メ…

主な状態管理 HTTPクッキー：ブラウザに少量のデータを保存する 隠しフィールド：Webページ内に少量のデータを保存する クエリ文字列(URLパラメータ)：URLにパラメータを保持する セッション：サーバ側でデータを管理する

マイクロデータとは HTMLドキュメントに機械が識別可能なデータを埋め込むための技術 検索エンジンなどの機械がHTMLドキュメント内のコンテンツの意味を把握できるようになるため、検索エンジン対策などに役立つ 記述例 <div itemscope itemtype="http://schema.org/Person"> <p itemprop="name">山下花子</P> <p itemprop="email">sample@com.jp</P> <p itemprop="jobTitle">ラーニング</P> </div>…

DOMとは HTMLドキュメントとXMLドキュメントを制御するためのAPI DOMを用いることで、HTMLドキュメントを動的に制御できる DOMで制御できる主な操作 要素の追加、削除 属性の操作 イベント処理

Data URIスキームとは HTMLドキュメントやCSSに外部リソースを埋め込むための方法 書式 data:[メディアタイプ][;base64],データ メリット 外部リソースの数が減り、ブラウザ/Webサーバ間の通信回数を減らすことができる。 デメリット 画像ファイルを埋め込む…

meta要素とは Webページに関する情報を埋め込むための要素 meta要素を用いることで、Webページの文字コードの指定やリダイレクト、検索エンジンに対する設定ができる 文字コードを指定する書式 ※HTML５以降の指定方法 <meta charset="文字コード"></meta>

URLとは ネットワーク上の住所 URLの記述規約 スキーマ://ホスト名:ポート番号/ディレクトリ/ファイル名 オリジン：スキーマ://ホスト名:ポート番号 URI、URL、URNの違い URI：URL、URNのどちらか、または両方 URL：httpから始まる住所のようなもの(WHERE) U…

HTTPリクエストとは ブラウザからWebサーバに対する要求のこと。 HTTPリクエストのメッセージ構造 POST http://www.hatena.com/jp/ HTTP/1.1 Content-Type: text/plain Content-Length: 598 User-Agent: Mozilla/5.0･･ foo=bar メッセージの開始行には、リク…

Basic認証 HTTPで実装されている認証方式の1つ。 特徴 ユーザ名、パスワードはAuthorizationヘッダに付加されて送信される 認証が失敗した場合、ステータスコードとして401が返される。 ほぼすべてのブラウザやWebサーバで実装されている。 ユーザ名、パスワ…

種類 番号 意味 情報 101 プロトコルの切り替え 成功 200 成功 リダイレクト 301304307 永続的なリダイレクト変更なし。キャッシュしたファイルが使用される。一時的なリダイレクト クライアントエラー 401403404 認証が必要アクセス権が必要リソースが見つ…

リクエストメソッド 説明 GET リソースの要求 POST リソースの送信 PUT リソースの更新 DELETE リソースの削除 HEAD リソースの要求 ※レスポンスボディを返さない OPTIONS サーバの調査 CONNECT トンネルを開く TRACE ネットワーク経路の調査