ページが移転しました。
displayプロパティは、ブロックレベル・インライン・テーブル・ルビ・フレックスコンテナ等の、要素の表示形式を指定する際に使用します。 ■初期値・適用対象・値の継承 インラインとブロック inline インラインボックスを生成する(初期値) block ブロックボックスを生成する list-item li要素のようにリスト内容が収められるブロックボックスと、リストマーカーのためのマーカーボックスを生成する run-in 文脈に応じてブロックまたはインラインボックスのいずれかを作成する inline-block インラインレベルのブロックコンテナを生成する。要素全体としてはインライン要素のような表示形式だが、内部はブロックボックスで高さ・横幅などを指定できる。 テーブル table table要素のような表示となる inline-table インラインレベルのテーブルとなる table-r
font-weightプロパティは、フォントの太さを指定する際に使用します。 9段階の太さを指定することができますが、一般的なフォントでは9種類の太さが用意されていることはあまりなく、 フォントの太さとして実際に指定する値は「bold」のみで事足りることが多いようです。 ■値 数値で指定 100、200、300、400、500、600、700、800、900でフォントの太さを指定します。太さが9種類用意されているフォントはあまりないため、数値を上下させても太さが変化しないことがあります。標準の太さは400で、数値が小さくなるほど細く、大きくなるほど太くなります。 キーワードで指定 normal …… 標準の太さです。(数値で400を指定した場合と同じ) bold …… 一般的な太字の太さです。(数値で700を指定した場合と同じ) lighter …… 相対的に一段階細くします。 bolde
スタイルシート部分は外部ファイル(sample.css)に記述。 p.sample1 {background-color: #f8dce0; padding: 10px;} p.sample2 {background-color: #f8dce0; margin: 30px; padding: 10px;} p.sample3 {background-color: #f8dce0; padding: 10px 20px;} p.sample4 {background-color: #f8dce0; padding: 10px 20px 30px;} p.sample5 {background-color: #f8dce0; padding: 10px 20px 30px 40px;} HTMLソース <html> <head> <link rel="stylesheet" href="sa
vertical-alignプロパティは、行のなかでのテキストや画像などの縦方向の揃え位置を指定する際に使用します。 vertical-alignプロパティを適用できるのは、インライン要素とテーブルセルです。ブロックレベル要素には適用できません。 ■値 baseline 適用した要素のベースラインを親要素のベースラインに揃える(初期値) top 上端揃え middle 中央揃え bottom 下端揃え text-top テキストの上端揃え(テーブルセルへの指定は無効) text-bottom テキストの下端揃え(テーブルセルへの指定は無効) super 上付き文字(テーブルセルへの指定は無効) sub 下付き文字(テーブルセルへの指定は無効) パーセント(%) その要素のline-heightプロパティの値に対する割合を%で指定(ベースラインが揃った状態を0として、正の値なら上、負の値なら
windowオブジェクトのprompt()メソッドは、文字入力ダイアログを表示します。 ユーザーがテキスト入力欄に何か記入して[OK]ボタンを押した場合には、その入力内容が返ります。 ユーザーが[キャンセル]または[×]ボタンを押した場合には、 null が返ります。 ユーザーは[OK][キャンセル][×]のいずれかのボタンをクリックしてダイアログを閉じるまで、次の処理に進んだりブラウザを操作することはできません。 ダイアログに表示されるテキストを改行する場合には\nを、タブを入れて字下げする場合には\tを記述します。 ■構文・引数・戻り値 構文 ウィンドウ名.prompt("メッセージの内容", "テキスト入力欄に表示される初期値") 戻り値 ユーザーが入力したテキスト内容、または、null HTML + JavaScriptソース <script> function sample()
<IMG>はImageの略で、画像を表示するタグです。 表示する画像ファイルはsrc属性(srcはsourceの略)で指定します。 WEBに使用できる画像形式は、現在のところGIF・JPEG・PNGの三種類ですが、それぞれ特徴があるので、状況により使い分けてください。 画像ファイルについての詳細は、「WEB画像について」を参照してください。 width属性とheight属性は、画像ファイルのブラウザ上での表示サイズを指定します。 画像の表示サイズはできるだけ指定するようにしましょう。 画像サイズを指定することで、画像の読み込みに時間が掛かる場合にも、 指定したサイズ分の画像表示スペースが空けられて先にテキスト部分を表示するので、閲覧者にとっては表示速度が早く感じられるからです。 HTML4.0からは<IMG>のalt属性が必須となっています。 alt属性では画像を表示できない場合に代わりに
writeメソッドは、ドキュメントに文字列を書き出します。 タグを書き出すこともできるので、例えば<IMG>タグを書き出してページ上に画像を表示させたりすること可能です。 尚、ドキュメントの出力を開始したあと、 document.close() で明示的にドキュメントの出力を終了しないと、書き出した文字列が表示されないことがあるので注意してください。 ■使用例 HTML + JavaScriptソース <html> <head> </head> <body> <script> document.open(); document.write("文字列を書き出します。"); document.write("<img src='../images/img002.gif'>"); document.close(); </script> </body> </html>
<META>タグはその文書に関する情報(メタ情報)を指定して、 ブラウザや検索ロボットに知らせるためのタグです。制作者やキーワード等の情報をname属性で定義して、 content属性でその値を指定します。 <META>タグは必ず<HEAD>~</HEAD>間に記述してください。 文字コードの指定 <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp"> その文書の文字コードが「シフトJIS」の場合は「shift_jis」、
text-alignプロパティは、ブロックコンテナ内の行の揃え位置・均等割付を指定する際に使用します。 テキストブロックは、単一または複数行のラインボックスを積み重ねたものです。 下のサンプルでいうと、背景がピンク色の部分がテキストブロック、赤いボーダーで囲んだ部分がラインボックスです。 このサンプルには text-align:end; を指定しています。 text-alignプロパティは、各ラインボックスをコンテンツ(テキスト内容)が完全に満たしていない場合に、そのコンテンツがインライン軸に沿ってどのように整列するかを設定します。 上のサンプルでは、最後の行はテキスト内容がラインボックスを完全には満たしていないため、text-align:end; の指定によってコンテンツがラインボックスの終端に揃えられているのが確認できます。 text-alignプロパティは、 text-align-a
<OL>タグはOrdered Listの略で、順序のあるリストを表示する際に使用します。 リストの各項目は<LI>タグを用いて記述します。 また、順序のないリスト表示には<UL>タグを使用します。 <OL>タグではtype属性により、算用数字(1,2,3,...)、アルファベット小文字(a,b,c,...)、 アルファベット大文字(A,B,C,...)、ローマ数字小文字(ⅰ,ⅱ,ⅲ,...)、 ローマ数字大文字(Ⅰ,Ⅱ,Ⅲ,...)を指定することができます。 また、start属性により開始番号を指定できます。 ■使用例 HTMLソース <h3>カレーの作り方</h3> <ol type="1"> <li>肉と野菜を炒める</li> <li>水を入れて中火で煮込む</li> <li>時々アクを取る</li> <li>カレールーを入れる</li> <li>とろみがつくまで弱火で煮込む</li>
floatプロパティは、指定された要素を左または右に寄せて配置する際に使用します。 後に続く内容は、その反対側に回り込みます。 尚、floatプロパティは、positionプロパティで static以外の値が指定されている要素には適用されないので注意してください。 ■値 left 指定した要素を左に寄せます。後に続く内容はその右側に回り込みます。 right 指定した要素を右に寄せます。後に続く内容はその左側に回り込みます。 none 特に配置を指定しません。これが初期値です。
z-indexプロパティは、ボックスの重なりの順序を指定する際に使用します。 z-indexプロパティは、positionプロパティでstatic以外の値が指定されている要素に適用されます。 ■値 整数値で指定 重なりの順序を整数で指定します。0を基準として、値が大きいものほど上になります。 auto 親要素と同じ階層になります。これが初期値です。 スタイルシート部分は外部ファイル(sample.css)に記述。 p.sample { color: #000000; background-color: #99cc00; position: relative; top: 50px; z-index: 2; } img.sample { position: relative; top: -50px; z-index: 1; } HTMLソース <html> <head> <link rel="
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>
<HR>はHorizontal Ruleの略で水平の罫線を表します。 width属性で幅(横の長さ)を、size属性で太さ(縦の高さ)を指定します。 また、デフォルトでは影の付いた立体的な罫線となりますが、noshade属性により平面的な単色の罫線にすることができます。 ■使用例 HTMLソース <hr> <hr width="90%"> <hr width="300"> <hr size="20"> <hr width="20" size="20"> <hr size="1" color="#000000"> <hr size="10" color="#0000ff" noshade> <hr width="300" color="#ff0000" align="right">
positionプロパティは、ボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定する際に使用します。 positionプロパティで指定するのは、配置方法(基準位置)のみです。 実際の表示位置の指定には、 top、 bottom、 left、 rightを併用して、基準位置からの距離を設定する必要があります。 ■値 static 特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。 relative 相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。 absolute 絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositi
<TEXTAREA>は複数行の入力フィールドを作成するタグです。<TEXTAREA>~</TEXTAREA>内に記述されたテキストは、入力フィールドの初期値として表示されます。 フォームの部品としてデータが送信される際には、name属性で付けたデータ名とその値を一組にして、 <FORM>タグのaction属性で指定したサーバー上のファイルに、 <FORM>タグのmethod属性で指定した転送方法で送られます。 <TEXTAREA>はフォームの部品としてではなく、 ユーザーインターフェースとしても使用することができます。 <TEXTAREA>ではrows属性とcols属性が必須の属性です。 この2つの属性で入力フィールドの高さと横幅が決まりますが、 これはあくまでも入力フィールドの表示サイズの指定であり、 入力可能な桁数や文字数を制限するものではありません。 また、cols属性では“平均的な
HTML + JavaScriptソース <script> function sample() { window.alert("警告ダイアログの使用例です。\n[OK]ボタンのみで[キャンセル]ボタンはありません。"); } </script> <a href="#" onclick="sample()">警告ダイアログを表示します</a> ウィンドウ名.alert() …… [OK]ボタンのみの警告ダイアログを表示する ウィンドウ名.confirm() …… [OK]と[キャンセル]ボタンを持つ確認ダイアログを表示する ウィンドウ名.prompt() …… 文字入力ダイアログを表示する ウィンドウ名.defaultStatus …… ステータスバーにデフォルトで文字列を表示する ウィンドウ名.status …… ステータスバーに(一時的に)文字列を表示する ウィンドウ名.open() …
ウィンドウ名.alert() …… [OK]ボタンのみの警告ダイアログを表示する ウィンドウ名.confirm() …… [OK]と[キャンセル]ボタンを持つ確認ダイアログを表示する ウィンドウ名.prompt() …… 文字入力ダイアログを表示する ウィンドウ名.defaultStatus …… ステータスバーにデフォルトで文字列を表示する ウィンドウ名.status …… ステータスバーに(一時的に)文字列を表示する ウィンドウ名.length …… ウィンドウ内のフレーム数を参照する ウィンドウ名.open() …… 新しいウィンドウを開く ウィンドウ名.close() …… ウィンドウを閉じる ウィンドウ名.closed …… ウィンドウが閉じているかどうかを返す ウィンドウ名.name …… ウィンドウ名を参照する ウィンドウ名.opener …… オープン元の親ウィンドウを参照
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く