Download to read offline
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日日曜日
- 6.
- 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日日曜日
- 13.