ハピタス

CSS・スタイルシートの基礎を学ぼう!1

更新日:2015年10月27日(火) 09:08

こんばんは、たけしです。

初心者ブロガーのためのCSSの基礎について書いて行こうと思います。

無料ブログでもワードプレスなんかでもそうですが、CSS(スタイルシート)ってのがあります。

これはWebサイトのHTMLに対しての装飾という風に考えて下さい。
文字の色を変えたり、文字を大きくしたり、背景色を変えたり、文字を中央寄せしたり…
要は見た目ですね。
サイトに対してCSSを使ってデコレーションをしてやるってわけです。

最初はわけわかんないと思いますが、出来る様になったら超面白いです^^

基礎は意外と簡単なんで、ブログ初心者は興味を持っていただけたらと思いますー。

基本となるCSSのタグは

<div></div>

で囲まれるタグです。

<div>と</div>

の間をCSSでスタイルを指定する事が出来ます。
とりあえず具体的な例を挙げてみましょうかね。

HTML(記事内でもOK)に

<div>にくでん</div>

を挿入。

CSSに

.abc { font-size: 12px;}

を挿入。

これは
divで囲んだ「にくでん」って文字の大きさを12pxにしますよー
って、CSSで指定してるわけです。

文字の大きさを20pxにしたい場合は12pxを20pxに帰ればOK。
すると「にくでん」って文字が大きくなります。

基本はこれだけ、簡単でしょ?

div class=”abc” とHTMLを書いたんで
CSSでそこを指定する際は
.abc って書きます。

ここは任意の文字でOKです。
div class=”niku” って書いたら
CSSでは
.niku って書いて指定すればOK。

では明日は、文字を大きくする以外の事をやってみましょう。

ハピタス

更新日:2015年10月27日(火) 09:08