CSSの基本から(長田研アドベントカレンダー1日目)

こんにちは。
大城佳明@長田研M1です。

アドベントカレンダー1日目です。
太田くんの急な思いつきから、長田研で技術系アドベントカレンダーを行うことになりました。
(なぜ自分が1番目なのか…)

問題はなにを書くかってことですよね。
需要がありそうな話はデザインかなーって思います。
まぁ絵心がないのでデザインはデザイナーさんにまかせて、デザイナーさんが考えたデザインを実際にWebとして表示させることが情報工学科らしいのかな!!
とう言うわけで、自分はCSSについて書こうと思います(`・ω・´)ゞ

CSSとは?
CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、ウェブページのスタイルを指定するための言語です。

Webの見た目を作るに必要なのはHTMLとCSSの知識です。
HTMLは枠組み。CSSは色や配置などを整形するためにあります。
実際はスタイルを書く方法は2つある。

  1. HTMLのstyleに書く方法
  2. CSSに書く方法

今日はこの2つの方法の違いについて書いていくことにします。

1.HTMLのstyleに書く方法

<div style=”border: 1px solid #aaa; margin: 10px; padding: 10px; background-color: #ffffcc; color:#663333;”>

htmlに直接書く!

</div>

HTMLのスタイルに直接書くほうがぶっちゃけ楽なんですよね。
でも、Webサイトを作る上でこの方法であまりよろしくないです。。
ブログの本文にhtml書くときにスタイルを直接書かない方がいい理由
デザイン変えたいときにすべてのページのすべての個所を修正しなきゃいけなくなる!

では、どういう時にHTMLのsytleに書くのか。
ブログの本文にhtml書くときにスタイルを直接書いてもいい理由
たった一度のオリジナル記事を書くために!

つまり、ここだけのスタイルを変更したい!!!!!!
って時にはこのような書き方で書いてもいい(^^)

2.CSSに書く方法

<h5>CSSに書く!!</h5>

<style type=”text/css”>
h5 {
background-color: #ffffcc; #背景色は黄色っぽい
border: 1px solid #aaa; #周りに線を引く
margin: 10px; #外側にスペースを作る
padding: 10px; #内側にスペースを作る
color: #663333; #文字色は茶色っぽい
}
</style>

HTML内でCSSを書く場合、<style type=”text/css”>の中に記述する必要があります。
h5タグすべてに記述したスタイルが適応させます。
1のsytleに書くこととは違って、CSSで書くと指定したタグやクラスすべてに適応される。
そのため、複数同じようなデザインを使う場合はCSSを使うのが良いでしょう。
HTMLのコードを見やすくするためにもCSSで書くことをオススメします\(^o^)/

しかし、このブログを書くのにcssが使えないのは。。。
(方法はあると思うので後で探そう)

まとめ

  1. 基本的にCSSに書く方が良い
  2. HTMLのstyleに書く場合は1度しか使わないスタイルを
  3. 何度も使うスタイルはCSSに記述しよう
  4. このブログを書くのはCSSが向いているが、styleにしか書けないのは辛い。

書きたいことがたくさんあるけど、今回はこんな感じでいいのかな?
ちょっと基本的なこと過ぎたかもしれない(^_^;)
まぁなにか言われたら次回から直していくことにしましょう!
次ブログ書く時はCSSの勉強の仕方とかツールとかの紹介でもしますかね。

次の技術系アドベントカレンダーのブログは太田くんが書いてくれることでしょう。