CSS(スタイルシート)の枠付き文章


CSS(スタイルシート)の枠付き文章

このページではごくありふれたの文章の周りに枠をつけるスタイルシートをご紹介します。

↓<head>〜</head>又は外部CSSに↓

↓<body>〜</body>に↓

↓HTMLタグに直接付加する場合は(インライン)↓

◎スタイルシートのポイント◎
(サンプルスタイルシートと照らし合わせながら変更して下さい)

  • sample1[waku1やkakoi1など半角英数字ならOK]
  • font-size:数字px;[文字の大きさ(数字の大小)]
  • font-weight:太さ;[文字の太さbold(太い) - nomal(普通)]
  • color:カラー;[文字の色(カラーコード参照)]
  • letter-spacing:数字px;[文字と文字の間隔(数字の大小)]
  • background-color:カラー;[背景の色(カラーコード参照)]
  • border:数字px 形式 カラー;
    [数字px(枠の太さ)]
    [枠の形式none(枠なし) - solid(実線) - double(二重線) - dotted(点線) - dashed(破線) - groove(へこみ線) - ridge(立体線)]
    [枠の色(カラーコード参照)]
  • text-align:並び;[枠内の文字の並びcenter(中央) - left(左寄り) - right(右寄り)]
  • padding:数字px;[枠と文字の間隔]
  • marigin-top:数字px;[枠外上側の間隔]
  • margin-bottom:数字px;[枠外下側の間隔]
  • width:数字;[枠の横幅]

失敗して思い通りいかなくなったらまたコピー&ペーストしてゆっくり1からやり直しましょう。