Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- CSS入門編 - styleタグを使用してCSSを記述してみる
TechAcademy(テックアカデミー)
当サイト著者の桜舞春人もメンター(先生)としてちょろりと参加しているTechAcademyさんです。爆速で技術を習得して結果を出したいと考える方に超絶おすすめです。
紹介記事はこちらへどうぞ。
運営及び開発費用ご支援のお願い
当サイト(wp-p.info)の情報はお役に立ちましたでしょうか。当サイトでは運営及び開発費用ご支援の募集をさせて頂いております。よろしければご支援についてご検討頂けませんでしょうか。何卒宜しくお願い致します。
styleタグを使用してCSSを記述してみる
みなさまどうも。いかがお過ごしでしょうか。
続きましてstyleタグを使用してCSSを記述してみましょう。
前の記事でも解説しましたが、基本的にstyleタグはhead要素の中に記述するのがルールとなっています。
styleタグの記述方法は以下です。
<style> /* ここにCSSを記述 */ </style>
上記のようにstyleタグの中にCSSを記述します。
では先程の記事と同じようにp要素の文字サイズを18pxにして太字にしてみましょう。
<style> p { font-size: 18px; font-weight: bold; } </style>
style属性に記述した場合と違い、今度はセレクタの指定が必要になりますので注意してください。
style属性にCSSを記述するとそのデザインが適応されるのはそのstyle属性が記述してある要素のみでしたが今度はすべてのp要素に指定したデザインが適応されます。間違いやすいところなので気をつけましょう。
では先程のHTMLファイルに組み込みしてみます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS 練習中!</title> <style> p { font-size: 18px; font-weight: bold; } </style> </head> <body> <p>p要素にスタイルを適用するよ</p> <p>ここも影響をうけるよ</p> </body> </html>
これを保存してブラウザで開いてみましょう。すべてのp要素のデザインが変更されていればOKです。
HTML4.01やXHTML1.0ではstyle要素に『text/css』という値をとったtype属性を記述する必要がありました。
<style type="text/css"> p { font-size: 18px; font-weight: bold; } </style>
そしてHTML4.01の場合はCSSに対応していない古いブラウザ対応の為、style要素にHTMLのコメントアウトが記述されている場合があります。(注意点としてXHTML1.0ではHTMLでコメントアウトされた部分はCSSを含めた全ての部分がコメント扱いとなりますので、XHTML1.0では下記のようなコメントアウトは不可となります。)
<style type="text/css"> <!-- p { font-size: 18px; font-weight: bold; } --> </style>
これらのこと全てはHTML5及び現行のブラウザでは必要ありません。何も考えずstyle要素内にCSSを記述すればOKです。ただし古いブラウザ対応されたウェブサイトを修正するときなどは必要な知識となりますので頭の片隅に置いておいてください。
styleタグを使用したCSS記述の方法は以上となります。
次の記事では外部CSSを読み込んでみましょう。ではでは~。
この記事は桜舞が執筆致しました。
![]() 著者が愛する小型哺乳類 |
桜舞 春人 Sakurama HarutoISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。 |
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
TechAcademy(テックアカデミー)
当サイト著者の桜舞春人もメンター(先生)としてちょろりと参加しているTechAcademyさんです。爆速で技術を習得して結果を出したいと考える方に超絶おすすめです。
紹介記事はこちらへどうぞ。
Introduction
当サイトでは有料会員様の募集をしております。現在約431本の記事を公開中です。
有料会員になるとこれら全ての記事が読み放題となります。
お申込み頂ける際はログインまたはアカウント作成後、有料会員件をご購入下されば幸いです。有料会員権はまとめ買いがお得です。
現在の有料会員権一覧sale中!!
30日分980円
月額約980円、日額約32円
90日分通常2940円のところ1980円 (960円OFF)
月額約660円、日額約22円
180日分通常5880円のところ2980円 (2900円OFF)
月額約496円、日額約16円
360日分通常11760円のところ4980円 (6780円OFF)
月額約415円、日額約13円