CSS初心者向けWebデザインとCSSの基本的な書き方

• 要素とは？
  おはよう

  margin(マージン)
  border(ボーダー)
  padding(パディング)
  contents(コンテンツ)

  HTMLで下記のようにタグで囲った時、ブラウザでは4つの領域が作られます。

  その4つの領域をまとめて「要素」と呼びます。

  つまり、「タグ」と「要素」は同じものになります。

  • タグと呼ぶ時

    「<p>おはよう</p>」のように、HTMLで書く時に「タグ」と呼びます。

  • 要素と呼ぶ時

    タグで囲まれたものをブラウザで表示するときに、4つの領域が作られます。

    作られた4つの領域をまとめて「要素」と呼びます。

  <p>おはよう</p>
• 4つの領域
  おはよう

  margin(マージン)
  border(ボーダー)
  padding(パディング)
  contents(コンテンツ)

  要素には4つの領域があり、外側から「margin」「border」「padding」「contents」と呼びます。

  それぞれの領域には役割があり、CSSでこれらの領域を変更してデザインしていきます。

  • contents(コンテンツ)
    おはよう

    コンテンツ領域は「おはよう」のように文字が入ります。

    タグの中に記述された文章がそのまま表示されます。

    CSSでは、文字の「色」「大きさ」「太さ」や背景の色などを変更する事が出来ます。

    1. 文字の色を変える
    2. 文字の大きさを変える
    3. 文字の太さを変える
    4. 背景の色を変える
    5. 横幅・高さを変える
  • border(ボーダー)

    コンテンツ領域の周りを線で囲う事が出来ます。

    囲まれた線は「ボーダー」と呼ばれ、強調させたい時などで使われます。

    CSSでは、ボーダーの「色」「太さ」の変更や角を丸くする事も可能です。

    1. ボーダーの表示
    2. ボーダーの色を変える
    3. ボーダーの太さを変える
    4. ボーダーの角を丸める
  • padding(パディング)
    おはよう

    ボーダーの内側にスペースを作る事が出来ます。

    ボーダーとコンテンツの間にスペースを作る事で、文字の始まりを右にずらすといった事が出来ます。

    1. 内側にスペースを作る
    2. コンテンツの背景と同じ色
  • margin(マージン)

    ボーダーの外側にスペースを作る事が出来ます。

    外側にスペースを作る事で、他の要素との間隔を空ける事が出来ます。

    1. 外側にスペースを作る

• ディベロッパーツールとは？

  ブラウザに標準搭載されている、「Web開発お助けツール」です。

  ダウンロードは不要で、お使いのブラウザにすでにあるツールです。

  要素の「margin」「border」「padding」「contents」を色と数字で視覚的に確認する事が出来ます。

• ディベロッパーツールを起動する
  Google Chromeの場合の動画です。
  1. 調べたい要素にマウスを移動

     調べたい要素があるところまでマウスカーソルを移動します。

  2. メニューを開く

     Windowsは「右クリック」, Macは「トラックパッドを２本指でクリック」でメニューを開きます。

  3. 「検証」をクリック

     メニューの中から「検証」または「要素の詳細を表示」をクリックして、ディベロッパーツールを起動します。

  4. ディベロッパーツール起動

     ディベロッパーツールが起動すると、HTMLのコードとCSSのスタイルを確認する画面が出てきます。

     その画面が表示されていれば、ディベロッパーツールの起動は完了です。

• 実際に確認してみよう
  要素

  いきなりですがクイズです。

  上の図を調べて4つのクイズをお答え下さい。

  • contentsの横幅と高さは？
    横幅:130px, 高さ:20px 横幅:50px, 高さ:150px 横幅:150px, 高さ:50px

    ぶーーーーー！！！

    違いまーす！！！

    ピンポーン！！

    大正解！！

    「要素」の文字は入っているところ
  • borderの太さは？
    太さ:20px 太さ:6px 太さ:30px

    残念！！

    YES！！

    そのとおりーー

    NO！！

    水色で囲まれている線の太さ
  • paddingの大きさは？
    上下:50px 左右:50px 上下:50px 左右:25px 上下:20px 左右:50px

    おしい...

    ピンポーン！！

    素晴らしいですね！！

    あーー、ちょっと違う...

    ボーダーとコンテンツの間のスペースの大きさ
  • marginの大きさは？
    上下:30px 左右:20px 上下:10px 左右:20px 上下:20px 左右:10px

    天才！！

    すごいですね！！

    大正解です！！！

    あーー

    ちょっとおしい！！

    あーー

    そっちじゃなーい

    要素の外側のスペースの大きさ

• CSSはどこに書くの？

  CSSは大きく分けて２箇所書く方法があります。

  「HTMLの中に書く」方法と「CSSファイルに書く」方法の2つあります。

  • HTMLの中に書く
    <style></style>

    記事を書く時に作成したHTMLファイルの中にCSSを書いていく方法です。

    HTMLはタグ使って記事を書いていくように、CSSを書く時も「style」タグを使います。

    「style」タグを書くだけなので、すぐにCSSを書き始められるのが特徴です。

  • CSSファイルに書く

    記事を書くHTMLとデザインするCSSを分けて書く方法です。

    記事の「HTMLファイル」とデザインの「CSSファイル」をそれぞれ別で作成して、2つを関連付ける事でスタイルを適用します。

    なぜHTMLとCSSを分けるの？

    「HTMLファイル」と「CSSファイル」の2つのファイルを作成する手間があるのに、なぜ分けるのでしょうか。

    それは編集のしやすさと再利用が出来るの2つの点でメリットがあるからです。

    • 編集のしやすさ
      <style>

      ~

      </style>

      HTMLの中に「style」タグを使って書く方法の良いところは、すぐに書ける点だと思います。

      しかし、量が多くなるとHTMLとCSSが混在したコードの中から、修正するコードを探すのに時間がかかってしまいます。

      HTMLとCSSを分けることで、「編集しやすい」書き方になります。

    • 再利用が出来る

      1つのCSSファイルを、複数のHTMLファイルで共有する事で、CSSの「再利用」が出来ます。

      HTML内の「style」タグの中に書く方法では、そのHTMLの中でしか利用が出来ません。

      複数のHTMLで同じデザインにする時は、1つのCSSファイルを共有して効率的にデザインする事が出来ます。

• styleタグ
  <style></style>

  styleタグは、CSSを書くためのタグです。

  基本的にはheadタグの中にstyleタグを書きます。

  まとめてCSSを書く事が出来るため、条件に合うすべてのタグにスタイルが適用されます。

  • CSSの基本文法
    p {

    color: blue;

    }
    • セレクタ

      スタイルを適用させたい対象を指定します。

      「p」のようにHTMLタグを指定することが出来ます。

      上記のように「p」をセレクタに指定すると、すべてのpタグにスタイルが適用されます。

    • プロパティ

      変更したいものを決めます。

      「color」のように文字の色の変更や、「background」のように背景の色の変更を設定する事が出来ます。

    • 値

      どのように変更するか決めます。

      「color」の時は「red」や「blue」のように、色を指定する事が出来ます。

      この値は、プロパティの種類によって指定する値は変わってきます。

    セレクタを組み合わせる

    複数のセレクタを組み合わせることで、スタイル対象を細かく指定することが出来ます。

    • 複数のセレクタを指定する
      h1, p {

      color: blue;

      }

      共通のCSSスタイルはまとめて指定することが出来ます。

      セレクタをカンマ「,」で区切ることで、上記のように「h1」と「p」の両方にスタイルを適用することが出来ます。

      上記の場合は、すべての「h1」タグと「p」の文字が青に変わります。

    • 子要素にセレクタを指定する
      ul li {

      color: blue;

      }

      子要素にスタイルを指定することが出来ます。

      セレクタ同士をスペースを空けることで、上記のように親要素「ul」タグの中にある子要素「li」タグにスタイルを適用することが出来ます。

      上記の場合は、「ul」タグの中にある「li」タグの文字が青に変わります。

「color」プロパティを使って文字の色を変えることが出来ます。

色を指定する時は、値に色の名前を指定することで変更することが出来ます。

「background」プロパティを使って背景の色を変えることが出来ます。

色を指定する時は、値に色の名前を指定することで変更することが出来ます。

CSSで出来る色の種類は全部で1677万7216色あります。

すべての色に名前がついている訳ではないので、数字や文字で色を表現します。

• RGB

  RGBは数字で色合いを調節して色を表現します。

  赤(Red),緑(Green),青(Blue)のそれぞれの色の濃さを「0〜255」で表現します。

  「0」がその色がまったく無い状態(黒)、「255」がその色の一番濃い色ということになります。

  赤(Red),緑(Green),青(Blue)の3つの色を混ぜて色を作っていきます。

  Red:

  Red	Green	Blue
  255	0	0

  Orange:

  Red	Green	Blue
  255	165	0

  DarkOliveGreen:

  Red	Green	Blue
  85	107	47

  white:

  Red	Green	Blue
  255	255	255

  black:

  Red	Green	Blue
  0	0	0

  /* White */
  color : rgb(255,255,255);
  background : rgb(255,255,255);
  /* Black */
  color : rgb(0,0,0);
  background : rgb(0,0,0);
  /* DarkOliveGreen */
  color : rgb(85,107,47);
  background : rgb(85,107,47);
• カラーコード

  カラーコードは英数字で色合いを調節して色を表現します。

  RGBでは「0〜255」の数字で色を表現していました。

  カラーコードでは「0〜9」「a〜f」の16個の英数字で色を表現します。

  英数字２桁で赤(Red),緑(Green),青(Blue)のそれぞれの濃さを決めて、6桁の英数字で色を表現します。

  Red:

  #ff0000

  Orange:

  #ffa500

  DarkOliveGreen:

  #556b2f

  White:

  #ffffff

  Black:

  #000000

  カラーコードを書くときは必ず「#」を前につけてから6桁の英数字を書きます。

  /* White */
  color : #ffffff;
  background: #ffffff;
  /* Black */
  color : #000000;
  background: #000000;
  /* DarkOliveGreen */
  color : #556b2f;
  background: #556b2f;

グラデーションはいろんな色を鮮やかに変化させることが出来ます。

色の種類に制限はなく、何色でも混ぜることが出来ます。

• linear-gradient

  クラデーションするにはlinear-gradient関数というもの使います。

  変化させたい「方向」と2種類以上の「色」を指定します。

  色が変化していく方向はこのように指定します。

  • to right

    左から右に色が変化します。

    background: linear-gradient(to right,#38a092,#fdbf3b);
  • to bottom

    上から下に色が変化します。

    background: linear-gradient(to bottom,#38a092,#fdbf3b);
  • to right bottom

    左上から右下に色が変化します。

    background: linear-gradient(to bottom right,#38a092,#fdbf3b);
  • 30deg

    30度の角度で色が変化します。

    background: linear-gradient(30deg,#38a092,#fdbf3b);
• radial-gradient

  中心から外側に向かって円形のグラデーションをすることが出来ます。

  円形のグラデーションの場合は、変化させたい「色」を指定します。

  background: radial-gradient(#38a092,#fdbf3b);

要素を囲った線は「ボーダー」は文章を強調させたり、デザインのワンポイントによく使われます。

ボーダーの「種類」「太さ」「色」は、自由にデザインすることが出来ます。

• 枠線の種類
  • solid - 線
    Solid
    .title {
    border: solid 1px black;
    }
  • double - 2本線
    Double
    .title {
    border: double 4px black;
    }
  • dashed - 破線
    Dashed
    .title {
    border: dashed 1px black;
    }
  • dotted - 点線
    Dotted
    .title {
    border: dotted 1px black;
    }
  • none - 線なし
    None
    .title {
    border: none;
    }
• 線の太さ

  線の太さは「px」で指定します。

  「px」の値が大きいほど、太い線になります。

  .title {
  border: solid 2px black;
  }
• 線の色

  線の色は「色の名前」「RGB」「カラーコード」の3つで指定することが出来ます。

  • 色の名前

    赤を指定する時はこのように指定します。

    .title {
    border: solid 1px red;
    }
  • RGB

    灰色をRGBで指定する時はこのように指定します。

    .title {
    border: solid 1px rgb(128,128,128);
    }
  • カラーコード

    紺色をカラーコードで指定する時はこのように指定します。

    .title {
    border: solid 1px #223a70;
    }
  • 色の指定なし

    ボーダーの色の指定がなかった時は文字の色と同じ色になります。

    例えば文字の色を紺色に指定してる時は、ボーダーの色も紺色になります。

    .title {
    color: #223a70;
    border: solid 1px;
    }

要素の角を丸めて柔らかい印象にしたり、円と作ってCSSでイラストを作ることが出来ます。

• border-radius

  要素の角も丸くするプロパティです。

  値の数値が大きいほど円に近づくように丸くなります。

  • 角を丸くする

    「border-radius」に「px」または「%」で値を指定して、角を丸めます。

    上記の場合は、値に「10px」を指定して4方向すべての角を「10px」の大きさで丸くします。

    .corner {
    border-radius: 10px;
    }
  • 円を作る

    「border-radius」に「50%」の値を指定して、円を作ります。

    4方向すべての角を、要素の半分の大きさ「50%」を指定することで円になります。

    これでも円になる

    円にするには要素の半分以上の大きさを「border-radius」の値に指定すると円になります。

    例えばこのように「値」を指定しても円になります。

    • 100%

      「border-radius」の値を「100%」にしても円にすることが出来ます。

      要素の半分以上の大きさ「50%〜100%」の値すべてが円になります。

      .round {
      border-radius: 100%;
      }
    • 200px

      要素の大きさが決まっている場合、半分以上の大きさの値を指定した場合も円になります。

      例えば「200px」の正方形を作成した時は、その半分以上の大きさ「100px〜200px」の値を指定すると円になります。

      .round {
      width: 200px;
      height: 200px;
      border-radius: 200px;
      }

HTMLの要素(タグ)はすべては四角い箱のようなブロックで構成されています。

要素には4つの領域があり、それぞれ特有の役割があります

その中で「margin(マージン)」「padding(パディング)」が余白を作ることができる領域になります。

• padding(パディング)
  おはよう

  ボーダーの内側にスペースを作る事が出来ます。

  ボーダーとコンテンツの間にスペースを作る事で、文字の始まりを右にずらすといった事が出来ます。

• margin(マージン)

  ボーダーの外側にスペースを作る事が出来ます。

  外側にスペースを作る事で、他の要素との間隔を空ける事が出来ます。

• padding

  borderよりも内側にある余白を作ることが出来るプロパティです。

  内側に余白を作ることでborderの枠線との間隔を空けたり、文字の開始位置をずらすことが出来ます。

  paddingで作った余白は、「background」プロパティで指定した背景の色と同じ色になります。

  • 上下左右に余白を作る
    BOX

    ボーダーの内側に上下左右「20px」の大きさの余白を作ります。

    .box {
    padding: 20px;
    }
  • 上下・左右に余白を作る
    BOX

    上下は「30px」の大きさ、左右は「20px」の大きさの余白を作ります。

    値が2つ場合、1つ目は「上下」の大きさ、2つ目は「左右」の大きさが指定されます。

    .box {
    padding: 30px 20px;
    }
  • 上・下・左・右に余白を作る
    BOX

    上は「10px」右は「20px」下は「30px」左は「40px」の余白を作ります。

    値が4つ場合は時計回りに余白は指定されます。

    1つ目は「上」の大きさ、2つ目は「右」の大きさ、3つ目は「下」の大きさ、4つ目は「左」の大きさが指定されます。

    .box {
    padding: 10px 20px 30px 40px;
    }
  別々にパディングを指定する。

  パディングの上だけ大きさを変えたい、下だけ大きさを指定したい時があると思います。

  そんな時は別々でパディングを指定することが出来ます。

  • 上の余白だけを作る
    BOX

    「padding-top」プロパティで上に「20px」の余白を作成します。

    .box {
    padding-top: 20px;
    }
  • 下の余白だけを作る
    BOX

    「padding-bottom」プロパティで下に「20px」の余白を作成します。

    .box {
    padding-bottom: 20px;
    }
  • 左の余白だけを作る
    BOX

    「padding-left」プロパティで左に「20px」の余白を作成します。

    .box {
    padding-left: 20px;
    }
  • 右の余白だけを作る
    BOX

    「padding-right」プロパティで右に「20px」の余白を作成します。

    .box {
    padding-right: 20px;
    }

• opacity

  要素全体の透明度を変えるプロパティです。

  値は「1」が不透明「0」が透明で設定出来ます。

  透明度は「1〜0」の間で透け具合を調節することが出来ます。

  • 透明
    要素

    要素を透明にする時は、opacityの値を「0」にして透明にします。

    .transparent {
    opacity: 0;
    }
  • 半透明
    要素

    要素を半透明にする時は、opacityの値を「0.9〜0.1」にして透明にします。

    「0」に近いほど透明に近くなります。

    「0.5」ような小数値は「.5」のように０を省略することが出来ます。
    .transparent {
    opacity: .5;
    }
  • 不透明
    要素

    要素を不透明にして見えるようにする時は、opacityの値を「１」にして不透明にします。

    .translucent {
    opacity: 1;
    }

• 透明に出来るもの

  「color」「background」「border」など、色の指定が可能なすべてのプロパティで透明にすることが出来ます。

  プロパティの値で「赤」や「青」などの色を指定していたところに「透明」の色を指定します。

• 透明の仕方

  透明にする方法は全部で3つの方法があります。

  との方法を使っても同じ結果になるので、好きな方法を使ってください。

  • transparent
    red

    orange

    yellow

    green

    blue

    white

    gray

    black

    transparent

    色の指定する時、赤なら「red」青なら「blue」と色の名前を指定しました。

    それと同じように透明という意味の「transparent」を指定することで、色を透明にすることが出来ます。

    .text {
    color: transparent;
    }
  • RGBa
    rgba(0,0,0,.5)

    RGBaとは、赤(Red),緑(Green),青(Blue)のRGBに透明度(alpha)を加えたものです。

    書き方はRGBの時とほとんど変わらず、カンマ「,」で区切って指定します。

    RGBaの4つ目の値に「opacity」の時と同様に、「1〜0」の間で透け具合を調節します。

    .text {
    color: rgba(0,0,0,.5);
    }
  • カラーコード
    #ffffff00

    カラーコードはRGBを「#」から始まる6桁の英数字で表現する方法でした。

    そこに透明度を表す英数字2桁を追加して8桁の英数字で色を表現します。

    「ff」の時は不透明、「80」の時はは半透明、「00」の時は透明のように最後の英数字2桁で透明度を指定します。

    .text {
    color: #ffffff00;
    }

• text-align

  テキストを左寄せ・中央寄せ・右寄せに変更できるプロパティです。

  なにも指定されていない時は左寄せに設定されています。

  • 左寄せ
    Left

    文字を左寄せにします。

    初期値は指定しなくも左寄せになります。

    .text {
    text-align: left;
    }
  • 中央寄せ
    Center

    文字を中央寄せにします。

    長い文章などで文字の折り返し(改行)が発生した時は、折り返された文字も中央に寄ります。

    .text {
    text-align: center;
    }
  • 右寄せ
    Right

    文字を右寄せにします。

    .text {
    text-align: right;
    }
  効果は子要素に引き継がれる

  <div>

  <h2></h2>
  <p></p>

  </div>

  「text-align」の効果は指定した要素とその子要素孫要素曽孫要素...と下の階層の要素にも適用されます。

  親要素のdivタグに「text-align」で中央寄せした時、子要素のh2タグやpタグも中央寄せされます。

  div {

  text-align: center;

  }