-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhtml-text.html
212 lines (194 loc) · 15.6 KB
/
html-text.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>慶應高校電子工学研究会</title>
<meta name="description" content="慶應高校電子工学研究会公式サイト。新入生へ、私達について、Arduinoレファレンス、作品、技術資料、活動記録、外部リンク。">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- OGP設定 -->
<meta property="og:url" content="http://khec.ml/index.html">
<meta property="og:type" content="website">
<meta property="og:title" content="慶應高校電子工学研究会『HTML・CSS講座』参考資料">
<meta property="og:description" content="慶應高校電子工学研究会内で実施した『HTML・CSS講座』にて使用したテキストです。">
<meta property="og:image" content="/images/logo.png">
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-172973845-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-172973845-1');
</script>
</head>
<body>
<script src="js/header.js"></script>
<article class="wrapper" id="html-text" onclick="">
<h2 class="page-title">HTML・CSS講座の参考資料</h2>
<h3 class="sub-title">始める前に</h3>
<p>まず、HTMLやCSSは、Webサイト等を作成する際に使用する言語です。AppleやYahoo!のサイトにもそれらは使われています。</p>
<p>昨今はSNSの普及により、わざわざホームページを作らなくても情報発信を行う機会はありますが、「自前のチャンネル」を作る感覚に魅力を感じる方もいらっしゃるのではないのでしょうか。</p>
<p>今回は、本講座のまとめとして自己紹介ページを1人ずつ作成して頂き、電工研のWebサイトにて全員公開させて頂きます!</p>
<h3 class="sub-title">練習用データの準備</h3>
<p>お手数ですが、以下のリンクからHTMLやCSSを記述する雛形となる練習用データをダウンロードして下さい。</p>
<a href="zip/練習用データ.zip" download="練習用データ">練習用データをダウンロードする</a>
<p>練習用データのzipファイルをダウンロードしたら、それを展開してフォルダを保存して下さい。警告が表示された場合は、「継続」をクリックしてください。保存場所はどちらでも構いません。そして、Visual
Studio
Codeを起動したら「ファイル」タブ→「フォルダーを開く」とクリックして下さい。すると、ウィンドウが表示されますので、展開後保存した練習用データのフォルダをクリックし(開きはしないで下さい)、ウィンドウの右下にある「フォルダーの選択」をクリックして下さい。
</p>
<p>事前に準備して頂いた画像は、「練習用データ」フォルダ内に入れておいて下さい。</p>
<h3 class="sub-title">HTML・CSSとは</h3>
<p>Webページを構成するファイルのうち、HTMLファイルが中心となるファイルで、HTMLという言語でWebページの内容を記述します。</p>
<p>しかし、HTMLだけでは単なる文字の羅列が表示されるだけで、それらのレイアウトを整えたり、装飾したりする事は出来ません。そこで登場するのがCSSで、HTMLの内容の表示を見やすくレイアウトを整えたり、装飾したりします。
</p>
<p>もしこのWebページにCSSが適用されなかった場合以下のリンク先の様になります。</p>
<a href="html-text-noncss.html" target="_blank">CSSがない場合のこのWebページ</a>
<p>他にも、Webページには画像ファイルやPDFファイル等も含まれています。</p>
<h3 class="sub-title">見出し(HTML文法の例示)</h3>
<p>HTMLで見出しをつける場合、以下の様にします。
</p>
<div class="envelope-red">
<small>HTML: </small>
<p><h1>見出し</h1></p>
</div>
<div class="envelope-blue">
<small>表示: </small>
<h1>見出し</h1>
</div>
<small>注) 表示されるフォントは環境により異なります。</small>
<p><h1>と</h1>は「<span
class="red">タグ</span>」といい、タグの間にある内容にその性質を与えます。<h1>と</h1>の場合は、「見出し」という性質を与え、通常より文字が大きく表示されます。尚、<と>は半角です。
</p>
<h3 class="sub-title">HTMLタグリファレンスのリンク</h3>
<ul>
<li><a href="http://www.htmq.com/html5/h.shtml" target="_blank"><h1>-<h6> …… 見出しを付ける</a>
</li>
<li><a href="http://www.htmq.com/html5/p.shtml" target="_blank"><p> …… 文を表示する</a></li>
<li><a href="http://www.htmq.com/html5/img.shtml" target="_blank"><img> …… 画像を表示する</a></li>
<li><a href="http://www.htmq.com/html5/ul.shtml" target="_blank"><ul> …… 順序のないリストを表示する</a></li>
<li><a href="http://www.htmq.com/html5/title.shtml" target="_blank"><title> …… 文書にタイトルをつける</a>
</li>
</ul>
<h3 class="sub-title">文字を中央揃えにする(CSS文法の例示)</h3>
<p>CSSは、HTMLの表示のレイアウトを整えたり、装飾したりします。</p>
<p>CSSは通常CSS専用のファイルに書きますが、今回はHTMLのファイルの一部間借りしてCSSを書きます。</p>
<p>まず、h1タグで表示している見出しを中央揃えにしてみます。h1タグの部分を以下の様に変更して下さい。</p>
<div class="envelope-red">
<small>変更前: </small>
<p><h1>見出し</h1></p>
<small>変更後: </small>
<p><h1 <span class="red">style="text-align: center;"</span>>見出し</h1></p>
</div>
<div class="envelope-blue">
<small>変更前の表示: </small>
<h1>見出し</h1>
<small>変更後の表示: </small>
<h1 style="text-align: center;">見出し</h1>
</div>
<p>これは、<h1>の中に「style=""」を追加し、ダブルクォーテーション内にCSSを書く方法を使っています。</p>
<p>h1タグはデフォルトで左揃えです。しかし、h1タグにおける「text-align」という揃え方のプロパティを「center」(=中央)という値にすることで、左揃えから中央揃えに変更されたのです。プロパティと値の間にはコロン(:)が、末端にはセミコロン(;)が必要です。
</p>
<p>上の例は一見分かりやすいですが、多くの箇所のレイアウトをまとめてしていする場合には不向きです。CSSは「まとめて指定できる」事が特徴なので、以下のような書き方を推奨します。ですから、先程の変更はCtrl+Z(Win)やCommand+Z(Mac)で操作を戻して無かった事にして下さい。
</p>
<p>では、気を取り直して<style>と</style>の間に以下の様に追加して下さい。</p>
<div class="envelope-red">
<small>CSS: </small>
<p><style></p>
<p class="indent-1">h1 {</p>
<p class="indent-2">text-align: center;</p>
<p class="indent-1">}</p>
<p></style></p>
</div>
<div class="envelope-blue">
<small>変更前の表示: </small>
<h1>見出し</h1>
<small>変更後の表示: </small>
<h1 style="text-align: center;">見出し</h1>
</div>
<p>先程と同様に見出しが中央揃えになったのではないかと思います。</p>
<p><style>と</style>は、それらの間にCSSを書くことを示しています。「text-align:
center;」は先程と変わりませんが、そもそも見出しを表示するHTMLとそれを中央揃えにするためのCSSが離れています。</p>
<p>そこで、HTMLとCSSを結び付けているのが、styleタグ内の「h1
{」と「}」の部分です。これは、HTML内のh1タグ全てに{}内のCSSを適用する事を表しています。ですから、HTML内に複数h1タグがあった場合、それらすべてが中央揃えになります。ちなみに、CSS内の「h1」はCSSを適用したいHTML内の要素を選択しているので「セレクタ」といいます。
</p>
<p>以下の画像でおさらいしましょう。</p>
<img src="images\css-explanation.png" width="50%">
<h3 class="sub-title">文字色を変える(CSS文法の例示2)</h3>
<p>ここでは、3段落の文章をpタグで作り、そのうち2つの段落の文字色を変えます。</p>
<div class="envelope-red">
<small>HTML: </small>
<p><p class="red">色を変えたい段落<p></p>
<p><p>色を変えたくない段落<p></p>
<p><p class="red">色を変えたい段落<p></p>
<small>CSS: </small>
<p><style></p>
<p class="indent-1">.red {</p>
<p class="indent-2">color: red;</p>
<p class="indent-1">}</p>
<p></style></p>
</div>
<div class="envelope-blue">
<small>表示: </small>
<p class="red">色を変えたい段落</p>
<p>色を変えたくない段落</p>
<p class="red">色を変えたい段落</p>
</div>
<p>見出しを中央揃えにする際は、セレクタを「h1」する事で、HTML内のh1タグにCSSを適用していました。</p>
<p>しかし、今回のセレクタは「h1」や「p」といったタグではありません。「.red」がセレクタになっています。そして、HTMLの方に目を移すと、<p>内に「class="red"」を追加している所が2箇所あります。これにより、それら2つのpタグに「red」という名前のラベルが登録されます。ですから、セレクタを「.red」とすることでラベルの名前を用いてCSSとHTMLをリンクさせることが出来ます。尚、「class="red"」と登録したはずなのに、セレクタでは「.red」となり「.」が付いています。これはタグ名で指定した場合などと区別するためにセレクタの先頭に付けるもので、ラベル名をセレクタにする際は必要です。
</p>
<p>そして、redというラベルの付いたpタグの「color」という文字色のプロパティを「red」(赤)に変更しています。</p>
<p>以下の画像でおさらいしましょう。</p>
<img src="images\css-explanation - 2.png" width="50%">
<p>注) 説明上「ラベル」という単語を連呼していますが、その正式名称は「クラス」です。</p>
<h3 class="sub-title">CSSプロパティリファレンスのリンク</h3>
<ul>
<li><a href="http://www.htmq.com/style/text-align.shtml" target="_blank">text-align …… 行の揃え位置を決める</a>
</li>
<li><a href="http://www.htmq.com/style/color.shtml" target="_blank">color …… 文字色（前景色）を指定する</a></li>
<li><a href="http://www.htmq.com/style/background.shtml" target="_blank">background ……
背景に関する指定をまとめて行う</a></li>
<li><a href="http://www.htmq.com/style/border.shtml" target="_blank">border …… ボーダーのスタイル・太さ・色を指定する</a>
</li>
<li><a href="http://www.htmq.com/style/padding.shtml" target="_blank">padding ……
パディング(余白)に関する指定をまとめて行う</a></li>
<li><a href="http://www.htmq.com/style/margin.shtml" target="_blank">margin …… マージン(余白)に関する指定をまとめて行う</a>
</li>
</ul>
<h3 class="sub-title">自己紹介ページについて</h3>
<p>以下の内容を必ず含めてください。</p>
<ul>
<li>ニックネーム(実名可)</li>
<li>写真(自画像可)</li>
<li>役職</li>
<li>班</li>
<li>以前作った作品</li>
<li>電工研に入った理由</li>
</ul>
<p>その他、好きなプログラミング言語等、ご自由に記してください。電工研に関係無くても構いません。</p>
<p>名前は実名でもTwitter上での名前でも構いません。</p>
<p>完成したら、画像とindex.htmlが含まれているフォルダを、自分の名字にフォルダ名を変更してから、以下のGoogleドライブのフォルダにアップロードして下さい。尚、フォルダ名の名字は集める際の都合によるもので、公開は致しません。
</p>
<a href="https://drive.google.com/drive/u/0/folders/1ZBU2GsJZXMG24AazYybC0GAGKgBIBcFk"
target="_blank">提出用フォルダ</a>
<p>プライバシーや著作権等において問題が無ければ、電工研のWebサイトに公開致します。</p>
<a href="members.html">お作り頂いた自己紹介ページのリンクを列挙する予定のページ</a>
<p>まだページが未完成の方や、あとで修正したくなった場合は、田邉にご連絡下さい。</p>
</article>
<script src="js/footer.js"></script>
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/stickyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.3/ofi.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script src="js/script.js"></script>
<!-- IE対応 -->
<script>
var elem = document.querySelectorAll('.sticky');
Stickyfill.add(elem);
</script>
</body>
</html>