★CSS
●vertical-align
・・・行の中でテキストや画像などの縦方向の揃え位置を指定する。
書き方は
{vertical-align: text-top;}・・・同じ段落の他のコンテンツの上揃いで表示する。
{vertical-align: text-bottom;}・・・同じ段落の他のコンテンツの下揃いで表示する。
{vertical-align: middle;}・・・同じ段落の他のコンテンツの中央揃いで表示する。
{vertical-align: baseline;}・・同じ段落の他のコンテンツの下揃いで表示する。（※デフォルトです。）
{vertical-align: super;}・・同じ段落の<span class=""></span>などでボックス化した所を上付き文字にします。
{vertical-align: sub;}・・同じ段落の<span class=""></span>などでボックス化した所を下付き文字にします。
{vertical-align: -50px;}・・・・数値、割合で指定する事もできます。いずれも基準はベースラインになります。
↓ベースラインとはこんな感じの考え方です。
※tableのセル内だとvertical-alingの値はbaseline,top,middle,bottomになります。
cat
↑上の段落のソースは
<p><img src="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347266869" alt="猫" class="cat02" />
cat</p>です。
CSSは
img.cat02 {
vertical-align: -50%;
}です。どうやらマイナスで
catが上にいくと考えたほうがよさそうです。imgが下に50%行った的な考えかな？
●width
・・・幅です。
書き方は
{width : ～px;}
{width : ～%;}
です。
●height
・・・高さです。
書き方は
{height : ～px;}
{height : ～%;}
です。
↓padding,width,heighe,の関係はこんな感じです。
★HTML,CSS
●
class属性・・・CSSを適応するところを指定する事ができる属性です。
↓例です。
<img src="～" alt="～" class="add" />
↑のHTMLの記述、このimgタグだけに、例えばfolatのrightをCSSでしたい場合は
img.add {folat: right;}です。（※addというクラス名のimgタグという意味です。）
.=classです。
idとの違いは同じページ内で複数のタグに、同じclass名を指定できるところです。
div .add {folat: right;}
↑のように書くとdivタグの中のコンテンツのaddと言うクラス名のものという意味です。
<img src="～" alt="～" class="add even" />
↑のようにclass名を複数個書けます。
1ページ内のclassを少なくするためにこんな書き方をするそうです。
要は組み合わせの問題です。（※効率的にCSSを記述するってことです。）
でもレンダリング（※たぶん、ページを表示させること。音声も含まれたりします。要はCPUの負荷的なところの問題です。）速度は落ちます。
※idは1ページに一つしか同じid名を使えないのでレンダリングのときは、id="id名"で探します。classは1ページに同じクラス名を何個でも使えるのでレンダリングのときはまずclassを探して、その次にclass名を探します。なのでclassをいっぱい使うとレンダリング速度は落ちます。
PR
