css基礎 - webサイトデザインAI入門科授業用ブログ

CSS（Cascading Style Sheets）

CSSとは、HTMLの要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。HTMLによる文書構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの具体的な仕様の一つ。

h1やpなどの意味付けはHTML

色や大きさやレイアウトなどはCSS

www.csszengarden.com

エンベットによる記述方法

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
</body>	
</html>

外部ファイルによる記述方法

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>	
</html>

CCSの記述ルール

f:id:yachin29:20160308130715g:plain

最初に覚えるべきプロパティ

color = 文字の色
font-size = 文字の大きさ
background-color = 背景の色
width = 横幅
height = 高さ
margin = 要素の外側の空き
padding = 要素の内側の空き
border = 線の種類・太さ・色を指定する

主な線の種類

solid = 1本線で表示されます。
double = 2本線で表示されます。
dashed = 破線で表示されます。
dotted = 点線で表示されます。

www.tagindex.com

Web Developer

1クリックでCSSやJavaScriptを無効化したり、画像の非表示、様々なデバイスサイズでの表示、クラスやID名の表示、定規やカラーピッカーまで揃っていて、非常に便利なのでぜひ導入しましょう。

chrome.google.com

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS基礎</title>
<style>
h1{
font-size: 40px;
color: cadetblue;/*文字の色*/
background-color:beige;/*背景色*/
width:50%;/*画面の半分の幅*/
text-align:center;/*文字の位置*/
margin-top:100px;/*要素の外側の空き*/
margin-left: 200px;
padding-top: 50px;/*要素の内側の空き*/
padding-bottom:50px;
}
</style>
</head>
<body>
  <h1>大見出し</h1>
</body>
</html>

index2.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>marginのショートハンド</title>
<style>
html,body,h1,p{
margin: 0;
padding: 0;
}
h1{
width: 400px;
height: 400px;
background-color:darkgrey;
margin:0 auto;/*左右をautoにすると真ん中に来る*/
text-align:center;/*文字を真ん中*/
padding-top:200px;
}
p{
width: 300px;
font-size: 20px;
color:cadetblue;
border-left:10px solid cadetblue;/*線幅、線の種類、色*/
margin-left:50px;
padding-left: 20px;
}
</style>
</head>
<body>
<h1>メインタイトル</h1>
<p>メインタイトルの説明文</p>
</body>
</html>