デザイン&クリエイティブ

【css基礎】未経験Webデザイナーでも簡単に理解できるcssの基礎

htmlの学習を終えたから、次はcssを学習してみたい!そもそもcssとはどんなものなのかが知りたい。未経験の方にもわかりやすいように、簡単なcss基礎の紹介をしています。cssを学習すると、htmlで作成したテキストに色やデザインを加えることができるようになります。いつも見ているようなWebサイトのように、可愛いまたはかっこいいWebサイトが作れたら嬉しいですよね!それでは、早速css基礎を確認していきましょう。

【css基礎】未経験Webデザイナーでも簡単に理解できるcssの基礎

cssで何ができる?

cssとはCascading Style Sheetsの略で、Webページ上の色やデザインを反映するために使用される言語です。cssのデザインは、htmlで書かれたコードとリンクさせることにより始めて適用されます。htmlの中に、のタグを入れることによりhtmlファイルと合わせて使用することができます。cssもhtmlと同じく、windowsならメモ帳、mac OSならCotEditorでコードの記入ができます。テキストエディタを使用してコードを書いてみましょう。 

cssで何ができる?

cssの基本構造

まず、cssの基本構造についてです。htmlとは別のテキストファイルを開き、[タイトル名].cssで保存をしておきましょう。右の画像がcssファイル中の一つの例です。画像を見ていただくと、htmlで記入したheaderを最初に{}で括りが作られていることがわかるかと思います。cssの記入を行う時はhtmlの記入方法とは異なり、この{}を使用する必要があります。headerタグだけでなく、htmlタグのほとんどについてが同様の使われ方をします。タグと{}の間の半角スペースを入れることを忘れないよう注意が必要です。

cssの基本構造

h・pタグ id・ class属性をリンクさせる

次にpタグやhタグ、id属性、class属性をcssと繋げる方法です。左の画像を見ていただくと、hタグはheaderと同じく「h2」 { }で括られていることがわかります。pタグもhタグと同様と考えてください。しかし、「#main_contents」と「.section_title」については、それぞれの属性の左隣に「#」と[.]が使用されていますよね。id属性とclass属性をリンクされるには、それぞれに適した記号が必要です。id属性については[#]を使い、class属性については[.]を使います。

h・pタグ id・ class属性をリンクさせる

文字色・文字サイズを変更する

次に、{}内のプロパティについてです。デザインやフォントの大きさ、位置の指定など用途は様々ですが、{}内で「プロパティ: 値;」を指定する必要があります。コロンの後に半角スペース、値の後にセミコロンを忘れないようにしましょう。文字色を変更したい場合、プロパティは「color」を使用します。値は「#6つの数字とアルファベット」を使用した16進数のカラーコードを記入するのが簡単だと思います。文字の大きさの変更は「font-size」を使用します。今回はpxを使用しておりますが、%やemなど割合や倍率での指定ができることも覚えておきましょう。

文字色・文字サイズを変更する

見出しに色を付け加えてみる

最後に、htmlで記入してある見出し要素に色を加えてみましょう。背景色は「background-color: カラーコード;」で指定することができます。左の画像の場合は、h2の見出しに背景色がついていますので、見出し周りのラインのみ背景色を変更することができます。hタグにborderプロパティを使用すると、見出し周りに囲いを作ることができます。左の画像では、border-leftと左の線を指定していますので、見出しの左側のみに色のついたラインが引かれます。

見出しに色を付け加えてみる

まとめ

cssの使い方とcssの基礎いかがでしたでしょうか?cssもhtmlと同じく、一定の法則に元ずいて使用されます。htmlタグや属性とcssをリンクさせる際に少し戸惑うこともあるかもしれませんが、基本的には「タグ(属性) {プロパティ: 値;}」でcssを使用することができます。今回は、簡単なcssのプロパティを紹介させて頂きましたが、他にもたくさんプロパティがあるので、どんなことができるのか調べてみるのも良いかと思います。

Written by ねねまる
現在フリーWebデザイナー・フリーライターとして活動しております。女性向け商品のLP制作/個人経営カフェのHP制作/女性向けのライフスタイル・デザイン・プログラミングの記事作成が得意です。

PICK UP NEWS