Your SlideShare is downloading. ×

1202css

852

Published on

CSSセミナー資料

CSSセミナー資料

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
852
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSSセミナー 医療×IT講座vol.4 2012/12/0212年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日日曜日
  • 6. まずは書いてみよう!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, right12年12月2日日曜日
  • 10. テキストのスタイル② • 行の高さを指定→line-height : 30px , 150%, 1.5 • テキストの装飾を指定→text-decoration : underline(下線), line-through(打ち消し線) • 斜体の指定→font-style : italic12年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-repeat12年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. 余白のスタイル • 内側の余白の指定→padding 外側の余白の指定→margin12年12月2日日曜日

×