HTML・CSS講座の参考資料

始める前に

まず、HTMLやCSSは、Webサイト等を作成する際に使用する言語です。AppleやYahoo!のサイトにもそれらは使われています。

昨今はSNSの普及により、わざわざホームページを作らなくても情報発信を行う機会はありますが、「自前のチャンネル」を作る感覚に魅力を感じる方もいらっしゃるのではないのでしょうか。

今回は、本講座のまとめとして自己紹介ページを1人ずつ作成して頂き、電工研のWebサイトにて全員公開させて頂きます!

練習用データの準備

お手数ですが、以下のリンクからHTMLやCSSを記述する雛形となる練習用データをダウンロードして下さい。ダウンロード時に警告が表示される場合がありますが、「継続」を選択して下さい。

練習用データのzipファイルをダウンロードしたら、それを展開してフォルダを保存して下さい。場所はどちらでも構いません。そして、Visual Studioを起動したら「ファイル」タブ→「フォルダーを開く」とクリックして下さい。すると、ウィンドウが表示されますので、展開後保存した練習用データのフォルダをクリックし(開きはしないで下さい)、ウィンドウの右下にある「フォルダーの選択」をクリックして下さい。

事前に準備して頂いた画像は、「練習用データ」フォルダ内に入れておいて下さい。

HTML・CSSとは

Webページを構成するファイルのうち、HTMLファイルが中心となるファイルで、HTMLという言語でWebページの内容を記述します。

しかし、HTMLだけでは単なる文字の羅列が表示されるだけで、それらのレイアウトを整えたり、装飾したりする事は出来ません。そこで登場するのがCSSで、HTMLの内容の表示を見やすくレイアウトを整えたり、装飾したりします。

他にも、Webページには画像ファイルやPDFファイル等も含まれています。

見出し(HTML文法の例示)

HTMLで見出しをつける場合、以下の様にします。

<h1>と</h1>は「タグ」といい、タグの間にある内容にその性質を与えます。<h1>と</h1>の場合は、「見出し」という性質を与え、通常より文字が大きく表示されます。尚、<と>は半角です。

HTMLタグリファレンスのリンク

• <h1>-<h6> …… 見出しを付ける
• <p> …… 文を表示する
• <img> …… 画像を表示する
• <ul> …… 順序のないリストを表示する
• <title> …… 文書にタイトルをつける

文字を中央揃えにする(CSS文法の例示)

CSSは、HTMLの表示のレイアウトを整えたり、装飾したりします。

CSSは通常CSS専用のファイルに書きますが、今回はHTMLのファイルの一部間借りしてCSSを書きます。

まず、h1タグで表示している見出しを中央揃えにしてみます。h1タグの部分を以下の様に変更して下さい。

これは、<h1>の中に「style=""」を追加し、ダブルクォーテーション内にCSSを書く方法を使っています。

h1タグはデフォルトで左揃えです。しかし、h1タグにおける「text-align」という揃え方のプロパティを「center」(=中央)という値にすることで、左揃えから中央揃えに変更されたのです。プロパティと値の間にはコロン(:)が、末端にはセミコロン(;)が必要です。

上の例は一見分かりやすいですが、多くの箇所のレイアウトをまとめてしていする場合には不向きです。CSSは「まとめて指定できる」事が特徴なので、以下のような書き方を推奨します。ですから、先程の変更はCtrl+Z(Win)やCommand+Z(Mac)で操作を戻して無かった事にして下さい。

では、気を取り直して<style>と</style>の間に以下の様に追加して下さい。

先程と同様に見出しが中央揃えになったのではないかと思います。

<style>と</style>は、それらの間にCSSを書くことを示しています。「text-align: center;」は先程と変わりませんが、そもそも見出しを表示するHTMLとそれを中央揃えにするためのCSSが離れています。

そこで、HTMLとCSSを結び付けているのが、styleタグ内の「h1 {」と「}」の部分です。これは、HTML内のh1タグ全てに{}内のCSSを適用する事を表しています。ですから、HTML内に複数h1タグがあった場合、それらすべてが中央揃えになります。ちなみに、CSS内の「h1」はCSSを適用したいHTML内の要素を選択しているので「セレクタ」といいます。

以下の画像でおさらいしましょう。

文字色を変える(CSS文法の例示2)

ここでは、3段落の文章をpタグで作り、そのうち2つの段落の文字色を変えます。

見出しを中央揃えにする際は、セレクタを「h1」する事で、HTML内のh1タグにCSSを適用していました。

しかし、今回のセレクタは「h1」や「p」といったタグではありません。「.red」がセレクタになっています。そして、HTMLの方に目を移すと、<p>内に「class="red"」を追加している所が2箇所あります。これにより、それら2つのpタグに「red」という名前のラベルが登録されます。ですから、セレクタを「.red」とすることでラベルの名前を用いてCSSとHTMLをリンクさせることが出来ます。尚、「class="red"」と登録したはずなのに、セレクタでは「.red」となり「.」が付いています。これはタグ名で指定した場合などと区別するためにセレクタの先頭に付けるもので、ラベル名をセレクタにする際は必要です。

そして、redというラベルの付いたpタグの「color」という文字色のプロパティを「red」(赤)に変更しています。

以下の画像でおさらいしましょう。

注) 説明上「ラベル」という単語を連呼していますが、その正式名称は「クラス」です。

自己紹介ページについて

名前は実名でもTwitter上での名前でも構いません。

完成したら、画像とindex.htmlが含まれているフォルダを、自分の名字にフォルダ名を変更してから、以下のGoogleドライブのフォルダにアップロードして下さい。尚、フォルダ名の名字は集める際の都合によるもので、公開は致しません。

プライバシーや著作権等において問題が無ければ、電工研のWebサイト(khec.ml)に公開致します。

まだページが未完成の方や、あとで修正したくなった場合は、田邉にご連絡下さい。