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

(1)

合宿事前講座　

Web開発の基本編　その２

情報研究会　モブ

薗田海樹

(2)

前回の復習

n 

「ブラウザ」って何？

n 

「

Webサイト」のキホンを作ってみよう

2

(3)

「ブラウザ」とは？

HTMLとは？？

n 

ブラウザとは？　　　　　　　

WEB

ページを閲覧するためのソフトウェア

p 

H

TML

というブラウザに言語を表示する　　　　　

言語によって表示されている

n 

HTMLとは？

p 

Hyper Text Markup Languageの略称

p 

「すげーぶんしょうをこうぞうかするげんご」

p 

文書中に

リンクを設置

したり、

動画像を置いたり

できるすげーテキストという意味

3

(4)

Webサイトのキホンを作ってみよう

n 

Hello Worldという文字列と　　　　　　　

自分の名前を表示させる

_Webページ

を作成してみよう

4 2018 6.12 Tue. H.30 情報研究会

(5)

Webサイトのキホンを作ってみよう

5

2018 6.12 Tue. H.30 情報研究会

(6)

本日のお品書き

n 

背景や文字に色をつけたりする方法の解説

6

(7)

前回の復習を兼ねて

n 

少しテキスト文を付け足してみよう

7 2018 6.12 Tue. H.30 情報研究会

←

<h2>

← <p>

+ <br>

前回の復習を兼ねて

n 

<

body>部に以下のようにコードを記述する

8

(9)

WEBページの「装飾」

n 

テキストを表示できたが、私たちが　　　　　　

普段見ている

_{WEBページには程遠い}

p 

色など

WEBページを装飾する要素がないため

n 

CSS(Cascading Style Sheets)

を用いて　　　　

WEBページのスタイルを指定できる

p 

HTMLと組み合わせて使用される

p 

HTML → ページ内の要素や情報構造を定義

　

CSS → それらをどのように表示するかを指定

p 

スクリーン上だけでなく、印刷の出力スタイルや

音声読み上げの際の再生スタイルまでも指定

9 2018 6.12 Tue. H.30 情報研究会

(10)

課題

:自分の名前をブラウザで表示

n 

前回作った

WEBページをCSSを使って　　　　

装飾していこう

10

(11)

CSSをHTMLに適用させてみよう

n 

CSSは<head>要素内に<style>タグで記述

p 

（例）ページの背景色を変更するためのコード

11 H.30 情報研究会

<style>

<head>

_…

<style>

body{

background-color : yellow;

}

<style>

</head>

HTML内のbody要素に対して、背景色を”yellow”にする ↓セミコロン　忘れず！ 2018 6.12 Tue.

(12)

CSSをHTMLに適用させてみよう

n 

“yellow”

と限定せず、好きな色を指定したい

p 

16進数カラーコードを用いる

•  Webページで表現される色を指定する制御コード •  ‘#’に続く６桁の16進数で表記される p 

“yellow”（色名） = “#ffff00”（カラーコード）

n 

自分の好きな色を指定したい

p 

原色大辞典（

https://www.colordic.org/

）

12 H.30 情報研究会適当に色名を指定するよりもカラーコードを検索した方が、自分が指定したい色に近づくと思います 2018 6.12 Tue.

(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 H.30 情報研究会 2018 6.12 Tue.

(14)

CSSを別ファイルで適用させる

n 

CSSを別ファイルで適用するときの注意

p 

スタイルシートで使う

文字コードを指定

すること

p 

よく分かんなかったらおまじないでいいです

14 H.30 情報研究会 2018 6.12 Tue. (style.css)

@charset “utf-8”

CSSファイルを作ったら必ず１行目に記述すること日本語を使うと_{CSS文書でも文字化けするからです}

(15)

CSSを別ファイルで適用させる

n 

文字コードを指定したら、

<style>タグ内の　　

文書を全部移す

15 H.30 情報研究会 2018 6.12 Tue.

(16)

CSSを別ファイルで適用させる

n 

H

TMLファイルにおけるCSSとの対応付け

p 

<link>タグを用いる

16 H.30 情報研究会 2018 6.12 Tue.

<link rel=“stylesheet” href=”css/style.css">

<head>要素内に記述

☆

<style>要素が削除されているか確認

(17)

ここまでの確認

n 

H

TMLとCSSの対応付けを確認

17 H.30 情報研究会

(18)

フォントと文字サイズの変更

n 

<h1>タグの文字色、フォント、文字サイズを　

変更してみる

h1 {

font-family : “メイリオ”

font-size : 40px;

color : #ff0000

}

h1という要素に　フォント：メイリオ　サイズ：40px 色：#ff0000(赤)

(19)

CSSを考えてみよう

（問題１）

_{h1を中央揃えにしてみよう}

hint：中央揃えにするCSS

text-align : center;

h1 {

font-family : “メイリオ”

font-size : 40px;

color : #ff0000;

text-align : center;

}

A.

(20)

CSSを考えてみよう

（問題２）

_{h2にCSSを適用しよう}

色：

_#0000ff

（青）

　サイズ：

_25px

h2 {

font-size : 25px;

color : #0000ff;

}

A.

(21)

n 

<p>要素にもCSSを適用させる

<p>に要素を適用する

p {

font-size : 20px

color : #000000

background-color : #FFFFFF

}

p要素にサイズ：20px 色：#000000(黒) 背景色：#FFFFFF（白）

(22)

n 

前ページの

CSSを適用させると・・・

<p>に要素を適用する

22 H.30 情報研究会 2018 6.12 Tue.

n 

pタグが付けられた要素全てに　　　　　　　　

同じ

_{CSSが適用されてしまった}

p 

同じ

pタグでも名前を付けることで区別したい

p 

各タグに

id属性やclass属性

を付けることで、　　　　　　　　

要素に名前を付けられる

同じ_{HTML内で1度しか使わないものには}_id属性を、何回も使い回すものには_class属性をつける風潮があります

(23)

n 

<p>要素にid属性をつける

<p>に要素を適用する

23 H.30 情報研究会 2018 6.12 Tue. (joken1.html)

<body>要素内

<p id = “name”>情研

太郎

</p>

“情研太郎”というp要素に対し、”name”というid属性を付けた (style.css)

p#name{

_…

}

（

pは省略も可能

）

“name”というid属性に対して適用させるCSSを記述する ↙︎スペース入れないこと！_id属性は_’#（シャープ）_’

(24)

n 

<p>要素にclass属性をつける

<p>に要素を適用する

<body>要素内

<p class = “sentence”>9月の合宿

〜

</p>

“9月の合宿〜”というp要素に対し、 ”sentence”というclass属性を付けた i_{d属性やclass属性の名前の付け方は自由です}

(25)

n 

”sentence” class に対してCSSを適用させる

p 

色：

#808080(グレイ) サイズ：15px

<p>に要素を適用する

p.sentence{

（

pは省略も可能

）

color : #808080;

font-size : 15px;

}

“sentence”というclass属性に対して適用させるCSSを記述する ↙︎スペース入れないこと！_class属性は_’.（ドット）_’

(26)

HTML文書に属性をつけてみよう

（問題３）次の文章を

_{p要素で記述し、}

　　“sentence”class 属性をつけてみよう

「これからも頑張ります！」

26 H.30 情報研究会 2018 6.12 Tue.

↙

︎

(27)

HTML文書に属性をつけてみよう

（問題３）次の文章を

_{p要素で記述し、}

　　“sentence”class 属性をつけてみよう

「これからも頑張ります！」

<body要素の最後に>

<p class=“sentence”>これからも頑張ります</p>

A.

(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 2018 6.12 Tue. H.30 情報研究会

(29)

次回の予定

n 

ブロック要素についての解説

n 

（できたら）ブロック要素の配置について

29

(30)

おまけ☆

n 

色々なフォントを装飾する

CSSを紹介

30 2018 6.12 Tue. H.30 情報研究会 (style.css)

text-decoration : underline; （テキストに下線）

text-decorationプロパティは文字を装飾します。 none : 標準（デフォルト） overline : テキストに上線をつける line-through : テキストに打ち消し線をつける blink : テキストを点滅させる（ブラウザによっては機能しない？）

(31)

おまけ☆

n 

色々なフォントを装飾する

CSSを紹介

31 2018 6.12 Tue. H.30 情報研究会 (style.css)

f

ont-style

: italic; （イタリック体）

文字に斜体を設定 normal : 標準（デフォルト） oblique : 斜体

(32)

おまけ☆

n 

文字の大きさの指定方法

32 2018 6.12 Tue. H.30 情報研究会単位読み内容 px ピクセルディスプレイの１ピクセル解像度によって変化 % パーセント割合で指定 em エム親要素を１として割合で指定

(33)

n 

グラデーションを

CSSで指定（難）

(style.css)

background : linear-gradient(

#F89174, #FFC778

)

linear-gradient(線形) or radical-gradient（円形）を選択〜 - gradient(開始色,終了色) 他にも　,（カンマ）　で区切ることで〜 - gradient(開始位置,開始色,途中色（複数指定化）,終了色) と指定が可能

おまけ☆

33 2018 6.12 Tue. H.30 情報研究会

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