Webプログラミングを始めて、CSSデザインを勉強してみようと思ったけど、ちょっと難しくて分からない…。
今回はそんな方向けに簡単な解説をしたいと思います。
初歩の初歩が分からないと、どんな解説サイトを読んでも何を言っているのかチンプンカンプンですが、基本さえ分かってしまえばCSSはちっとも難しくないですし、デザインの幅も広がってとても楽しいので、この機会にぜひ身に着けてみてください。
目次
CSSの基本
CSSは、HTMLで作ったサイトをデザインしたり、レイアウトする言語です。
色やサイズの変更、形の変更、アニメーションなど、できることは様々です。
CSSで装飾する方法
HTMLの<head></head>部分に記述したり、HTMLとは別の外部ファイルを読み込んで使います。
HTMLのhead間に記述する場合は
<style type="text/css"> /* ここにスタイルを書く */ </style>で、外部のCSSファイルを読み込む場合はhead間に
<link rel="stylesheet" type="text/css" href="使いたいCSSファイル">の記述を入れることで使うことが出来ます。
モバスペではhead間要素編集で記述することが出来ます。
WordPressやブログサービスなどでは、ダッシュボードでCSSファイルを管理することが出来ますね。
CSSでデザインをする時は、divタグやpタグなど様々なものにclassという属性を与えます。
例えば、ブログの記事内に重要な記述をする時、その部分だけ赤い文字に変えたいことがあります。
そんな時は、
<div class="example-class">重要な記述</div> <!-- (上下に改行を入れたい時) -->又は
<span class="example-class">重要な記述</span> <!-- (上下に改行を入れたくない時) -->と書きます。
このdivまたはspanに記述した「example-class」という名前のclassをターゲットに、CSSを記述してデザインします。
.example-class{color:red;}この短い一行を記述するだけで、サイト内の全てのexample-classというclassをもつ要素の文字が
重要な記述
と、このように赤くなります。
classとidを使い分ける
divやspanなどの要素の指定の仕方はclassだけでなくidで指定することも出来ます。
指定の仕方は、
<div id="example-id">重要な記述</div>とclassと同じです。
CSSの指定の方法は、classがドット(.)なのに対し、idはシャープ(#)で指定します。
#example-id{color:red;}classとidはそれぞれの役割を知り、使い分けをしましょう。
classの場合は一ページ内で複数使用している要素に種別名を付けるために使います。
例えばこのページで言うと、コードを表示しているエリアなどはページ内でいくつか使用していますので、<div class=”html”>(コードの記述)</div>などとして、CSSファイルでデザインを指定しています。
対してidは基本的にそのページに一つだけある要素に固有の名前を付けるために使います。
例えばサイトのヘッダーやフッターはそれぞれ一つですね。
ヘッダーに
<div id="header">ヘッダー</div>とこのようにid=”header”と付ければ、役割がわかりやすいですし、このidを指定してCSSを記述すれば固有のデザインにできます。
凝ったデザインをしてみる
文字色の変更だけでなく、枠線を表示したり、背景色を変えたり、アニメーションを追加したり出来ます。
先ほどの
<div class="example-class">重要な記述</div>にCSSを色々と記述すると、こんな風に見せることも出来ます。
↓↓
.example-class {
width:100px; /* 要素の幅を指定 */
background:#ffaabb; /* 背景色を指定 */
border:solid 5px #8899ff; /* 枠線の幅と色を指定 */
border-radius:50px 25px 50px 25px; /* 枠の形を指定 */
text-align:center; /* 文字の表示場所を指定 */
color:#880000; /* 文字色を指定 */
font-size;10px; /* 文字サイズを指定 */
}CSSの基本まとめ
CSSを記述すれば、形や色、表示場所、そのほか色々なものを自由自在に決められます。
HTMLで、デザインやレイアウトを適用したい要素にclassまたはidを付け、それに対してCSSを記述することで求める見た目を実現することが出来ます。
簡単に説明しましたが、分からないことがありましたら、お気軽にご質問ください。
