【CSS入門】書き方の基本をおさえてデザインの調整をしよう！

Webページを作る際、様々な見た目の調整をしたい事があると思います。ただし、HTML言語だけでは細かく調整することが出来ません。
見た目を調整しようと思ったときに必須となるのが「CSS」なのです。

CSSとは

CSSはカスケーディングスタイルシートと呼ばれるもので、Webページのスタイル（見た目）を設定する言語の事です。
つまり、HTML言語で記述された要素を装飾することが出来ます。

HTMLを学び始めたばかりの人にとっては、HTMLだけでWebページのデザイン調整をしていると思っているかもしれません。

HTMLは「文書構造」を形作る、CSSはその文書構造に対して「スタイル（見た目）」を設定するという役割を持っています。

CSSの書き方について

CSSの書き方は以下のようになります。

項目	説明
セレクタ	(要素名) 装飾する対象を設定します。 (HTMLのタグ名や、id、class名)
プロパティ名	対象にどのような装飾をするか設定します。 (背景や幅など)
値	プロパティをどのような値にするかを設定します。 (青色や100pxなど)

具体的な例を見ていきましょう。

例1)
CSSを以下のように記述

HTMLを以下のように記述

上記の例を表示した場合、下図のようになります。

CSSで「divタグ」に「背景色、幅、高さ、文章の位置、文字の太さ」の装飾をした結果、HTMLで記述したdivタグに囲まれた文章が、図のように表示されました。

例2)
CSSを以下のように記述

HTMLを以下のように記述

上記の例を表示した場合、下図のようになります。

CSSにて「div_class」というクラス名を指定した「divタグ」を装飾するように変更すると、図のように表示されました。

このようにHTMLとCSSを組み合わせてデザインの調整を行います。

CSSの記述場所

CSSの記述場所は3種類あります。

CSSファイルに記述する場合

まずCSSファイルを作成します(例：csstest1.css）。
そしてHTMLファイルにて「head」タグ内に下記のように記述を行う事によって、CSSファイルをHTMLファイル内に埋め込むという宣言をします。

※補足)
上記の「type=”text/css”」はHTML5では省略可

HTMLファイル内に記述する場合

HTMLファイルの「head」タグ内に下記のようにCSSを記述します。

※上記の「type=”text/css”」はHTML5では省略可

HTMLタグに直接記述する。

style属性を使って、装飾したいタグに直接CSSを記述します。

まとめ

今回は、CSSの初歩的な事について説明してきました。
もう少し踏み込むと、CSSには優先順位というものも存在します。この優先順位によって意外とデザイン調整が上手くいかないということもありえます。
興味がある方は調べて見るのもいいでしょう。

【おすすめ記事】
➡【CSS入門】div要素を改行をさせない方法
➡CSS Diner（シーエスエスダイナー）の口コミ・評判
➡コーダー志望者必見！CSSのスクールBEST17
➡マークアップエンジニアがオススメするCSS学習サイト
➡CSSの本・参考書の評判

投稿者：プロナビ編集部

• 
• tweet
•