読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科1月クラス

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科1月クラスの授業解説ブログです。

CSS基礎2

CSSの基礎で一番解りにくいのが、marginとpaddingの違いです。

margin

marginとは要素の外側に出来る隙間の事です。

padding

paddingとは要素の内側に出来る隙間です。

言葉にすると一見簡単に思えますが、実際にレイアウトしてみるとシンプルなレイアウトではどちらでも結果として思い通りの形になるケースが多いため、上手く使い分けが出来ないままなんとなく使い続け、いざ複雑なレイアウトを始めると、使い分けが出来ていないせいで苦労する、というケースをよく目にします。なので、今のうちからmarginとpaddingの違いをしっかりと理解しておきましょう。


marginとpaddingは共に4つの方向別に指定する事が出来ます。

margin-top
margin-bottom
margin-left
margin-right

padding-top
padding-bottom
padding-left
padding-right

また、ショートハンドという省略した形でコーディングしていく機会も多いので、ショートハンドの形も一緒に覚えて行きましょう。


border ・・・ ボーダーのスタイル・太さ・色を指定する

borderプロパティは、ボーダーのスタイル・太さ・色をまとめて指定する際に使用します。 スタイル・太さ・色のうち、指定する値を任意の順序でスペースで区切って記述します。
borderは指定出来る事が多く、一度にすべてを覚えるのは大変です。最初はよく使用する物に限定して覚えて行きましょう。

borderの種類

solid=1本線で表示されます。
dashed=破線で表示されます。
dotted=点線で表示されます。

borderの幅

pxで指定

borderの色

文字色や背景色と同様、カラーコードやカラーネームで指定します。


borderもmarginとpadding同様ショートハンドでの指定が一般的なので、ショートハンドでの指定を覚えておきましょう。

h1 {
  border:solid 3px #FF0000;
}

f:id:yachin29:20160720132056g:plain


http://yachin29.com/photoshop2.zip

広告を非表示にする