一般的に使用される CSS 命名規則の例を共有する-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

一般的に使用される CSS 命名規則の例を共有する

小云云

Dec 22, 2017 pm 05:17 PM

css 共有

この記事では主に、一般的に使用される CSS 命名規則 (推奨) をいくつか紹介します。この記事が、皆さんが CSS をよりよく学び、使いこなすのに役立つことを願っています。

よく使われるCSSの命名規則（推奨）

Header: header

Content: content/container

Tail: footer

Navigation: nav

Sidebar: Sidebar

Column: column

ページ周辺コントロール全体のレイアウト幅: ラッパー

左右中央

ログインバー: ログインバー

ロゴ: ロゴ

広告: バナー

ページ本体: メイン

ホットスポット: ホット

ニュース: ニュース

ダウンロード: ダウンロード

サブナビゲーション:サブナビ

メニュー: メニュー

サブメニュー: サブメニュー

検索: 検索

フレンドリーリンク: フレンドリンク

フッター: フッター

著作権: 著作権

スクロール: スクロール

コンテンツ: コンテンツ

タグページ: タブ

記事リスト: list

Tips: msg

Tips: Tips

コラムタイトル: title

参加: joinus

ガイド: ギルド

サービス: service

登録: regsiter

ステータス:status

vote: vote

パートナー: パートナー

(1) ページ構造

コンテナ: コンテナ

ヘッダー: ヘッダー

コンテンツ: コンテンツ/コンテナ

ページボディ: メイン

フッター:フッター

ナビゲーション: nav

Sイデバー:sidebar

Column:column

ページ周辺コントロール全体のレイアウト幅:wrapper

left right center

(2) Navigation

Navigation:nav

main Navigation:mainbav

sub-navigation:subnav

トップナビゲーション:topnav

サイドナビゲーション: サイドバー

左ナビゲーション: 左サイドバー

右ナビゲーション: 右サイドバー

メニュー: メニュー

サブメニュー: サブメニュー

title: タイトル

Summary: summary

(3) 機能

ロゴ: ロゴ

広告: バナー

ログイン: ログイン

ログインバー: ログインバー

登録: 登録者

検索: 検索

リボン: ショップ

title ：title

Join: joinus

Status:ステータス

ボタン: btn

スクロール: スクロール

タブ: タブ

記事リスト: list

プロンプトメッセージ: msg

現在: 現在

ヒント:tips

icon:icon

note:note

ガイド:ギルド

サービス:サービス

ホットスポット:ホット

ニュース:ニュース

ダウンロード:ダウンロード

投票:投票

パートナー:パートナー

フレンドリーリンク:リンク

著作権:著作権

メインマスター.css

module module.css

基本的には、base.css

layout、layout.css

theme、css

columns、css

text font.css

forms.css

patch mend.cssを共有します。

print print.css

名前を付けることは非常に簡単だと思われるかもしれませんが、適切な名前付け規則を使用すると開発がよりスムーズに進みます。CSS の名前付けルールに関するこの記事が皆さんのお役に立てば幸いです。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1667

CakePHP チュートリアル

1426

Laravel チュートリアル

1328

PHP チュートリアル

1273

C# チュートリアル

1255

Related knowledge

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

HTML、CSS、およびJavaScriptの理解：初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。