2012-01-01から1年間の記事一覧

[まとめ][CSS]CSSまとめ０９

bordercollapse table要素、td要素にそれぞれ表示するborderを重ねて、１重の状態で表示する table { bordercollapse:collapse; }

floatを使ったレイアウト１９

基礎 CSS

☆★データーでの確認★☆三段目のボックスを配置する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>三段目のボックスを配置する</title> <link rel="stylesheet" href="css/style19.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> &lt;header&gt;<br>１段目<br> </div></div></body></html>

JavaScript

JavaScript 授業

変数 ブラウザのアラートボックスに「答え」を表示することができる。 ソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScriptを使った計算</title> </head> <body> // [ HTML ]内に[ script ]を埋め込む場合[ /body ]のすぐ上に置く // alert();[ Ctrl+space(Dwの支援機能) ] <script> alert((150*2+120*2)/2) </script> </body> </html> …

alertメソッド

JavaScript 授業

☆★データーでの確認★☆alertメソッド 警告ダイアログを表示 windowオブジェクトのalertメソッド windowオブジェクトの記述を省略可能（自動的にwindowオブジェクトが割り当てられる） window.alert() ソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>メソッド</title> </head> <body> <p>ボタンをクリックしてくださ</p></body></html>…

fgColorプロパティ

JavaScript 授業

☆★データーでの確認★☆fgColorプロパティ 文字の色を参照・設定します。 ソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>プロパティ</title> </head> <body onLoad='window.defaultStaus="色の設定"'> <script type="text/javascript"> <!-- document.fgColor='#f00'; document.bgColor='#eee'; //--> </script> <p>文字色と背景色を変更しま…</p></body></html>

writeメソッド

JavaScript 授業

☆★データーでの確認★☆writeメソッド 文字列を書き出す。 window.document.write() ソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScriptの練習</title> </head> <body> <script type="text/javascript"> <!-- document.write('<h1>Hello JavaScript!<\/h1>'); //--> </script> </body> </html> ブラウザで表示

if文

JavaScript 授業

if文 ソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>if文</title> </head> <body> <script> a=5; if(a%2==0){ document.write(a,'は偶数です。'); }else{ document.write(a,'は奇数です。'); } </script> </body> </html> ブラウザで表示

if文０２

JavaScript 授業

if文 ソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>if文</title> </head> <body> <script> a=5; if(a%2==0){ alert(a,'は偶数です。'); // 別記述 /* alert(a+'は偶数です。') */ }else{ alert(a,'は奇数です。'); // 別記述 /* alert(a+'は奇数です。'); */ } </script> </body> </html> ブラウザで表示【 alert 】

ブロック

JavaScript 授業

☆★データーでの確認★☆ブロック 《if_else.html》 ソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>if文</title> </head> <body> <script> s=65; document.write('あなたの点数は',s,'点です。<br>'); if(s<70){ document.write('平均まであと',(70-s),'点<br>'); document.write('がんばりましょう！'); }else{ document.write('</body></html>…

floatを使ったレイアウト１４

基礎 CSS

絶対配置するボックスの親ボックスを作る ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>絶対配置するボックスの親ボックスを作る</title> <link rel="stylesheet" href="css/style14.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> &lt;header&gt;<br>１段目<br> </div></div></body></html>

floatを使ったレイアウト１５

基礎 CSS

☆★データーでの確認★☆ レイアウト全体をセンタリングする ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>レイアウト全体をセンタリングする</title> <link rel="stylesheet" href="css/style15.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> &lt;header&gt;<br>１段目<br> </div></div></body></html>

floatを使ったレイアウト１６

基礎 CSS

片側だけのフッターを配置する ソースコード【 HTML 】 <html lang="ja"> <head> <title>片側だけのフッターを配置する</title> <link rel="stylesheet" href="css/style16.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> &lt;header&gt;<br>１段目<br> </div> <div id="wrapper"> </div></div></body></html>

floatを使ったレイアウト１７

基礎 CSS

両側をまたぐフッターを配置する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>両脇をまたぐフッターを配置する</title> <link rel="stylesheet" href="css/style17.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> &lt;header&gt;<br>１段目<br> </div> </div></body></html>

floatを使ったレイアウト１８

基礎 CSS

☆★データーでの確認★☆本文の段組を可変にする ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>本文の段階を可変にする</title> <link rel="stylesheet" href="css/style18.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> &lt;header&gt;<br>１段目<br> </div>…</div></body></html>

ActionScript０４

ActionScript 授業

演習04 ソースコード【 ActionScript 】 //関数(文字列に変換).指定されたパラメータのストリング表現を返す var naStr:String="武"; shimeiStr=seiStr+naStr; trace("私の名前は"+shimeiStr+"です。");

floatを使ったレイアウト１１

基礎 CSS

positionとは positionプロパティは、ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する positionプロパティで指定するのは、配置方法（基準位置）のみ static 特に配置方法を指定しない。 この値のときには、top、bottom、left、rightは適…

floatを使ったレイアウト１２

基礎 CSS

ボックスの幅と位置を指定する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ボックスの幅と位置を指定する</title> <link rel="stylesheet" href="css/style12.css" media="screen,print"> </head> <body> <div id="container"> <div id="primary"> &lt;primary&gt;<br>１段目<br>２段目<br>３段目<br>４段目<br>５段目<br>…</div></div></body></html>

floatを使ったレイアウト１３

基礎 CSS

☆★データーでの確認★☆左右の配置を入れ替えヘッダーを追加する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style13.css" media="print,screen"> </head> <body> <div id="container"> <div id="header"> &lt;header&gt;<br>１段目<br> </div> </div></body></html>

フォームの基本構造０９

HTML 授業

基本形（1） ソースコード【 HTML[ Embed ] 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームの練習(1)</title> <style> #myform label { font-size: 0.875em; margin-bottom: 3px; display: block;/* 改行せずに次の行に移る */ } </style> </head> <body> <form action="#" method="post" id="myform"> <p> </p></form></body></html>

フォームの基本構造１０

HTML 授業

フォームの練習(2) ソースコード【 HTML [ Embed ] 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームの練習(2)</title> <style> #myform label { font-size: 0.875em; width: 100px; display: block; float: left; } </style> </head> <body> <form action="#" method="post" id="myform"> <p> </p></form></body></html>

フォームの基本構造１１

HTML 授業

table 表示の崩れがなくなる 色が付けやすくなる ソースコード【 HTML [ Embed ] 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>テーブルで組むフォーム</title> <style> #myform { font-size: 0.875em; width: 500px; } #myform label { font-size: 0.875em; } #myform table { width: 100%; border-collapse: co</meta></head></html>…

リストを使ったナビゲーション

基礎 CSS

縦並びのボックス paddingは問題なし marginは相殺される 横並びのボックス marginは通常計算（相殺されません） paddingはブラウザにより影響 borderも計算に入れる borderの数値を大きくしただけで、崩れるこの解釈は、ブラウザごとに違う。 上記ような崩…

ActionScript

ActionScript 授業

演習01 ソースコード【 ActionScript 】 // [ // ]以降、改行までがコメントになる。 // [ var(variable) ]宣言文 // [ Number(num:Object) ]指定された値を持つ Number オブジェクトを作成。 var num1:Number=10; var num2:Number=8; var num3:Number=12; v…

ActionScript０２

ActionScript 授業

演習02 ソースコード【 ActionScript 】 var speedA:Number=100;//車Aのスピード var speedB:Number=140;//車Bのスピード var distance:Number=560;//東京→大阪間の距離 //時間を求める計算式 timeA=distance/speedA; timeB=distance/speedB; ans=timeA-timeB…

ActionScript０３

ActionScript 授業

演習03 ソースコード【 ActionScript 】 var beer:Number=500;//ビールの値段 var uron:Number=300;//ウーロン茶の値段 var salad:Number=600;//サラダの値段 var chicken:Number=800;//チキンの値段 var pizza:Number=800;//ピザの値段 total=(beer*12)+(ur…

フォームの基本構造０２

HTML 授業

☆★データーでの確認★☆チェックボックス ソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>チェックボックス</title> </head> <body> <h1>チェックボックス</h1> <form action="#" method="post"> <p>ス…</p></form></body></html>

フォームの基本構造０３

HTML 授業

☆★データーでの確認★☆ラジオボタン ソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>ラジオボタン</title> </head> <body> <h1>ラジオボタン</h1> <form action="#" method="post"> <p>性別: <input type="radio" name="sex" value="male" checked>男性 <input type="radio" name="sex" value="female">女性 </p> <p></p></form></body></html>

フォームの基本構造０４

HTML 授業

☆★データーでの確認★☆リスト ソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>リスト</title> </head> <body> <h1>リスト</h1> <form action="#" method="post"> </form></body></html>

フォームの基本構造０５

HTML 授業

☆★データーでの確認★☆ラベルを付ける ソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>ラベルを付ける</title> </head> <body> <h1>ラベルを付ける</h1> </body></html>

フォームの基本構造０６

HTML 授業

☆★データーでの確認★☆ パスワード ソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>パスワード</title> </head> <body> <h1>パスワード入力</h1> <form action="#" method="post"> <p>パスワード:<input type="password" name="password" size="10" maxlength="5"> </p> <p></p></form></body></html>