CSS勉強会（第1回）

CCSとは？
• ウェブサイトのHTML文章をスタイルする言語
ーーーーーー
ーーーーーー
ーーーーーー
ーーーーーー
ーーーーーー
HMTL

CSSの書き方 [１]
• HTMLのファイルに書き込んでも、別のファイルに書いてもOK
<html>
<head>
<style>
直接CSSのコードを書く
or
CSSファイルを指定する
</style>
</head>
<body>
HTML文章はここ
</body>
</html>
HTMLファイル
h1 {
…
}
div {
…
}
CSSファイル

CSSの書き方 [2]
• 文法
HTMLタグ名 {
プロパティ１ : 値１;
プロパティ2 : 値2‐1 値2-2;
…
}
HTMLタグ： h1, p, div, …
<h1> 見出し1 </h1>
<p> 段落 </p>
<div> などなど </div>

CSSの書き方 [3]
• id vs class
<h1 id = “id名”>
ユニークな部分
</h1>
<div class = “クラス名”>
（デザイン的に）繰り返して使える部分
</div>
HTML文
h1#id名 {
…
}
div.クラス名 {
…
}
CSS文
#id名 {
…
}
.クラス名 {
…
}
CSS文
or

ボックス
なか中身のテキスト等
padding-top
padding-bottom
padding-
right
padding-
left
margin-
left
margin-
right
margin-bottom
margin-top
ボックス
border
width
height

色
http://www.flatuicolorpicker.com/
color : white;
background-color : #FFFFFF;
border-color : rgb(255, 255, 255);
background-color :
rgba(255, 255, 255, 1.0);

テキストスタイル
• color
• text-align
• font-size
• font-family
• font-weight
• font-style
• text-decoration
abcdef
abcdef
abcdef

リンクスタイル
<a href="http://ebookjapan.jp">eBookJapan</a>
• a:link 一般のスタイル
• a:visited クリックされたリンク
• a:hover マウスオーヴァー
• a:active クリックする時のスタイル
• 他
<a href="http://ebookjapan.jp"><img src="logo.jpg" ></a>
<a href="http://ebookjapan.jp"><div>Click</div></a>

Jomyに書き込み方
<h1 class="title">
<a
href="/pages/%E3%81%88%E3%81%B3%E3%8
1%AE%E3%81%8A%E3%81%AA%E3%81%8B">
えびのおなか
</a>
</h1>
<div class=
"hero-
content">
<section id=
"main-
content”>
<div
class="page-body">
<p>test</p>
</div>

Jomyに書き込み方
タイトルをいじってみるテスト。
<style>
h1.title {
background:
url('http://www.ebookjapan.jp/ebj/ej/img/header/
sitelogo.png') no-repeat;
height: 80px;
}
h1.title a:link {
color: rgba(0, 0, 0, 0);
}
</style>

CSS勉強会（第1回）

More Related Content

What's hot

Viewers also liked

Similar to CSS勉強会（第1回）

CSS勉強会（第1回）