<style>タグ
<head>内に、<style>タグを使ってスタイルシートの記述ができる。
スタイルシートを記述するときは
<!–
スタイルシートの記述
–>
とコメントアウトしなきゃいけない。
スタイルシートが対応していないブラウザでスタイルシートの記述がそのまま表示されることを防ぐため。
外部ファイルからスタイルシートを読み込む
<link rel=”stylesheet” type=”text/css” href=”ファイル名.css”>
CSSの書き方
p{font-size:10px;color:red;background:green;}
pタグのフォントサイズ、色、背景色を決める。
body{font-size:10px;color:blue;text-aling:center;}
bodyタグのフォントサイズ、色、表示箇所を決める。
id名の記述をするには
#id名{}で記述する。
canvas
画面上に線などを描画できる。
HTMLとjavascriptを組み合わせて使用する。
まずhtmlで
<canvas id=”aaaa” width=”300″ height=”200″></canvas>
と、キャンバス描画部分を作る。
その後javascriptで以下のように記載することで描画を始められる。
var canvas = document.getElementById(“aaaa”);
var context = canvas.getContext(“2d”);
テキストボックスやボタンなど
テキストボックス
<input type=”text”>
パスワード形式のテキストボックス
<input type=”password”>
ボタン
<input type=”button” value=”ボタンの中に書きたい文字”>
table
<table>
<tr>
<td></td>
</tr>
</table>
<tr>で、横一行を定義。
<td>で横一行の中に入れる要素を示す。
<table border=”1″ bordercolor=”red” bgcolor=”yellow” width=”200″>
borderでセルの枠線の太さを指定。指定しないと枠線は出ない。
bordercolorで枠線の色、bgcolorで表の背景色。
widthでテーブルの横幅を指定。
<td width=”40%”></td>
<td width=”60%”></td>
これで、テーブルの中でどのくらいの大きさで要素を表示するか指定できる。
<table align=”left”>
これでテーブル内の文字を左揃えにできる。<tr align=”left”>でもできるらしいけど何故かできなかった。
テーブルに空白の行を作りたいときは
<tr>
<td> </td>
</tr>
と書けばいい。
form
遷移先のページにタグ内の情報を送れる。
<form action=”送り先のURL”>
<input type=”text” name=”aaaa” value=”送る値1″>
<input type=”hidden” name=”bbbb” value=”送る値2″>
<input type=”submit” value=”送信”>
</form>
と書くことで、submitというタイプの送信ボタンを押したら指定したURLに、指定した値を送ることができる。
上のコードだと、aaaaという名前で、テキストボックスの「送る値1」、
bbbbという名前で、隠し項目の「送る値2」を送れる。
formタグの中に、<button>タグを作り、それをクリックするとフォームが送信されてしまう。それを防ぐには、<button type=”button”>と記せばいい。
container
webサイトのレイアウトを構成するためのもの。
containerで囲んだ要素をコンテナに入れて、並びや大きさをそこで管理する。
<div class=”container”>
<div id=”aaaa”></div>
<div id=”bbbb”></div>
</div>
と書き、cssで
.container{
width: 800px;
height: 400px;
}
と書けば、aaaaとbbbbの要素を、containerに記した情報で統一できる。
containerは一気にすべてを囲む必要はない。
<div class = “aaaa”>
<div id=”container”>
<div id=”a_item”>
</div>
</div>
</div>
<div class=”container”>
<div id=”bbbb”></div>
<div>
と、分けて囲んでも反映される。
flex
要素を横並びにできる記述。
<div id=”flex”>
<div id=”aaaa”></div>
<div id=”bbbb”></div>
</div>
と書いて、
#flex{
display:flex;
}
とcssに書いたら、aaaaとbbbbの要素は横並びで表示される。
sticky
ページをスクロールしたとき、要素を追従させるための記述。
<div id=”aaaa”></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id=”bbbb”></div>
としたとき、
#aaaa{
positon: sticky;
top:0px;
}
とcssに書けば、aaaaの要素はスクロールしても常に表示されるようになる。
topを指定しないと追従しない。
stickyに指定したら、その親要素がstickyのコンテナ内ということになり、そのコンテナの中でしか追従は発生しない。
<div id=”oya”>
<div id=”aaaa”></div>
<div id=”bbbb”></div>
</div>
<div id=”cccc”></div>
として、aaaaの要素にstickyを指定しても、aaaaはbbbbのところまでは追従するけど、ccccのところまではいかず、bbbbのところで止まる。
<a href>タグでフォームの送信を行う
<a href=”javascript:document.form名.submit()”>表示したい文字</a>
<form name=”form名” method=”POST” action=”送信先のURL”>
<input type=”text” name=”要素名”>
</form>
と書けば、リンクをクリックしたとき、指定したフォームの送信が行える。
<a href=”javascript:関数名()”>表示したい文字</a>
これで、javascriptの関数の起動もできる。
contenteditable
htmlの要素に、contenteditable=”true”という記述を加えると、ページから編集可能になる。
<div contenteditable=”true”>あいうえお</div>
書くと、この「あいうえお」という文字は、ページで文字を消したり追加できたりする。
