HTMLについて

<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>&nbsp;</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>
書くと、この「あいうえお」という文字は、ページで文字を消したり追加できたりする。

タイトルとURLをコピーしました