WEBデザインブログカスタマイズ

初心者でも分かるCSSコードの基本的な意味|コードが読めればブログはもっと面白くなる!

こんにちは。WEBデザイン勉強中のシズです。

WEBサイトのデザインは、CSS(カスケーディング・スタイル・シート)と呼ばれるコードによって書かれています。

このCSS、知識がないと意味のわからない暗号のような文字列にしか見えないし、初心者がいじるのにはかなり勇気がいります。

でも基本的な意味が分かると、今までただの暗号にしか見えなかったコードがそれぞれ何を意味しているのかが分かるようになります!

私もCSSに関してはごく最近勉強を始めたばかりなのですが、基本的なことを知るだけでもブログを書く上ですごく役に立ちました。

今回は勉強の記録も兼ねて、初心者でもスグに分かるCSSコードの基本的な意味を解説します。

これさえ理解すれば、何かカスタマイズしたいときにどの部分をいじればいいのかがすぐに分かるようになりますよ!

スポンサーリンク

CSSコードの基本的な形

CSSコードは、基本的に下記のような形で書かれます。

コードの意味を順番に説明すると、「h1」がスタイルを適用させたい要素、{}の中身のコロン(:)の左部分がスタイルを適用させたい部分、コロンの後ろがスタイルの内容です。

つまり、上のコードは「h1(見出し1)のフォントサイズを24px(ピクセル)にする」という内容となります。

24pxの後ろに付いているセミコロン(;)は、値の後ろには必ず付けなければいけません。私は勝手に確定のような意味だと解釈しています。

そして指定するスタイルの内容は、必ず{}で囲みます。コードを見るとこのカッコの場所が変わった位置にありますが、これはスタイル内容のコードを見やすくするためです。

下記のコードを見てください。

上のコードと下のコード、書き方が違うだけで内容は全く同じです。どちらの書き方をしても、サイトには反映されます。

ただ、適用するスタイルの内容が多くなってくると、一列にコードを書くと内容が分かりにくくなってしまいます。

でも上記の下のコードように一行に対して一つのスタイルを書けば、適用しているスタイルの内容が一気に見やすくなります。

なのでCSSのコードは、基本的にこのような形で書かれています。

基本的なコードの書き方

基本的なコードの書き方を図で説明すると、下記のようになります。

スペースに関してはなくても問題はありませんが、あった方がコードが見やすくなります。

スタイル内容の左側の空白は、コードが見やすいようにタブ(Tab)ボタンを1回押してインデントしています。この空白はスペースで作っている余白ではないですよ~。

コードは人によって書き方が若干違いますが、私は上記のスタイルが一番見やすくて好きです。

恐らくこのような形でコードを書かれている方が多いのではないかなと思います。

知っておくと便利なコード

WordPressでブログをやっている人であれば、一度はCSSの画面を見たことがあると思います。ちなみに無料ブログでもCSSはいじることができます。

CSSの中に書かれているものでも、実際のスタイルに反映されないものがあります。

それは、「/**/」で囲まれている文字列。

どんな文字列でも「/**/」で囲めばスタイルに適用されなくなるので、コードにコメントを追記したいときに使えます。

例えばこのように使われます。(画面をスクロールしてご覧下さいませ)

「/**/」で囲まれた日本語の部分は、スタイルには適用されません。

コードの横にコメントを残しておけば、そのコードがどの部分に適用されているスタイルなのかが初心者でも一目で分かります。

あと、デザインは変えたいけど前のコードはそのまま残しておきたいっていうときも、コードを/**/で囲んでおけばスタイルは適用されずにコードだけ残しておくことができます。

デザインカスタマイズは簡単にできる!

基本的なコードの意味さえ分かっていれば、デザインカスタマイズは簡単にできます!

もちろん、意味が分からなくてもネットでコードを調べてコピペすれば誰でもカスタマイズはできるのですが、何も分からないままカスタマイズするのって結構不安です。

万が一デザインが崩れたり反映しなかったとき、どうやって解決すればいいのか分からないですからね。

でも基本的なコードの意味と書き方さえ分かっていれば、自分で調整したり修正することができます。

いろいろなカスタマイズコードはググればいくらでも出てくるので、興味のある方は見出しデザインや文字の大きさなど、簡単なものから自分好みにカスタマイズしてみてはいかがでしょうか。

私はカスタマイズするとき、「サルワカ」さんのサイトをよく参考にさせて頂いています。

WEBデザインのことやカスタマイズコードなど、すごく分かりやすく書かれているのでオススメです。