市民の先生-#3HTMLとCSSの基礎

Slide 1

Slide 1 text

DERA-DESIGN 01 でホームページを作ろう! #3HTMLとCSSの基礎

Slide 2

Slide 2 text

DERA-DESIGN 02 HTMLとCSSとは？

Slide 3

Slide 3 text

DERA-DESIGN 03 WordPressで主に使う言語 HTML CSS PHP JavaScript

Slide 4

Slide 4 text

DERA-DESIGN 04 今回は２つの言語の初歩を紹介します PHP JavaScript HTML CSS

Slide 5

Slide 5 text

DERA-DESIGN 05 HTML HTMLは、コンピュータに「それが何の情報か」を示すための言語です。 HTMLタグには「これは見出し」「これは本文」という『印』をつける役割があります。ホームページのすべての情報に適切な印をつけることで、コンピュータがホームページの内容を理解できます。

Slide 6

Slide 6 text

DERA-DESIGN 06 HTMLの書き方の基本 ʻタグ名タグ内の要素ʻ/タグ名開始タグ開始タグ開始タグと終了タグの間に、文字など表示させたい要素を入れます。

Slide 7

Slide 7 text

DERA-DESIGN 07 h1市民の先生/h1 h2市民の先生/h2 h3市民の先生/h3 h4市民の先生/h4 h●見出しタグ/h● heading （ヘディング） h1～ h6の6段階があります。数字が小さい方が重要な見出しになります。

Slide 8

Slide 8 text

DERA-DESIGN 08 h●見出しタグ/h● heading （ヘディング） h1～ h6の6段階があります。数字が小さい方が重要な見出しになります。

Slide 9

Slide 9 text

DERA-DESIGN 09 p段落タグ/p paragraphg （パラグラフ）文章の段落。記事の本文などひとかたまりの文章に使います。 p親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。（青空文庫より） /p

Slide 10

Slide 10 text

10 DERA-DESIGN p段落タグ/p paragraphg （パラグラフ）文章の段落。記事の本文などひとかたまりの文章に使います。

Slide 11

Slide 11 text

11 DERA-DESIGN br改行改行タグ Break （ブレイク）文章中で改行します。 pタグ内などの途中で改行するときに使います。 p親譲りの無鉄砲で小供の時から損ばかりしている。br小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。br（青空文庫より）/p

Slide 12

Slide 12 text

DERA-DESIGN 12 br改行改行タグ Break （ブレイク）文章中に改行します。 pタグ内などの途中で改行するときに使います。

Slide 13

Slide 13 text

DERA-DESIGN 13 img src=”●●” alt=” ▲▲”画像タグ image （イメージ）画像を表示します。 srcに画像にurl、 altに説明を入れます。 img src=”http:/ /deradesign.jp/lightning/ wp-content/uploads/2021/06/nekojpg” alt=”ねこの画像”

Slide 14

Slide 14 text

DERA-DESIGN 14 img src=”●●” alt=” ▲▲”画像タグ image （イメージ）画像を表示します。 srcに画像にurl、 altに説明を入れます。

Slide 15

Slide 15 text

DERA-DESIGN 15 DERA-DESIGN a href=”●●”リンクタグ/a Anchor （アンカー）他のページへのリンクです。 hrefにリンク先のurlを入れます。 a href=”/sample-page”サンプルページ/a

Slide 16

Slide 16 text

DERA-DESIGN 16 a href=”●●”リンクタグ/a Anchor （アンカー）他のページへのリンクです。 hrefにリンク先のurlを入れます。

Slide 17

Slide 17 text

DERA-DESIGN 17 divコンテンツ区分タグ/div divided （ディバイデッド）コンテンツを区分けするタグです。 CSSを設定するためなどに使います。 div> h2市民の先生/h2 p親譲りの無鉄砲で小供の時から損ばかりしている。br小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。br（青空文庫より）/p /div

Slide 18

Slide 18 text

コンテンツを区分けするタグです。 CSSを設定するためなどに使います。 DERA-DESIGN 18 divコンテンツ区分タグ/div divided （ディバイデッド）

Slide 19

Slide 19 text

DERA-DESIGN 19 CSS CSSは、 HTMLで書いた内容の見た目を調整したり、装飾したりするための言語です。 HTMLで印を付けた「見出し」「本文」「写真」などの大きさ ɾ 色 ɾ間隔などを指示します。適切な調整や装飾をすることで、わかりやすいホームページになります。

Slide 20

Slide 20 text

DERA-DESIGN 20 CSSの書き方の基本セレクタ{プロパティ●●} タグ名やクラス名指示の内容値 CSSは、どの要素（セレクタ）の、何を（プロパティ）、どのように（値）すると書きます。

Slide 21

Slide 21 text

DERA-DESIGN 21 HTMLとのひも付けの方法タグ名属性名=”属性値”タグ内の要素/タグ名 h2、 p、 aなど Classに任意の名前をつけられるタグ名に一括で指示か、 class名に任意の名前をつけ個別に指示します。

Slide 22

Slide 22 text

DERA-DESIGN 22 DERA-DESIGN 22 {color●●} 文字色の指定文字の色を指定します。色の指定は色名や16進数などで行います。 div h2市民の先生/h2 p class=”text”親譲りの無鉄砲で小供の時から損ばかりしている。br 小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。br （青空文庫より）/p /div h2{ colorblue } text{ color#995555 } HTML CSS

Slide 23

Slide 23 text

DERA-DESIGN 23 {color●●} 文字色の指定文字の色を指定します。色の指定は色名や16進数などで行います。

Slide 24

Slide 24 text

DERA-DESIGN 24 {font-size●●} 文字サイズの指定文字の大きさを指定します。単位にはpxなど用いられます。 div h2市民の先生/h2 p class=”text”親譲りの無鉄砲で小供の時から損ばかりしている。br 小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。br （青空文庫より）/p /div h2{ font-size48px } text{ font-size26px } HTML CSS

Slide 25

Slide 25 text

DERA-DESIGN 25 {font-size●●} 文字サイズの指定文字の大きさを指定します。単位にはpxなど用いられます。

Slide 26

Slide 26 text

DERA-DESIGN 26 {background-color●●} 背景色の指定背景に色をつけます。色指定には色名や16進数などが用いられます。 div class=”content” h2市民の先生/h2 p class=”text”親譲りの無鉄砲で小供の時から損ばかりしている。br 小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。br （青空文庫より）/p /div content{ background-color#eeﬀﬀ } HTML CSS

Slide 27

Slide 27 text

DERA-DESIGN 27 {background-color●●} 背景色の指定背景に色をつけます。色指定には色名や16進数などが用いられます。

Slide 28

Slide 28 text

DERA-DESIGN 28 {border●● ▲▲ ■■} 境界線の指定境界線を指定します。指定する値は、線の太さ、線の種類、線の色です。 div class=”content” h2市民の先生/h2 p class=”text”親譲りの無鉄砲で小供の時から損ばかりしている。br 小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。br （青空文庫より）/p /div content{ background-color#eeﬀﬀ border1px solid #555555 } HTML CSS

Slide 29

Slide 29 text

DERA-DESIGN 29 {border●● ▲▲ ■■} 境界線の指定境界線を指定します。指定する値は、線の太さ、線の種類、線の色です。

Slide 30

Slide 30 text

DERA-DESIGN 30 {width●●}と{height●●} 幅と高さの指定要素に幅や高さを指定します。単位はpxや％を使用します。 div class=”content” h2市民の先生/h2 p class=”text”親譲りの無鉄砲で小供の時から損ばかりしている。br 小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。br （青空文庫より）/p /div content{ background-color#eeﬀﬀ border1px solid #555555 width300px height500px } HTML CSS

Slide 31

Slide 31 text

DERA-DESIGN 31 {width●●}と{height●●} 幅と高さの指定要素に幅や高さを指定します。単位はpxや％を使用します。

Slide 32

Slide 32 text

DERA-DESIGN 32 {margin●●}と{padding●●} 外側の余白と内側の余白の指定要素に余白を指定します。外側の余白が margin、内側の余白がpaddingです。 div class=”content” h2市民の先生/h2 p class=”text”親譲りの無鉄砲で小供の時から損ばかりしている。br 小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。br （青空文庫より）/p /div content{ background-color#eeﬀﬀ border1px solid #555555 width300px height500px margin40px padding20px } HTML CSS

Slide 33

Slide 33 text

DERA-DESIGN 33 {margin●●}と{padding●●} 外側の余白と内側の余白の指定要素に余白を指定します。外側の余白が margin、内側の余白がpaddingです。

Slide 34

Slide 34 text

DERA-DESIGN 34 まとめ ɾHTMLとCSSができると自由度が上がる ɾ奥が深いので覚えるのに時間がかかる ɾ調べることができればOK ɾWordPressならできなくても大丈夫

Slide 35

Slide 35 text

DERA-DESIGN 35 以上ご清聴ありがとうございました