こんにちは、兼田です。
前回プログラミングやウェブ開発の最初の一歩として「HTML」の紹介しました。
「HTML」見出し、段落、リンク、画像などさまざまな要素をブラウザに正しく表示させることができたところで次に覚えていただきたいのが「CSS」になります。
プログラミング初心者にとって、CSS(Cascading Style Sheets)はWebデザインの基礎となる非常に重要なツールです。
HTMLがページの構造を定義するのに対し、CSSはその構造にスタイルを加え、見た目を整えるたりと装飾として使われます。
例えば、フォントの色、サイズ、背景の色、ページのレイアウトなどがCSSで設定できるため、Webページが視覚的に魅力的になります。
CSSはHTMLタグにスタイルを適用するために、セレクタとプロパティ・値の組み合わせで記述されます。
CSSの基本構文は以下の通りです。
セレクタ {
プロパティ: 値;
}
次のコードを使うと、ページの背景色が水色に設定され、段落の文字が青色に変更されます。
body {
background-color: lightblue;
}
p {
color: blue;
}
色やサイズの指定以外にも、レイアウトを調整するためのさまざまな機能があります。
例えば、widthやheightプロパティを使って要素の幅や高さを設定したり、marginやpaddingで余白を調整することが可能になります。
.box {
width: 200px;
height: 100px;
background-color: pink;
margin: 20px;
padding: 10px;
}
初心者にとって難しそうに見えますが、基本的な構造やプロパティを理解することで、少しずつ自分のWebページにスタイルを加えられるようになります。
Webページの見栄えを良くしたり、より魅力的なものになるように「HTML」の次のステップとして覚えておきましょう。