基本プロパティとセレクタ

基本プロパティとセレクタ

外部CSSファイルにリンクする方法

  1. 「style.css」ファイルにひな型として下記のテキストを入れる。
    @charset "utf-8";
    
    /*ウィンドウ背景色の設定*/
    
    
    /*リンク色の設定*/
    
    
    /*ページタイトルの設定*/
    
    
    /*大見出しの設定*/
    
    
    /*情報データ見出しの設定*/
    
    
    /*リード文領域の設定*/
    
    
    /*「もっと見る」リンクの設定*/
    
    
    

    utf-8
    文字コードの指定。
    これがないとCSSファイル内で日本語を使った場合、文字化けしてしまう。
    「/*〜*/」
    これはコメントで、ブラウザ表示には関係ないが適宜入れておくことで何のスタイル指定なのかを分かりやすくしておくと後々の修正が便利になる。
  2. HTMLから外部CSSファイルへリンクする
    index.htmlのhead要素に外部CSSファイルを参照するlink要素を設定する。
    ▼CSS基本書式
    <link href="style.css" rel="stylesheet" type="text/css" media="all">
    
    href属性
    外部参照するCSSファイルのパスを記述
    rel属性・type属性
    外部参照するファイルの種類
    media属性
    そのCSSファイルを適用する対象メディアに応じて値を指定する

基本的な装飾を設定する

  1. ウィンドウ背景色の指定
    background-color [背景色]
    body {
        background-color:#FF00DD;
    }
  2. リンク色の設定
    color [文字色]
    a {
        color:#00ABC88;
    }
    
    a:hover {
        color:#FF7777;
    }
    
    【:】は擬似クラスを表しており、簡単に言うとオプションである。
    リンクに使う擬似クラスのまとめ
    :link
    未訪問リンク
    :visited
    訪問済みリンク
    :hover
    マウスが乗ったとき
    :active
    マウスを押しているとき
    :focus
    フォーカスされているとき
  3. ページタイトルの設定(h1)
    text-align [行揃え](値はleft・center・right)
    font-size [文字サイズ]
    h1 {
        color:#6FBBAA;
        text-align:center;
        font-size:200%;
    }
  4. 大見出しの設定(h2)
    border [境界線]
    padding [境界線の内側の余白]
    margin [境界線の外側の余白]
    上記3つはそれぞれ*-top・*-bottom・*-left・*-rightという形で上下左右を個別に設定することが出来る。
    h2 {
        color:#6FBBAA;
        border:#94CCBB 1px dotted;
        border-left:#D0E35B 10px solid;
        padding:5px 20px;
        margin-bottom:0;
    }
    
    CSSは上から順に読み込まれるので、border→border-leftの順で指定すると一旦四辺すべてを点線にしてから左辺だけ10pxの実線で値を上書きする形になる。
    padding・marginの値の指定方法
    【全部】・【上下】【左右】・【上】【左右】【下】・【上】【右】【下】【左】
  5. 情報データ見出しの設定(dt)
    font-weight [文字の太さ]
    dt {
        font-weight:bold;
    }

今回の出来上がりページ


トラブルが発生した場合はすぐにお電話(050-5532-9970)ください。
迅速なトラブル解決だけでなく、パソコン購入アドバイスもしております。

パソコンレスキュー
三鷹市周辺のパソコン修理・トラブル解決ならお任せください!

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA