「CSSは見た目」です。
色やサイズ、フォントの種類など、見えるところのほとんどを制御できるので、「CSSを制するものは、ホームページを制す」と言っても過言ではありません。
もちろん、見た目だけですが・・・
HTMLのバージョンが5になったタイミングで同時にCSSもCSS3というバージョンにアップデートされました。
フレックスボックスという、それまでにない技術が導入されたり、
アニメーションや、メディアクエリ、コンテナクエリというような、Web3に必要な機能などがどんどん追加されていきました。
そして今でもどんどん機能が追加されていっている現状です。
CSSを深く知っているという人と、触りだけ知っているという人とでは、ホームページの仕上がりのクオリティが天と地ほどの差が出ると言ってもいいかもです。
まるで英語を覚えたての人と、数年間海外（英語圏）に住んでいる人の英語話力を比較するのと似ているように、
CSSも経験と共にスキルアップすることを事前に理解しておきましょう。
そのため、一気に全部覚えようとせずに、必要最低限から、知っているとちょっと便利になる機能、ブロック単位で考えられる通常でよく使うプロパティなど、段階を経て学習を進めていきましょう。
今回は、CSSの基本部分を覚えて、使い方と内容理解を進めていきたいと思います。
CSSとは
CSSは、「HTMLに見た目を付けるための言語」です。
HTMLだけでもホームページを作ることはできますが、文字が並んでいるだけの、とてもシンプルな見た目になります。
例えば、以下のHTMLを書いたとします。
<h1>こんにちは</h1>
<p>これはサンプルです。</p>
これだけだと、「大きい文字」と「普通の文章」が表示されるだけです。
そこでCSSを追加すると、色やサイズを変更できます。
<style>
h1{
color:red;
}
p{
font-size:20px;
}
</style>
<h1>こんにちは</h1>
<p>これはサンプルです。</p>
これで、
・見出しを赤色にする
・文章を大きくする
という見た目の変更ができます。
つまりCSSは、「HTMLを装飾するための仕組み」ということです。
CSSの基本構造
最初に理解しておきたいのは、CSSの基本構造です。
セレクタ(selector) {
プロパティ(property) : 値;
}
セレクタは、どこに適用するか。
プロパティは、何を変えるか。
値は、どう変えるか。
という意味になります。
最初に覚えるCSS（初心者用）
CSSには大量の機能がありますが、初心者のうちは全部覚える必要はありません。
まずは「よく使うもの」を覚えるだけで十分です。
初心者のうちは、まず以下のプロパティを覚えるだけでもかなり戦えます。
color
文字の色を変更します。
font-size
文字サイズ（大きさ）を変更します。
background
背景色（画像）を変更します。
width
横幅を変更します。
margin
外側の余白（サイズ）の変更。
padding
内側の余白（サイズ）の変更。
必要最低限の知っておくべき知識
Flexbox
HTMLはとにかく文字を横書きで表示して、段落として、HTMLタグを縦に並べるのが基本です。
なので、横並びにするには、tableタグを使うというのが、以前までのやり方で、CSSでは、floatプロパティを使って無理やり横並びにするのが一般的でした。
CSS3からは、Flexboxという機能が備わり、以下のコードを書くだけで、横並びが簡単にセットできるようになりました。
uldisplay:flex;
※以下のサンプルは、ulタグの中のliタグを横並びにする設定です。
<style>
.box{
display:flex;
gap:10px;
}
.item{
background:#eee;
padding:20px;
}
</style>
<div class="box">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
これだけで、横並びのレイアウトを簡単に作れます。
最初は、「なんか横に並んだ！」くらいの理解で大丈夫です。
SSは実際に触りながら覚えることがとても大事なので、まずは「試してみる」ということで自分で実際にコードを書くことを優先しましょう。
あとがき
CSSは、最初の頃はかなり難しく感じます。
「なんで効かないの？」
「なんでズレるの？」
「さっきまで動いてたのに！」
ということが本当にたくさん起きます。
ですが、それはみんな通る道です。ちなみに、自分も仕事中でもかなりしょっちゅうこんな状態になります。
むしろCSSは、「やればやるほどスキルが伸びる言語」と言ってもいいくらい、実践経験が重要です。
最初から完璧を目指さず、
・文字の色を変えてみる
・余白を付けてみる
・横並びにしてみる
くらいから始めていけば大丈夫です。
そして気が付くと、「なんとなくいい感じに整える力」が少しずつ身についていきます。
ホームページ制作は、完成した時の達成感がかなり大きいので、ぜひ楽しみながらCSSを触ってみてください。
0 件のコメント:
コメントを投稿