CSSの基本のソースを表示

<h2>制作者 : HiLo*t_ ＆ yuki</h2>
    Copyright &copy; [https://wiki.sufee.net/index.php?title=%E5%88%A9%E7%94%A8%E8%80%85:%E9%9B%9B%E8%A6%8B%E6%B2%A2%E7%97%87%E5%80%99%E7%BE%A4 雛見沢症候群]<br>
    Copyright &copy; [https://wiki.sufee.net/index.php?title=%E5%88%A9%E7%94%A8%E8%80%85:Sufee_Admin yuki]
    <h2>画面から見切れ防止</h2>
    <p>
        overflow:★ <br>
        hidden はみ出た部分は消す<br>
        scroll スクロールバーを出す
    </p>
    <h3>行の高さを指定する</h3>
    <p>    
        line-height:★<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;★:normal,実数値+単位、実数値、パーセント値+％
    </p>
    <h2>文字修飾と背景画像</h2>
    
    <h3>フォントの指定１</h3>
    <p>    
        font-family:★<br>
        ★<br>
        serif:　　　　　明朝系のフォント<br>
        sans-serif:　　&nbsp;ゴシック系のフォント<br>
        cursive:　　　　筆記体・草書体系のフォント<br>
        fantasy:　　　　装飾がメインとなっているフォント<br>
        monospace:　　　等幅のフォント
    </p>

    
    <h3>フォントサイズの指定</h3>
    <p>
        font-size:★<br>
　　　　         ★：%&nbsp;or&nbsp;キーワード<br>
        キーワード<br>
        xx-small:　非常に小さい<br>
        x-small:　&nbsp;小さい<br>
        small:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;やや小さい<br>
        medium:　　普通のサイズ<br>
        large:　　&nbsp;やや大きい<br>
        x-large:　&nbsp;大きい<br>
        xx-large:　非常に大きい<br>
        larger:&nbsp;&nbsp;&nbsp;&nbsp;親要素に対して一段階大きく<br>
        smaller:　&nbsp;親要素に対して一段階小さく
    </p>

    
    <h3>フォントへの斜体設定</h3>
    <p>
        font-style:★<br>
        ★：キーワード<br>
        italic:　イタリック<br>
        oblique:&nbsp;斜体<br>
        normal:　通常の状態で表示
    </p>

    
    <h3>フォントの太さの指定１</h3>
    <p>
        font-weight:★<br>
        ★：キーワード　数値<br>
        normal&nbsp;　標準　<br>
        bold　　&nbsp;太字<br>
        bolder　&nbsp;一段階太く<br>
        lighter　一段階細く
    </p>

    <h3>フォント一括指定のルール</h3>
    <p>
        font-style<br>
        font-variant<br>
        font-weight<br>
        font-size<br>
        font-height<br>
        font-family
    </p>

    
    <h3>背景色の設定</h3>
    <p>
        background-color:★<br>
        ★：キーワード、色指定値
    </p>

    
    <h3>背景画像の設定</h3>
    <p>
        background-image:★<br>
        ★：URL,none
    </p>

    
    <h3>背景画像の繰り返し方法の指定</h3>
    <p>    
        backgrond-repeat:★<br>
        ★：キーワード<br>
        repeat:画面一杯に敷き詰めて表示<br>
        repeat-x:横方向にのみ繰り返して表示<br>
        repeat-y:縦方向にのみ繰り返して表示<br>
        no-repeat:繰り返さずに、１点だけ表示
    </p>

    
    <h3>背景画像のサイズの指定</h3>
    <p>    
        background-size:★<br>
        ★:%&nbsp;キーワード　実数値+単位<br>
        contain　幅と高さの比率を保持したまま、画像全体が表示領域に収まる最大サイズ<br>
        cover　　幅と高さの比率を保持したまま、その画像一つだけで表示領域を覆える最小サイズ<br>
        auto　　&nbsp;画像本来の大きさで表示する
    </p>

    
    <h3>背景画像の固定</h3>
    <p>
        background-attachment:★<br>
        ★：scroll,&nbsp;fixed
    </p>

    
    <h3>画像表示位置を指定</h3>
    <p>    
        background-position:★<br>
        ★：実数値+単位　％　left&nbsp;center&nbsp;right&nbsp;top&nbsp;bottom
    </p>

    <h2>ライン(線)の導入</h2>

    <h3>
        マージンの個別指定
    </h3>

    <p>
        margin-top:★　　　上側<br>
        margin-right:★　　右側<br>
        margin-bottom:★　&nbsp;下側<br>
        margin-left:★　　&nbsp;左側<br>
        margin:★　　　　　全部<br>
        ★：％
    </p>

    <h3>枠線の種類の設定</h3>
    <p>
        border-top-style:★　　　上側<br>
        border-right-style:★　　右側<br>
        border-bottom-style;★　&nbsp;下側<br>
        border-left-style：★　　左側<br>
        border-style:★　　　　　全部<br>
        <strong>枠線の種類</strong><br>
        none:　&nbsp;&nbsp;枠線を表示しない<br>
        hidden:　枠線を表示しない<br>
        dotted:　点線<br>
        dashed:　破線<br>
        solid:　&nbsp;実践<br>
        double:　二重線<br>
        groove:　線がへこんだように見える枠線<br>
        ridge:　&nbsp;線が浮き上がったように見える枠線<br>
        inset:　&nbsp;線より内側がへこんだように見える枠線<br>
        outset:　線より内側が浮き上がったように見える枠線
    </p>

    <h3>枠線の幅の個別の設定</h3>
    <p>
        border-top-width:★　　　　上側<br>
        border-right-width:★　　　右側<br>
        border-bottom-width:★　　&nbsp;下側<br>
        border-left-width:★　　　&nbsp;左側<br>
        border-width:★　　　　　　全部<br>
        ★：サイズを表す数値+単位　キーワード<br>
        thin:　　細い線<br>
        medium:　中くらいの線<br>
        thick:　&nbsp;太い線
    </p>

    <h3>枠線の色の個別設定</h3>
    <p>
        border-top-color:★　　　　上側<br>
        border-right-color:★　　　右側<br>
        border-bottom-color:★　　&nbsp;下側<br>
        border-left-color:★　　　&nbsp;左側<br>
        border-color:★　　　　　　全部<br>
        ★：RGB値、キーワード、transparent(透明)
    </p>

    
    <h3>内容領域の幅と高さの指定</h3>
    <p>
        width:★　幅<br>
        height:★&nbsp;高さ
    </p>

    <h3>角を丸くする</h3>
    <p>
        border-top-left-radius:★　　　　左上<br>
        border-top-right-radius:★　　　&nbsp;右上<br>
        border-bottom-right-radius:★　　右下<br>
        border-bottom-left-radius:★　　&nbsp;左下<br>
        border-radius:★　　　　　　　　&nbsp;全部<br>
        ★：実数値+単位　％
    </p>

    <h3>ボックスに影をつける</h3>
    <p>
        box-shadow:★☆▲〇<br>
        ★：none<br>
        ☆：色<br>
        ▲：実数値+単位<br>
        〇：inset
    </p>

<h3>線形グラデーションの設定　&lt;body&gt;</h3>
<p>
    ★:linear-gradient(☆,▲,…,〇)<br>
    ★：画像を扱えるプロパティ<br>
    ☆：方向（角度、toキーワード）<br>
    ▲：開始点のカラーストップ（色　位置）<br>
    〇：終了点のカラーストップ（色　位置）
</p>

<h3>テキストに影をつける</h3>
<p>
    text-shadow:★<br>
    ★：none&nbsp;色　実数値+単位
</p>