Inline Vs Block Udacity Japanese English

Inline Vs BlockYouTube↗ IA↗(long shot)
Education 17.3K views 139 likes 5 dislikes 23 Feb 2015

Udacity 651K subscribers United States YouTube↗

Click to Play Video

最後にとについてもう1つお話します

One last thing I'd like to talk about with br and p, I'll show you right now. Let's let's make this all be

もう一度これを1行にして UPDATEボタンを押すと表示も1行ですね

one line again, okay? So I update this and we have

は文の途中に挿入することができます

one line. If we, we can put a br tag in the

HTML上で文を改行する必要はありません UPDATEボタンを押すとHTML上の表示とは関係なく文は改行して表示されます

middle of this. We don't actually have to have the line breaks in our HTML. So when I click Update, we, we get our, our line break no matter how the HTML is formatted. So,

実はこのようにたくさんスペースを入れても

we can format this however we want, put all of these spaces

レンダリング後の表示はまったく同じになります

in here. And when we update this, it'll always come out the

つまりこれらのスペースは 1つのスペースに変換されるのです

same. There's an example. All this white space turns into turns into one single

新しく行をいくら追加しても 1つのスペースに変換されます

space. All of these new lines here, turn into one

この部分全体が1つのスペースになっています分かりますよね複数の行を作る方法がなぜ2通りあるのか?

single space. You know, this text space is really, you know, you get the idea. Okay. Why do we have two different ways of making

なぜとがあるのか?

new lines? Why do we have a br tag and a

その理由はがインライン要素と呼ばれるもので

p tag? The answer is because the br tag is what

がブロック要素と呼ばれるものだからです

we call inline, and the p tag, is what we call

の役割は単に行を終わらせることだけですつまりテキストの途中にを挿入すると

block. Now, so what the br tag was actually doing was just ending a line. So when we have some text and we put a br in the middle of it, it just

ここで行が終わって残りは次の行であることを示します

basically says the line ends here and this guy wraps to

の役割はそれとは異なり目に見えない箱を作るようなものですなのでHTMLでこのように記述すると

the next line. The p tag works differently. The p tag actually makes an invisible box. So when we have HTML

見えない箱を作り出します

looks like this, this creates an actual box. So instead

なので単にテキストと空行を作るのではなく

of just rendering text, blank line, what this is actually

イメージとしてはこのようになります

rendering is something sort of like this. Here, we've got

この2行のテキストの間に見えない箱が存在するのです

two lines of text and there's actually this invisible box

この見えない箱を作り出すのがの役割ということになります

around text. And that's what the p tag does, is it makes this invisible box. And this invisible box can

この箱は幅と高さを指定することができます

actually have height, and it can have width, where inline elements

それに対してインライン要素は単なるテキストで

are just text. So the example over here would be

2行あるテキストの間に新しい行を作るだけで何も特別なことは起こりません

more like this. So it's just two lines of text and there's really just a little new line here. There's nothing nothing

インライン要素とブロック要素の違いは

fancy going on. And the difference between inline and block elements

今後のレッスンでかなり登場します

will come up a fair amount later in this course

ですのでタグにはこの2つの区別があり

and it's just it's important to know that there's a distinction

振る舞いが異なることを理解しておいてください

and they have kind of a different behavior. So far, all

今までに紹介した要素はすべてインライン要素です

of the elements we've learned other than p are inline elements.

<b>もももインライン要素です</b>

So, inline elements are b, em, even img is

シマリスの画像はテキストの途中に表示されましたよね

an inline element. And we saw how, before, our our little Hipmunk image appeared

それはがインライン要素だからです

right in the middle of the text. That's because it's inline. And

これまででブロック要素だったのはだけです

so far, the only block element we've learned is the p element.

Similar videos:

Problems with Memcachedb - Web Development
Udacity
6K views 13 likes 0 dislikes 27 May 2012100% match

Port - Web Development
Udacity
15.8K views 18 likes 0 dislikes 23 Feb 2015100% match

Making Requests - Web Development
Udacity
5.8K views 10 likes 0 dislikes 23 Feb 2015100% match

Content Type - Web Development
Udacity
7.5K views 5 likes 1 dislikes 22 Apr 2012100% match

The Method Attribute - Web Development
Udacity
9.6K views 14 likes 8 dislikes 22 Apr 2012100% match

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

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

Install Google App Engine
Udacity
7.1K views 40 likes 48 dislikes 17 Apr 2012100% match

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

Precomputed Caching - Web Development
Udacity
12.2K views 80 likes 0 dislikes 27 May 2012100% match

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

Response Headers - Web Development
Udacity
6.4K views 21 likes 4 dislikes 23 Feb 2015100% match

Span and Div Solution - Web Development
Udacity
17.4K views 7 likes 0 dislikes 23 Feb 2015100% match

Cookie Examples - Web Development
Udacity
5.4K views 29 likes 2 dislikes 23 Feb 2015100% match

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

World Wide Web - Web Development
Udacity
37.9K views 40 likes 1 dislikes 23 Feb 2015100% match

App Server Architecture - Web Development
Udacity
14K views 52 likes 5 dislikes 27 May 2012100% match

Query Parameters - Web Development
Udacity
22.6K views 78 likes 3 dislikes 23 Feb 2015100% 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

Span and Div
Udacity
50.3K views 27 likes 1 dislikes 23 Feb 2015100% match

Google App Engine - Web Development
Udacity
10.1K views 13 likes 3 dislikes 17 Apr 2012100% match

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

File Types Solution - Web Development
Udacity
9.9K views 9 likes 0 dislikes 23 Feb 2015100% match

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

Cookie Domains - Web Development
Udacity
5.1K views 22 likes 0 dislikes 23 Feb 2015100% match

App Server Scaling - Web Development
Udacity
28.2K views 277 likes 8 dislikes 23 Feb 2015100% match

Datastore Types Solution - Web Development
Udacity
656 views 1 likes 0 dislikes 25 Apr 2012100% match

Introducing URLs - Web Development
Udacity
7.1K views 21 likes 0 dislikes 23 Feb 2015100% match

URL Encoding - Web Development
Udacity
13.7K views 17 likes 13 dislikes 22 Apr 2012100% match

Settings Privacy About Contact Donate