Skip to main content

自分のCSSスタイルシートファイルの名前を教えてください。

#14 WP ZoomUP 『誰もが使える』デザインを生み出すために (四月 2024)

#14 WP ZoomUP 『誰もが使える』デザインを生み出すために (四月 2024)
Anonim

CSS(カスケーディングスタイルシート)によって、ウェブサイトのルックアンドフィールまたは「スタイル」が決定されます。これは、ウェブサイトのディレクトリに追加するファイルで、ページのビジュアルデザインとレイアウトを作成するさまざまなCSSルールが含まれています。

サイトは複数のスタイルシートを使用することができますが、そうする必要はありません。すべてのCSSルールを1つのファイルに配置することができます。複数のファイルを取得する必要がないため、ページの読み込み時間とパフォーマンスが向上するなど、実際には利点があります。非常に大規模なエンタープライズサイトは時々別のスタイルシートを必要とすることがありますが、小規模から中規模の多くのサイトでは、ページに必要なすべてのルールを含む1つのファイルで完璧に細かく処理できます。これは「このCSSファイルの名前はどうすればよいですか?

命名規則の基本

Webページ用の外部スタイルシートを作成する場合は、HTMLファイルと同様の命名規則に従ってファイル名を指定する必要があります。

特殊文字を使用しない

CSSファイル名には、アルファベットa〜z、数字0〜9、アンダースコア(_)、ハイフン( - )のみを使用してください。ファイルシステムでは、他の文字を含むファイルを作成することができますが、サーバーOSには特殊文字に関する問題がある可能性があります。あなたはここで言及された文字だけを使ってより安全です。結局のところ、サーバーで特殊文字が許可されていても、将来的にホストプロバイダに移行する場合はそうではないかもしれません。

任意のスペースを使用しない

特殊文字と同様に、スペースはWebサーバーに問題を引き起こす可能性があります。あなたのファイル名でそれらを避けることは良い考えです。あなたがウェブサイトにそれらを追加する必要がある場合に備えて、これらの同じ規則を使ってPDFのようなファイルに名前を付けることさえ必要です。ファイル名を読みやすくするためのスペースが必要だと強く感じる場合は、代わりにハイフンまたはアンダースコアを使用してください。たとえば、 "this is the file.pdf"を使用する代わりに "this-is-the-file.pdf"を使用します。

ファイル名は文字で始める必要があります

これは絶対的な要件ではありませんが、一部のシステムでは文字で始まらないファイル名に問題があります。たとえば、ファイルを数字で始める場合、問題が発生する可能性があります。

すべての小文字を使用

これはファイル名には必須ではありませんが、一部のWebサーバーでは大文字と小文字が区別されるため、別のケースでファイルを忘れて参照すると読み込まれません。すべてのファイル名に小文字を使用することは、常にスマートな方法です。実際、多くの新しいWebデザイナーはこれを覚えなければ苦労しています。ファイルの名前を付けるときのデフォルトアクションは、名前の最初の文字を大文字にすることです。これを避け、小文字の習慣に入るだけです。

可能な限りファイル名を短くしてください

ほとんどのオペレーティングシステムではファイル名のサイズに制限がありますが、CSSファイル名の場合よりもはるかに長くなります。拡張子を含まないファイル名については、20文字を超えないようにしてください。現実的には、それよりもずっと長いものは、とにかく作業したりリンクしたりするのが面倒です。

あなたのCSSファイル名の最も重要な部分

CSSファイル名の最も重要な部分は、ファイル名自体ではなく、拡張子です。 MacintoshとLinuxシステムでは拡張機能は必要ありませんが、CSSファイルを作成する際には拡張機能を含めることをお勧めします。そうすれば、スタイルシートであり、将来何があるかを判断するためにファイルを開く必要がないことが常にわかります。

おそらく大きな驚きではありませんが、CSSファイルの拡張子は次のとおりです。

.css

CSSファイル命名規則

サイトにCSSファイルが1つしかない場合は、好きなように名前を付けることができます。以下のうちの1つが好ましい。

styles.cssまたはdefault.css

あなたのウェブサイトが複数のCSSファイルを使用する場合は、各ファイルの目的が明確であるように、機能の後にスタイルシートの名前を付けます。 Webページには複数のスタイルシートが添付されているため、そのシートの機能とそのスタイルに応じて、スタイルを異なるシートに分割することができます。例えば:

  • レイアウトとデザイン

    layout.css design.css

  • ページセクション

    main.css nav.css

  • サブセクションを含むサイト全体

    mainstyles.css subpage.css

あなたのウェブサイトがある種のフレームワークを使用している場合、ページの異なる部分やサイトの側面(タイポグラフィ、色、レイアウトなど)にそれぞれ専用の複数のCSSファイルが使用されていることに気づくでしょう。

ジェレミージラール編集