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
120
市民の先生-#3HTMLとCSSの基礎
keita
June 27, 2021
Tweet
Share
More Decks by keita
See All by keita
_圧縮_富山デザイン勉強会4-続基礎の基礎.pdf
keita_yoshikawa
0
25
富山デザイン勉強会-デザインの制作フロー.pdf
keita_yoshikawa
0
20
富山デザイン勉強会-イントロダクション__4.pdf
keita_yoshikawa
0
13
富山新聞文化センター説明資料.pdf
keita_yoshikawa
0
6
創業塾2023.pdf
keita_yoshikawa
0
6
富山デザイン勉強会-2024年デザイントレンド.pdf
keita_yoshikawa
1
63
富山デザイン勉強会_文字_タイポグラフィを使ってデザインする方法.pdf
keita_yoshikawa
1
46
デザインの意味_進捗報告.pdf
keita_yoshikawa
0
23
創業塾.pdf
keita_yoshikawa
0
25
Other Decks in Design
See All in Design
Resolving text accessibility dilemmas in UIs
romanshamin
0
130
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
22
7.7k
UIをもたらすコンテクストの考察
securecat
9
2.5k
言語やロールの違いを超えて、一緒にデザインしていくための挑戦
hrtnde
0
1.3k
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
380
フロントエンドエンジニアが知っておくべきUIUX心理学
yukiringo
1
270
Wolf and the seven goatkids
_limex_
PRO
0
420
#コムデナ vol.2 「初めてのデザインカンファレンス協賛!共有したい3つのやらかし」
kiyoshifuwa
1
330
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
300
全社を巻き込んだコーポレートバリューの再定義に関するデザイナーの関わり方
sugiyama_sukedachi
0
170
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
360
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
2
710
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
41
12k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
258
12k
Designing the Hi-DPI Web
ddemaree
276
33k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
Scaling GitHub
holman
457
140k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Teambox: Starting and Learning
jrom
128
8.4k
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 以上 ご清聴ありがとう ございました