CSSの基礎を学び直す

最終更新日

【WordPressをもっと使いこなすための技術メモ】

WEB系のプログラミングを学び直してWordPressに活かすことを目的に書いていきます。

※随時編集中

CSSとは

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、ウェブページのスタイルを指定する言語。

つまりHTMLで記述した要素に対し色や大きさなどを変化させるために使う。

HTMLには<center><font>などの装飾目的の要素(タグ)や属性が存在しているが、あくまでHTMLは情報構造(Webページの組み立て)を定義するための言語であり、見栄えを制御するためにはCSSを使う

CSSはセレクタ(HTMLの要素)を選択(セレクト)し、セレクタで何をしたいかプロパティを指定して記述する。

例えば<h1>要素に対するCSSの書き方は以下が基本である。

この時、プロパティの末尾はコロン(:)、行末はセミコロン(;),を付ける。

コメント

/* */』で囲むとコメントを書くことができる。

ただし、コメントをコメントで入れ子に出来ない

/* ここのテキストはコメントになる */

/* もちろん複数行もできる

     ∧_∧
  __/___\
  ( _|´・ω・`|\ <踊れ!カルメン!
  \ヽ  ̄ ̄ ̄  |
  ∠ノ     /|
 ~(     //
   | __ノ ̄ ̄)
   | /   ̄/ /
   |/   //

色の変更は『color』プロパティを使う。

記述できる値は以下がある。

  • 色の名前(Webカラーネーム)
    redなど名前で指定する方法。
    カラーネーム
  • カラーコード
    color: #ff0000;』のように値は16進数のカラーコードで指定する方法。
    ちなみに『#ffffff』のように同じ値が続く場合『#fff』のように省略できる。
    ⇒  カラーコード参考
    デザイナーっぽくカラーコードの16進数を覚えたくないですか?
  • RGB
    『color: rgb(255,0,0);
    のように0~255で表された光の三原色を指定する方法。
    値を0~255ではなく0~100%にして表すことが可能。
    ちなみにrgba』プロパティを使うと透明度も指定できる。
    RGB値参考
    rgbaとは
  • HSL
    『color: hsl(0,100%,50%);のように色相環での角度( 0~359度 )で色を、そのあと彩度と輝度を%で「,(カンマ)」で区切って表す方法。
    ちなみにrgba』のように『hsla』プロパティを使うと透明度も指定できる。
    HSLとは
    CSSでの使い方参考
/* 以下は全部 "赤" を表現 */

h1{
 color: red;
 color: #ff0000;
 color: rgb(255,0,0);
 color: hsl(0,100%,50%);
}

 

Webセーフカラー

ブラウザや OS の種類に関係なく、Web ページで常に表示できる 216 色のカラーのこと。

Web セーフカラーのみを使用して画像を作成した場合、Web ブラウザーで表示する限り、常に正確に表示されることになる。

Webセーフカラー

 

文字の大きさ・種類・太さ

文字の大きさの変更は『font-size』プロパティを使う。

値の単位は『px (ピクセル)』で指定する。

文字の種類は『font-family』プロパティを使う。

明朝体は『serif』、ゴシック体は『sans-serif』など様々な種類があるので、主要なもの以外覚える必要は無い。

ただし、フォント名にスペースがある場合はダブルクォーテーション(”)で囲まなければならない。

font-weightプロパティを用いると文字の太さを変更することができる。

normalまたはboldを指定するが、

<

h1>~

<

h6>の要素は初期状態でfont-weight: bold;となっているので『font-weight: normal;』と指定すれば文字が細くなります。

h1{
 font-size: 10px;
 font-family: serif;
 font-weight: normal;
}

p{
 font-size: 20px;
 font-family: "Avenir Next";
 font-weight: bold;
}

 

 

 

横幅、高さの変更

要素の横幅、高さの変更は『width』と『hight』プロパティを用いる。

画像であれば単純に画像の大きさ、テキストであれば要素の表示範囲が影響する。

 

値の単位はpx』または『%』で指定する。

また、値に『auto』と記述すると初期値が指定され、要素の幅及び高さは自動で決められる。

p {
  width: 100px;
  height: 100px;
}

 

要素の中央寄せ

要素を中央寄せする方法は主に2つ。

  • margin: 0 auto;

  • text-align: center;

広い範囲を囲うようなブロック要素の場合はmarginテキストやボタンのようなインライン要素・インラインブロック要素の場合はtext-alignを使うようにする。

 

 

 

Webページの背景関連

背景色の変更

ある要素範囲に対する背景色を変更するには『background-color』プロパティを使う。

単純に背景を変更するのではなく、例えばテキストの背後を任意の色にするなど使いどころは幅広い。

色の指定方法は『文字の色の変更』と同じ。

 

 

背景に画像を指定する

背景に画像を指定するには『background-image』プロパティを用いる。

background-image: url(画像のURL);』で画像を指定することができるが、このままだと背景を埋め尽くすまで画像が繰り返し表示される。

そのため『background-size: cover;』も同時に設定し、1枚の画像で表示範囲を埋め尽くすよう画像の大きさが拡大縮小させる。

 

 

class

同じタグが複数個ある場合、タグ全てにCSSは適応されてしまう。

  • 』のように、htmlファイル側でタグにclassプロパティを指定すると、タグに対して個別の名前を付けることが出来る。

    これを利用することで、タグを識別してCSSの適応をさせることができる。

    普段のセレクタを書く時との違いは『.aiueo{ … }』のようにクラス名の前にドット(.)を必ず付ける。

    • あいうえお
    • あいうえお
    • おえういあ
    /* 特に指定無く全部に適応させたい場合
       (タグにはドットを付けない) */
    
    li{
     color:red;
    }
    
    
    /* クラスで指定する時はドットを付ける */
    .aiueo{
     color:green;
    }
    
    .oeuia{
     color:blue;
    }

     

    display

    『display』プロパティとは要素の表示形式を指定するプロパティである。

    以下にブロック要素・インライン要素の特徴を列挙する。

    【ブロック要素】

    • 縦に積まれていく
    • 幅 width と高さ height が指定できる
    • 上下左右に margin を指定できる
    • 上下左右に padding を指定できる
    • text-align は要素の中身に適応される。
    • vertical-align は指定できない。

    【インライン要素】

    • 横に並んでいく
    • 幅 width と高さ height は指定できない。幅や高さは文字列の長さや文字の大きさなど、内容物のサイズ。
    • 左右だけ margin を指定できる
    • 左右に padding を指定できる。(実は上下も指定できるけど、前後の行や要素にかぶってしまうので、あまり効果はわからない)
    • text-align を親ブロックに付けることで指定できる。
    • vertical-align を指定できる。

     

     

    list-style

  • タグを使用した時、先頭の黒点を表示させたくない場合は『list-styleプロパティを用いて値にnoneを指定すると消すことができる。

    list-style-type』プロパティなら記号やアルファベットなどをマーカーに指定することができる。

    list-style-image』プロパティなら画像をマーカーに指定することができる。

    • 項目1
    • 項目2
    • 項目3
    .list {
    
    /* 先頭の点を無くす */
      list-style: none; 
    
    /* 先頭が白丸になる */
      list-style-type: circle;
    
    /* 小文字のアルファベット順 */
      list-style-type: lower-alpha;
    
    /* 画像を指定したい場合の例 */
      list-style-image: url(“hoge.png”);
    
    }

     

     

    float

    float』プロパティは主に要素を横並びにする時などに使用する。

    例えば

  • タグはそのまま使うと縦並びになるが、これを指定すると見た目を横並びにすることができる。
    • 項目1
    • 項目2
    • 項目3
    .list {
    
    /* 左寄せで横並びにする */
      float: left; 
    
    /* 右寄せで横並びにする */
      float: right;
    
    /* 初期値で配置を指定しない(ほぼ使わない) */
      float: none;
    
    }

     

     

    margin

    margin』プロパティは要素に対して外側に余白を作りたい場合に使用するプロパティである。

    単位はpxで、上下左右に対して余白を指定することができる。

    p{
     /* 上下左右に余白が20px作られる */
     margin: 20px;
    
     /* 上右下左、それぞれに余白を指定できる */
     margin-top: 20px;
     margin-right: 30px;
     margin-bottom: 40px;
     margin-left: 50px;
    
     /* 上記は以下のように短縮して記述することも可能 */
     margin: 20px 30px 40px 50px;
    
    /* 値を2つだけにすると上下、または左右に適応される */
    margin: 20px 40px;
    margin: 30px 50px;
    
    }

     

     

     

    padding

    padding』プロパティは要素に対して内側に余白を作りたい場合に使用するプロパティである。

    単位はpxで、上下左右に対して余白を指定することができる。

    p{
     /* 上下左右に余白が20px作られる */
     padding: 20px;
    
     /* 上右下左、それぞれに余白を指定できる */
     padding-top: 20px;
     padding-right: 30px;
     padding-bottom: 40px;
     padding-left: 50px;
    
     /* 上記は以下のように短縮して記述することも可能 */
     padding: 20px 30px 40px 50px;
    
    /* 値を2つだけにすると上下、または左右に適応される */
    padding: 20px 40px;
    padding: 30px 50px;
    
    }

     

     

    span

    文中の一部にCSSを適用させたい場合、HTML側で適応したい文章をタグで囲み、CSSでspanプロパティを指定することでその文章のみCSSを適応することができる。

    要素は前後には改行は必要ないインライン要素の1つである。

    この花は赤く染まっている

    span{
     color: red;
    }

     

     

    border

    border』プロパティはボーダー(枠線)を表現することができる要素で、枠線の太さ種類を指定して使用する。

    上下左右すべてに線を付けたい場合はborderとし、特定の場所にのみ付けたい場合は『border-方向』で記述する。

     

    h1{
     /* 値は太さ・種類・色の順で指定する */
     border: 5px solid red;
    
    
    /* 例えば下線を表現したい場合、以下のように方向を指定する */
     border-bottom: 5px solid red;
    }

     

    border-radius

    border-radiusプロパティは、ボックスの4つのコーナーを角丸に指定することができる。

     

     

    opacity

    『opacity』プロパティは要素の透明度の設定ができる。

    透明度は0.0(完全に透明) ~ 1.0(完全に不透明)の数値で指定する。

    値に単位は必要ない。

    また、opacityには要素の中身全てを透明にする性質がある。

    背景色のみを透明にするにはrgbaというものを使う必要がある ⇒ 文字の色の変更

     

    letter-spacing

    letter-spacing』プロパティは文字の間隔を指定することができる。

    値はpxで指定する。

    p{
     letter-spacing; 2px;
     letter-spacing; 10px;
    }

     

    line-height

    line-height』プロパティは行の高さを指定することができる。

    値はpxで指定する。

    本来は行間を調整するたmのものだが、要素の縦方向の中央に文字を配置するのにも使える。

    line-heightプロパティの「高さの中心」に文字が配置されるため、要素の高さとline-heightプロパティを同じ値にすると、文字がちょうど中央に配置されるようになる。

     

    hover

    hover』とは、これが指定されている要素にマウスカーソルでのクリック等がされた時、動的な変化(色が変わるアニメーションなど)を起こすことができる疑似クラスである。

    a:hover {
      color: orange;
    }

     

    transition

    transition』プロパティはアニメーションを付与する。

    「変化の対象」や、「変化にかかる時間」などを指定できる。

    「変化の対象」にはcolorなどのプロパティを指定するが、allを指定すると全てのプロパティに適用される。

    transitionは多くの場合hoverと組み合わせて使用する。

    div{
     transition: all 1s; /* 1秒かけて要素を赤く表示する */
    }

     

    position

    position』プロパティを用いると、要素を重ねて表示させるように出来る。

    基準位置は左上とし、その位置からtop・left・right・bottomを用いて指定する。

    また、基準位置は変更できる。

    • absolute・・・サイト全体の左上を基準にする。
    • relative  ・・・基準にしたい要素に設定すると、それの左上を基準位置にする。

    hoge

    parent{
     position: absolute;
    }
    
    child{
     position: relative;
     top: 30px;
     left: 30px;
    }
    

     

  • HaLucina

    シェアする

    1件のコメント