4ノート代替25

HTML/CSS

CSS

HTMLで記述された文章をWebブラウザやメールクライアントにどのように表示するかを定義するための言語
・文字の色、サイズ、行間、行揃えなどの指定
・背景色、背景画像、ボーダー、角丸などの指定
・レイアウト、余白の調整

CSS：見た目の装飾に関することを定義
HTML：ページの文章構造を定義
そのためCSSとHTMLは常にセットで使用。
CSSを記述するためには、まず構造化されたHTMLソース（h1 > h2 > h3などの構造）を作成し、そのHTMLに対してCSSのスタイルを実装していきます。

css analyzer

html

文字　色

<font color="red">色を変更したいテキスト</font><font color="#FF0000"></font><font face=""></font><font face="BIZ UDPGothic">７</font>

html テーブル

■基本
tr：「Table Row（行）」
th：「Table Header（見出し）」
td：「Table Data（データ）」

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>基本的な表の作成</title>
5. </head>
6. <body>
7. <table border="1">　←「1」枠の幅
8. <tr>
9. <th>名前</th>
10. <th>年齢</th>
11. </tr>
12. <tr>
13. <td>佐藤</td>
14. <td>42</td>
15. </tr>
20. </table>
21. </body>
22. </html>

属性

■色をつけるbgcolor属性、bgは「Back Ground」の略
●表の枠
1. <table border="１以上の整数" bordercolor="色">
1. <table bordercolor="red">
2. <table bordercolor="#ff0000">
●表の背景
1. <table border="1以上の整数" bgcolor="色">
●行のみ
1. <tr bgcolor="色">

■表の幅を変えるwidth属性
●表全体<table border="1" width="50%">
●セルのみ
表全体の長さを最初に指定しておく
1. <tr>
2. <th width="30%">名前</th>
3. <th width="70%">年齢</th>
4. </tr>

■表の高さを変えるheight属性

■セルを横方向に結合するcolspan属性
「colspan=”n”」で「n個のセルを連結する」
1. <tr>
2. <td>土曜</td>
3. <td>11:00</td>
4. <td>21:00</td>
5. </tr>
6. <tr>
7. <td>日曜・祝日</td>
8. <td colspan="2">休み</td>

属性2

■セルを縦方向に結合するrowspan属性
1. <tr>
2. <td rowspan="2">hot</td>
3. <!-- セルを縦に2つ結合する -->　←VBAの「’」
4. <td>コーヒー</td>
5. <td>300</td>
6. </tr>
7. <tr>
8. <td>紅茶</td>
9. <td>250</td>
10. </tr>
■文字のレイアウトalign属性
●中央<tr align="center">
●左寄せ<tr align="left">
●右寄せ<tr align="right">

ヘッダー固定表示

■<thead><tbody><tfoot>タグをつかって表をまとめ、表をスクロールしてもヘッダーが固定表示
※見た目上では、<thead><tbody><tfoot>はブラウザに反映されないが、表が複雑になると後に編集しやすい。
●例) theadに対して表をスクロールしてもヘッダーが固定表示
<table border="1" style="border-collapse: collapse;">
  <thead style="display: block;">
    <tr>
      <th style="width:150px;">日本語</th>
      <th style="width:150px;">英語</th>
    </tr>
  </thead>
  <tbody style="display: block;overflow-y:scroll;height:200px;">
    <tr>
      <td style="width:150px;">埼玉</td>
      <td style="width:150px;">Saitama</td>
    </tr>
    <tr>
      <td>東京</td>
      <td>Tokyo</td>
    </tr>
    <tr>
      <td>神奈川</td>
      <td>Kanagawa</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">ようこそ日本へ</td>
    </tr>
  </tfoot></table>

■グラデーションの背景色

background: linear-gradient(角度または方向, 開始色,終了色);
/* 45度に傾いたグラデーションで、赤から黒に */
linear-gradient(45deg, red, black);

/* 右下から左上に向かうグラデーションで、青から赤に */
linear-gradient(to left top, blue, red);

●グラデーションのCSSサンプル
    body{
        /* 背景をグラデーションにする */
    background: linear-gradient(45deg, #10100E, #A72F37);
    color:#cccccc;
    }
-------------●

HTMLの背景色を指定するタグとCSS

●最新のHTML5では非推奨
<body bgcolor="背景色" text="文字色">

リンクになっている文字が見えづらくなっては困りますからこちらのコードのようにまとめて設定するのが一般的
<body bgcolor="背景色" text="文字色" link="リンク文字色 " alink="選択中リンク文字色" vlink="訪問済みリンク文字色">

各文字色の指定は、 red、green、blueなどの色名での指定や、*#10100E、#cccccc"などのカラーコードで指定する方法

●最新のHTML5推奨
body {
　　background-color: 背景色;
　　color: 文字色;
}