フロントエンド開発「CSS」について

おはようございます。今日は祝日。朝マックを食べました。私はマックグリドル一択です。あまじょっぱがたまりません。(デザート感覚？)友達が「あまじょっぱは永遠のループやね〜」と言ってました。そうです、あまじょっぱは永遠のループなんです！！

そんな友達の名言を胸に、CSSについて話したいと思います。

CSSについて

CSSとは「Cascading Style Sheets(カスケーディングスタイルシート)」の略で、Webページの見た目を整える(定義する)ためのプログラミング言語です。例えばHTMLで作った文字の色を変えたり、サイズを大きくしたり、ページの背景に画像を入れたりしてページ全体をレイアウトします。HTMLが「骨組み」だとしたら、CSSは骨組みの上に服を着せて色やデザインを指定すると言う感じですね。HTMLだけだと味気ないページになっちゃいますが、CSSを使うとおしゃれで魅力的なページに仕上がるんです。HTML同様、フロントエンド開発に必要な技術になります。

CSSは基本的にどの要素（<h1>とか<p>を要素といいます）にどんなスタイルを適用するかを指定していきます。

(例)

【HTML】

<h2>フロントエンド開発について〜CSS〜</2>
<p>おはようございます。今日は祝日。朝マックを食べました。〜省略〜そうです、あまじょっぱは<span>永遠のループ</span>なんです！</p>

【CSS】

h2 {
color: #639FC0;　
text-align: center;
margin: 3%;
}

p {
width: 60%;
margin: 0 auto;
line-height: 1.8;
font-weight: 500;
}

p span {
font-weight: 800;
color: #E54245;
}

この例だと、

⚫︎h2（「フロントエンド開発について〜CSS〜」）は、文字を中央揃え(text-align)にして、文字を青色(color)に。尚且つ上下左右の余白を3%(margin)に指定。

⚫︎p(説明文)は、横幅の長さ(widthで幅を指定)を60%にし、文字を中央(marginで指定)に配置。文字の間隔(line-heightで指定)を1.8あけて文字を太くする。

⚫︎p span（「永遠のループ」の部分のみ強調)は、文字を太くし(font-weight)、文字を赤色(color)に指定。

※ここではmarginやwidthを指定するとき「%」を使用しましたが、一般的には「px」を使用します。（この内容については別のブログにて書いていく予定です！）

このようにひとつひとつの要素に対して細かく指定し、Web全体をデザインしていきます。デザインに興味がある方はHTMLやCSSをマスターしてみてください。仕事の幅もグッと広がるかと思います！

次回はJavaScriptをご紹介したいと思います。