【ブロック要素内部の表示を指定】
|
1 |
overflow ・・・ ブロック要素内部の表示を指定（はみ出す部分がある時など） |
＊スマホなどの普及に伴い使用されることが減ってきた。
【位置設定： float】
|
1 2 3 4 5 6 7 8 9 |
float ・・・ ブロックの並べ方を指定 左づめ → float: left; 右づめ → float: right; floatの解除 → float: both; 親ブロックでfloatの解除 → overflow: hidden; |
【位置設定： position】
|
1 2 3 4 5 6 7 8 9 |
static ・・・ 特に配置方法を指定しない。top、bottom、left、rightは適用されず、初期値に配置。 absolute ・・・ 絶対位置。ブロック要素の並びから外れる。 ＊親ボックスにpositionプロパティのstatic以外の値が指定↓ 有：親ボックスの左上が基準位置。 無：ウィンドウ全体の左上が基準位置。 relative ・・・ 相対位置。top、bottom、left、rightは適用。 fixed ・・・ 絶対位置かつ、スクロールしても位置が固定。（IE6は対応出来ていないらしい） |
【インライン要素を縦並びにする】
<br /> ・・・ 文字の改行に使うのが主。
画像やリンクの縦並びは「display」を使う！！
インライン要素をブロック要素に変更！
|
1 |
display: block; |
【ブロック要素の文字を垂直中央寄せ】
|
1 |
line-height ・・・ 文字を含めた行の高さを指定する |
＊ブロックの高さと同じ値を指定した場合垂直中央寄せで表示でれる。
【文字の垂直方向中央揃え】
|
1 2 3 4 5 6 |
（例１：height: 200px;の場合） line-height: 200px; とすれば垂直方向の中央揃え可能 （例２） display: table-cell; vertical-align: middle; |
【擬似セレクタ：一例】
|
1 2 3 4 |
a:link ・・・未アクセス a:visited ・・・アクセス済み a:hover ・・・ロールオーバ a:active ・・・クリックされてから離されるまでの状態 |
【画像のロールオーバ】
１．画像をブロック要素で囲む
２．CSSで背景画像として指定
|
1 |
background-image:url(相対パス) |
３．画像をずらす
|
1 |
background-position: 横にずらす値 縦にずらす値（下の場合は－をつける） |
＊画像の縦並び画像を作成したい時は → 「HTMLボタン作成」ってwebで調べるとのってる。
【ページ全体を中央寄せ】
|
1 |
margin: 0px auto; |
margin: 0px auto;
＊「auto」は左右のみ対応。上下は使用不可。
【表】
《セル内の結合と分離》
|
1 2 |
枠線の結合・・・collapse 枠線を分離・・・separate |
《セル内のテキストを揃えるプロパティ》
|
1 2 |
水平方向・・・text-align: 値; 垂直方向・・・vertical-align: 値; |
《セルの間隔と余白プロパティ》
|
1 |
border-spacing: 値; |
《セルの結合：HTMLのテーブルタブの属性》
|
1 2 |
水平方向・・・colspan=”値” 垂直方向・・・rowspan=”値” |
【CGI（Common Gateway Interface）】
ウェブサーバ上で動作するプログラムがウェブページを生成できるようにする仕組み。
【フォームの基本】
コントロール・・・<form>の中の各入力部分のこと
|
1 |
例：<input type=”” name=”” value=””> |
↑nameの値をパラメータ名、プロパティ名とも言う。
|
1 |
例：<form action=”相対パス” method=”データ送信方法（get/post）” enctype=”postの”> |
【１行のテキストボックス】
|
1 |
例：<input type=”text” name=”” size=”文字数で指定” maxlength=”入力最大文字数指定”> |
【複数行のテキストボックス】
|
1 |
例：<textarea cols=”横幅（文字数）” rows=”高さ（行数）” name=”” />・・・・・</textarea> |
【チェックボックス】
複数指定した場合→配列として値が渡される。
【ドロップダウンリスト（別名：セレクトボックス）】
|
1 2 3 4 5 |
<select name=””> <option value=”empty”></option> ←空って意味。（value=””と同じ） <option value=”１”>みかん</option> ←「みかん」が画面表示される <option value=”２” checked=”checked”>りんご</option> ←「checked=”checked”」基本の書き方！ </select> |
