要素
開始タグと終了タグで構成されるもの。
属性
要素に付く、要素になんらかの設定をするもの。
id=”aaaa”など。
ブロックレベル要素とインライン要素
<body></body>内で使用される要素の多くはブロックレベル要素とインライン要素に分けられる。
ブロックレベル要素の中には、ブロックレベル要素やインライン要素を入れてもいいけど、インライン要素の中にブロックレベル要素を入れることはできない。
ブロックレベル要素
見出し、段落、表など、文書を構成する基本の要素。
インライン要素
ブロックレベル要素の内容として用いられる要素。文書の一部として扱われる。<b><input><textarea>など。
<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>
書くと、この「あいうえお」という文字は、ページで文字を消したり追加できたりする。
TinyMCE
リッチエディタの一種。
リッチエディタとは、リッチテキストを編集するためのもの。
リッチテキストとは、MicroSoftが作ったテキスト形式で、フォントの変更などが簡単にできる。
jsで追加したtextareaにtinyMCEを導入するには、
tinyMCE.execCommand(‘mceAddControl’ , false ,’textareaのID名’)と書く。
<span>
特に意味を持たないタグだけど囲った部分をインライン要素としてグループ化できる。
グループ化した部分にスタイルシートを適用したりできる。
<div>も同じようなものだけど、<div>は入れると改行される。
data属性
IDやクラスとは別に、書き手が独自に属性を作成できる。
data-name=”aaaa”という記述で、data属性を追加できる。
セレクタ
html要素を選択する指定方法。いくつかの方法がある。
要素型セレクタ
inputなどのタグ名を指定。
クラスセレクタ
要素に設定されているクラス名を、.始まりの記述で指定。
IDセレクタ
要素に設定されているID名を、#始まりの記述で指定。
属性セレクタ
要素に設定されている属性を[ ]で囲んで指定。
