- 公開日:2017-2-9
- プロスタTOP / プログラミング初心者向け技術系ノウハウ・まとめ

Webページを作る際、様々な見た目の調整をしたい事があると思います。ただし、HTML言語だけでは細かく調整することが出来ません。
見た目を調整しようと思ったときに必須となるのが「CSS」なのです。
CSSとは
CSSはカスケーディングスタイルシートと呼ばれるもので、Webページのスタイル(見た目)を設定する言語の事です。
つまり、HTML言語で記述された要素を装飾することが出来ます。
HTMLを学び始めたばかりの人にとっては、HTMLだけでWebページのデザイン調整をしていると思っているかもしれません。
HTMLは「文書構造」を形作る、CSSはその文書構造に対して「スタイル(見た目)」を設定するという役割を持っています。
CSSの書き方について
CSSの書き方は以下のようになります。
1 2 3 |
セレクタ { プロパティ名:値; } |
項目 | 説明 |
---|---|
セレクタ | (要素名) 装飾する対象を設定します。 (HTMLのタグ名や、id、class名) |
プロパティ名 | 対象にどのような装飾をするか設定します。 (背景や幅など) |
値 | プロパティをどのような値にするかを設定します。 (青色や100pxなど) |
具体的な例を見ていきましょう。
例1)
CSSを以下のように記述
1 2 3 4 5 6 7 |
div { background-color: #66FFFF; width: 600px; height: 100px; text-align: center; font-weight: bold; } |
HTMLを以下のように記述
1 |
<div>divタグの装飾をCSSにて設定しています。</div> |
上記の例を表示した場合、下図のようになります。
CSSで「divタグ」に「背景色、幅、高さ、文章の位置、文字の太さ」の装飾をした結果、HTMLで記述したdivタグに囲まれた文章が、図のように表示されました。
例2)
CSSを以下のように記述
1 2 3 4 5 6 7 |
div.div_class { background-color: #66FFFF; width: 600px; height: 100px; text-align: center; font-weight: bold; } |
HTMLを以下のように記述
1 2 3 |
<div>divタグですが、クラス名を指定していないため装飾されません。</div> <p class="div_class">クラス名を指定していますが、pタグなので装飾されません</p> <div class="div_class">divタグでクラス名を指定しているため装飾されます</div> |
上記の例を表示した場合、下図のようになります。
CSSにて「div_class」というクラス名を指定した「divタグ」を装飾するように変更すると、図のように表示されました。
このようにHTMLとCSSを組み合わせてデザインの調整を行います。
CSSの記述場所
CSSの記述場所は3種類あります。
- CSSファイルに記述する。
- HTMLファイル内に記述する。
- HTMLタグに直接記述する。
CSSファイルに記述する場合
まずCSSファイルを作成します(例:csstest1.css)。
そしてHTMLファイルにて「head」タグ内に下記のように記述を行う事によって、CSSファイルをHTMLファイル内に埋め込むという宣言をします。
1 2 3 |
<head> <link rel="stylesheet" type="text/css" href="csstest1.css" > </head> |
※補足)
上記の「type=”text/css”」はHTML5では省略可
HTMLファイル内に記述する場合
HTMLファイルの「head」タグ内に下記のようにCSSを記述します。
1 2 3 4 5 |
<head> <style type="text/css"> // CSS記述 </style> </head> |
※上記の「type=”text/css”」はHTML5では省略可
HTMLタグに直接記述する。
style属性を使って、装飾したいタグに直接CSSを記述します。
1 |
<div style="background-color: #66ffff;"> |
まとめ
今回は、CSSの初歩的な事について説明してきました。
もう少し踏み込むと、CSSには優先順位というものも存在します。この優先順位によって意外とデザイン調整が上手くいかないということもありえます。
興味がある方は調べて見るのもいいでしょう。
【おすすめ記事】
➡【CSS入門】div要素を改行をさせない方法
➡CSS Diner(シーエスエスダイナー)の口コミ・評判
➡コーダー志望者必見!CSSのスクールBEST17
➡マークアップエンジニアがオススメするCSS学習サイト
➡CSSの本・参考書の評判