CSSの使い方
背景画像の挿入
480ピクセル×330ピクセルの箱の中にh2の文字列と画像を挿入する。
完成図
- ビルダーの素材集から「pic_i016.jpg」を取り込み、Webアートデザイナーで大きさを調整し、480ピクセル×330ピクセルに切取り、「img」フォルダーにファイル名「pic_i016.jpg」として保存する。
- 新しいページを開き、divを作り、この中に「ペンギン」と入力しh2で括る。
- 下表のとおりCSSを設定する
h2 フォントサイズ 60px 文字太さ 太い 前景色 黄色 文字左インデント 1文字 パッディング 上 30px マージン 上 0px body 背景色 #f0ffff div 幅 480px 高さ 330px 背景画像 ../img/pic_i016.jpg 繰り返し なし
タイトルのスタイル
完成図
- ビルダーの素材集から「pic_a051.jpg」を取り込み、Webアートデザイナーで大きさを調整し、高さ180ピクセルに切取り（幅は縦横比を保持する）、「img」フォルダーにファイル名「pic_a051.jpg」として保存する。
- カラーパレットのスポイトアイコンで背景の色を取得する（ここでは#e8e9eb）。
- カラーパレットのスポイトアイコンで完成図から文字の色を取得する（ここでは#010080）。
- 新しいページを開き、divを作り、この中に「タイトルスタイルの練習」と入力しh1で括る。
- 下表のとおりCSSを設定する
h1 フォント "江戸勘亭流Ｐ"、"祥南行書体"（似たフォント）, serif 文字サイズ 50px 前景色 #010080 背景画像 ../img/pic_a051.jpg 繰り返し なし 位置 左 背景色 #e8e9eb 枠線 4px 浮き出し olive マージン 2px パディング 左 50px 高さ 180px 行の高さ 180px div 枠線 8px 二重線 olive
目立つ枠線 その１
divの中にpをおき、枠にする画像をdivの背景画像に指定し、pの背景色を白にする。
完成図
- 枠にする画像を「img」フォルダーにファイル名「midokisima.gif」として保存する。
- 新しいページを開き、divを作り、この中に「目立つ枠線」と入力しpで括る。
- 下表のとおりCSSを設定する
div 幅 300px 高さ 200px 背景画像 ../img/midokisima.gif 繰り返し 繰り返し パッディング 10px p 高さ 200px 行の高さ 200px 背景色 白 水平方向の配置 中央
目立つ枠線 その2
「border-image」で枠線を指定する。
完成図
- 枠線画像の単位となる画像を縦横各3個を配置した像を用意し「img」フォルダーに保存する。
（下記画像 54px ×54px ここではファイル名を「midokisima2.gif」とした）。
- 新しいページを開き、divを配置する。
- 下表のとおりCSSを設定する
div 幅 300px 高さ 200px 枠線 18px 実線 黄色 border-image url("../img/midokisima2.gif") 18 18 round