htmlやcssを学んでいると
cssファイルが大きくなりすぎ
読み込みが遅くなってしまうのでは
と感じたことは無いでしょうか。
今回は
・styleタグを利用し、cssを記述する方法
・styleタグを使い、ファーストビューを早くする方法
を解説をします。
是非参考にしてみてください
目次
styleタグとは
styleタグの読み方
スタイルタグと読みます。スタイルシートのスタイルの事を指しています。
styleタグの説明
styleタグ内にcssを記述することが出来ます。現在linkタグを利用してcssファイルを外部ファイルとしても記述することが多いです。
しかし、その場合にはWebページのhtmlとcssファイルや画像といった複数のファイルをダウンロードするため、少しだけ表示に時間がかかります。
表示時間を短縮するために、ファーストビューで利用するcssだけstyleタグでHTMLページに直接書く方法が利用される場合があります。
styleタグで利用できる属性
styleタグでは以下の属性を使うことができます。
| 属性 | 説明 |
|---|---|
| type | スタイルシートのMIMEタイプ cssを記述する際には「text/css」を指定します。 |
| media | スタイルシートの出力メディアを指定 省略すると「screen」が指定されます。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
css（スタイルシート）の3種類の書き方とその特徴
styleタグでcssを書く方法
styleタグ内にcssを記述することが出来ます。下記のようにheadタグ内に記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<html> <head> <style> span { color: #010101; } </style> </head> <body> <span>サンプルです</span> </body> </html> |
この記述方法のメリットは「外部ファイルを読みこむ必要が無い」点です。
現在、画像やJavaScriptなどを駆使し、表現豊かなWebサイトが作られています。しかし、様々な外部ファイルを読み込むような場合、少しづつ処理が重くなってしまいます。
styleタグでhtmlに記述することで、処理を軽くすることが出来ます。
linkタグで外部ファイルとしてcssを書く方法
linkタグで、外部ファイルにcssを記述することができます。下記のように記述し、こちらもheadタグ内に書きます。
|
1 2 3 4 5 6 7 8 |
<html> <head> <link rel="stylesheet" type="text/css" href="https://sample.com/css/style.css"> </head> <body> </body> </html> |
この記述方法のメリットは「cssやjavascriptなどの管理がしやすい」点です。
一般的には、外部ファイルに書くことでWebサイト全体で同じcssを使いまわすことが出来ます。
ページを増やしたり、修正内容をすべてのWebページに反映させたりする必要があるため、ほとんどのWebサイトがこの方法を使っています。
style属性でcssを記述する方法
styleタグと勘違いしやすいですが、すべてのタグはstyle属性を使い、個別にスタイルシートを書くことが出来ます。下記のように、body無いの必要なタグに直接書きます。
|
1 2 3 |
<body> <span style="color:red;">この文字にスタイルが適用されます</span> </body> |
この記述方法のメリットは「cssを適用させる場所がわかりやすい」点です。
しかし、この方法は、不要な重複につながる可能性があるということでGoogleが非推奨としています。
CSS 属性をインライン化しない
コードの不要な重複につながる場合があるため、HTML 要素に CSS 属性（
<p style=...>など）をインライン化するのはできるだけ避けてください。また、HTML 要素への CSS のインライン化は、コンテンツ セキュリティ ポリシー（CSP）によってデフォルトでブロックされます。
参考文献：Google PageSpeed Tools Insights
Webサイトの表示速度以外にも、cssの管理方法が複雑になってしまうため、ほとんど使われることはありません。
styleタグを使い、ファーストビューを早くする方法
styleタグをうまく利用すると、Webサイトのファーストビューを早く表示させることが出来ます。
Webサイトへ訪れた際に、少しでも表示が遅いとストレスを感じてしまう人がいると言われています。
そのため、Googleはウェブサイトへ訪れた際に表示される部分（ファーストビュー）をとにかく早く表示し、それ以外の部分は遅延して後で読み込むことを推奨しています。
手順としては下記のように行います。
・cssファイルから、ファーストビューで使うcssを抜き出す
・抜き出したcssをstyleタグに記述する
・cssファイルの読み込みを遅延させる
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<head> <style> <!-- /* ファーストビューで使うcssのみを抜き出す */ .article_a{ color: #010101; background-color: #F1F1F1; } .head_a{ font-weight: bold; } --> <!-- 下記のスタイルシートは読み込みを遅延させる --> <link rel="stylesheet" href="./css/style.css" media="print" onload="this.media='all'"> </head> <body> <main> <h1>メインコンテンツ</h1> <article class="article_a"> <h2 class="head_a">記事A</h2> </article> <!-- ここまでファーストビュー --> <article class="article_b"> <h2 class="head_b">記事B</h2> </article> </main> </body> |
linkの属性では、初期読み込み時はmedia=”print”と定義することで、読み込みを一旦遅延させます。
そしてonload=”this.media=’all'”を指定することで、出力先をmediaからallへ変更しすべてへ適用させています。
このようにして、ファーストビューを出来る限り早く表示させてしまうようにすると、検索エンジンからの評価が上がる可能性があります。
まとめ
いかがでしたでしょうか。
今回はスタイルシートの書き方を3種類と、その特徴を解説しました。
また、styleタグを利用しWebサイトのファーストビューを早くする方法も解説してあります。この方法は、一度で完全に理解する必要はありませんが、Webサイトを制作する場合などには知っていた方が良い知識です。
参考にしていただければ幸いです。
