CSS超入門！…のさわりだけ！！その２

　どうも！LSSです！！

　今回は、だいぶ前の記事、

の続きとなります！（だいぶ前すぎるｗ）

今回は実践編です！

　前回の記事の内容は
「:と;でプロパティと値を指定する」事と、
「CSSは３つの指定方法がある」事ぐらいしか書いていませんでしたね。

　今回は、実際に「はてなブログのHTML編集画面」で、CSSを書いていく様子を語る記事となります^^

HTML編集画面を開きます

↑こんな感じの画面ですね。

ここにコードを書きこんでいきます！

まず手始めに、<div>タグを書いてみます

　書く内容は、

<div>てすと</div>

 まずはこれだけ。

画面でいうと、

↑こんな感じです。

注意点としては、「てすと」の文字以外は全部、半角で入力する必要があります！

よく分からない場合は、日本語変換をオフにして入力してくださいね^^

これを基準に、徐々にCSSを付け足していきます！

divタグにstyleオプションをつけたします

<div style="background-color:green;">てすと</div>

↑のように、

 style="background-color:green;"

を付け足します。

div、の文字の後に半角スペースを入れる必要があります。

画面でいうと、

↑こんな感じになります。

ここで一度、「プレビュー」表示に切り替えてみましょう。

↑こんな感じに表示されたら成功です^^

style=""の中に色々、追加していきます！

再度、HTML編集画面に戻してから、

<div style="background-color: green;width:300px;height:200px;">てすと</div>

 今度は、

 width:300px;height:200px;
を、green;と"の間に入力します。

ちなみに、widthは「幅を指定」、heightは「高さを指定」するプロパティです。

pxは、CSSのサイズ指定用の単位のうちの一種で、「ピクセル」数で指定します。

つまり、「幅は300ピクセル、高さは200ピクセル」という指定ですね。

・前回記事のおさらい
CSSはほとんどの場合、プロパティ:値;という形式で指定します 。

さて、ここでもう一度「プレビュー」表示に切り替えてみると…？

さっきは横いっぱいに伸びていた緑の枠の、幅が狭くなり、高さがでてきました。

このサイズが「幅300px、高さ200px」になります！

CSSの指定って

基本的にはこんな風に、

「つけたい効果だけを」書くとそれが反映されるし、
「並べる順番」の前後もあまり気にしなくていいです。

※例外もありますが、あくまで基本的には、です。

というわけで、効果をちょっとづつ付け足しながら、飾っていきます！

四角い枠を角丸にしてみます

<div style="background-color: green; width: 300px; height: 200px;border-radius:25px;">てすと</div>

border-radius:25px;

を付け足してみました。

border-radiusが角の丸さを指定するプロパティで、値として25pxを指定。 

そしてまた「プレビュー」してみると、

角がまるっこくなって、急に可愛げがでてきましたね^^

25という数字をもっと大きくすると丸みが大きくなり、数字を小さくすると丸みが小さくなります。

色々書き換えながらプレビューして、好みのサイズを探せますね。

緑が濃くて、黒い「てすと」の文字が見えづらいな

と思ったら、緑を薄い色に変えるか、文字の色を変えるか…ここでは文字の色を変えてみましょう。

<div style="background-color: green; width: 300px; height: 200px; border-radius: 25px; color: white;">てすと</div>

color: white;

を足してみました。

colorというプロパティが、文字の色を指定するプロパティになります。

そしてプレビューすると…

だいぶ視認しやすくなりましたね^^

枠の端っこにくっついてるのがいただけない

ですよねｗ

そんな時は、「枠の内側に余白をつける」事で解決できます！

<div style="background-color: green; width: 300px; height: 200px; border-radius: 25px; color: white; padding: 1em;">てすと</div>

今度は、

padding: 1em;

を足してみます！

paddingが、枠の内側の余白サイズを指定するプロパティとなります。

今回はなんとなくemという単位を使ってみました。
emは「○文字分」と文字サイズに合わせたサイズを指定する単位で、1em＝1文字分、って事になります。
ここでemじゃなくpxで指定してもいいですし、pxで指定していたところをemで指定してもOKです^^

ではまた、プレビューしてみましょう！

　だいぶ見栄えが良くなってきましたね^^

枠に縁取りもつけちゃえ！

今度は、 

<div style="background-color: green; width: 300px; height: 200px; border-radius: 25px; color: white; padding: 1em; border: 10px outset lightgreen;">てすと</div>

と、

border: 10px outset lightgreen;

を付け足してみました。

borderは枠線を指定するプロパティです。

３種類の値を一気に指定していますが、書いているのは左から順に
「幅のサイズ・スタイル・色」
です。

今回の場合「枠線を、幅10px、outsetというスタイルで、色は明るい緑」という指定になります。

スタイルは何種類かの決まった文言から選ぶ事になります。
普通の線ならsolid、二重線のdouble、点線のdotted、破線のdashed、他、inset、outset、ridge、grooveなどがあります。

　さて、プレビューしてみますね。

スタイルがoutsetの場合、こんな風にボタンっぽく盛り上がった感じになります！

こんな感じに作っていきます

色々と、試してみたい効果をつけたし、サイズを指定する数値を調整したり、色を変えてみたりしながら、様々な効果で装飾されたモノを作る事ができます^^

今回使ってみたプロパティは、たっくさんあるものの中のほんの一部で、CSSには面白いプロパティがまだまだゴロゴロしています！

CSS効果を紹介しているサイトで見つけてきたり、本屋さんで分かりやすい本を探してみて、試したいところから試していくのも楽しいですよ♪

LSSは↓この本を買いました。 

HTML5 & CSS3ポケットリファレンス [改訂新版] (POCKET REFERENCE)

説明は簡潔ですが、都度どんな風に表示されるかの画像つきで、多くのプロパティが紹介されています^^

ネットだと無料で色々検索できますし、本だとたくさんのプロパティを眺めて見つけられる、どっちがいいかは人それぞれお好みですねｗ

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^