Now is better than never

読者です 読者をやめる 読者になる 読者になる

無糖の日々

時間が経てば甘くなる, The just desserts is also desserts.

CSS編基礎-1

CSS

 

f:id:Detsch:20160827224923p:plain

CSSとは?

文書の見栄えについての情報を文章とはまた別に定義するという概念をスタイルシートといい、それを適用するための方法の一つがCSS(Cascading Style Sheet)という

cascading: 滝のように連続的に流れるイメージ。CSSという上流で定義し下流で文書に適用する感じ。

cascada = 滝

style     :鉄筆(先端が鉄製の筆記具)を意味するラテン語のstilusに由来。鉄筆で書かれた文章の特色。そうしたものから style = 形式 になっていった。

 

例 サイトの背景、字体の色等

 

CSSをHTMLに適用してみる

~流れ~

①あらかじめCSSで内容を記述

②HTMLでの記述+CSSが適用できるように設定

いつもと違うのはCSSで記述した内容とHTMLで記述した内容は別々でしかも同じファイル内に置くことです。(同じファイル内に置かなかった場合、CSSの内容が反映されない)

 

CSSとして記述した内容

h1 {
color:green;
font-style:italic;
}

 

HTMLとして記述した内容


<html>
<head>
<meta http-equiv="Content-Type"content="text/html;charset=utf-8">
<meta http-equiv="Content-Style-Type"content="text/css">
<title>CSSの基本書式</title>
<link rel="stylesheet"href="rei2.css" type="text/css"> ←"rei2.css"はCSSのファイル名
</head>
<body>
<h1>CSSとは</h1>
<p>CSS(Cascading Style Sheets)はページのレイアウトデザインを指定するもの</p>
</body>
</html>

 

結果

f:id:Detsch:20160827232153p:plain

今回の問題点

今回はUTF-8というUnicode方式の文字スキームを使いましたがファイル保存で問題がありました。

日本語が文字化けする

原因は名前付け保存の時に文字コードANSIで保存していたためでこれを忘れているといくらCSSとHTMLの記述が正しくてもCSSのスタイルは適用しているのに文字化けするといったことになります。

 

実はもっと早くにCSSに取り掛かりたかったのですが前回やったときはCSSがうまく適用できなかったので匙を明後日の方向に投げていた次第です。(^_^;)

 

<