KinutaHandicraft log
    ヒ ン ト 集
■ ヒントだよ!HTML & CSS ■
    topへ          HTML     CSS     表計算利用     ファイル     色指定     ソフト/機材     参考書など     単位     記号の例
    CSS基本     その1     その2     その3     その4     その5     その6
■ CSS
 
・CSSの基本
一般にスタイルシート呼ばれるものです。 ・CSS指定の書き方(色々ありますがここでは、3種類)
  1. 要素名
    要素名{プロパティー: ; }
    要素名はHTMLのタグの要素です。
    ※(参考書の記述もあり、)要素名をクラス名やID名に置き換えても設定が有効になる場合があります。
  2. ドット クラス名
    .クラス名{プロパティー: ; }
    もちろん、要素名.クラス名{プロパティー: ; }もOKです。
  3. シャープ ID名
    #ID名{プロパティー: ; }
    もちろん要素名#ID名{プロパティー: ; } もOKです。
  4. {プロパティー: ; }
    プロパティーが、文字サイズの設定、色の設定などにあたり、が実際の文字サイズ(26pxとか)、赤色(#ff0000)とかのことです。
・CSSの適用
  1. CSSを設定した要素名のタグを記述するだけです。
  2. <要素 class="クラス名">でCSSを適応できます。
  3. <要素 id="ID名">でCSSを適応できます。
    idはページ内アンカーとしても使うので、CSS適応なのかアンカー設定なのか紛らわしい場合があります。
・CSSの記述場所
・・HTMLファイルhead内head内でstyleタグで囲って設定します。
<html lang="ja">
 <head>
  <style>
   .kyo0 { border :none ;}
   .kyo1 { border :1px solid #000000;}
   .tal { border: 1px solid #000000;
     border-collapse: separate; }
   .tbb { border: 1px solid #000000; }
   .padx { padding-left:50px ;}
  </style>
</head>
<body>

</body>
</html>
 
・CSSファイルを呼び出す場合(CSSファイルは、はcss。例=ファイル名.css)
<link rel="stylesheet" href="CSSファイル名など">と記述します。
 
・CSSファイルの内容の例
   /* コメント */
   .kyo0 { border :none ;}
   .kyo1 { border :1px solid #000000;}
   .tal { border: 1px solid #000000;
     border-collapse: separate; }
   .tbb { border: 1px solid #000000; }
   .padx { padding-left:50px ;}
 
・HTML記述の例
 <!DOCTYPE html>
 <html lang="ja">
  <head>
   <link rel="stylesheet" href="CSSファイル名など">
 </head>
 <body>
 〜
 </body>
 </html>
▲このページ一番上へ
    CSS基本     その1     その2     その3     その4     その5     その6
    topへ          HTML     CSS     表計算利用     ファイル     色指定     ソフト/機材     参考書など     単位     記号の例
© KinutaHandicraft