CSS17 〜position 位置の設定〜
下記のWebページを内部スタイルシート形式で作成してください。
下記のWebページを内部スタイルシート形式で作成してください。
事前準備
デスクトップ上にフォルダ「webst8」を作成します(すでに作成済みの場合は不要です)。
「webst8」フォルダの中に「css-lesson17」フォルダを作成して、Atomで「lesson17.html」を新規作成します。
画像は下記をダウンロードして利用してください。
以下はCSS無しのHTMLファイルです。下記のHTMLコードを利用して「lesson17.html」に内部スタイルシート形式でCSSを記述していってください。
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 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>はじめてのCSS</title> </head> <style media="screen"> .sample1{ } </style> <body> <div class="sample1"> <a href="#"><img src="images/guide.png" alt=""></a> </div> テキスト <br><br><br><br><br><br><br><br><br><br> テキスト <br><br><br><br><br><br><br><br><br><br> テキスト <br><br><br><br><br><br><br><br><br><br> テキスト <br><br><br><br><br><br><br><br><br><br> テキスト <br><br><br><br><br><br><br><br><br><br> テキスト <br><br><br><br><br><br><br><br><br><br> テキスト <br><br><br><br><br><br><br><br><br><br> </body> </html> |
一通り記述できたら上書き保存して「lesson17.html」をダブルクリックして開きます。課題にあった画面通り表示されていれば、完成です。
ヒント
positionプロパティとbottom、rightプロパティで、位置を右下に固定しています。
詳細は下記をご参照ください。
位置positionに関するスタイル
こたえ
ソースコード
position:fixとbottom:0、right:0により、スクロールしても位置が右下に来るように固定しています。
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 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>はじめてのCSS</title> </head> <style media="screen"> .sample1{ position: fixed; bottom: 0; right: 0; } </style> <body> <div class="sample1"> <a href="#"><img src="images/guide.png" alt=""></a> </div> テキスト <br><br><br><br><br><br><br><br><br><br> テキスト <br><br><br><br><br><br><br><br><br><br> テキスト <br><br><br><br><br><br><br><br><br><br> テキスト <br><br><br><br><br><br><br><br><br><br> テキスト <br><br><br><br><br><br><br><br><br><br> テキスト <br><br><br><br><br><br><br><br><br><br> テキスト <br><br><br><br><br><br><br><br><br><br> </body> </html> |