お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSS
入門編

CSSの記述場所

みなさまどうも。いかがお過ごしでしょうか。

前回は文法について学びました。続きましてCSSの記述方法、ようするに記述場所のことですね。これについて学んでいきましょう。

CSSの記述方法については

の3つの方法があります。

少しサンプルを見て確認して行きましょう。詳しい記述方法は次の記事から解説していきたいと思います。

HTMLタグのstyle属性に直に記述する方法はこのような感じになります。

<p style="font-size: 18px;">ここのフォントサイズが18pxになります</p>

HTMLファイルに直に記述する事を「インラインで記述する」と言ったりします。プログラミングの世界でのインラインは『埋め込み』という意味で使われています。よく使用される言葉なので覚えておきましょう。

styleタグというのを使用してHTMLファイル内に記述する方法はこんな感じです。

<style>
    p {
        font-size: 18px;
        font-weight: bold;
    }
</style>

注意点としてstyle要素は基本的にhead要素の中に書くのがルールなっています。ブラウザによっては動いてしまうこともありますが、body要素の中に書いたりするのは実はNGになります。

HTML5からscoped属性というものが登場し、それを記述すれば文法ルール上はbody要素の中などに記述することができることになりましたが、各ブラウザの対応がちょっと曖昧なのでまだしばらくはhead要素の中に書くようにしておくのが無難かもしれません。

こちら外部ファイルにCSSを記述する方法です。『.css』という拡張子をつけたテキストファイルにCSSを記述し、link要素を使用してその外部CSSファイルを読み込ませるという手法です。style要素ではなくlink要素ですので間違えないようにしてください。

<link rel="stylesheet" href="./style.css">

インラインでCSSを記述するとそのページしかそのCSSを読み込めません。

ウェブサイト全体で使用するCSSファイルを作成するにはHTMLファイルと切り分けてCSSを記述する必要があります。ですので外部ファイルにCSSを記述する方法が一般的です。

インラインでCSSを記述する必要があるパターンとしては取り急ぎでデザインを修正するような場合や、そのページしか使用しないような特化型のデザインを追加する場合、あとは何か理由があって共通のCSSファイルに触れない場合などです。

というわけで記述パターンをざざっと紹介してみました。次の記事からはこれらの方法で実際に記述してCSSに慣れていくことにしましょう。

HTMLファイルも必要になってきますのでHTML入門編の時のようにデスクトップあたりにtestフォルダを作ってそこに以下のようなHTMLファイルを作成してください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS 練習中！</title>
</head>
<body>

<p>ここにスタイルを適用するよ</p>

</body>
</html>

丸コピしてしまって問題ありません。HTMLファイルの名前はHTML入門編と同じように『index.html』としましょう。

準備ができましたら次の記事へ進んでください。引き続き頑張っていきましょう。ではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ