1202css
- 1. CSSセミナー
医療×IT講座vol.4
2012/12/02
12年12月2日日曜日
- 2. プログラミングとは？
• コンピューターの上で、決められた指令を
実行するために使う言葉を書くこと
• プログラミング言語：コンピュータに対する
一連の動作の指示を記述するための人工言語。機
械ごとに適した言葉があるので、プログラミング
言語を使い分けます
12年12月2日日曜日
- 3. HTMLとは？
• HTML：Webページを作成するための言語
• ブラウザ：インターネットをするためのソフト
• テキストエディタ：文字のみのファイルを作成す
るためのソフト（Windows：メモ帳。「スタート
→すべてのプログラム→アクセサリ→メモ帳」）
12年12月2日日曜日
- 4. タグとは？
• ＜タグ名＞の記号で囲まれた半角英数字。
文書構造を指定
• 記入方法：＜開始タグ＞と＜/終了タグ＞
の２つを1セットとして使用。終了タグに
はタグ名も前に/（スラッシュ）をつける。
12年12月2日日曜日
- 5. CSSとは？
• Cascading Style Sheetsの略。ウェブページの
スタイルを指定するための言語
• スタイル：文字の色や大きさ、形式など
12年12月2日日曜日
- 7. 応用
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>
12年12月2日日曜日
- 8. 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>
12年12月2日日曜日
- 9. テキストのスタイル①
• テキストの色を指定→color : green,
#ff0000（16進数（0∼f）指定）
• フォントサイズの指定→font-size : px
• 太字を指定→font-weight : normal, bold
• 行 えを指定→text-align : center, left, right
12年12月2日日曜日
- 10. テキストのスタイル②
• 行の高さを指定→line-height : 30px , 150%, 1.5
• テキストの装飾を指定→text-decoration :
underline（下線）, line-through（打ち消し線）
• 斜体の指定→font-style : italic
12年12月2日日曜日
- 11. 背景のスタイル
• 背景色 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
12年12月2日日曜日
- 12. ブロック要素のスタイル
• 背景色 #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;
}
12年12月2日日曜日
