CSSスタイルシートの外部でスタイルタグを使用する時期と理由

公開: 2017-10-29

スタイルタグは、Web開発の非常に興味深い部分です。つまり、これらは現在のWebの動作の基本であり基本的なものですが、ほとんどの場合、サイトの実際のスタイルは、テーマ、プラグイン、および訪問者が目にする日常の外観に多数のCSSスタイルシートをインポートして使用することによって決まります。

しかし、ウェブサイト構築の昔は、ウェブサイトの本体にスタイルタグを使用することができ、それは問題ありませんでした。すべてではないにしても、ページのCSSのほとんどはページ自体に表示され、当時は…問題なく機能していました。今日では、もちろん、ページの読み込み速度や実行順序などの問題があり、成熟したWebテクノロジーが成長するにつれて、スタイルタグをすべて孤独に使用することは少なくなります。

ただし、それらを使用したい場合があります。ワークフローを強化する場合もあれば、モバイルの最適化など、ユーザーの生活を実際に改善する場合や、すばらしいスタイリングを通じて特定の要素に注意を引く場合もあります。

典型的なスタイルシートの使用

今日のほぼすべてのWebサイトで、次のようにスタイリングが実装されていることがわかります。

<link rel='stylesheet' id='divi-style-css'  href='/wp-content/themes/Divi-child-theme-01/style.css?ver=3.0.40' type='text/css' media='all' />

Diviを使用するElegantThemesメンバーの場合（そうする必要があります！）、このスニペットを取得した完全なスタイルシートが呼び出されます。

/*
Theme Name: Divi
Theme URI: http://www.elegantthemes.com/gallery/divi/
Version: 3.0.40
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* Browser Reset */

body {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none;
}

理論的には、これを任意のページのヘッダーのスタイルタグに入れることができます。それは間違いなく機能しますが、それは臭いコーディングであり、スタイルタグが何に適しているかはまったくわかりません。

スタイルタグ、現代の使用法

もちろん、あなたのウェブサイトにはそのようなCSSスタイルシートがあります。あなたはそれらを使うつもりです。 custom.cssとstylesheet.cssがあり、おそらくそれ以上のものがあります。あなたはあなたのサイトがどのように見えるべきかを正確に理解し、それに満足しています。

では、なぜスタイルタグが必要なのですか？

スタイルシートは全体像のソリューションだからです。スタイルタグは小規模なソリューションです。

シートは、本質的な個々の要素や特別なハイライトではなく、サイトの見栄えを良くします。場合によっては、1回限りのコードをスタイルシートにスローするよりも手間がかかることがあります。

そのとき、スタイルタグが本当に便利になります。また、特定のデバイスやユースケースに対して、単一の要素を微調整したり、特定のスタイルを選択したりする必要がある場合もあります。現代のWeb開発でスタイルタグが本当に輝いているのはそのときです。

要素の単一インスタンス

おそらく、サイトでスタイルタグを使用する主な理由は、ページ上の単一の1回限りの要素を処理している場合です。その要素のIDに添付された外部CSSファイルにスタイルを含めることは、非常に面倒な場合があります（たとえあったとしてもごくわずかですが）。ただし、できることは、要素にスタイルタグをスローして、1日を続けることです。

あなたは特殊なフォントを必要とするサイドバーのウィジェットを持っている場合たとえば、あなたは、divの中にそれを置くのdivにCSSのIDを与え、その後、{フォントファミリのような単純なようなものが含まれるようにスプレッドシートに向かうことができます：「エキソ」、Arial、sans-serif;} 、しかしそれは多くの問題です。

より良いオプションは、単にこれを行うことでしょうか？

<div style="font-family: "Exo", Arial, sans-serif;" />

バダビン、バダブーム、これで完了です。そのウィジェットは、その特定のスタイリングを取得する唯一のウィジェットであるため、目立つようになりました。（もちろん、新しい異なるフォントを使用すると、他のデザインと衝突する可能性があることを認識しています。しかし、これは一例です。）

1つのシンプルなページ

時々、あなたはあなたのサイトに非常に単純な、一回限りのページを持っています。スプラッシュページまたはスクイーズページの場合があります。ここでスタイリングを少し調整する必要があるかもしれませんが、このページとこのページだけに適用するには、微調整が必要です。

そのため、頻繁に悪用される！importantタグをスタイルと一緒に使用して、新しいスタイルシートを作成してリンクするよりも迅速かつ簡単に作業を行うことができます。この方法は、新しいCSSがあまりない場合に最適です。このように、大量のCSSをロードすると、ページのロードが遅くなる可能性があるためです。しかし、あなたはすでにそれを知っていました。

ただし、このような単純なものは、ユーザーの接続にそれほど大きな負担をかけることはなく、スタイルシートに追加する価値はありません。（そして公平を期すために、このCSSは恐ろしいものであり、どのサイトにも追加する価値はありません。Teehee！）

<style>
h2, h3, h4 {
  font-family: "Exo", Arial, sans-serif!important; 
  text-align: right; 
	font-size: 2rem; 
	color: blue;}
body, p {font-family: "Roboto", Arial, sans-serif!important; 
  font-size: 1.2rem; 
	color: red; 
	background: #000;}
	</style>

ただし、ここでのポイントは、既存のスタイルシートを微調整できるように、Webサイトのヘッドにスタイルタグを追加することでHTML5が優れているということです。この場合、 ！importantタグは絶対に必要ありませんが（めったに必要ありません）、おそらく、タグスパゲッティをあまり引き起こさないので、これはおそらく1回限りの使用だと思います（または他の開発者）は、この単一のページにのみ適用されるため、サイトでの作業を開始します。

複数のビューポートサイズ

メディアクエリはあなたの友達です。それらに完全に精通していない場合は、それらをよく読んでおくことを強くお勧めします。基本的に、特定のCSSを有効にするために満たす必要のあるパラメーターを宣言できます。ただし、ほとんどの場合、これを使用して、サイトがさまざまなデバイスで動作することを確認します。サイト全体の応答性が必要な場合は、スタイルシートに記載されます。

ただし、モバイルで表示を変える必要がある、またはまったく表示しない必要がある単一のページまたは要素がある場合（またはデスクトップの解像度をさらに小さくまたは大きくする場合）、ヘッダーのスタイルタグを使用してそれを行うことができます。

<style>
@media (max-width: 767px) {

.white_text {
    color: #ffffff;
}

.blue_text {
    color: #cbe1f3;
}

.white_background {
    background-color: #ffffff;
}

.blue_background {
    background-color: #003663;
}

#email_form_a {
  display:none;
}
</style>

スタイリンとプロフィリン

CSSはWeb開発の非常に重要な部分であるため、ほとんどの人が知って使用する必要があります。あなたがアクセス権を持っている微妙なツールを使用する際に、さらにCSSを知っているよりは知っています。

したがって、スタイルシートに制限されているとは思わないでください。確かに、それらは素晴らしくて便利であり、Web全体をより良い場所にしますが、それでも単純なスタイルのタグを利用して、サイトに少し余分なポップを与えることができます。

では、.cssスタイルシートの外でスタイルタグをどのように使用しますか？ あなたは人々にどのような洞察を与えることができますか？

Creative Thoughts /shutterstock.comによる記事のサムネイル画像