Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

D0ea52d36864ba36bdd5f8be4c0fcdb7?s=47 keita
June 27, 2021

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

D0ea52d36864ba36bdd5f8be4c0fcdb7?s=128

keita

June 27, 2021
Tweet

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 今回は2つの言語の初歩を紹介します 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 以上 ご清聴ありがとう ございました