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

Transcript

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

2. DERA-DESIGN 02 HTMLとCSSとは？

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

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

5. DERA-DESIGN 05 HTML HTMLは、 コンピュータに 「それが何の情報か 」 を示すための言語です。 HTMLタグには 「

   これ は見出し」 「これは本文」 という 『印』 をつけ る役割があります。 ホームページのすべての 情報に適切な印をつけることで、 コンピュー タがホームページの内容を理解できます。

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

7. DERA-DESIGN 07 h1市民の先生/h1 h2市民の先生/h2 h3市民の先生/h3 h4市民の先生/h4 h•見出しタグ/h• heading （ヘディング） h1～

   h6の6段階があります。 数字が小さい方が重要な見出しになります。

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

9. DERA-DESIGN 09 p段落タグ/p paragraphg （パラグラフ） 文章の段落。 記事の本文などひとかたまりの文章に使います。 p親譲りの無鉄砲で小供の時から 損ばかりしている。 小学校に居る時分学校の

   二階から飛び降りて一週間ほど腰を 抜かした事がある。 （青空文庫より） /p

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

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

    抜かした事がある。br（青空文庫より）/p

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

13. DERA-DESIGN 13 img src=”••” alt=” ▲▲”画像タグ image （イメージ） 画像を表示します。 srcに画像にurl、

    altに説明を入れます。 img src=”http:/ /deradesign.jp/lightning/ wp-content/uploads/2021/06/nekojpg” alt=”ねこの画像”

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

    altに説明を入れます。

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

    href=”/sample-page”サンプルページ/a

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

17. DERA-DESIGN 17 divコンテンツ区分タグ/div divided （ディバイデッド） コンテンツを区分けするタグです。 CSSを設定するためなどに使います。 div> h2市民の先生/h2 p親譲りの無鉄砲で小供の時から損ばかりしている。br小学校に居る時分学校の

    二階から飛び降りて一週間ほど腰を抜かした事がある。br（青空文庫より）/p /div

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

19. DERA-DESIGN 19 CSS CSSは、 HTMLで書いた内容の見た目を調整 したり、 装飾したりするための言語です。 HTMLで印を付けた 「見出し」 「本文」

    「写真」 などの大きさ ɾ 色 ɾ間隔などを指示します。 適切な調整や装飾をすることで、わかりや すいホームページになります。

20. DERA-DESIGN 20 CSSの書き方の基本 セレクタ{プロパティ••} タグ名やクラス名 指示の内容 値 CSSは、 どの要素 （セレクタ）

    の、 何を （プロパティ） 、 どのように （値） すると書きます。

21. DERA-DESIGN 21 HTMLとのひも付けの方法 タグ名 属性名=”属性値”タグ内の要素/タグ名 h2、 p、 aなど Classに任意の名前を つけられる

    タグ名に一括で指示か、 class名に任意の名前をつけ個別に指示します。

22. 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

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

24. DERA-DESIGN 24 {font-size••} 文字サイズの指定 文字の大きさを指定します。 単位にはpxなど用いられます。 div h2市民の先生/h2 p class=”text”親譲りの無鉄砲で小供の

    時から損ばかりしている。br 小学校に居る時分学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。br （青空文庫より）/p /div h2{ font-size48px } text{ font-size26px } HTML CSS

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

26. DERA-DESIGN 26 {background-color••} 背景色の指定 背景に色をつけます。 色指定には色名や16進数などが用いられます。 div class=”content” h2市民の先生/h2 p

    class=”text”親譲りの無鉄砲で小供の 時から損ばかりしている。br 小学校に居る時分学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。br （青空文庫より）/p /div content{ background-color#eeffff } HTML CSS

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

28. DERA-DESIGN 28 {border•• ▲▲ ▪▪} 境界線の指定 境界線を指定します。 指定する値は、 線の太さ、 線の種類、

    線の色です。 div class=”content” h2市民の先生/h2 p class=”text”親譲りの無鉄砲で小供の 時から損ばかりしている。br 小学校に居る時分学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。br （青空文庫より）/p /div content{ background-color#eeffff border1px solid #555555 } HTML CSS

29. DERA-DESIGN 29 {border•• ▲▲ ▪▪} 境界線の指定 境界線を指定します。 指定する値は、 線の太さ、 線の種類、

    線の色です。

30. DERA-DESIGN 30 {width••}と{height••} 幅と高さの指定 要素に幅や高さを指定します。 単位はpxや％を使用します。 div class=”content” h2市民の先生/h2 p

    class=”text”親譲りの無鉄砲で小供の 時から損ばかりしている。br 小学校に居る時分学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。br （青空文庫より）/p /div content{ background-color#eeffff border1px solid #555555 width300px height500px } HTML CSS

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

32. DERA-DESIGN 32 {margin••}と{padding••} 外側の余白と内側の余白の指定 要素に余白を指定します。 外側の余白が margin、 内側の余白がpaddingです。 div class=”content”

    h2市民の先生/h2 p class=”text”親譲りの無鉄砲で小供の 時から損ばかりしている。br 小学校に居る時分学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。br （青空文庫より）/p /div content{ background-color#eeffff border1px solid #555555 width300px height500px margin40px padding20px } HTML CSS

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

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

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