Span and Div Udacity Japanese English

Span and DivYouTube↗ IA↗(long shot)
Education 50.3K views 27 likes 1 dislikes 23 Feb 2015

Udacity 651K subscribers United States YouTube↗

もう二つエレメントを紹介しましょう。

Two more elements I'd like to teach you.

spanとdivです。

These are called span and div.

spanとdivはどちらも普通のエレメントです。

Span and div are both normal elements.

どちらもコンテンツを持ちます。

They can both have content.

二つの違いはspanがインラインでdivがブロックだということです。

And the only difference between these two is, span is inline, and div is block.

すこし実験してみましょう。

We'll play around with these in the editor a little bit,

これらはコンテンツを含む以外の動作をしないので

but these elements don't do anything other than just contain their content.

動作の違いをお見せするために

And there's a way to attach styles to them,

少しスタイルを追加する必要があります。

to adjust different behaviors of how they display.

こんな感じです。

That looks something like this.

属性を追加しました。

So you can see I've added two attributes, or

クラスです。

an attribute to each of these called class.

これはCSSを定義しています。

And this is a CSS class, and this is not something we're going to

CSSのレッスンではないので、CSSは提供します。

spend a whole lot of time on in this course, I'll provide most of the CSS.

CSSは文書を装飾したり

But it's a separate language for adding styles to your documents or

テキストの見え方を変更したりする言語です。

changing the, changing how different text looks.

そしてspanやdivは

And we'll be using spans and

テキストのレイアウトを制御するためによく使います。

divs a lot for, you know, controlling how text is laid out.

重要なことはspanはインラインでdivはブロックだということです。

But the important thing to remember is that spans are inline and divs are block.

これをブラウザで実験してみます。

Let's play around with these in the browser a little bit real quick so

私の説明の意味がわかるでしょう。

you can see what I'm talking about.

ここにテキストがあります。

Okay, so we've got our text.

spanタグに含まれています。

And my first line is wrapped in span, and it behaves as,

思った通り１行で表示されました。

as we would expect an inline element to behave.

これをdivに変えたらどうでしょう。

Now if I were to change the span to a div,

paragraphタグのように動作しますね。

it behaves more like how the paragraph tag before behaved.

divはこのようにテキストの周りにボックスを作ります。

This div is actually this, creates a box around this piece of text and

divタグの後ろ、ここにピリオドを追加していますが

you can see my, we actually did something interesting, I added a little period

ピリオドは２行目のここに表示されます。

after the div and the period appears down on the second line here.

ではクイズです。インラインの要素を選んでください。

What I'd like you to do is check all the elements that are inline.

みたことがないものもあるかもしれません。

Some of these elements you haven't seen before.

ブラウザを使って自身の手で

So I would like you to try them out in your own browser and

動作を確認し理解してみてください。

figure it out for yourself.

Similar videos:

Locking and Memcache - Web Development
Udacity
5.6K views 16 likes 0 dislikes 27 May 2012100% match

Making Links
Udacity
53.9K views 21 likes 0 dislikes 23 Feb 2015100% match

HTML Basics
Udacity
16.5K views 75 likes 2 dislikes 16 Jul 2014100% match

Inline Vs Block
Udacity
17.3K views 139 likes 5 dislikes 23 Feb 2015100% match

Telnet Request - Web Development
Udacity
8.2K views 2 likes 0 dislikes 23 Feb 2015100% match

Components of the Web Solution - Web Development
Udacity
9.6K views 19 likes 0 dislikes 23 Feb 2015100% match

Whitespace
Udacity
47.8K views 26 likes 4 dislikes 23 Feb 2015100% match

Scaling Databases - Web Development
Udacity
64.3K views 795 likes 7 dislikes 25 Apr 2012100% match

Submitting Input - Web Development
Udacity
6.8K views 5 likes 0 dislikes 22 Apr 2012100% match

The Method Attribute - Web Development
Udacity
5.8K views 3 likes 0 dislikes 22 Apr 2012100% match

Most Common Method - Web Development
Udacity
9.7K views 5 likes 0 dislikes 23 Feb 2015100% match

Paragraph Tag - Web Development
Udacity
8.6K views 4 likes 0 dislikes 23 Feb 2015100% match

Shopping List Take 1 - Web Development
Udacity
841 views 1 likes 0 dislikes 23 Feb 2015100% match

HTTP Responses - Web Development
Udacity
5.5K views 19 likes 0 dislikes 23 Feb 2015100% match

Making Links Solution - Web Development
Udacity
5.6K views 5 likes 0 dislikes 23 Feb 2015100% match

Bold Tag Solution - Web Development
Udacity
6.1K views 5 likes 0 dislikes 23 Feb 2015100% match

Components of the Web
Udacity
28K views 54 likes 0 dislikes 23 Feb 2015100% match

Adding Images
Udacity
12.9K views 36 likes 0 dislikes 23 Feb 2015100% match

File Types
Udacity
34.4K views 11 likes 3 dislikes 23 Feb 2015100% match

Missing End Tag Solution - Web Development
Udacity
22.8K views 7 likes 0 dislikes 23 Feb 2015100% match

Ad Networks - Web Development
Udacity
6.7K views 27 likes 3 dislikes 23 Feb 2015100% match

User Input - Web Development
Udacity
7.7K views 3 likes 0 dislikes 22 Apr 2012100% match

Part 2 - Web Development
Udacity
643 views 2 likes 0 dislikes 07 May 2012100% match

Caching Techniques - Web Development
Udacity
34.4K views 216 likes 7 dislikes 23 Feb 2015100% match

Rainbow Tables - Web Development
Udacity
5.6K views 41 likes 12 dislikes 23 Feb 2015100% match

World Wide Web Solution - Web Development
Udacity
12.6K views 14 likes 0 dislikes 23 Feb 2015100% match

The Action Attribute - Web Development
Udacity
7.5K views 7 likes 0 dislikes 22 Apr 2012100% match

Document Structure
Udacity
7.2K views 24 likes 1 dislikes 23 Feb 2015100% match

Frameworks - Web Development
Udacity
28.7K views 154 likes 25 dislikes 23 Feb 2015100% match

Security - Web Development
Udacity
5.7K views 64 likes 0 dislikes 23 May 2012100% match