html と css のお勉強
Amebaでブログを始めよう!

■ html 04 - 表をいれる -


<table> ~ </table> タグを使う


表を書くには table タグを使用します。
その他、<caption> <tr> <th> <td> などを用いて表を作成していきます。
要素名意味
captionタイトル
tr
th見出し(太字)
td内容

 以下のように構成し記載します。

$html と css のお勉強-table

上記の図を
そのまま記載すると
以下のようになります
説明
タイトル
見出し見出し見出し
セルセルセル
タイトルは必須ではありません。
行、見出し、セルの数は必要に応じて増やすことができます。
また、<th> <td> も必要に応じて <th> を <td> に
<td> を <th>に書き換えても構いません。



ただこのままでは枠線がなく表のように見えません。
そこで table タグに属性を追加します。
      <table border="1">
⇒ 
タイトル
見出し見出し見出し
セルセルセル




その他、 table で使用できる属性は次回です。




■ html 03 - もじをいじる -


字体を色々と変更してみよう


<font> ~ </font> タグを使う
~ 色、大きさ、フォント ~

 記述方法
  <font 属性名 = "属性値"> ~ </font>

属性名= "属性値"
(" "内に記載)
指定する値
size 1 , -1 , 3 , +1 , 51~7 の数値(既定値は 3 )
または "-3"~"+3" の相対値
color pink , plum ,
skyblue , lightgreen ,
#B0C4DE , #FFE4B5
RGB値または 色の名前
face "Comic Sans MS"
"Times New Roman"
"Helvetica"
フォント名で指定。
OSやブラウザで表示できるものが異なる

   ※faceに関して
    複数のフォントを , で区切って記載し優先順位をつけられる。
    ブラウザで表示可能なものがあったらそれが優先順位に従って使用されます。

 ひとまとめにして記述することもできる
  <font size="5" color="blue" face="Comic Sans MS"> font </font>  →  font





属性を指定しないタグ

 記述方法
  <開始タグ(要素名)> ~ <終了タグ(/要素名)>
要素名サンプル説明
b サンプル太字
i サンプル斜体
em サンプル強調(斜体になる)
strong サンプルより強い強調(太字になる)
u サンプル下線
s サンプル削除線
sup e = mc2上付き
sub H2O下付き
tt サンプル(通常)
サンプル(等幅)
等幅


 それぞれを組み合わせて使うことも出来る
  <font size="5" color="tomato" ><b> Do・∀・it </b></font>
   →  Do・∀・it


 必要ならばいくつでも
  <font size="5" color="tomato" ><b><i><u> こんバルシェ </u></i></b></font>
   →  こんバルシェ


 開始タグ、終了タグの位置には注意です
  < 1 >< 2 >< 3 > 文章 < /3 >< /2 >< /1 >
 このように最初に使ったのを最後に閉じるようなかたちで記載です


ブラウザによって違うかもだけど、<b>と<strong>とかのように表示が同じタグでも、
本来は用途が定められているものもあります。
ブログで日記を書く程度なら気にしなくてもいいと思うので、説明を省きます。

次回は表の記載について




ここではアメブロを書くにあたって、充実した表記をできるように程度の
html に関する説明を行ってます。



■ html 02 - タグって? -


ここではアメブロを書くにあたって、充実した表記をできるように程度の
html に関する説明を行っていきます。




タグって?
 <>でくくったhtml 用の命令文
 開始タグと終了タグでくくり、一つの要素として意味や性質を持たせるもの

 ブログを書いていると自然と使っている
 <・・・> 文章 </・・・> 
 の形式が要素
 開始タグから終了タグまでを要素っていぅ

 タグには開始タグだけで、終了タグのないものもある

html と css のお勉強-001

 例 : <font(要素名) color(属性)="pink"(値)>(開始タグ) 要素内容 </font>(終了タグ)


要素名って?
 要素名はたくさん種類があって、太字にしますよ~ とか
 表をつくりますよ とか 箇条書きもいかが? なんて、色々な種類の命令をできる
 もともと用意されている定型のモノが入る


属性って?
 例えば <font color="pink"> の color の部分
 この場合だと開始、終了タグでくくった内容の font の color(色)
 について何にしましょ?
 値として"pink"を設定することによって

  < font   color  = "pink"    >
  <フォントの 色は? = ピンクにする> なんて意味

 他には<font size="7"> フォントのサイズはいかがしましょ?とか
 
 属性は、同じ要素名ならまとめて記述できる。
 例:<font color="pink" size="7"> ドーン! </font> ⇒ ドーン!

値って?
 前記のように、font color なら色名、色コード
 font size なら 1~7 の数値や -3~+3 の相対値など、
 属性に関する具体的な設定値





html の基本やタグに関しては以上です。
次回からはそれぞれのタグの具体的な用法について
記載していこうと思います。