All posts by himajin315

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

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

CSSの基本から その2ってことで、今日はツールの使い方を書こうかと思います。
CSSをイジる上でいろいろなツールがあるかと思います。
CSSのコードをイジる場合、他の言語と違ってエラーを吐かないのが辛いです。
「あれ?CSS適応されてないんだけど!?」というようになることが多々あります(汗)
原因は色々とあります。
タイプミスだったり、セミコロン忘れてたり、ファイルの読みこむ順番だったり、組み合わせることで使えなくなるやつだったり。。。
(なにが原因がわからないのが一番辛い)

そんな時、ツールがあると比較的楽(精神的に)にCSSを書くことができます!
今回紹介するのは「Google Chrome Developer Tools」です。
FirefoxユーザとしてはFirebugを使うべきなのでしょうが、自分は開発するときだけChromeを使ってますw

まず、Google Chrome Developer Tools を開きましょう。
「表示」→「開発/管理」→「デベロッパーツール」
「option + command + i」でも開けます。
blog20131223

そうすると以下のようなウィンドウが現れることでしょう。
スクリーンショット 2013-12-23 6.10.11

(自分は横のほうが好きなので、横に持ってきます)

Developer Tools のソースコードにカーソルを合わせるとhtmlのどの部分かをみることができます。
2013122301

CSSをいじるのに大事なのは下の部分。
ここでCSSを変更することが可能なのです。
スクリーンショット 2013-12-23 6.39.58

例えば・・・
#main に background-color: red; を追加してみましょう。
スクリーンショット 2013-12-23 6.43.15
そうすると、以下のように一部背景が赤に変わりました。
2013122302

このようにCSSを追加するとにより、実際にどのように変化するかを見ることができます。
ちなみに、CSSのファイルが複数があったり、ファイル内の複数の場所で指定されている場合優先順位が付きます。
Developer Tools では上が一番優先度が高く、すぐに反映させたいならば一番上が良いです。
2013122303
ただし、element.styleはhtmlに直接書くことになります。
この部分だけ反映させたい!!って時に書くのが良いかと思います。
詳細はCSSの基本から(長田研アドベントカレンダー1日目)

もっと書く予定ですが、疲れてきたので残りは後で書くことにします。
以上。
あ、次は宜保さんに書いてもらいたいです(^^)

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の勉強の仕方とかツールとかの紹介でもしますかね。

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