合宿事前講座 Web 開発の基本編その 2 情報研究会モブ薗田海樹 The. H.30 情報研究会 1

Size: px

Start display at page:

Download "合宿事前講座 Web 開発の基本編その 2 情報研究会モブ薗田海樹 The. H.30 情報研究会 1"

めぐのしどり
5 years ago
Views:

1 合宿事前講座 Web 開発の基本編その 2 情報研究会モブ薗田海樹 The. 1

2 前回の復習 n ブラウザって何? n Web サイトのキホンを作ってみよう 2

3 ブラウザとは?HTML とは?? n ブラウザとは? WEB ページを閲覧するためのソフトウェア p HTML というブラウザに言語を表示する言語によって表示されている n HTML とは? p Hyper Text Markup Language の略称 p すげーぶんしょうをこうぞうかするげんご p 文書中にリンクを設置したり動画像を置いたりできるすげーテキストという意味 3

4 Web サイトのキホンを作ってみよう n Hello World という文字列と自分の名前を表示させる Web ページを作成してみよう 4

5 Web サイトのキホンを作ってみよう n HTML コード 5

6 本日のお品書き n 背景や文字に色をつけたりする方法の解説 6

7 前回の復習を兼ねて n 少しテキスト文を付け足してみよう <h2> タグ <p> タグ + <br> タグ 7

8 前回の復習を兼ねて n <body> 部に以下のようにコードを記述する 8

9 WEB ページの装飾 n テキストを表示できたが私たちが普段見ている WEB ページには程遠い p 色など WEB ページを装飾する要素がないため n CSS(Cascading Style Sheets) を用いて WEB ページのスタイルを指定できる p HTML と組み合わせて使用される p HTML ページ内の要素や情報構造を定義 CSS それらをどのように表示するかを指定 p スクリーン上だけでなく印刷の出力スタイルや音声読み上げの際の再生スタイルまでも指定 9

10 課題 : 自分の名前をブラウザで表示 n 前回作った WEB ページを CSS を使って装飾していこう 10

11 CSS を HTML に適用させてみよう n CSS は <head> 要素内に <style> タグで記述 p ( 例 ) ページの背景色を変更するためのコード <style> タグ <head> <style> HTML 内のbody 要素に対して body{ background-color : yellow; } 背景色を yellow にする <style> </head> セミコロン忘れず! 11

12 CSS を HTML に適用させてみよう n yellow と限定せず好きな色を指定したい p 16 進数カラーコードを用いる Webページで表現される色を指定する制御コード # に続く6 桁の16 進数で表記される p yellow ( 色名 ) = #ffff00 ( カラーコード ) n 自分の好きな色を指定したい p 原色大辞典 ( 適当に色名を指定するよりもカラーコードを検索した方が自分が指定したい色に近づくと思います 12

13 CSS を書く場所について n 今は <style> タグを用いて HTML 文書の中に CSS 文書が混在している p CSS を別ファイルとして読み込ませることでも CSS を HTML に適用することができる p 別ファイルで CSS を HTML に読み込ませる準備 1. HTML の <style> 要素を削除 2. joken1.html と同じ階層に新しいフォルダを作り css という名前にリネーム 3. 作った css ディレクトリの中に style.css という名前で空白の文書を保存する 13

14 CSS を別ファイルで適用させる n CSS を別ファイルで適用するときの注意 p スタイルシートで使う文字コードを指定すること p よく分かんなかったらおまじないでいいです utf-8 CSS ファイルを作ったら必ず 1 行目に記述すること日本語を使うと CSS 文書でも文字化けするからです 14

15 CSS を別ファイルで適用させる n 文字コードを指定したら <style> タグ内の文書を全部移す 15

16 CSS を別ファイルで適用させる n HTML ファイルにおける CSS との対応付け p <link> タグを用いる <link rel= stylesheet href= css/style.css"> <head> 要素内に記述 <style> 要素が削除されているか確認 16

17 ここまでの確認 n HTML と CSS の対応付けを確認 17

18 フォントと文字サイズの変更 n <h1> タグの文字色フォント文字サイズを変更してみる (style.css) h1 { } font-family : メイリオ font-size : 40px; color : #ff0000 h1 という要素にフォント : メイリオサイズ :40px 色 :#ff0000( 赤 ) 18

19 CSS を考えてみよう ( 問題 1)h1 を中央揃えにしてみよう (style.css) h1 { } A. hint: 中央揃えにする CSS text-align : center; font-family : メイリオ font-size : 40px; color : #ff0000; text-align : center; 19

20 CSS を考えてみよう ( 問題 2)h2 に CSS を適用しよう A. (style.css) 色 :#0000ff( 青 ) サイズ :25px h2 { } font-size : 25px; color : #0000ff; 20

21 <p> に要素を適用する n <p> 要素にも CSS を適用させる (style.css) p { font-size : 20px color : # background-color : #FFFFFF } p 要素にサイズ :20px 色 :#000000( 黒 ) 背景色 :#FFFFFF( 白 ) 21

22 <p> に要素を適用する n 前ページの CSS を適用させると n p タグが付けられた要素全てに同じ CSS が適用されてしまった p 同じ p タグでも名前を付けることで区別したい p 各タグに id 属性や class 属性を付けることで要素に名前を付けられる同じ HTML 内で 1 度しか使わないものには id 属性を何回も使い回すものには class 属性をつける風潮があります 22

23 <p> に要素を適用する n <p> 要素に id 属性をつける (joken1.html) <body> 要素内 <p id = name > 情研太郎 </p> 情研太郎という p 要素に対し name という id 属性を付けた (style.css) スペース入れないこと! id 属性は #( シャープ ) p#name{ } (p は省略も可能 ) name という id 属性に対して適用させる CSS を記述する 23

24 <p> に要素を適用する n <p> 要素に class 属性をつける (joken1.html) <body> 要素内 <p class = sentence >9 月の合宿 </p> 9 月の合宿という p 要素に対し sentence という class 属性を付けた id 属性や class 属性の名前の付け方は自由です 24

25 <p> に要素を適用する n sentence class に対して CSS を適用させる p 色 :#808080( グレイ ) サイズ :15px (style.css) スペース入れないこと! class 属性は.( ドット ) p.sentence{ (p は省略も可能 ) color : #808080; font-size : 15px; } sentence という class 属性に対して適用させる CSS を記述する 25

26 HTML 文書に属性をつけてみよう ( 問題 3) 次の文章を p 要素で記述し sentence class 属性をつけてみようこれからも頑張ります! 26

27 HTML 文書に属性をつけてみよう ( 問題 3) 次の文章を p 要素で記述し sentence class 属性をつけてみよう A. (joken1.html) これからも頑張ります! <body 要素の最後に > <p class= sentence > これからも頑張ります </p> 27

28 今日のまとめ n WEBページを装飾するための CSS とは n CSSの要素 p 文字サイズ :font-size p 文字色 :color p 背景色 :background-color p フォント :font-family n HTML と CSS の結びつけ p id 属性 p class 属性 28

29 次回の予定 n ブロック要素についての解説 n ( できたら ) ブロック要素の配置について 29

30 おまけ n 色々なフォントを装飾する CSS を紹介 (style.css) text-decoration : underline; ( テキストに下線 ) text-decoration プロパティは文字を装飾します none : 標準 ( デフォルト ) overline : テキストに上線をつける line-through : テキストに打ち消し線をつける blink : テキストを点滅させる ( ブラウザによっては機能しない?) 30

31 おまけ n 色々なフォントを装飾する CSS を紹介 (style.css) font-style : italic; ( イタリック体 ) 文字に斜体を設定 normal : 標準 ( デフォルト ) oblique : 斜体 31

32 おまけ n 文字の大きさの指定方法単位読み内容 px ピクセルディスプレイの 1 ピクセル解像度によって変化 % パーセント割合で指定 em エム親要素を 1 として割合で指定 32

33 おまけ n グラデーションを CSS で指定 ( 難 ) (style.css) background : linear-gradient(#f89174, #FFC778) linear-gradient( 線形 ) or radical-gradient( 円形 ) を選択 - gradient( 開始色, 終了色 ) 他にも,( カンマ ) で区切ることで - gradient( 開始位置, 開始色, 途中色 ( 複数指定化 ), 終了色 ) と指定が可能 33

Microsoft PowerPoint - ＣＳＳ（Cascading Style Sheets）の基本.pptx

Microsoft PowerPoint - ＣＳＳ（Cascading Style Sheets）の基本.pptx CSS(Cascading Style Sheets) の基本 1. CSSの基本的な考え方は HTMLの構造を表す要素 ( タグ ) に対しスタイルを定義するというもの 2. CSSではセレクタプロパティ値の3つを組み合わせてスタイルを設定する 3. セレクタは ,, や要素などコンテンツ内のどの要素にスタイルを適用するかを指定する 4. セレクタの次の

合宿事前講座 Web 開発の基本編その 2 情報研究会モブ 薗田海樹 The. H.30 情報研究会 1

合宿事前講座 Web 開発の基本編その 2 情報研究会モブ薗田海樹 The. H.30 情報研究会 1