-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhtml-text-noncss.html
171 lines (156 loc) · 13.2 KB
/
html-text-noncss.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
<!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"> -->
</head>
<body>
<script src="js/header.js"></script>
<article class="wrapper" id="html-text">
<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を起動したら「ファイル」タブ→「フォルダーを開く」とクリックして下さい。すると、ウィンドウが表示されますので、展開後保存した練習用データのフォルダをクリックし(開きはしないで下さい)、ウィンドウの右下にある「フォルダーの選択」をクリックして下さい。
</p>
<p>事前に準備して頂いた画像は、「練習用データ」フォルダ内に入れておいて下さい。</p>
<h3 class="sub-title">HTML・CSSとは</h3>
<p>Webページを構成するファイルのうち、HTMLファイルが中心となるファイルで、HTMLという言語でWebページの内容を記述します。</p>
<p>しかし、HTMLだけでは単なる文字の羅列が表示されるだけで、それらのレイアウトを整えたり、装飾したりする事は出来ません。そこで登場するのがCSSで、HTMLの内容の表示を見やすくレイアウトを整えたり、装飾したりします。
</p>
<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">自己紹介ページについて</h3>
<p>名前は実名でもTwitter上での名前でも構いません。</p>
<p>完成したら、画像とindex.htmlが含まれているフォルダを、自分の名字にフォルダ名を変更してから、以下のGoogleドライブのフォルダにアップロードして下さい。尚、フォルダ名の名字は集める際の都合によるもので、公開は致しません。
</p>
<a href="https://drive.google.com/drive/u/0/folders/1ZBU2GsJZXMG24AazYybC0GAGKgBIBcFk"
target="_blank">提出用フォルダ</a>
<p>プライバシーや著作権等において問題が無ければ、電工研のWebサイト(khec.ml)に公開致します。</p>
<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>