サイタWeb・デザインスクールHTML/CSS入門講座 兵庫 初心者でもできるHTML・CSS入門講座 レッスンノート font関連のCSSとレイアウトの仕方

font関連のCSSとレイアウトの仕方

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

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

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

本日はお出しした課題のチェックと、
font関連のCSSとレイアウトの仕方を
お教えいたしました。

いきなり覚えることが
一気に増えましたが、
最初から完璧にCSSのプロパティを
覚えようとしないでくださいね。

まずはよく使うものを知っていただいて、
何となく「こんなのあったな」
みたいな感じで思い出していただけたら
最初はベストです。

その際は、
何かしら見返していただいて、
書けるのであれば問題ありません。



【よく使われるフォント関連のCSS】

よく使われるフォント関連のCSSは
下記のものになりますので、
繰り返し使って1つずつ
体に染みつけていきましょう!


▼文字の色
color: #000; [c + tabキー]

▼文字のサイズ
font-size: 20px; [fz20 + tabキー]

▼文字の太さ
font-weight: bold; [fwb + tabキー]

▼行の高さ
line-height: 1.5; [lh1.5 + tabキー]

▼文章の揃え
text-aligin: center; [tac + tabキー]

▼文字の装飾
text-decoration: underline; [tdu + tabキー]

▼文字間隔
letter-spacing: 0.3em; [ls0.3em + tabキー]

▼インデント
text-indent: 5em; [ti5em + tabキー]



【覚えておきたい簡単なレイアウト関連のCSS】

このレイアウト関連のCSSもよく出てきて、
よく使われるCSSになるので、
上げておきますね。


▼幅
width: 900px; [w900 + tabキー]

▼高さ
height: 500px; [h500 + tabキー]

▼マージン
margin:0 auto; [m0-a + tabキー]

▼パディング
padding: 20px 15px 40px; [p25-15-49 + tabキー]



【覚えておきたい簡単な背景関連のCSS 】

さらに今回は課題のための、
背景関連のCSSもお教えいたしました。


▼背景画像
background-image: url('../images/navi01.gif'); [bgi + tabキー]

▼背景画像の位置
background-position: left top; [bgp + tabキー]

▼リピート
background-repeat: no-repeat; [bgr-n + tabキー]
このレッスンノートを書いたコーチ

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

新着レッスンノート

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

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

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

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

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

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

HTML/CSS情報

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

twitter

HTML/CSSの先生

@DTPCyta