このホームページで実際に使用している “CSS” です。
丸ごとコピーして使っていただいても構いません。
その場合はディレクトリとファイル名をご自身の環境に合わせて下さいね。
■外部スタイルシートを指定する
<link rel=stylesheet type="text/css" href="./stylesheet.css">
このタグを、ページのHTMLソースの、HEAD〜HEAD間に指定します。
■bg背景画像のリンク
background-image:url(../img/bg_bouquet.jpg);
これは、画像のファイルまでのURLを相対パスで指定しているので表示が素早いので理想的な方法です。
しかし、初心者にはハードルが高いので最初は、
background-image:url(http://hiroci.com/img/bg_bouquet.jpg);
のようにフルパスで書いたほうが無難です。
フルパスにはhttp://を使っているのでその都度いちいちインターネット上のサーバに問い合わせてから表示するため無駄に時間が掛かるという欠点がありますので、初心者を脱出したならフルパスの乱用は避けるべきです。
■bg背景画像の表示位置を指定する
background-position:right bottom;
この場合は右と下を同時に指定しています。
※ 右=right、左=left、上=top、下=bottom
■bg背景画像の繰り返し
background-repeat:no-repeat;
no-repeatで繰り返し無しを指定する
※ 通常=repeat、縦のみ=repeat-y、横のみ=repeat-x、
■bg背景画像の移動を指定する
background-attachment:fixed;
fixedで固定、スクロールしても動きません。
※ scrollにすると、スクロール時に背景画像も動きます。
■bg背景画像のボーダーを指定する
border:0px;
画像にリンクが張ってあってアクティブになっても画像の周りが変化しない。
■背景の色を指定する
background-color: #000000;
背景をブラックに指定。
・
・
・