ハンデプログラマー

障害者の方のためのプログラミング教室です。目指せ自立!!

トップ > HTML/CSS入門 > スタイルシートの基本(画像)

スタイルシートの基本(画像)

1、テラパッドを開きファイルを新規作成します。

2、下記のようにプログラムを打ち込みます。

@charset "UTF-8";

body{
background:#ffffff;
}

.img1{
width:200px;
height:200px;
}

.img2{
width:100%;
}

.img3{
width:50%;
}

.img4{
max-width:100%;
}

.img5{
display:block;
margin-left:auto;
margin-right:auto;
}

3、HTMLと同じフォルダに「style5.css」というファイル名で保存します。

4、テラパッドを開きファイルを新規作成します。

2、下記のようにプログラムを記述します。

<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="style5.css">
</head>
<body>

<p>
<img src="images/logotest.jpg" class="img1">
</p>

<p>
<img src="images/logotest.jpg" class="img2">
</p>

<p>
<img src="images/logotest.jpg" class="img3">
</p>

<p>
<img src="images/logotest.jpg" class="img4">
</p>

<p>
<img src="images/logotest.jpg" class="img5">
</p>

</body>
</html>

3、このファイルをHTML形式で保存します。

4、HTMLファイルをダブルクリックして開きます。
テスト5表示

CSSで設定した画像の表示になります。

img1クラスでは画像のサイズを指定しています。

.img1{
width:200px;
height:200px;
}
widthは横の幅を指定します。
heightは縦の高さを指定します。
200pxのpxはピクセルという単位です。これはパソコンの画面に使われる単位として使用されています。200ピクセルというサイズで表示されるようになります。

.img2{
width:100%;
}
では画面の幅に対して100%の範囲で表示されるようになります。画面のサイズを変更すると、それによって画像のサイズが変わります。

.img3{
width:50%;
}
では画面の幅に対して50%の範囲で表示されるようになります。img2クラスの半分という意味になります。

.img4{
max-width:100%;
}
では最大の幅が画像本来のサイズで表示されます。img2、img3クラスと違って画像サイズより画面が大きくても画像本来のサイズ以上には表示されません。逆に画面が画像サイズより小さくなれば表示は縮小されるようになっています。

.img5{
display:block;
margin-left:auto;
margin-right:auto;
}
では画像が画面の中央に表示されるようになります。
displayは要素の形式を指定するものでブロックとして設定します。
margin-leftは左のマージンを設定します。マージンは画面領域間のスペースのことを言います。
margin-rightは右のマージンを設定します。autoはゼロを意味して左右がゼロで中央に表示されるようになります。

画像の表示の仕方を覚えると自由な形式で表示できるようになります。

プログラミング言語

こちらのサイトで扱うプログラミング言語一覧です。

ページのトップへ戻る