CSS入門

ウェブアプリケーションを開発する際にCSSは避けて通れない知識ですので、ここでは軽く説明します。(メモ書きです)

CSSとは

ウェブページの構成とデザイン(色、フォント等)は別に管理することが望ましいという考え方が一般的です。そこで、ウェブページの作成では、HTMLの記述はページの内容や構成を表すことのみにとどめ、デザインはCSSというファイルに記述する枠組みが採用されています。

CSSの書き方と利用方法

CSSファイル

.mystyle{
  background-color:#8f8f8f
}

.mystyleというのは、スタイルのクラス名です(先頭のピリオドを忘れずに)。そしてカッコの中で属性と属性値をコロンを挟んで記述します。行末にはセミコロンをお忘れなく。

HTMLファイル

<div class="mystyle">ああああ </div>

呼び出す際のCSSの書き方は上記のとおりです。class属性を利用します。

CSSで使われる属性

CSSを使いこなすというのは、どのような属性があるのかを理解することです。参考までに下記に書いて(メモして)いきます。詳細は、CSS辞典などを見ればいいでしょう。

    • color 色
    • background-color 背景色

hoverはおさえておこう

マウスを上におくとフォントや色が変わったりするページがありますよね。あれは、CSSで実現できます。

.selectstyle:hover{color: #ff0000;}

上記は、要素にマウスが来ると色が変わるというものです。