transform-origin－CSS3リファレンス
transform-originプロパティは、要素に2D変形、または、3D変形を適用するときの変形の原点を指定する際に使用します。 値は1つ、または、スペースで区切って2つ指定します。値を1つだけ指定すると、2番目の値はcenterとみなされます。 値を2つ指定すると、両方がキーワード値である場合を除いて、最初の値は水平方向、2番目の値は垂直方向の値となります。 値をパーセンテージや長さで指定する場合、2D変形では変形前の要素の左上位置（0,0）から右下方向への距離（ローカル座標システム）で指定します。 また、3D変形では変形前の要素の左上位置（0,0,0）から右下方向への距離（ローカル座標システム）で指定します。 値には負のパーセンテージや負の長さを指定することもできます。 ■値 パーセンテージ 変形を適用する要素の左上位置(0%,0%)からのパーセンテージ、および、3Dの場合にはZ軸方
appearance－CSS3リファレンス
CSSソースは外部ファイル（sample.css）に記述 /* 主な値 */ div.prefix_appearance_normal { -moz-appearance:normal; -webkit-appearance:normal; -o-appearance:normal; -ms-appearance:normal; } div.prefix_appearance_icon { -moz-appearance:icon; -webkit-appearance:icon; -o-appearance:icon; -ms-appearance:icon; } div.prefix_appearance_window { -moz-appearance:window; -webkit-appearance:window; -o-appearance:window; -ms-appea
<INPUT type="image">－HTMLタグリファレンス
<input>タグのtype属性の値にimageを指定すると、フォームの画像ボタンを作成します。 画像ファイルはsrc属性で指定します。画像ボタンにはalt属性が必須となります。 ■属性 type="image" 画像ボタンを作成する name ボタンに名前をつける src ボタンに使用する画像ファイルのURIを指定する alt ボタン画像の代替テキストを指定する HTMLソース <form action="cgi-bin/abc.cgi" method="post"> <p> 名前：<input type="text" name="namae"> </p> <p> <input type="image" src="images/kaeru.png" alt="押してケロ♪"> </p> </form>
ドラッグ＆ドロップ－HTML5のAPI、および、関連仕様
■ドラッグ＆ドロップとは ドラッグ＆ドロップとは、ウェブページ内の要素やローカル環境に保存されたファイルなどのデータを、 マウスで引きずるように移動させて他の場所に置く操作のことです。 HTML5以前にも、mousedownやmouseupなどのイベントで実現することはできましたが、 HTML5ではドラッグ＆ドロップ専用の新しいイベントや新しいメソッド・属性が追加されています。 ドラッグ＆ドロップを理解するには、ドラッグ操作とドロップ操作を分けて考えると理解しやすいでしょう。 ドラッグ操作は要素などのデータをマウスでつかんで引きずるように動かすこと、 ドロップ操作はその動かしたデータをドロップ先の要素内に配置することです。 ■HTML側では、ドラッグする要素にdraggable属性を指定する HTML側では、ドラッグする要素にdraggable属性を指定します。 draggable属性の値
transform:scale()－CSS3リファレンス
transformプロパティのscale()、scaleX()、scaleY()、scaleZ()、scale3d()は、要素を拡大、または、縮小表示する際に使用します。 ■値 scale(数値, 数値) scale()関数では、2つの数値で2D縮尺比率を指定します。 1つ目の数値はX方向、2つ目の数値はY方向の比率です。 2つ目の数値は省略することができますが、この場合には最初の値と同じになります。[sx,sy] scaleX(数値) scaleX()関数では、X方向の縮尺比率を指定します。Y方向とZ方向の比率は1となります。[sx,1,1] scaleY(数値) scaleY()関数では、Y方向の縮尺比率を指定します。X方向とZ方向の比率は1となります。[1,sy,1] scaleZ(数値) scaleZ()関数では、Z方向の縮尺比率を指定します。X方向とY方向の比率は1となります。[
clear－スタイルシートリファレンス
clearプロパティは、floatプロパティで左寄せ、 または右寄せを指定された要素に対する回り込みを解除する際に使用します。 ■値 left 左寄せされた要素に対する回り込みを解除します。 right 右寄せされた要素に対する回り込みを解除します。 both 左寄せ、または右寄せされた全ての要素に対する回り込みを解除します。 none 回り込みを解除しません。これが初期値です。 HTMLソース <p> <img src="../images/img002.gif" alt="サンプル画像" style="float:right;"> 画像を右に寄せて配置します。後に続く内容はその反対側に回り込みます。 </p> <p> 段落が変わっても回り込みます。 </p> <p style="clear:right;"> 回り込みが解除されます。 </p>
position―スタイルシートリファレンス
positionプロパティは、ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する際に使用します。 positionプロパティで指定するのは、配置方法（基準位置）のみです。 実際の表示位置の指定には、 top、 bottom、 left、 rightを併用して、基準位置からの距離を設定する必要があります。 ■値 static 特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。 relative 相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。 absolute 絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositi
オフライン ウェブ アプリケーション－HTML5のAPI、および、関連仕様
■オフラインでもウェブアプリケーションを利用可能に HTML5では、インターネットに接続していないオフラインの状態でも、 ユーザーがウェブアプリケーション（ウェブサイト）を利用できるようにするための、 キャッシュマニフェストと呼ばれる仕様が追加されています。 この仕様の基本的な仕組みは、ユーザーがインターネットに接続してウェブアプリケーションを利用した際に、 HTMLファイル・CSSファイル・JavaScriptファイル・画像ファイル…などの ウェブアプリケーションの利用に必要となるファイルをユーザーのローカル環境にダウンロード保存して、 次回からはオフラインでもウェブアプリケーションを利用できるようにするというものです。 このような仕組みでサーバー上のファイルをローカル環境にダウンロード保存することをキャッシュ（CACHE＝貯蔵所・貯蔵物）といいますが、 ウェブアプリケーションをオフライ
<mark>－HTML5タグリファレンス
<mark>タグは、文書内の該当テキストをハイライトして目立たせる際に使用します。 <strong>や<em>のようにその部分を強調することが目的ではなく、ユーザーが参照しやすいように目立たせることが目的です。 <mark>は、作者が重要と考えている箇所ではなく、ユーザーの操作に関連している箇所に使用します。 例えば、検索結果画面で文書中の検索ワード部分をハイライト表示する場合などに適しています。 ■HTML4.01からHTML5へのバージョンアップによる変更点 mark要素は、HTML5から新たに追加された要素です。 ■使用例 HTMLソース <h2><em>機能</em> の検索結果</h2> <p> HTML5では、これまでのHTML 4と同じようなHTML文書を作成する<mark>機能</mark>が改良されているのに加えて、ウェブアプリケーションを開発するための様々な仕様が新たに
transform:rotate()－CSS3リファレンス
transform:rotate() …… 要素を回転表示する transform:rotateX() transform:rotateY() transform:rotateZ() transform:rotate3d() transformプロパティのrotate()、rotateX()、rotateY()、rotateZ()、rotate3d()は、要素を回転表示する際に使用します。 transform-originプロパティを同時に指定することで、回転の中心を指定することができます。 ■値 rotate(回転角度) rotate()関数では、角度によって2D回転を指定します。 rotateX(回転角度) X軸を軸とする角度によって時計回りの回転を指定します。 rotateY(回転角度) Y軸を軸とする角度によって時計回りの回転を指定します。 rotateZ(回転角度) Z軸を軸とす
document.フォーム名.reset()－JavaScriptリファレンス
フォームオブジェクトのreset()は、フォームの入力内容をリセットします。 HTMLの<input type="reset">で作成するリセットボタンを押したのと同様の結果となります。 ■使用例 HTML + JavaScriptソース <script> <!-- function sample1() { document.sampleform.action="cgi-bin/formmail.cgi"; document.sampleform.method="get"; document.sampleform.submit(); } function sample2() { document.sampleform.reset(); } // --> </script> <form name="sampleform"> <p>名前：<input type="text" name="nam
<input type="image">－HTML5タグリファレンス
<input>タグのtype属性の値にimageを指定すると、画像ボタンを作成します。 画像ファイルはsrc属性で指定します。画像ボタンにはalt属性が必須となります。 ■type="image"の場合に指定可能な属性 type="image" 画像ボタンを作成する name属性 ボタンに名前をつける value属性 ボタンの値を指定する src属性 ボタンに使用する画像ファイルのURIを指定する alt属性 type="image"の場合に、画像の代替テキストを指定（type="image"の場合には必須属性） height属性 type="image"の場合に、画像の高さを指定 width属性 type="image"の場合に、画像の幅を指定 formaction属性 送信先URLを指定 formenctype属性 送信するデータの形式を指定（application/x-www-for
<button>－HTML5タグリファレンス
<button>タグは、ボタンを作成する際に使用します。 type属性はボタンの種類を指定する際に使用します。 type属性の値には、以下の３種類のいずれかを指定することができます。 初期値はtype="submit"です。 type="submit" …… フォーム入力内容を送信するサブミットボタン（初期値） type="reset" …… フォーム入力内容をリセットするリセットボタン type="button" …… 何もしない汎用的な押しボタン form属性は、どのフォームと関連付けるかを指定する際に使用します。 <button>は初期値では直近の親要素となる<form>と関連付けられますが、 <form>のid属性の値と<button>のform属性の値を一致させることで、 ボタンを特定のフォームと関連付けることができます。 ボタンを任意の場所に配置できるので、ウェブアプリケーショ
<input type="submit">－HTML5タグリファレンス
<input>タグのtype属性の値にsubmitを指定すると、フォームの送信ボタンを作成します。 ボタンに表示させる[送信する]などのテキストは、value属性で指定します。 また、name属性は送信ボタンに名前を付ける属性ですが、<form>でデータが送信される際、 name属性で指定した名前とvalue属性の値が一組になって送信されます。 formaction属性（送信先URL）・ formenctype属性（送信するデータの形式）・ formmethod属性（送信方法）・ formnovalidate属性（入力されたデータの妥当性を確認しない）・ formtarget属性（フォーム送信するターゲット先）は、 <form>の属性でも同様の指定をすることができますが、 <input>要素側でこれらの属性を指定すると、<form>の指定より優先されます。 formaction属性・for
text-decoration－CSSリファレンス
text-decorationプロパティは、テキスト傍線のつけ方・色・スタイルをまとめて指定する際に使用します。 指定できるのは、 text-decoration-line・ text-decoration-style・ text-decoration-colorプロパティの値です。 まとめて指定する場合には、半角スペース区切りで値を記述します。 省略された値は、初期値に設定されます。 text-decorationプロパティは CSS1 や CSS2 から存在していますが、 CSS3 からはテキストの線・色・スタイルをまとめて指定できるショートハンド（短縮形）プロパティとして使用できます。 ただし、これらの値をまとめて指定すると、旧いブラウザでは無視されてしまうかもしれません。 text-decoration: underline dotted red; /* 旧いブラウザでは無視される
<a>－HTML5タグリファレンス
<a>タグは、ハイパーリンクを指定する際に使用します。 ウェブページ内のテキストや画像などを<a>～</a>で囲んで必要な属性値を指定してやることで、 ハイパーリンクの始点（出発点）や終点（到達点）とすることができます。 <a>は、anchor（アンカー）の略です。 anchorを日本語にすると“船の錨・つなぎ止めて固定する”といった意味になります。 <a>は、指定した場所同士をつなぐことで関連する情報同士を結び付け、ユーザーに情報間の移動手段を提供する重要なタグです。 href属性は、ハイパーリンク先のURLを指定する際に使用します。 href属性の値には相対パスと絶対パスのどちらでも指定することができます。 相対パスとは、現在のファイルの場所からの相対的なパスを指定する方法で、 同じドメイン名のURL同士ならフォルダ階層やファイル名を指定するだけでリンクすることができます。 絶対パスと
<em>－HTML5タグリファレンス
<em>タグは、強勢する（アクセントを付ける）箇所を表す際に使用します。 <em> ～ </em>を入れ子にすることで、 コンテンツの特定個所が持つ強勢の度合いを指定し分けることができます。 同じ文でもどの個所をどの程度の強さで強勢するかによって、ニュアンスが異なってくるでしょう。 例えば、「猫はかわいい」という文を、「<em>猫</em>はかわいい」とすれば、 （犬などの他の動物じゃなくて…）というニュアンスが出せるかもしれません。 また、「猫は<em>かわいい</em> 」とすれば、（猫はかわいくないという意見への反論）というニュアンスが出せるかもしれません。 ■HTML4.01からHTML5へのバージョンアップによる変更点 em要素は、HTML4.01では強意（意味を強める）を表す要素でした。 HTML5では強勢する（アクセントを付ける）箇所を表す要素となり、これまでとは意味が変更さ
list-style-position－スタイルシートリファレンス
list-style-positionプロパティは、リストの先頭に表示するマーカーの表示位置を指定する際に使用します。 ■値 outside マーカーがリスト内容の領域の外側に表示され、マーカー以外の部分がインデント（字下げ）された形になります。 inside マーカーがリスト内容の領域の内側に表示され、マーカーとマーカー以外の部分の高さが揃います。 HTMLソース <ul style="list-style-position: outside"> <li>一本でも<br>にんじん</li> <li>ニ足でも<br>サンダル</li> <li>三艘でも<br>ヨット</li> </ul> <ul style="list-style-position: inside"> <li>一本でも<br>にんじん</li> <li>ニ足でも<br>サンダル</li> <li>三艘でも<br>ヨット</
transform:translate()－CSS3リファレンス
transformプロパティのtranslate ()、translateX()、translateY()、translateZ()、translate3d()は、要素の表示位置を移動させる際に使用します。 ■値 translate(X方向の距離, Y方向の距離) translate()関数では、X方向とY方向の距離で2D移動を指定します。 Y方向の距離は省略することができますが、この場合のY方向の距離は0となります。[tx, ty] translateX(X方向の距離) translateX()関数では、X方向の距離で移動を指定します。 translateY(Y方向の距離) translateY()関数では、Y方向の距離で移動を指定します。 translateZ(Z方向の距離) translateZ()関数では、Z方向の距離で移動を指定します。 translateZ()関数にはパーセンテ
box-shadow－CSS3リファレンス
box-shadowプロパティは、ボックスに1つまたは複数の影をつける際に使用します。 box-shadowプロパティでは、例えば以下のように影を指定します。 box-shadow: 10px 10px; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4); box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset; 影は２～４つの長さの値で定義されますが、任意で色、insetキーワードを指定することもできます。 insetキーワードを付けると、影がボックスの外側ではなく内側につくようになります。 長さの指定を省略すると0となり、色の指定を省略するとユーザーエージェントが選んだ色になります。 複数の影を指定する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
