Vocational training

観覧注意！！（1）
観覧注意！！（2）

HTML

CSS

もっと詳しく調べるにはグーグル先生に聞こう！ Google

 文章の基本

  1. ブロックレベル要素とインライン要素

  2. HTMLのバージョンを指定する
    <DOCTYPE〜>
  3. HTMLで書かれていることを宣言する
    <html>〜<⁄html>
  4. 文章に関する情報を記載する
    <head>〜<⁄head>
  5. 初期設定をする
    <meta http-equiv="★" content="◆">
  6. 文章の情報を記載する
    <meta name="★" content="◆">
  7. タイトル
    <title>〜<⁄title>
  8. ブラウザに記載する内容を入れる
    <body>〜<⁄body>
  9. 問合せ先
    <address>〜<⁄address>
  10. 特定の範囲指定
    <div>〜<⁄div>

トップに戻る

 テキスト

  1. 見出しを付ける
    <h1〜5...>〜<⁄h1〜5...>
  2. 段落
    <p>〜<⁄p>
  3. 改行
    <br>〜<⁄br>
  4. フォントの強調
    <em>〜<⁄em>
    <strong>〜<⁄strong>

トップに戻る

 ページの配置・リスト

  1. 横罫線の表示
    <hr>〜<⁄hr>
  2. 文頭に番号を付ける
    <ol>
    <li>〜<⁄li>
    <⁄ol>
  3. 文頭に黒丸を付ける
    <ul>
    <li>〜<⁄li>
    <⁄ul>

トップに戻る

 イメージ

  1. 画像の挿入
    <img src="★" alt="◆">
  2. 画像の幅、高さを設定する
    <img src="★" width="◆" height="●">

トップに戻る

 リンク

  1. 別のホームページのリンク
    <a href="★">
  2. 自分で作ったHTMLにリンクさせる
    <a href="★">
  3. 指定した場所にジャンプする
    <a href="#★">
    <a name="◆">

トップに戻る

 フォーム

  1. 入力フォームの制作
    <form action="★" method="◆">〜<⁄form>
  2. 一行のテキストボックスを作る
    <input type="★" ◆>
  3. 複数行のテキストボックスを作る
    <textarea ★>〜<⁄textarea>
  4. 送信、リセットボタンを作る
    <input  type="submit" ★>
    <input  type="reset" ★>
  5. ラジオボタンを作る
    <input type="radio" ★>
  6. チェックボックスを作る
    <input type="checkbox" ★>
  7. プルダウンメニューを作る
    <select ★>
    <option ◆>〜<⁄option>
    <⁄select>

トップに戻る

 テーブル

  1. 表を作る
    <table border="★">
    <tr>〜<⁄tr>
    <td>〜<⁄td>
    <⁄table>
  2. 表のセルの幅、罫線の太さを設定する
    <table border="★" cellspacing="◆" cellpadding="●">
  3. セル内の文字を強調、中央表示させる
    <th>〜<⁄th>
  4. 文字の場所を指定する
    <tr align="★" valign="◆">〜<⁄tr>
    <td align="★" valign="◆">〜<⁄td>
    <th align="★" valign="◆">〜<⁄th>
  5. 横のセルを結合させる
    <td colspan="★">〜<⁄td>
    <th colspan="★">〜<⁄th>
  6. 下のセルを結合させる
    <td rowlspan="★">〜<⁄td>
    <th rowlspan="★">〜<⁄th>

トップに戻る

 その他

  1. 文字参照

トップに戻る

 XHTML

  1. XHTML1.0
    <?xml version="★" encoding="◆"?>
  2. 名前空間と言語コード
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="★" lang="★">
  3. 終了タグ
    <要素名 ⁄>
  4. name属性ではなくid属性を使用する
    <a name="★" id="★">〜<⁄a>
  5. XHTML形式

トップに戻る

CSS

 テキスト

  1. CSSとは
  2. 擬似クラス

トップに戻る

 フォント

  1. 行揃えを指定
    text-align: ★;
  2. フォントの指定
    font-family: ★;
  3. 文字の大きさを変える
    font-size: ★;
  4. 行の高さの指定
    line-height: ★;

トップに戻る

 色と背景

  1. 文字色の指定
    color: ★;
  2. 背景色の指定
    background-color: ★;
  3. 背景画像の指定
    background-image: ★;
  4. 背景画像の繰り返し方法の指定
    background-repeat: ★;
  5. 背景画像の固定
    background-attachment: ★;
  6. 背景画像の位置を指定
    background-position: ★;
  7. 背景のプロパティを一括指定
    background: ★ ▲ ■ ● ◆;

トップに戻る

 ボックス

  1. マージンを個別に指定をする。
    margin-top: ★;
    margin-right: ★;
    margin-bottom: ★;
    margin-left: ★;
  2. マージンを一括指定をする
    margin: ★;
  3. パディングを個別で指定をする。
    padding-top: ★;
    padding-right: ★;
    padding-bottom: ★;
    padding-left: ★;
  4. パディングを一括で指定する。
    padding: ★;
  5. ボーダーの幅を個別に指定をする。
    border-top-width: ★;
    border-right-width: ★;
    border-bottom-width: ★;
    border-left-width: ★;
  6. ボーダーの幅を一括に指定をする。
    border-width: ★;
  7. ボーダーの色を個別に指定をする。
    border-top-color: ★;
    border-right-color: ★;
    border-bottom-color: ★:
    border-left-color: ★;
  8. ボーダーの色を一括して指定をする。
    border-color: ★;
  9. ボーダーの線を個別に指定をする。
    border-top-style: ★;
    border-right-style: ★;
    border-bottom-style: ★;
    border-left-style: ★;
  10. ボーダーの線を一括に指定をする。
    border-style: ★;
  11. 個別のボーダーごとに値を一括に指定をする。
    border-top: ★ ● ▲;
    border-right: ★ ● ▲;
    border-bottom: ★ ● ▲;
    border-left: ★ ● ▲;
  12. ボーダーの線を一括に指定をする。
    border-style: ★;
  13. ボーダーの一括指定
    border: ;★ ● ▲
  14. ボックスの幅、高さの指定
    width: ★;
    height: ★;

トップに戻る

 配置と表示

  1. 回り込み指定、解除
    float: ★;
    clear: ★;

トップに戻る

presented by TANIDA