要素
開始タグと終了タグで構成されるもの。
属性
要素に付く、要素になんらかの設定をするもの。
id=”aaaa”など。
クラスを複数設定するには
class=”class1 class2 class3″というふうに、半角スペースを入れればいい。
ブロックレベル要素とインライン要素
<body></body>内で使用される要素の多くはブロックレベル要素とインライン要素に分けられる。
ブロックレベル要素の中には、ブロックレベル要素やインライン要素を入れてもいいけど、インライン要素の中にブロックレベル要素を入れることはできない。
ブロックレベル要素
見出し、段落、表など、文書を構成する基本の要素。
インライン要素
ブロックレベル要素の内容として用いられる要素。文書の一部として扱われる。<b><input><textarea>など。
<style>タグ
<head>内に、<style>タグを使ってスタイルシートの記述ができる。
スタイルシートを記述するときは
<!–
スタイルシートの記述
–>
とコメントアウトしなきゃいけない。
スタイルシートが対応していないブラウザでスタイルシートの記述がそのまま表示されることを防ぐため。
cursor
マウスカーソルの形状を指定するスタイル。
cursor:pointer リンクカーソル
cursor:text テキスト編集カーソル
cursor:wait 待機ー処理中のカーソル
content
要素の直前または直後に、文字列や画像などのコンテンツを挿入できる。
.クラス名:befor{content:”aaaa”}
または.クラス名:after{content:http://gawfejaiwfjiaw}というふうに書く。
外部ファイルからスタイルシートを読み込む
<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名{}で記述する。
複数のクラスを選択するには
.p1,.p2{}と書くと、クラスp1とp2の両方を選択できる。
親要素、子要素を選択するには
.parent1 .child2{}のように、親要素と子要素をスペースで区切ればいい。
backgroundプロパティ
要素の背景色や背景画像を設定できる。background-colod,background-image。
box-shadowプロパティ
要素に影をつけられるプロパティ。
box-shadow:[右のずれ][下のずれ][ぼかしの大きさ][拡張の大きさ][影の色];
マージンの総裁
隣接したマージンの要素は相殺される。20pxのマージンを持った要素が並ぶと40pxではなく20pxになる。
border-radiusプロパティ
ボックスの角を丸めるプロパティ。値には円の半径となる長さを指定。
値は4つまで指定でき、四角のそれぞれの角に対応している。border-radius：10px 20px 30px 40px；
letter-spacingプロパティ
文字列の文字と文字の感覚を指定できるプロパティ。
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”>と記せばいい。
form.targer
formを送る先。任意の名前をつけることもできる。
FIELDSET
フォームの入力項目をグループ化できる。
グループの先頭に<LEGEND></LEGEND>で入力項目グループにタイトルをつける。
フォームの入力項目をグループ化することでタブ移動を簡単にできるようになる。
ボタンクリックにリンクをつける
<input type=”button” click=” location.href=’リンク先’ “>
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の要素は横並びで表示される。
float
要素を横並びにできる。
float属性を持った要素は画面から浮いたような状態になる？
なのでその下にある要素がfloat要素の下に入り込んでしまい表示が崩れるらしい。
それを防ぐには、float要素の下の要素にclear属性をつけるといい。
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の関数の起動もできる。
<a>タグで要素を囲めばその要素のどこをクリックしてもリンクに飛ぶようにできる。
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名を、#始まりの記述で指定。
属性セレクタ
要素に設定されている属性を[ ]で囲んで指定。
for属性
labelにつける属性で、forで指定したコントロールとの紐付けを行う。
window.opener
自分を開いた元のwindowオブジェクト。
擬似要素
要素の一部分に編集を加えることができたり、htmlを変更することなくcssから要素を追加したりできる。
要素名::first-letter{
}
と書くと、指定した要素の1文字目にのみスタイルを適用させられる。
first-lineは、1行目、
要素名::before{
content: “追加する文字”;
}
と書くと、指定した要素の手前にcontentで指定した文字を追加できる。
::afterと書けば、指定した要素の後ろに追加。
