Lecture Notes

HTML/CSS Lesson 3

CSSファイルを作る

HTMLでコーディングしたタグの見栄えを自分でコントロールできるように「スタイルシート」を作ってみましょう。

フォルダを分けたいので、Lesson_03フォルダを作成してその中に「sample_03.html」として別名保存して進めます。

現在のHTMLファイルの状態です。

Bracketsで新規ファイルを作成します。ファイルメニューから「新規作成」を選択します。続いてファイルメニューから「保存」を選択します。「Lesson_03」フォルダの中に「sample.css」と名前を付けて保存します。

カラーのCSSプロパティを設定する

作成したCSSファイルにプロパティを設定しましょう。HTMLファイルにあるh1〜h6及びpタグにカラーを設定してみます。色は何でも構わないので記述しましょう。

ライブプレビューで確認します。

さまざまなCSSプロパティを設定する

仕組みが分かってきたら、他のCSSプロパティを設定します。

  • font-size 文字サイズ(pxや%で指定する)
  • text-align 行揃え(left、center、right、justify)
  • font-family 書体(serif、sans-serif)
  • text-indent 1行目の字下げ(emやpx、%)
  • margin エリアの外側への余白(pxや%)
  • padding エリアの内側への余白(pxや%)
  • background-color 背景色(Webセーフティーカラーなど)

ライブプレビューで確認します。

classの指定

同じタグを設定していても、段落毎にスタイル設定を変えたい場合があります。HTMLファイル内でpタグを設定している段落が複数ありますが、段落毎にスタイルを変えたいと思います。そんな場合に利用するのがclassです。

<p class=”normal”>〜</p>
<p class=”non”>〜</p>

上記のようにclassでnormalとnonに分けることで、別々のスタイルを指定することができます。

 

次にclassに対してのプロパティを指定します。CSSセレクタでは「 .」ピリオドを頭に付けることでclassへのセレクタになります。

 

ライブプレビューで確認してみます。

画像を挿入する

Webページに写真を入れてみましょう。まずは、使用する画像ファイルをLesson_03のフォルにに入れます。使用できるファイル形式は、JPEG、GIF、PING形式です。ファイル名に日本語は使えないので、半角英数字で付けておきます。下の例では「photo.jpg」にしています。

まず、HTMLファイルに画像を挿入するためにimgタグを記述します。

<img src=”photo.jpg” alt=”猫の写真” >
imgが画像を挿入するためのタグ、src属性で画像の場所のファイル名を指定、alt属性では画像が表示されなかった場合の代替テキストを指定します。

上記のHTMLだけでも画像は表示されますが、サイズや位置などをコントロールするためにCSSプロパティで制御しましょう。

widthプロパティで画像の幅を記述します。

floatプロパティを使えば、画像へのテキスト回り込みが設定できます。

ライブプレビューで確認します。

図版にキャプションを設定する

写真の下側にキャプションを付けてみましょう。

図版には写真とキャプションが必要になりますが、全体をfigureタグで囲んで、その中にimgで画像を挿入します。画像の下にfigcaptionタグでキャプション文を入れます。

CSSでfigureタグ、imgタグ、figcaptionタグのプロパティを設定します。figureタグとimgタグはclass指定をしているので、CSSセレクタはclassで設定します。

ライブプレビューで確認します。

Pocket
LINEで送る

Return Top