CSS

Manipulating background of your web-pages

背景を変えたい際、以下のようなものを入力する。

body{
background-color: red;
}

もしくは

body{
background-color: #FF0000 ;
}

もしくは

body{
background-color: rgb(255,0,0);
}

背景に画像を挿入したい場合は、以下のフレームワークで入力することができる。

background: url(“path to image”);

こんな感じで使う。

body{
background: url(“https://www.nasa.gov/sites/default/files/styles/full_width_feature/public/thumbnails/image/pineisland_oli_2017349_lrg.jpg”);
}

もし、背景と画像がきれいじゃない場合、以下のプロパティで調整することができる。

background-size：背景の画像のサイズを変えるプロパティ。高さに続いて、幅も決めることができる。
contain：画像の高さと幅を一致していることを確認する。
cover：画像の高さと幅を利用可能なだけ拡大させる。

有効な背景画像のの入力は、以下のようになる。

background-size: 100%;
background-size: cover;
background-size: contain;

Background-repeat プロパティは、画像をコンテンツの中で使い続けるかどうかを考えることができる。

以下のように入力する。

background-repeat: no-repeat;
background-repeat: repeat;

➡リピートは、常にあるようにして、ノンリピートはそうではない。

Beautifying text using CSS

文字のフォントサイズ、色、フォントスタイルはＣＳＳのお仕事

まず、色を変える方法は以下のようになる。

<p>Hey! Make me blue</p>
//style.css
p{
color: blue;
}

これで色を変える事ができる。

右、左、中央の位置づけは以下のようにすることで調整が可能。

<p>Hey! I am here.</p>
//style.css
p{
text-align: center;
}

フォントサイズを変えるには、以下のようにする。

フォントサイズは、 pixels (px) or emを使うことで変化させることが可能。

1em = 16px;

<p>Hey! Please increase my font-size.</p>
//style.css
p{
font-size: 32px; /*can be specified using em as 2em*/
}

Font weight（文字の太さ）を変えたいときは、以下のように入力する。

<p>Hey! Please change my font-weight.</p>
//style.css
p{
font-weight: 400; /*can be anything from above values*/
}

The font family or font（文の全体）を変えたいときは、以下のように入力。

<p>Hey! Please change my font-family.</p>
//style.css
p{
font-family:'Roboto', sans-serif;
}

Height, width margin and more

CSSは、ビジュアルに関するプロパティが多い。

今回は、それについて紹介する。

<img src=”img.png” class=”panda”>Wow</div>
//style.css
.panda{
height: 400px;
width: 400px;
}

➡これで、高さと幅を決定する。

<div class=”rocket”>The box has margin around it.</div>
//style.css
.rocket{
border-width: 2px;
border-style: solid;
border-color: black;
}

➡border-width：ピクセルを操作する。
border-style：dashed, solid, dottedなどのスタイルを変える。
border-color：色を変える。

<div class=”starlord”>Starlord, who?</div>
.starlord{
margin-top: 20px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 30px;
}

➡マアジンとは、外枠のこと。以上のように入力することで、操作することが可能。

.starlord{
margin: 20px 30px 20px 30px; /*In order top, right, bottom, left*/
}

.starlord{
margin: 20px 30px;
}

.starlord{
margin: 20px 30px;
}

マアジンは以上のような多様な書き方ができる。

<div class=”starlord”>Starlord, who?</div>
.starlord{
padding-top: 20px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 30px;
}

➡Paddingは、要素の間にスペースを作ることをいう。

.starlord{
padding: 20px 30px 20px 30px; /*In order top, right, bottom, left*/
}

.starlord{
padding: 20px 30px;
}

.starlord{
padding: 20px;
}

➡マアジンと同じような書き方ができる。