1202css

CSSセミナー
医療×IT講座vol.4

2012/12/02
12年12月2日日曜日

プログラミングとは？
• コンピューターの上で、決められた指令を
実行するために使う言葉を書くこと

• プログラミング言語：コンピュータに対する
一連の動作の指示を記述するための人工言語。機
械ごとに適した言葉があるので、プログラミング
言語を使い分けます


HTMLとは？

• HTML：Webページを作成するための言語

• ブラウザ：インターネットをするためのソフト

• テキストエディタ：文字のみのファイルを作成す
るためのソフト（Windows：メモ帳。「スタート
→すべてのプログラム→アクセサリ→メモ帳」）


タグとは？

• ＜タグ名＞の記号で囲まれた半角英数字。
文書構造を指定

• 記入方法：＜開始タグ＞と＜/終了タグ＞
の２つを1セットとして使用。終了タグに
はタグ名も前に/（スラッシュ）をつける。


CSSとは？

• Cascading Style Sheetsの略。ウェブページの
スタイルを指定するための言語

• スタイル：文字の色や大きさ、形式など


まずは書いてみよう！


応用
HTML CSS
<!DOCTYPE html>
/* セレクタ */
<html lang="ja">
h1 {
<head>
color: red;
<meta charset="UTF-8"> }
<title>CSSのお勉強</title> /* ID要素 */
<link rel="stylesheet" href="mycss.css"> #main {
</head> font-size:36px;
}
<body>
/* class要素 */
<h1>大見出し</h1>
.test {
<p>こんにちは<span class="test">！</ font-size: 9px;
}
span></p>
/* 複数の要素 */
#main, .test {
<div id="main">メインです！</div>
border: 1px solid #ccc;
</body> }
</html>

HTMLとCSSの関係
HTML CSS
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSのお勉強</title> h1 {
<link rel="stylesheet" color: red;
href="mycss.css"> }
</head>
<body>
<h1>大見出し</h1>
<p>こんにちは！</p>
</body>
</html>

テキストのスタイル①
• テキストの色を指定→color : green,
#ff0000（16進数（0∼f）指定）

• フォントサイズの指定→font-size : px

• 太字を指定→font-weight : normal, bold

• 行えを指定→text-align : center, left, right


テキストのスタイル②

• 行の高さを指定→line-height : 30px , 150%, 1.5

• テキストの装飾を指定→text-decoration :
underline（下線）, line-through（打ち消し線）

• 斜体の指定→font-style : italic


背景のスタイル
• 背景色 background-color: red;
background-image: url('bg.png');
• 背景画像 background-repeat: no-repeat;
background-position: top right;
background-attachment: fixed;
• 背景画像の位置（文書がスクロールしても背景画像は貼
り付いたまま）
• 背景画像の繰り返 background: url('bg.png') no-
repeat top right;
しの有無
→repeat-x, no-repeat

ブロック要素のスタイル
• 背景色 #box {
background-color: red;
• 高さ、幅の指定 width: 50%;
height: 50px;
（width, height）
border-color: green;
• 枠線の色
border-width: 5px;
border-style: solid; double;
• 枠線の太さ
dotted; dashed; inset; outset;
• 枠線のスタイル border: green 5px outset;
}

余白のスタイル
• 内側の余白の指定→padding 外側の余白の指定→margin


1202css

More Related Content

Viewers also liked

Similar to 1202css

1202css