シェアする
Where to Write CSS - Japanese Only
みなさまどうも。いかがお過ごしでしょうか。
前回は文法について学びました。続きましてCSSの記述方法、ようするに記述場所のことですね。これについて学んでいきましょう。
CSSの記述方法については
- タグのstyle属性に直に記述する方法
- styleタグを使用して記述する方法
- 外部ファイルのCSSを読み込ませる方法
の3つの方法があります。
少しサンプルを見て確認して行きましょう。詳しい記述方法は次の記事から解説していきたいと思います。
タグのstyle属性に直に記述するサンプル
HTMLタグのstyle属性に直に記述する方法はこのような感じになります。
<p style="font-size: 18px;">ここのフォントサイズが18pxになります</p>
HTMLファイルに直に記述する事を「インラインで記述する」と言ったりします。プログラミングの世界でのインラインは『埋め込み』という意味で使われています。よく使用される言葉なので覚えておきましょう。
styleタグを使用して記述するサンプル
styleタグというのを使用してHTMLファイル内に記述する方法はこんな感じです。
<style>
p {
font-size: 18px;
font-weight: bold;
}
</style>
注意点としてstyle要素は基本的にhead要素の中に書くのがルールなっています。ブラウザによっては動いてしまうこともありますが、body要素の中に書いたりするのは実はNGになります。
HTML5からscoped属性というものが登場し、それを記述すれば文法ルール上はbody要素の中などに記述することができることになりましたが、各ブラウザの対応がちょっと曖昧なのでまだしばらくはhead要素の中に書くようにしておくのが無難かもしれません。
外部ファイルのCSSを読み込ませるサンプル
こちら外部ファイルに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』としましょう。
準備ができましたら次の記事へ進んでください。引き続き頑張っていきましょう。ではー。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
