サイタWeb・デザインスクールHTML/CSS入門講座 兵庫 初心者でもできるHTML・CSS入門講座 レッスンノート 課題のチェックと、簡単なCSSの書き方と使い方

課題のチェックと、簡単なCSSの書き方と使い方

HTML/CSS入門講座のレッスンノート

レッスンノートって?レッスンノートって?

レッスンお疲れさまでした!

本日は先日お出しした課題のチェックと、
簡単なCSSの書き方と使い方を
実際にレイアウトしながらお教えしました。

また、
floatを使った際に解除する方法、
marginとpaddingの違いについても
お教えいたしました。


先日お出しした課題で、
ほぼ完ぺきにHTMLの指定ができていたので、
もうHTMLについては問題ないと思います。

あとはデザインとCSSによって
透明な四角い箱(div)をどう定義していくのかは、
色々なパターンを覚えていくと自然とできていきますので、
ぜひ地道に書いていってくださいね。



【簡単なCSSの書き方】

基本的にCSSは、
セレクタを指定して(何に対して)、
プロパティ(どのように)と
プロパティの値(変化するのか)を書きます。

セレクタ {
プロパティ: 値;
}

例)
#wrapper{
width: 980px;
margin: 0 auto;
}


CSSのプロパティは色々たくさんありますが、
最初は主に下記の4つの部類分けをして、
少しずつ覚えていきましょう。

①レイアウト関連
②フォント関連
③リスト関連
④背景画像関連

一番よく使用しているのが、
①レイアウト関連と②フォント関連ですので、
まずはこちらから使っていきましょう。



【レイアウト関連のCSS】

まずは下記の6つを使っていけば、
ほぼほぼCSSでレイアウトすることが出来ます。

1.width(幅)
2.height(高さ)
3.margin(ボーダーの外の空白)
4.padding(ボーターの内の空白)
5.float(フロート)
6.clear(クリア)


基本的に、
width、height、margin、padding の値は
pxで指定します。


floatの値は、
left right none です。


clearの値は、
both left right です。



【フォント関連のCSS】

フォント関連は
まずは下記の6つを覚えちゃいましょう。

1.color(文字の色)
2.font-size(文字の大きさ)
3.font-weight(文字の太さ)
4.line-height(行間)
5.text-align(文字寄せ)
6.text-decoration(文字の装飾)


colorの値は、
16進数を使って基本的に6桁で表現します。

例)
color: #ffcc00;


font-sizeの値は、
基本的にpxを使います。

例)
font-size: 24px;


font-weightの値は、
normal boldです。


line-heightの値はpxでも使えますが、
基本的に単位無しで指定しましょう。

例)
line-height: 1.5;


text-alignの値は、
left center rightです。


text-decorationの値は、
underline noneだけ覚えておきましょう。



【floatを使った際に、解除する方法】

CSSでレイアウトする際に
よくfloatを使うことがありますが、
何かしらfloatの解除をする必要があります。

floatの解除の方法として、
下記の3種類があります。

1.clear: both; を使う
2.overflow: hidden; を使う
3.clearfix を使う


clear: both; を使う場合は、
floatをした後の要素に対して
使うことになります。

後の要素が前の要素に
めり込む(回り込む)ことを
無くす場合に使われます。


次に、overflow: hidden; を使う場合は、
floatをかけている親の要素に対して
使うことになります。

この際には、
必ずfloatをかける要素を囲うように
親の要素が必要になります。


最後にclearfixです。

これはoverflow: hidden;と似ていて、
floatをかけている親の要素に対して
使うことになります。

ただoverflow: hidden;は、
そもそもfloatを解除するものではないので、
できるだけclearfixを使うようにしましょう。
このレッスンノートを書いたコーチ

制作会社で自力で得た実践的ノウハウ伝授。WEBデザイナーも夢じゃない!

新着レッスンノート

体験レッスンお疲れさまでした。 本日はWordPressで作るサイトについて システムにおいてできることなどを お話しさせていただきました。 その他にも、 Webコピーライティングについてですとか、 Webの仕事を営業などについてお話いたしました。 最近の本屋を見てみ...

レッスンお疲れさまでした! 本日は前回作成しました レスポンシブウェブデザインのデザインから、 マークアップした分を チェックさせていただきました。 基本的には ほぼほぼ完成してましたね! あとは デザインに照らし合わせて 細かいところを微修正していきましょう。 ...

レッスンお疲れさまでした! 本日は、 前回にお出ししたデザイン課題について、 特にスマートフォンに関しまして 修正を行いました。 また、 デザインから書き出しをおこなって マークアップする準備をしました。 まずはスマートフォンから作りこみ、 出来上がりましたらデス...

レッスンお疲れさまでした! 本日は、 前回にお出しした課題について 改善したいポイントを中心に お教えいたしました。 レスポンシブウェブデザイン化する際に、 下記の2つの方法があります。 ・デスクトップから先に作る ・スマートフォンから先に作る 実は難易度として高...

レッスンお疲れさまでした! 本日は、 ローカルでWordPressを使って作成したWebサイトを 本番サーバに上げる方法や、 お客様とのディレクションについて お話しさせていただきました。 【Webサイトを本番サーバに上げる方法】 基本的に、 データを上げる...

レッスンノート ページ先頭へ

HTML/CSS情報

サイタのHTML/CSS講師がブログを通して、HTML/CSS情報を発信。更新情報のチェックはこちらから!

twitter

HTML/CSSの先生

@DTPCyta