HTML・CSSのメモ ｜ 随時更新

■最初に書いておくといいもの
body,h1,h2,h3,h4,ul,li{　←使用しただけ追加する。
 margin:0;
 padding:0;　←デフォルトで設定されているスペースをなくす。
}

img{
 border:none;
 vertical-align:bottom;
}

li{
 list-style-type:none;
}

.clearfix:after{
 content:"";
 display:block;
 clear:both;
}

■css
（対象のhtmlタグ）　｛　（目的のcss）　｝


□classやidの指定
・要素に名前をつけた時の方法によって要素の指定の方法も変わる。
・class→「.」、id→「#」を先頭に置く。

使用例：
(css)
.example{}
#example{}

(html)
<div class="example"></div>
<div id="example"></div>


□フロート
float:(left,right,none);

・指定した要素の左右の配置を指定する。（noneは初期値）


□フロート解除
clear:both;

・floatによって要素が重なってしまったり予期しない配置になった場合に使用。
・floatを入力した要素とは別の要素に使用。


□（行揃え）配置位置の指定
text-align:(left,right,center);

・主にテキストに使用。


□要素の外側の空白
margin(-left,-right,-bottom,-top):（数値）px;

・要素同士のスペースの幅や高さの指定。

イメージ図：

□要素の内側の空白
padding(-left,-right,-bottom,-top):（数値）px;

・要素内の画像やテキストの周囲のスペースの幅や高さの指定。

イメージ図：

□要素の絶対配置
position:(absolute,relative,fixed);

・absolute,relativeは要素を重ねて配置するために使用。
・fixedは画面をスクロールしても指定した位置が固定される。


□重ね順
z-index:(数値);

・重ね順の指定。数の多い方が下になる。
・positionと同じ要素に使用する。


□背景
background(-color,-image):(#カラーコード、画像のurl);


□文字の大きさ、色
font-size:（数値）px;
color:#(カラーコード);

□指定した要素の幅と高さ
width:（数値）px;

・幅の指定。


height:（数値）px;

・高さの指定。


□指定された範囲からはみ出した部分の設定
overflow（-x,-y）:(visible,scroll,hidden,auto);

・overflow-xは横のスクロールバーのみを表示。
・overflow-yは縦のスクロールバーのみを表示。

・visibleは初期値ではみ出して表示。
・scrollはスクロールバーが表示されスクロールで見えない部分を見れるようになる。
・hiddenははみ出た部分を表示ない。
・autoは基本的にscrollと同じだがブラウザによって変化する。


□
border:none;

□
vertical-align:（top,bottom,left,right）;

□
list-style-type:none;

□
content:"";

□
display:block;

□
line-height:数値;


■各要素のhtml

□cssを入力する場所
<style></style>


□要素の配置
<h1></h1>

・主に見出しの配置に使用。
・h2,h3…と数字が増えると文字の大きさが減る。


<p></p>

・画像やテキストの配置。
・主に文章を表示するために使用。


<ul></ul>

・順序のない項目の配置。
・classなどを使用して名前を付けられる。（<ul class=" ">）

使用例：
<ul>
<li>example1</li>
<li><img src="file/example2.jpg"></li>zz
</ul>


<li></li>

・主に箇条書きをするために使用。


<div></div>

・主にいくつかの要素を一つのグループとして指定する。
・classなどで名前をつけて使用。

使用例：
<div class="example">

<h2>example1</h2>
<p>example2</p>

<ul>
<li>example3</li>
<li><img src="file/example4.jpg"></li>
</ul>

</div>