2014-08-30

2014-08-30

CSSの基礎：まとめAdd Star

CSS

 

 

CSSのコーディング規約（Google）


CSSはどこに書くか？

  • 外部ファイルにCSSを書く方法
  • styleタグを使ったCSSを書く方法
  • HTML要素にCSSを書く方法

外部ファイルにCSSを書く方法
<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>CSSの練習</title>
<linkrel="stylesheet"href="style.css">
</head>
<body>
<h1>大見出し</h1>
<p>こんにちは！</p>
</body>
</html>

《style.css》

h1 {
    color: red;
}

styleタグを使ったCSSを書く方法
  • styleタグにtype属性は不要
<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>CSSの練習</title>
<style>
  h1 {
    color: red;
  }
</style>
</head>
<body>
<h1>大見出し</h1>
<p>こんにちは！</p>
</body>
</html>

HTML要素にCSSを書く方法
<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>CSSの練習</title>
</head>
<body>
<h1style="color: red">大見出し</h1>
<p>こんにちは！</p>
</body>
</html>

CSSの書き方の基本

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>CSSの練習</title>
<linkrel="stylesheet"href="style.css">
</head>
<body>
<h1>大見出し</h1>
<p>こんにちは！</p>
</body>
</html>

《style.css》

/* 
セレクタ
プロパティ
値
*/

h1 {
    color: red;
}

  • 値を複数並べる必要がある書き方をする場合には、複数の値を識別できるように半角スペースが必要です
h1 {
    border: 1px solid #F00;
}

セレクタを理解する


<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>CSSの練習</title>
<linkrel="stylesheet"href="style.css">
</head>
<body>
<h1>大見出し</h1>
<p>こんにちは<spanclass="test">！</span></p>
<divid="main">メインです！</div>
</body>
</html>

《style.css》

/* セレクタ */

h1 {
    color: red;
}

/* ID要素 */

#main {
    font-size:36px;
}

/* class要素 */

.test {
    font-size: 9px;
}

/* 複数の要素 */

#main, .test {
    border: 1px solid #CCC;
}

テキストのスタイル

  • テキストの色を指定する (color)
  • フォントサイズを指定する (font-size)
  • 太字を指定する (font-weight)
  • 行揃えを指定する (text-align)

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>CSSのお勉強</title>
<linkrel="stylesheet"href="style.css">
</head>
<body>
<h1>大見出し</h1>
<p>こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！</p>
<p>こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！</p>
</body>
</html>

《style.css》

p {
    color: green;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
}

CSSで定義されている147色について
  • redやgreenといった、CSSで定義されている色は以下でも確認することができます。全部で147色あるようです。
  • http://www.147colors.com/

16進数のRGB(赤/緑/青)
  • 色をあらわす16進数の表記は、先頭から2桁ずつ赤、緑、青の色の強さをあらわします。
  • #FFFF00 だったら 赤=FF / 緑=FF / 青=00 となります。

「text-align」の値
  • text-alignの値には left（左寄せ）、right（右寄せ）、center（中央揃え）の他、justify（両端揃え）というものもあるので覚えておきましょう。


16進数で色を決める

ヘックスカラー（HEX COLOR）
  • 16進数（0123456789ABCDEF）
  • #000000（黒）
  • #ffffff（白）
  • Hue（色相）・Brightness（明度） ・Saturation（彩度）

 

f:id:kyushokusha-shienkunren:20120503105351j:image

 


 

f:id:kyushokusha-shienkunren:20120503105735j:image

 


 

f:id:kyushokusha-shienkunren:20120503110349j:image

 



CSSで色を設定する

16進数で設定する
  • 16進数：hexadecimal number
  • #：number
  • 0123456789ABCDEF（16個）
  • RGBを2個ずつの数字を割り振る
  • 2個の左側の数字が明度(Brightness)、右側の数字が彩度(Saturation)

【RGB】

【8ビットカラー】


 

 

　#FF0000　または　#F00

 

 


10進数の数値で設定する

 

 

　rgb(255,0,0)　または　rgb(100%,0%,0%)

 

 


適切なフォントファミリー

  • 日本語の場合、フォントメーカーの制約から自由な選択は出来ません

2014年8月現在の設定方法
  • iOSにはProNしか入っていません（初期設定は、W3）
  • ヒラギノ角ゴの英数字が読みにくいという考え方もありますが、Macの日本語の初期設定のため、欧文書体を指定することによる違和感がある場合は、「Hiragino Kaku Gothic ProN」の前には欧文書体を入れないようにします
  • 同様にWindowsは英数字もメイリオのままにしておきたいので、メイリオの前にArialやLucida Sansを入れないようにします
  • 「ＭＳ Ｐゴシック」は指定しなくても必要なときには表示されるので記述しない
  • Mac版Officeは、MicrosoftというフォルダーにMeiryoが格納されるため表示フォントとしては、そのままでは利用できない（Mac版Meiryoは、Office内でのみ利用される）

font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;

もし、Windowsで英数字は「Verdana」、Macで英数字は「Lucida Grande」にしたい場合は、


font-family:
    "Lucida Grande",
    "Hiragino Kaku Gothic ProN",
    Verdana,
    Meiryo, 
    sans-serif;

Windowsでも綺麗な明朝体を表示する
  • HG明朝は13pxからアンチエイリアスがかかる（MicrosoftOfficeをインストールするとついてくるフォント）
  • 実際には、見出しのような大きいサイズにむいています

h1 {
  font-family:
    "ヒラギノ明朝 ProN",
    "HG明朝E",
    "ＭＳ Ｐ明朝",
    "ＭＳ 明朝",
    serif;
  font-weight: bold;
}