Please enable JavaScript.

Coggle requires JavaScript to display documents.

タグ **htmlファイルでは必ず <html><head><body>を使用 …

- - - - <ol> <li>項目１</li>
        <li>項目２</li> </ol>
        1.項目１ 2.項目２
    - - <ul> <li>項目１</li>
        <li>項目２</li> </ul>
        ・項目１・項目２
- - - - <td>タグ　終了タグあり
        データのセルを作成するタグ
        table data
      - <th>タグ　終了タグあり
        見出しのセルを作成するタグ
        table header
        
        <th>は内容によっては使用しなくてもOK
      - テーブルのセル（マス目）の連結
        <th><td>につける属性
        
        colspan属性セルをヨコ向きに結合する 　
        例）ヨコに２つ結合する colspan=” 2”
        ◆ヨコ向きに結合する場合
        <table> <tr> <th colspan=” 2” >見出し</th>
        　<td>内容</td>削除
        </tr>
        </table>
        
        つなげたい最初のタグに colspanを指定、
        値につなげたいセルの数を指定する
        連結したセルはつなげた分削除する
        
        rowspan属性セルをタテ向きに結合する 　
        例）タテに3つ結合する rowspan=” 3”
        ◆タテ向きに結合する場合 <table> <tr>
        <th rowspan=” 2” >見出し</th>
        <td>内容</td>
        <tr><th>見出し</th> 削除
        　<td>内容</td>
        </tr> </table>
        
        つなげたい最初のタグに rowspanを指定、
        値につなげたいセルの数を指定する
        連結したセルの分次の<tr>内の<th>または<td>を削除する
- - - - ジャンプ先
        <タグ id=”アンカー名”>
        (半角英数)
        　　　　↑　　　　
        クリックする方
        <a href=” #アンカー名”>文字や画像</a>
        （頭に#シャープをつける）
        
        <h1 id=” top” >内容</h1>
        ↑　　　　<p><a href=” #top” >ページのトップ<a/></p>
      - ※縦に長い文章量の多いページや、ランディングページでは 　ページ内リンクを作っておくと便利
        （ただし複雑なページ内リンクは
        閲覧者が迷子になりやすいので、多用は禁物）
- - - - <link>タグ　終了タグなし
        cssをリンクするタグ<head>タグ内に記述
      - 【属性】
        href 　cssをリンクする
        rel 外部cssリンクの指定
        type　リンクしたcssのデータ形式の指定
    - - font-sizeプロパティ
        プロパティブラウザでの文字のサイズを指定するプロパティ
        〇h1{font-size:15px;}
        　h1タグの文字のサイズを15pxにする
        〇p{font-size:80%;}
        　pタグの文字のサイズを80％にする
        　＝13px（16×0.8）にする（標準が16px）
        
        ◆%相対単位
        ブラウザの基準文字サイズ＝16pxに対して相対的にサイズ指定
        〇メリット　文字サイズをブラウザ側で変更できる
        ×デメリット　デザインが崩れる
        ※font-sizeを指定した時はその数値が基準
        小数点はすべて切り上げで表示
        
        ◎px（ピクセル）について
        pxは絶対単位でどの環境のブラウザで見ても
        指定した文字サイズで表示される
        1pxは画面の小さい四角1つ分を表す
        5px＝タテヨコ5四方内に表示される文字サイズ
        
        ◆px絶対単位
        どのPCやスマホで見ても必ず指定したサイズで表示
        〇メリット　　デザインを固定できる
        ×デメリット　文字サイズをブラウザ側で変更できない
        
        太字の指定
        font-weightプロパティ
        .desc{font-weight:bold;}
        訳）.descの文字を太字にする
        :normal 標準の太さで表示
        ※font-sizeを10px以下に指定した上で
        boldを適用すると、文字がつぶれて表示されるので
        　注意が必要
        
        文字寄せの指定
        text-alignプロパティ
        .desc{text-align:right;}
        classセレクタ
        内容を左、中央、右寄せにするプロパティ
        訳）.descの内容を右に寄せる :center
        
        微調整をする場合はpaddingで調整
        text-align:right;
        padding-right:50px;
        いったん右に寄せて
        右側に50pxの余白をつける
      - colorプロパティ
        文字の色を指定するプロパティ
        h1{color:red;}
        h1{color:#FF0000;}
        訳）h1の文字の色を赤に指定する
      - background-colorプロパティ
        指定した要素（タグで囲んだ部分）の背景に色をつける
        p{background-color:blue;}
        p{background-color:#00F;}
        訳）pの文字の背景色を青に指定する
      - line-heightプロパティ
        文章の行間を指定するプロパティ
        p{line-height:1.5;}
        訳）pタグの行と行の間を1.5倍（
        16px×1.5倍＝24px）あける
        例）文字サイズが16pxの場合の行間
        文字と文字の中心からの距離が 16×1.5＝24pxあく
        ・値は倍率で指定（単位なし）
        ・一般的に見やすい行間の目安は1.4～1.7
        ・文字サイズの指定がない場合は16pxが基準
      - borderプロパティ
        指定した要素の上下左右に線を表示する
        p{border:1px solid #ccc;}
        訳）pの上下左右を１pxのグレーの実線で囲む
        
        ◆ 上下左右を個別で指定
        border-top 　　上
        border-right　　右
        border-bottom　下
        border-left 　　左
        
        ◆ 値の種類
        太さ
        px単位で数値を指定
        種類
        solid 実線 dashed 破線 dotted 点線
        色
        カラーネームまたは16進数で指定
        
        ◆線の種類
        solid 実線
        dotted 点線
        dashed 破線
        double 二重線
        groove 線がへこんで見える
        ridge 線が浮き上がって見える
        inset 線より内側が浮いて見える
        ※ブラウザによって表示が異なる場合があるので
        grooveなどは使わない方がベター
        
        ・値が同じときは
        上下左右をまとめて指定可
        ・値は3つを
        半角スペースで区切って指定
        ・値の順番は変更可
      - paddingプロパティ
        h2{padding:10px 0px 8px 20px;}
        要素の領域の内側に余白を指定する
        ・背景色やボーダーで囲んだ内側の範囲を広げる
        ・値が0のときは単位はなくてもOK（つけるのを推奨）
        ・値をまとめて指定する時は半角スペースで区切る
        
        padding-top　上　　padding-right　右
        padding-bottom　下　　padding-left　左
        上下左右を個別に指定も可能（padding、margin共通）
      - marginプロパティ
        h2{margin:30px 20px 30px 5px;}
        要素の領域の外側に余白を指定する
        
        値をまとめて指定も可能（padding、margin共通）
        margin:10px;上下左右に10pxの余白
        margin:10px 20px;上下に10px、左右に20px
        margin:10px 20px 30px;上10px 左右に20px 下に30px