プロフィール

フツーの主婦です

Author:フツーの主婦です
どこにでもいるフツーの主婦。
2010年10月、突然思い立って、パソコンでのお小遣い稼ぎをはじめてみました。
お仕事に行ったり、出産したりで途切れ途切れですが、細々と続けています。

詳しくはコチラから

カテゴリ

メールフォーム

名前:
メール:
件名:
本文:

最新コメント

RSSリンクの表示

ブロとも申請フォーム

この人とブロともになる


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
最後まで読んでいただきありがとうございます。
↓応援ポチしていただけるとうれしいです
にほんブログ村 小遣いブログ 主婦のお小遣い稼ぎへ
↓ブックマークはコチラから登録してください

CSSとは?

先日、HTMLとCSSの関係をざっくりと説明しましたが、今日はCSSについて、もう少し詳しく説明してみます。
CSSとは、Cascading Style Sheetsの略で、Webページの見た目の部分を指示する記号です。
HTMLはブログの構造を示しているのに対して、CSSはデザインやレイアウトといった見た目(装飾)の部分を指示しています。

CSSを使う利点


実は、CSSで指示している見た目の情報は、HTML内に全て詰め込むことができます。
なのに、何故わざわざCSSを使うのがよいとされているのでしょうか?それにはちゃんと理由があります。

■CSSを使う利点1
デザイン変更が簡単にできます。例えば、『あ』という名前のCSSを1つ変更すれば、『あ』と名前のついている段落内は全て一斉に変更することができます。
もし、CSSを使わずにHTMLに全て盛り込んでいれば、HTMLを一つ一つ手作業で変更しなければいけません。
作業の手間や、変更漏れなどのミスを防ぐためにも、CSSを使用することをオススメします。

■CSSを使う利点2
HTMLがスッキリすることです。HTMLがスッキリすると、検索に引っかかりやすくなります。
検索エンジンもコンピューターなので、複雑なHTMLは理解されない場合もあります。
せっかくブログをやっているのですから、検索エンジンからのアクセスもほしいですよね。そのためには、HTMLをスッキリさせる必要があるのです。

CSSの見方


環境設定>テンプレートの設定の下側の窓にあるのがCSSです。
必ずHTMLとセットで使います。CSSを解読する鍵は、段落の名前です。
HTMLとCSSを見比べて、同じ名前の場所を探してみましょう。

では、まずこちらの文章を見てみましょう。
上がHTML、下がCSSが表示されています。
<div class="entry_text">entry_textという名前の段落です。<br>
<div>~</div>で囲まれている部分は全て同じ属性が適応されます。</div>
div.entry_text {
padding: 15px 0;
margin: 0px;
font-size: 90%;
}

HTML内のdivの名前と、CSSの名前が一致しています。(赤字部分)このように、HTMLとCSSを見比べて、同じ名前のところを探してください。
では、CSSの意味を理解してみましょう。


div.entry_text { ←entry_textという名前の段落だということ
padding: 15px 0; ←領域内のスペースは上下が15px、左右が0px
margin: 0px;  ←領域間のスペースは0px
font-size: 90%;  ←フォント(文字)のサイズは90%です。
}

また、これらの情報はHTML内にすべて盛り込むことができます。一応こんな感じになりますが、HTML内がごちゃごちゃしてしまうので、お勧めしません。CSSを利用して、スッキリを目指しましょう。

<div style="padding:15px 0px;margin: 0px;font-size: 90%;">
entry_textという名前の段落です。<br>
<div>~</div>で囲まれている部分は全て同じ属性が適応されます。</div>

関連記事
最後まで読んでいただきありがとうございます。
↓応援ポチしていただけるとうれしいです
にほんブログ村 小遣いブログ 主婦のお小遣い稼ぎへ
↓ブックマークはコチラから登録してください

非公開コメント

  

応援してね!

ブログランキングに参加しています。 ポチしていただけると、とってもうれしいです!
にほんブログ村 小遣いブログ 主婦のお小遣い稼ぎへ

ブックマークはコチラから!


ツイッターやってます。
フォローミープリーズ♪

コンテンツマッチ

※楽天モーションウィジェット※
⇒楽天モーションウィジェットの詳細はコチラ

クリック保証広告

※忍者AdMax※
⇒忍者AdMaxの詳細はコチラ

アクセスUP

リンク

素材集

素材をお借りしています。
フリー素材*ヒバナ *  * Night on the Planet
Twinkle Magic SUGAR PINK
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。