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. タグとは?
• <タグ名>の記号で囲まれた半角英数字。
文書構造を指定
• 記入方法:<開始タグ>と</終了タグ>
の2つを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日日曜日