さらっと簡単にWEB系のお仕事を解説していくシリーズ
前回はフロントエンジニアの基本中の基本、というかウェブサイトの基本であるHTMLを解説し、ざっくりとHTMLやマークアップとはどんなものかをわかっていただけたと思います。
今回はHTMLがホームページの骨格なら、骨格に見た目を肉付けしていくCSSについて触れていきます！
CSSとは？
CSS(Cascading Style Sheets)とは、ホームページの見た目やレイアウトを整えるためのものです。
CSS1.0・CSS2.0を経て、現在はCSS3.0が使われています。
こんなのや
こんなのもCSSで見た目を変更しています。
CSSファイルは基本的にHTMLファイルなどから別物で、独立しています。(でもCSS単体では使えず、HTMLファイルがないと役に立ちません)
HTMLファイルで、このCSSファイルを読み込む！という設定をしてファイル同士をつなぎ合わせるイメージです。
こんなのがCSS
CSSってHTMLとどう違うの？
全然書き方とか内容が違うよ！共通の名前を付けた部分をうまく相互関係にする感じ！
CSSは、HTMLとは別の言語だけに書く内容も全く異なります。
ではどうやってつなぎ合わせるのかというと、HTMLで任意の名前を付けた部分があれば、そこをCSSで指定してその部分の見た目を変えることなんかができます。
わかりにくいので、実際に見ていきましょう！
例えば以下のものを作るには…
learn css quickly
さらっとCSSを知る！
HTML
<div class="ribbon13-wrapper"> <div class="ribbon13"> <h3>learn css quickly</h3> </div> <p>さらっとCSSを知る！</p> </div>
CSS
.ribbon13-wrapper {
display: block;
position: relative;
margin: 15px auto;
padding: 10px 0;
width: 300px;
background: #f1f1f1;
}
.ribbon13 {
display: inline-block;
position: relative;
box-sizing: border-box;
padding: 5px 0;
margin: 0 0 0 -20px;
width: calc(100% + 20px);
color: white;
background: #6088C6;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.ribbon13 h3{
margin: 0;
padding: 0 30px 0 15px;
border-top: dashed 1px #FFF;
border-bottom: dashed 1px #FFF;
font-size: 20px;
line-height: 46px;
}
.ribbon13:after {
position: absolute;
content: '';
z-index: 1;
top: 0;
right: 0;
width: 0px;
height: 0px;
border-width: 30px 15px 30px 0px;
border-color: transparent #f1f1f1 transparent transparent;
border-style: solid;
}
.ribbon13:before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px #6081b7;
}このような感じで、HTMLとCSSに同じ名前を付けた部分を用意しておいてリンクさせ合います。
CSSめっちゃ長い!!
画像とか既にあるもの以外のデザイン要素を全部数値に置き換えるから結構長くなるんだ！
なんでもかんでも画像で貼っちゃうと、サーバーに負担がかかり重たいサイトになるし、調整や修正もしにくくなるので可能な限りはきちんとCSSでデザインを再現(数値に置き換えられている)されているサイトが好ましいです。
とりあえず普段目にしているサイトはこのCSSによって、いろんな見た目が数値化されているということを覚えておけばさらっとシリーズでは十分です！
