JavaScript,jQuery,CSS,HTMLの達人

JavaScriptとjQueryとCSSとHTMLの使い方やサンプルのブログ

【CSSの基本】CSSとは?

f:id:vw-dsg:20200601063047p:plain

CSSとは?

Cascading Style SheetsCSS — はHTML を学んだら、まず次に勉強すべき技術です。 HTML はコンテンツの構造と意味論を定義するのに使用されるのに対し、CSS はそのコンテンツにスタイルを与えたりレイアウトを決めるために使われます。 例えばフォント、色、サイズ、余白を変更したり、コンテンツを複数の列に分割して段組を作成したり、アニメーションやその他の装飾機能を追加するのに CSS は利用できます。

以上MDNより

CSSは料理の「盛り付け」のようなもの

料理で例えるとHTMLが「具材」で、CSSは「盛り付け」のようなものです。以下のようなHTMLコードがあった場合、結果は単純に「ごはん」「梅干し」「のり」が一行ごとに表示されるだけです。

HTMLコード

<html>
<body>
<p>ごはん</p>
<p>梅干し</p>
<p>のり</p>
</body>
</html>

<表示結果>

ごはん

梅干し

のり

しかし、ここにCSSという「盛り付け」を加えると、ただ規則的に並んでいるだけの具材を自分の好みに合わせて表示することができます。

CSSコード

#gohan {
 background-color:#EEE;
 color: #000;
 text-align: center;
 width: 100px;
 border-radius: 10px;
}
#umeboshi {
 background-color:#C00;
 color: #FFF;
 text-align: center;
 width: 100px;
 border-radius: 10px;
}
#nori {
 background-color:#111;
 color: #FFF;
 text-align: center;
 width: 100px;
 border-radius: 10px;
}

HTMLコード ※Pタグそれぞれにidを付けます。

<html>
<body>
<p id="gohan">ごはん</p>
<p id="umeboshi">梅干し</p>
<p id="nori">のり</p>
</body>
</html>

<表示結果>

ごはん

梅干し

のり

備考・その他

CSSは高品質なウェブサイトを構築するために必要な技術です。最初は取っつきにくいと感じるかもしれませんが、一度慣れてしまえば様々な場面で役立ちます。(^^♪

END