「プログラミング学習のツボ」へようこそ！
管理人のKENです。
本サイトでは、
文系・初心者の私が、
プログラミング学習を進める中でつまづいたこと、
最初から知ってれば良かった、
ということをまとめていきます。
これからプログラミング学習を始める方の一助になれば幸いです。
今回は『CSS（シーエスエス）』を学習したい方向けに、
基本的なポイントをまとめてみました！
そもそも『CSS（シーエスエス）』って何？
という方は、以下の別記事もご参照下さい！
-
-
【プログラミング初心者必見！】『CSS（シーエスエス）』学習のツボ
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、文系・初心者の私が、プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かったということをまとめていきます ...
続きを見る
また、『HTML（エイチティーエムエル）』は、
『CSS』学習とは切っても切れない基礎知識ですので、
以下の別記事他、『HTML』学習のご紹介ページもぜひ事前にご参照下さい！
-
-
【プログラミング初心者必見！】『HTML（エイチティーエムエル）』学習のツボ
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、文系・初心者の私が、プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かったということをまとめていきます ...
続きを見る
[toc]
背景をつけて見栄えするWebサイトにしよう！
今回は背景をつける方法を学びましょう！
背景があると、
より見栄えのするサイトになりますね。
今回のベースとなるHTMLは以下です。
背景テスト.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景に関するCSS学習</title>
<link rel="stylesheet" href="背景テスト.css">
</head>
<body>
<p>背景をつけてみよう！</p>
</body>
</html>
一旦ブラウザで表示させてみましょう。
背景テスト.cssというCSSファイルをまだ作っていませんので、
表示されるのはHTMLのシンプルな文章だけです。
CSSで背景をつけると、
このシンプルな見栄えがどう変わるのか、
一緒に確認していきましょう！
背景をつけたい場合は、
「background-image」プロパティを使います。
CSSの記述に入る前に、
背景に使う画像を用意しておきましょう。
用意した画像データは、
HTML、CSSファイルと同じフォルダに保存しておきます。
今回は以下の「背景テスト画像.jpg」
というりんごの画像を使ってみます。
背景テスト画像.png
背景に使う画像が用意出来たら、
以下の通り、
背景テスト.cssというCSSファイルを作成してみましょう。
背景テスト.css
@charset "utf-8";
p {
background-image: url(背景テスト画像.png);
}
「url( )」の「( )」の中に、
背景に使う画像のファイル名を記述します。
作成後は背景テスト.htmlと同じフォルダ内に保存しましょう。
これで、背景テスト.cssが、
背景テスト.htmlに反映されるようになりました。
早速、背景テスト.htmlをブラウザ表示して、
変化を確認してみましょう！
背景画像をつける前
「background-image」プロパティで画像をつけた後
りんごの背景がつきました！
CSSで、
HTMLの「p」に対して背景画像を適用している点にも注目です。
「p」の持つ領域に対してのみ背景がついています。
背景テスト.cssを以下のように変更して、
改めて背景テスト.htmlをブラウザ表示してみましょう。
@charset "utf-8";
body {
background-image: url(背景テスト画像.jpg);
}
背景テスト.cssの変更後
りんごの背景が全体に広がりました！
（HTMLの「body」部分に適用されました）
CSSのセレクター部分で、
どこに背景画像を適用するのか、
デザインに合わせて手を加えましょう！
背景画像の繰り返しをうまく設定できるようになろう！
先程学んだ背景の付け方だと、
指定した領域の中で背景画像がずっと繰り返されています。
背景画像を繰り返したくない場合は、
「background-repeat」プロパティを使います。
CSSを以下のように記述し直してみましょう。
（セレクターは「p」で）
@charset "utf-8";
p {
background-image: url(背景テスト画像.jpg);
background-repeat: no-repeat;
}
りんごの背景画像が一つだけしか表示されなくなりました。
「background-repeat」プロパティは、
背景の繰り返しを制御するプロパティです。
プロパティ値の「no-repeat」で、
英語の意味の通り、
背景画像を繰り返さないことにしています。
「no-repeat」以外にも、
背景画像を横にだけ繰り返す「repeat-x」や、
縦にだけ繰り返す「repeat-y」等があります。
「background-repeat」で、
背景画像の繰り返しが色々と制御出来る。
これを頭にいれておきましょう！
背景画像の開始位置をうまく制御しよう！
背景画像の始まり位置を調整するには、
「background-position」プロパティを使います。
CSSを以下のように記述し直します。
@charset "utf-8";
p {
background-image: url(背景テスト画像.jpg);
background-repeat: no-repeat;
background-position: 15% 50%;
}
背景テスト.htmlをブラウザ表示してみます。
りんごの背景画像が、
少し右に表示されるようになりました。
プロパティ値の「15% 50%」で、
表示開始位置を指定しています。
今回の例でいえば、
「p」領域全体の左から15％、
上から50％の位置から、
りんごの背景画像を表示するように指定しています。
「％」以外に、
「px」・「em」の単位と数字で指定する方法や、
「left」・「top」のように、
横方向・縦方向のキーワードで指定する方法があります。
どちらの方法でも、
左の数字が横方向の指定、
右の数字が縦方向の指定になる点もおさえておきましょう！
まとめ
-
背景をつけるには、「background-image」プロパティを使おう！
-
背景画像の繰り返し制御は、「background-repeat」プロパティで！
-
背景画像の開始位置制御は、「background-position」プロパティで！
いかがでしたでしょうか？
今回は、『CSS』学習初心者の方向けに、
背景の基本的なデザイン方法を解説させて頂きました。
覚えることは沢山ありますが、
焦らず、一つ一つツボをおさえていきましょう！
今後も随時、学習のツボをUPしていけたらと思っていますので、
宜しければご参考下さい。
今回の記事が、
少しでも皆さんのお役に立てたら幸いです！