はじめに最低限覚えておきたいCSS

コーディングを行うには最低限のcssコードを理解しておかなければ何もできません。

ここでは、まず第1歩目として、理解して置かなければいけないcssのコードをお知らせしていきます。

深い意味は意味は、自らググって調べましょう。

 

環境設定

コーディングを行う前に、環境設定を行いましょう!

環境設定は

「HTML,CSS初期設定・環境制定」を参考に設定をお願いいたします!

HTML初期コード

※「XXXX」は、cssの任意のファイル名を入力してください。

CSS初期コード

 

 

リセットCSS

HTMLの初期にあるデザインの必要のないところをCSSでクリアすることを「リセットCSS」と言います。

このリセットCSSはご自身ですべて行うことも可能ですが、一般的にはインターネットから他の会社のリセットCSSを読み込んで設定を行う場合が多いです。

HTMLファイルのhead内に下記のコードを書き込めば完了です!

 

CSS基本コード_01

  • margin:外側の余白
    •  margin-top(上部の余白)
    • margin-bottom(下部の余白)
    • margin-left(左側の余白)
    • margin-right(右側の余白)
  •  padding:内側の余白
    • padding-top(上部の余白)
    • padding-bottom(下部の余白)
    • padding-left(左側の余白)
    • padding-right(右側の余白)
  • boxサイズの指定
    • width:横幅
    • height:縦幅
  •  background:背景の色が画像などを指定
    • background-color(色を指定)
    • background-image(画像などを指定)
    • background-size(画像のサイズを指定)
    • background-position(画像のポジションを指定)
  •  border:ボーダーライン
    • border-top(線・上部の指定)
    • border-bottom(線・上部の指定)
    • border-left(線・上部の指定)
    • border-right(線・上部の指定)
  • border-radius:角丸
  • color:文字の色を指定
  • font-size:フォントのサイズ
  • font-family:フォントの種類
  • font-weight:文字の太さ
  • text-align:テキストの中央寄せなど
  • line-height: 行間

 

CSS基本コード_02

  • display: flex;
    • 参考サイトを見て理解ができるようにしておきましょう
  • display: block;
    • displayは「none」「block」「flex」「inline」などがあります。どういう違いがあるのか理解しておきましょう

 

CSS基本コード_03

中央揃え「ブロック要素」

パターン①

margin: 0 auto;

 

中央揃え「インライン要素」

パターン①

text-align: center;

 

コメントを残す