Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
市民の先生-#3HTMLとCSSの基礎
Search
keita
June 27, 2021
Design
0
140
市民の先生-#3HTMLとCSSの基礎
keita
June 27, 2021
Tweet
Share
More Decks by keita
See All by keita
新田知事プレゼン資料.pdf
keita_yoshikawa
0
16
富山デザイン勉強会_デザイン経営.pdf
keita_yoshikawa
0
42
アップロード-職業訓練_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
120
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
310
アップロード職業訓練-デザインで使える写真撮影と画像補正.pdf
keita_yoshikawa
0
74
アップロード職業訓練-誰でも使える写真撮影テクニックのコピー.pdf
keita_yoshikawa
0
36
富山デザイン勉強会_私がデザインのために考えていること.pdf
keita_yoshikawa
0
71
富山デザイン勉強会10-読む人を動かす_効果的な文章の書き方.pdf
keita_yoshikawa
2
120
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
190
Other Decks in Design
See All in Design
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
190
250131_product meetup
motokoishida
0
210
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
380
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
130
How to get a Tiger to Tulsa
mcduckyart
0
110
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
1.6k
#yumemi_grow 読書シェア会 vol.1 - スコット・バークン著『デザインはどのように世界をつくるのか』
kaitou
1
180
AI動画生成ガチャ紹介
piyo7
1
110
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
430
Starry | Storyboards | Scene 1-21
giofortuna_story
0
280
問いの変遷
iflection
0
140
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
640
Featured
See All Featured
Done Done
chrislema
184
16k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Documentation Writing (for coders)
carmenintech
71
4.9k
Statistics for Hackers
jakevdp
799
220k
Docker and Python
trallard
44
3.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Being A Developer After 40
akosma
90
590k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Transcript
DERA-DESIGN 01 で ホームページを作ろう! #3HTMLとCSSの基礎
DERA-DESIGN 02 HTMLとCSSとは?
DERA-DESIGN 03 WordPressで主に使う言語 HTML CSS PHP JavaScript
DERA-DESIGN 04 今回は2つの言語の初歩を紹介します PHP JavaScript HTML CSS
DERA-DESIGN 05 HTML HTMLは、 コンピュータに 「それが何の情報か 」 を示すための言語です。 HTMLタグには 「
これ は見出し」 「これは本文」 という 『印』 をつけ る役割があります。 ホームページのすべての 情報に適切な印をつけることで、 コンピュー タがホームページの内容を理解できます。
DERA-DESIGN 06 HTMLの書き方の基本 ʻタグ名タグ内の要素ʻ/タグ名 開始タグ 開始タグ 開始タグと終了タグの間に、 文字など表示させたい要素を入れます。
DERA-DESIGN 07 h1市民の先生/h1 h2市民の先生/h2 h3市民の先生/h3 h4市民の先生/h4 h•見出しタグ/h• heading (ヘディング) h1~
h6の6段階があります。 数字が小さい方が重要な見出しになります。
DERA-DESIGN 08 h•見出しタグ/h• heading (ヘディング) h1~ h6の6段階があります。 数字が小さい方が重要な見出しになります。
DERA-DESIGN 09 p段落タグ/p paragraphg (パラグラフ) 文章の段落。 記事の本文などひとかたまりの文章に使います。 p親譲りの無鉄砲で小供の時から 損ばかりしている。 小学校に居る時分学校の
二階から飛び降りて一週間ほど腰を 抜かした事がある。 (青空文庫より) /p
10 DERA-DESIGN p段落タグ/p paragraphg (パラグラフ) 文章の段落。 記事の本文などひとかたまりの文章に使います。
11 DERA-DESIGN br改行改行タグ Break (ブレイク) 文章中で改行します。 pタグ内などの途中で改行するときに使います。 p親譲りの無鉄砲で小供の時から 損ばかりしている。br小学校に居る時分学校の 二階から飛び降りて一週間ほど腰を
抜かした事がある。br(青空文庫より)/p
DERA-DESIGN 12 br改行改行タグ Break (ブレイク) 文章中に改行します。 pタグ内などの途中で改行するときに使います。
DERA-DESIGN 13 img src=”••” alt=” ▲▲”画像タグ image (イメージ) 画像を表示します。 srcに画像にurl、
altに説明を入れます。 img src=”http:/ /deradesign.jp/lightning/ wp-content/uploads/2021/06/nekojpg” alt=”ねこの画像”
DERA-DESIGN 14 img src=”••” alt=” ▲▲”画像タグ image (イメージ) 画像を表示します。 srcに画像にurl、
altに説明を入れます。
DERA-DESIGN 15 DERA-DESIGN a href=”••”リンクタグ/a Anchor (アンカー) 他のページへのリンクです。 hrefにリンク先のurlを入れます。 a
href=”/sample-page”サンプルページ/a
DERA-DESIGN 16 a href=”••”リンクタグ/a Anchor (アンカー) 他のページへのリンクです。 hrefにリンク先のurlを入れます。
DERA-DESIGN 17 divコンテンツ区分タグ/div divided (ディバイデッド) コンテンツを区分けするタグです。 CSSを設定するためなどに使います。 div> h2市民の先生/h2 p親譲りの無鉄砲で小供の時から損ばかりしている。br小学校に居る時分学校の
二階から飛び降りて一週間ほど腰を抜かした事がある。br(青空文庫より)/p /div
コンテンツを区分けするタグです。 CSSを設定するためなどに使います。 DERA-DESIGN 18 divコンテンツ区分タグ/div divided (ディバイデッド)
DERA-DESIGN 19 CSS CSSは、 HTMLで書いた内容の見た目を調整 したり、 装飾したりするための言語です。 HTMLで印を付けた 「見出し」 「本文」
「写真」 などの大きさ ɾ 色 ɾ間隔などを指示します。 適切な調整や装飾をすることで、わかりや すいホームページになります。
DERA-DESIGN 20 CSSの書き方の基本 セレクタ{プロパティ••} タグ名やクラス名 指示の内容 値 CSSは、 どの要素 (セレクタ)
の、 何を (プロパティ) 、 どのように (値) すると書きます。
DERA-DESIGN 21 HTMLとのひも付けの方法 タグ名 属性名=”属性値”タグ内の要素/タグ名 h2、 p、 aなど Classに任意の名前を つけられる
タグ名に一括で指示か、 class名に任意の名前をつけ個別に指示します。
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
DERA-DESIGN 23 {color••} 文字色の指定 文字の色を指定します。 色の指定は色名や16進数などで行います。
DERA-DESIGN 24 {font-size••} 文字サイズの指定 文字の大きさを指定します。 単位にはpxなど用いられます。 div h2市民の先生/h2 p class=”text”親譲りの無鉄砲で小供の
時から損ばかりしている。br 小学校に居る時分学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。br (青空文庫より)/p /div h2{ font-size48px } text{ font-size26px } HTML CSS
DERA-DESIGN 25 {font-size••} 文字サイズの指定 文字の大きさを指定します。 単位にはpxなど用いられます。
DERA-DESIGN 26 {background-color••} 背景色の指定 背景に色をつけます。 色指定には色名や16進数などが用いられます。 div class=”content” h2市民の先生/h2 p
class=”text”親譲りの無鉄砲で小供の 時から損ばかりしている。br 小学校に居る時分学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。br (青空文庫より)/p /div content{ background-color#eeffff } HTML CSS
DERA-DESIGN 27 {background-color••} 背景色の指定 背景に色をつけます。 色指定には色名や16進数などが用いられます。
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
DERA-DESIGN 29 {border•• ▲▲ ▪▪} 境界線の指定 境界線を指定します。 指定する値は、 線の太さ、 線の種類、
線の色です。
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
DERA-DESIGN 31 {width••}と{height••} 幅と高さの指定 要素に幅や高さを指定します。 単位はpxや%を使用します。
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
DERA-DESIGN 33 {margin••}と{padding••} 外側の余白と内側の余白の指定 要素に余白を指定します。 外側の余白が margin、 内側の余白がpaddingです。
DERA-DESIGN 34 まとめ ɾHTMLとCSSができると自由度が上がる ɾ奥が深いので覚えるのに時間がかかる ɾ調べることができればOK ɾWordPressならできなくても大丈夫
DERA-DESIGN 35 以上 ご清聴ありがとう ございました