元ダメ人間がパソコンを一から学び、独学でエンジニアに。YouTubeではアップスターツで動画投稿をしています。2017年9月12日FacebookTwitterはてブPocketFeedlyこんにちは!UPSTARTSのSベンです!今回は「背景」のスタイルについての内容です。こちらのhtmlにスタイルをあてていきます。一つずつ見ていきましょう。目次background-colorbackground-imagebackground-repeatbackground-positionbackground-attachmentbackgroundbackground-colorまずはbackground-colorですが、こちらは背景色を指定できるプロパティになります。skyblue;}今回はbodyを指定しているので、背景全体がスカイブルーになります。background-image次にbackground-imageは、背景画像を設定できるプロパティになります。url(meramera.jpg);}このように指定すると、指定した画像が何回も繰り返されて背景が敷き詰められているかと思います。background-repeat次にbackground-repeatは、背景画像のリピートを指定することができるプロパティになります。先ほどはこちら何も指定していなかったので、同じ画像が敷き詰められていましたが、1個だけ出したい時は「no-repeat」を指定すればOKです。no-repeat;}こうすると、背景画像が一回だけ繰り返されるようになります。background-position次にbackground-positionは、背景画像のポジションを指定することができるプロパティになります。いった位置を表すキーワードで指定するか、%や数値でも指定することが可能です。top;}こう指定すると、背景画像が右上に表示されます。background-attachment次にbackground-attachmentは、背景画像の固定・移動を指定できるプロパティになります。画面のスクロールに伴って、背景画像も移動します。背景画像の位置が固定され、スクロールしても動かなくなります。background上記のプロパティをまとめて、backgroundで1行で書く事もできます。fixed;}こちらはbackground-attachmentで書かれているソースと同じ表示になります。今回は「背景」のスタイルについてやっていきました。次回は「配置」についてです。メルカリ便利ですよね。アップスターツのSベンです。UPSTARTSのSベンです。