CSS17 〜position 位置の設定〜

下記のWebページを内部スタイルシート形式で作成してください。

下記のWebページを内部スタイルシート形式で作成してください。


 

事前準備

デスクトップ上にフォルダ「webst8」を作成します(すでに作成済みの場合は不要です)。
デスクトップ上にwebst8フォルダを作成する
 
 

「webst8」フォルダの中に「css-lesson17」フォルダを作成して、Atomで「lesson17.html」を新規作成します。
 

画像は下記をダウンロードして利用してください。

 

以下はCSS無しのHTMLファイルです。下記のHTMLコードを利用して「lesson17.html」に内部スタイルシート形式でCSSを記述していってください。

 

一通り記述できたら上書き保存して「lesson17.html」をダブルクリックして開きます。課題にあった画面通り表示されていれば、完成です。

 
 

ヒント

positionプロパティとbottom、rightプロパティで、位置を右下に固定しています。
 

詳細は下記をご参照ください。
位置positionに関するスタイル
 
 

こたえ

ソースコード

position:fixとbottom:0、right:0により、スクロールしても位置が右下に来るように固定しています。