 |
『 CSS って聞いたことはあるけど具体的にどんなものなの？』 『これだけは使う！みたいなCSSコードを知りたい』 |
こういった疑問に答えていこうと思います。
今回のテーマ
【初心者向け】 CSSとは 何？今すぐ使えるCSSコードも紹介
もくじ
本記事の信憑性
この記事を書いている僕はブログ歴1年半年。
ブログを書いていく中でCSSを触ることが多々あり、このサイトもCSSを沢山利用しています。
この記事を読むことで得られること
CSSとは？という所からしっかり解説するので、この記事を読み終わる頃にはCSSを少しは理解できるようになっていると思います。
プログラミングやブログを始めようと考えている『まだなーんにも分からない』方向けですので、安心して読んでください。
それではいってみましょう！
CSSとは何？
CSSとはCascading Style Sheetsの頭文字を取ったもので、Webページのスタイルを指定するための言語です。
要は文字の色を変えたり、文字を枠で囲ったり、Webページのレイアウトを決めたりとWebページの装飾をする時に使うのがCSSです。
こんな感じのやつです。
CSSは単体で使うものではなく、以前に紹介した＂HTML＂がベースとしてあり、そのHTMLをどのように装飾していくかをCSSで指定していきます。
HTMLに関する記事はこちらから。
>>【これだけは覚えよう】 HTMLとは ？をわかりやすく解説！基礎的なHTMLタグも紹介
CSSを使う時はHTMLもセットなので、CSSはHTMLと同じようにTHEプログラミングのような言語であり、見た目はHTMLとほぼ同じように見えます。
↑CSS
ただ装飾をするものだから！”CSS”という別物に変わっています。
HTMLだけだと真っ黒な字がずらーっと並んでいて、記事としては見にくいですが、CSSで装飾することで見やすくなります。
つまりWebページというのは
HTMLとCSSから成り立っている
ということになります。
逆をいえばHTMLとCSSを駆使すればWebページはできてしまうので、誰でもできるかなと思います。
初心者でも今すぐ使えるCSSコード
CSSコードがあれば様々な効果を出すことができます。
しかし『沢山ありすぎてどれを使えば良いか分からない』
という方がいると思います。
なので初心者でも今すぐ使えるCSSコードを紹介しようと思います。
それが下記の通り。
・文字に色をつける
・文字サイズを変える
・文字フォントを変える
・背景色を変える
・幅を変える
・高さを変える
・枠をつける
1つずつ解説します。
文字に色をつける
HTML
<div class="テスト"><br /> こんにちは。<br /> 私は元気です</div>
CSS
.テスト {
color: #2196F3; /* 文字色指定 */
}
このように表示されます。
色を変えるので＂color＂という言語が入っています。
CSSの＂テスト＂というのはHTMLにも記載がありますがHTMLの『div』から『/div』までを装飾したい！というのを指定するためのものです。
『じゃぁなんで divと/divを指定しないの？』
それはdivと/divはWebページを作っていると沢山使うことになるHTMLです。
なのでどこのdivと/divを指定しているか細かくわかるように＂テスト＂で指定します。
つまり＂テスト＂の部分は自分の好きな言葉に変えてokです。
#2196F3;というのは青色のコードです。
他にも色のコードがあり、これは覚えるしかないのでよく使う色コードは覚えておきましょう。(とはいってもネットで調べれば1発で出てくるので覚える必要はないかも！笑)
文字サイズを変える
HTML
<div>
デフォルトの大きさ
<div class="大きめ">
大きめはこんな感じです
</div>
<div class="小さめ">
小さめはこんな感じです
</div>
</div>
CSS
.大きめ {
font-size: 50px; /* 文字サイズ指定 */
}
.小さめ {
font-size: 10px; /* 文字サイズ指定 */
}
このように表示されます。
フォントのサイズを変えるので＂font-size＂という言語が入っています。
文字の大きさはpxという単位が無難です。
このpxはだいたいこの大きさだなというのを把握するのをおすすめします。
文字フォントを変える
HTML
<div class="フォントを変える"> こんなフォントです </div>
CSS
.フォントを変える {
font-family: serif; /* フォントの種類指定 */
}
このように表示されます。
フォントを変えるのは＂font-family＂という言語を使います。
フォントの種類は＂serif＂以外にも沢山あるのでそれらも覚えていく必要があります。
背景色を変える
HTML
<div class="背景色"> 背景色を指定します </div>
CSS
.背景色 {
background-color: powderblue; /* 背景色指定 */
}
このように表示されます。
背景色を変えるには＂background-color＂という言語を使います。
背景色は他にも沢山あるのでそれらも覚えていく必要があります。
幅を変える
HTML
<div class="幅を変える"> どうでしょうか </div>
CSS
.幅を変える {
width: 50px;
このように表示されます。
この表示は分かりやすいように背景色をつけました。
横の幅を指定する感じです。
幅を変えるには＂width＂という言語を使います。
また幅も文字サイズと同様に＂px＂という単位を使います。
数値を大きくすればするほど、こちらの幅は大きくなっていきます。
下記は100pxの時のもの。
高さを変える
HTML
<div class="高さを変える"> どうでしょうか </div>
CSS
.高さを変える {
height: 50px;
このように表示されます。
この表示は分かりやすいように背景色をつけました。
縦の高さを指定する感じです。
高さを変えるには＂height＂という言語を使います。
また高さも幅や文字サイズと同様に＂px＂という単位を使います。
数値を大きくすればするほど、こちらの高さは高くなっていきます。
下記は100pxの時のもの。
枠をつける
HTML
<div class="box6">
<p>こんな感じです。</p>
</div>
CSS
.box6{
padding: 0.5em 1em;
margin: 2em 0;
color: #474747;
background: whitesmoke;/*背景色*/
border-left: double 7px #4ec4d3;/*左線*/
border-right: double 7px #4ec4d3;/*右線*/
}
.box6 p {
margin: 0;
padding: 0;
}
このように表示されます。
padding＝要素の内側の余白 margin＝要素の外側の余白 color＝色 background＝背景色 border-left＝左線 border-right＝右線
これがそれぞれの意味となっています。
これらを変更することで枠を好きなようにカスタマイズできます。
【経験談あり】CSSを覚えるならワードプレスで遊んでみる
『CSSを覚えて色々なデザインをしていきたい！』
という方も多いと思います。
そういった方は”CSSに沢山触れること”で徐々に覚えられるかなと思います。
結局何事も同じですが、数をこなすことで人間は慣れていきます。
またCSSを含めプログラミング言語は、日常では絶対に触れることはできないので自らで飛び込んでいくしかありません。
そこでオススメしたいのがワードプレスです。
CSSを覚える上でワードプレスは重要なツールになると思います。
ワードプレスは自分でWebページを作れるもので、CSSを実際に触り、自分のウェブページを装飾することができます。
ワードプレスは世界にあるWebページの4分の1はワードプレスで作られていると言われているくらい大きなCMSです。
安全性もバッチリで、このサイトもワードプレスで作りました。
僕自身もワードプレスを使い始めて1年ちょっとが経ちますが、始めた頃と今ではCSSの知識に大きく差があります。
最初は枠すらも作ることができずズラーっと文字だけが並んでいるようなサイトでした。
しかし沢山CSSに触れたことで知識が増え嫌でも覚えていき、使いこなせるようになった、そんな感じです。
最初は本を読んだり、CSSのコードを覚えたりではなく、とにかくCSSに触れることです。それに尽きます。
ワードプレスのダウンロードはこちらから
というわけで今回はこの辺にしたいと思います。
最後まで読んでいただきありがとうございました。
ピンバック: 【これだけは覚えよう】 HTMLとは ？をわかりやすく解説！基礎的なHTMLタグも紹介