Indentation is your friend Now is a good time to quickly mention

1 ■ Indentation is your friend
2 Now is a good time to quickly mention indentation—that is, the amount
each line is spaced in from the margin. You'll notice that when we place
tags inside of other tags, we indent them more. This really helps make
your code more readable!
3
4 Check out our indentation in the editor to the right. Try to follow this
indentation style when you're writing HTML so you don't get confused.
5
6
7 □ Instructions
8 Hit Save & Submit Code to continue.
9
10
11
12 ○単語・熟語・文型
13 indentation
14
字下げ、インデント（⾏の先頭にある空⽩）
15
16 —
17
ダッシュ　・・・　節と節をダッシュでつなぐと、後の節が前の節を強調あるいは詳説
18
する。ダッシュは少しくだけた表現である
19
20 margin
21
上下左右の、印刷されたりタイプできない空白のこと.　マージン.
22
23 -(Now)- +(is)+ =([a good time] <to quickly mention
indentation])=—-(that)- +(is)+, =(the amount each line is spaced in
from the margin)=.
24
=(the amount each line is spaced in from the margin)=
25
:　-(the amount each line)- +(is spaced)+ (in) (from the
26
margin)
27
:　ふちにある元々の空⽩の部分はのぞいて、その内側の中にある⾏
28
のかたまりに対して、先頭に空白を付けること　が、文全体でいいたい
29
こと.
30
:　in は、副詞で、その空白(マージン)「より中に」.
31
:　space　・・・　(他動詞)空白を作る
32
33
/ ここでは受け身なので、「空白が作られます」.
,
34
:　単に読むときに、ちょっとリズム的に空白時間を作りたいからだと思う。
35
ちょっと一息入れる感じ。自分も日本語で、よくやるような気がする。
36
37 notice
38
(他動詞)〜に気づく
39
40
41
42 ○説明&補足
43 ■ Indentation is your friend
44
インデントしてみよう！
45
46 インデントをざっと説明するのに、今がグッドタイミングです。
47 元々ある4隅の空白の縁（マージン）より中側で、ある⾏のかたまりに対して、先頭部分に
空白を作ることが、インデント(indentation)です。
48
*インデントは、「字下げ」とも言います。
49
50 私たちが、あるタグに対して、内側にタグを置く時（ネストする時）、インデントを⾏います。
51 なぜなら、とても⾒やすくなるからです。
52
*必ずするというルールではない、、例えば、<html>の後の<head>に対して、
53
インデントは慣れてきたら、しなくなるかも。いつものパータンなので、ここでスペース
54
を節約しておきたいから。（なるべく⾏が折り返されないほうが⾒やすいので、、こ
55
こはあまり重要ではないので、僕の説明下手でよくわからない時は気にしないでく
56
ださい。）
57 ===　例　==================================
58 <あ>
59
<い>・・・</い>
60
<う>・・・</う>
61
<え>・・・</え>
62 </あ>
63
64
*<い>,<う>,<え>タグの前が、インデント(字下げ)されています。
65
*インデントには、全角空白文字は使わない。
66
/ Javascriptなどでは、致命的なバグ.
67
/ 半角空白文字あるいは Tabキーを使いましょう.
68 ========================================
69
70 index.htmlのコードで、インデントを確認しましょう！
71 これで、コードがすっきり、ですね。
72 ========================================
73 <!DOCTYPE html>
74 <html>
75
<head>
76
<title>theTitle</title>
77
</head>
78
<body>
79
80
<p>肩慣らし</p>
</body>
81 </html>
82
83 *<html>に対しての<head>、<head>に対しての<title>などなど.
84 ========================================
85
86
87 Instructions:　あなたへのミッション
88 [Save & Submit Code]ボタンのクリックで、次のセクションへ⾏きましょう。
89
90
91 [TheEnd:　このセクションここまで]
92

Download Report