合宿事前講座 Web 開発の基本編その 2 情報研究会モブ 薗田海樹 2018 6.12 The. 1
前回の復習 n ブラウザ って何? n Web サイト のキホンを作ってみよう 2
ブラウザ とは?HTML とは?? n ブラウザとは? WEB ページを閲覧するためのソフトウェア p HTML というブラウザに言語を表示する言語によって表示されている n HTML とは? p Hyper Text Markup Language の略称 p すげーぶんしょうをこうぞうかするげんご p 文書中にリンクを設置したり 動画像を置いたりできるすげーテキストという意味 3
Web サイトのキホンを作ってみよう n Hello World という文字列と自分の名前を表示させる Web ページを作成してみよう 4
Web サイトのキホンを作ってみよう n HTML コード 5
本日のお品書き n 背景や文字に色をつけたりする方法の解説 6
前回の復習を兼ねて n 少しテキスト文を付け足してみよう <h2> タグ <p> タグ + <br> タグ 7
前回の復習を兼ねて n <body> 部に以下のようにコードを記述する 8
WEB ページの 装飾 n テキストを表示できたが 私たちが普段見ている WEB ページには程遠い p 色など WEB ページを装飾する要素がないため n CSS(Cascading Style Sheets) を用いて WEB ページのスタイルを指定できる p HTML と組み合わせて使用される p HTML ページ内の要素や情報構造を定義 CSS それらをどのように表示するかを指定 p スクリーン上だけでなく 印刷の出力スタイルや音声読み上げの際の再生スタイルまでも指定 9
課題 : 自分の名前をブラウザで表示 n 前回作った WEB ページを CSS を使って装飾していこう 10
CSS を HTML に適用させてみよう n CSS は <head> 要素内に <style> タグで記述 p ( 例 ) ページの背景色を変更するためのコード <style> タグ <head> <style> HTML 内のbody 要素に対して body{ background-color : yellow; } 背景色を yellow にする <style> </head> セミコロン忘れず! 11
CSS を HTML に適用させてみよう n yellow と限定せず 好きな色を指定したい p 16 進数カラーコードを用いる Webページで表現される色を指定する制御コード # に続く6 桁の16 進数で表記される p yellow ( 色名 ) = #ffff00 ( カラーコード ) n 自分の好きな色を指定したい p 原色大辞典 (https://www.colordic.org/) 適当に色名を指定するよりもカラーコードを検索した方が 自分が指定したい色に近づくと思います 12
CSS を書く場所について n 今は <style> タグを用いて HTML 文書の中に CSS 文書が混在している p CSS を別ファイルとして読み込ませることでも CSS を HTML に適用することができる p 別ファイルで CSS を HTML に読み込ませる準備 1. HTML の <style> 要素を削除 2. joken1.html と同じ階層に新しいフォルダを作り css という名前にリネーム 3. 作った css ディレクトリの中に style.css という名前で空白の文書を保存する 13
CSS を別ファイルで適用させる n CSS を別ファイルで適用するときの注意 p スタイルシートで使う文字コードを指定すること p よく分かんなかったらおまじないでいいです (style.css) @charset utf-8 CSS ファイルを作ったら必ず 1 行目に記述すること 日本語を使うと CSS 文書でも文字化けするからです 14
CSS を別ファイルで適用させる n 文字コードを指定したら <style> タグ内の文書を全部移す 15
CSS を別ファイルで適用させる n HTML ファイルにおける CSS との対応付け p <link> タグを用いる <link rel= stylesheet href= css/style.css"> <head> 要素内に記述 <style> 要素が削除されているか確認 16
ここまでの確認 n HTML と CSS の対応付けを確認 17
フォントと文字サイズの変更 n <h1> タグの文字色 フォント 文字サイズを変更してみる (style.css) h1 { } font-family : メイリオ font-size : 40px; color : #ff0000 h1 という要素にフォント : メイリオサイズ :40px 色 :#ff0000( 赤 ) 18
CSS を考えてみよう ( 問題 1)h1 を中央揃えにしてみよう (style.css) h1 { } A. hint: 中央揃えにする CSS text-align : center; font-family : メイリオ font-size : 40px; color : #ff0000; text-align : center; 19
CSS を考えてみよう ( 問題 2)h2 に CSS を適用しよう A. (style.css) 色 :#0000ff( 青 ) サイズ :25px h2 { } font-size : 25px; color : #0000ff; 20
<p> に要素を適用する n <p> 要素にも CSS を適用させる (style.css) p { font-size : 20px color : #000000 background-color : #FFFFFF } p 要素にサイズ :20px 色 :#000000( 黒 ) 背景色 :#FFFFFF( 白 ) 21
<p> に要素を適用する n 前ページの CSS を適用させると n p タグが付けられた要素全てに同じ CSS が適用されてしまった p 同じ p タグでも名前を付けることで区別したい p 各タグに id 属性や class 属性を付けることで 要素に名前を付けられる 同じ HTML 内で 1 度しか使わないものには id 属性を 何回も使い回すものには class 属性をつける風潮があります 22
<p> に要素を適用する n <p> 要素に id 属性をつける (joken1.html) <body> 要素内 <p id = name > 情研太郎 </p> 情研太郎 という p 要素に対し name という id 属性を付けた (style.css) スペース入れないこと! id 属性は #( シャープ ) p#name{ } (p は省略も可能 ) name という id 属性に対して適用させる CSS を記述する 23
<p> に要素を適用する n <p> 要素に class 属性をつける (joken1.html) <body> 要素内 <p class = sentence >9 月の合宿 </p> 9 月の合宿 という p 要素に対し sentence という class 属性を付けた id 属性や class 属性の名前の付け方は自由です 24
<p> に要素を適用する n sentence class に対して CSS を適用させる p 色 :#808080( グレイ ) サイズ :15px (style.css) スペース入れないこと! class 属性は.( ドット ) p.sentence{ (p は省略も可能 ) color : #808080; font-size : 15px; } sentence という class 属性に対して適用させる CSS を記述する 25
HTML 文書に属性をつけてみよう ( 問題 3) 次の文章を p 要素で記述し sentence class 属性をつけてみよう これからも頑張ります! 26
HTML 文書に属性をつけてみよう ( 問題 3) 次の文章を p 要素で記述し sentence class 属性をつけてみよう A. (joken1.html) これからも頑張ります! <body 要素の最後に > <p class= sentence > これからも頑張ります </p> 27
今日のまとめ n WEBページを装飾するための CSS とは n CSSの要素 p 文字サイズ :font-size p 文字色 :color p 背景色 :background-color p フォント :font-family n HTML と CSS の結びつけ p id 属性 p class 属性 28
次回の予定 n ブロック要素についての解説 n ( できたら ) ブロック要素の配置について 29
おまけ n 色々なフォントを装飾する CSS を紹介 (style.css) text-decoration : underline; ( テキストに下線 ) text-decoration プロパティは文字を装飾します none : 標準 ( デフォルト ) overline : テキストに上線をつける line-through : テキストに打ち消し線をつける blink : テキストを点滅させる ( ブラウザによっては機能しない?) 30
おまけ n 色々なフォントを装飾する CSS を紹介 (style.css) font-style : italic; ( イタリック体 ) 文字に斜体を設定 normal : 標準 ( デフォルト ) oblique : 斜体 31
おまけ n 文字の大きさの指定方法 単位読み内容 px ピクセル ディスプレイの 1 ピクセル解像度によって変化 % パーセント割合で指定 em エム 親要素を 1 として割合で指定 32
おまけ n グラデーションを CSS で指定 ( 難 ) (style.css) background : linear-gradient(#f89174, #FFC778) linear-gradient( 線形 ) or radical-gradient( 円形 ) を選択 - gradient( 開始色, 終了色 ) 他にも,( カンマ ) で区切ることで - gradient( 開始位置, 開始色, 途中色 ( 複数指定化 ), 終了色 ) と指定が可能 33