Web標準に準拠したWebサイトデザイン仕様書を作成する-CSSチュートリアル-php.cn

Web標準に準拠したWebサイトデザイン仕様書を作成する

WBOY

リリース： 2024-01-13 13:32:17

オリジナル

1200 人が閲覧しました

Web標準に準拠したWebサイトデザイン仕様書を作成する

Web 標準に準拠した Web サイトデザインガイドの構築

現代のインターネット時代において、Web サイトは企業、組織、さらには個人にとっても、自分のサイトを表示するための重要なプラットフォームとなっています。画像、情報発信、コミュニケーションを行っております。 Web サイトがさまざまなデバイス上で正常に動作し、優れたユーザーエクスペリエンスを提供できるようにするには、Web 標準に準拠した Web サイトを構築することが急務となっています。この記事では、主要な Web サイト設計ガイドラインを 1,500 ワードで紹介し、具体的なコード例を添付します。

1. HTML 仕様

HTML は Web ページを構築するための基本言語であり、HTML 仕様に従うことで、Web ページの正しい解析と良好なアクセシビリティが保証されます。

セマンティックタグを使用する: 適切な HTML タグを使用して、ページコンテンツの構造と意味を表します。たとえば、<header></header> を使用してページヘッダー、 を表します。 <nav> はナビゲーションを表し、<code><article></article> は記事などを表します。
タグの乱用を避ける: <div> タグを乱用しないでください。ただし、ページ構造をより適切に説明するためにセマンティックタグを使用してください。 <li>適切な属性値を使用する: 画像の説明の <code>alt 属性、マウスホバープロンプトの待機の title 属性など、適切な属性値をラベルに追加します。

サンプルコード:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>网站标题</title>
  </head>
  <body>
    <header>
      <h1>网站标题</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
    <article>
      <h2>文章标题</h2>
      <p>文章内容</p>
    </article>
    <footer>
      <p>版权信息</p>
    </footer>
  </body>
</html>

ログイン後にコピー

2. CSSの仕様

CSSはWebページのスタイルやレイアウトを制御する言語であり、CSSの仕様に従うことでメンテナンス性を高めることができます。そしてスケーラビリティ。

外部スタイルシートを使用する: CSS コードを外部スタイルシートに配置し、<link> タグを通じて導入し、HTML ファイル内でスタイルが混在しないようにします。
インラインスタイルの使用を避ける: タグの style 属性に CSS コードを記述することは避けてください。ただし、外部スタイルシートで定義する必要があります。
カスケードスタイルシートの継承と優先順位を使用する: カスケードスタイルシートの特性を利用し、セレクターとウェイトを合理的に使用してスタイルを制御します。

サンプルコード:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>网站标题</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>网站标题</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
    <article>
      <h2>文章标题</h2>
      <p>文章内容</p>
    </article>
    <footer>
      <p>版权信息</p>
    </footer>
  </body>
</html>

ログイン後にコピー

styles.css ファイル:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

nav {
  background-color: #f2f2f2;
  padding: 10px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

article {
  padding: 20px;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

ログイン後にコピー

3. レスポンシブデザイン

モバイルデバイスの普及に伴い、レスポンシブなスタイルが求められています。デザインは重要なデザイン要件となっており、Web サイトがさまざまなデバイスに自動的に適応し、一貫したユーザーエクスペリエンスを提供できるようになります。

メディアクエリを使用する: メディアクエリを使用して、デバイスのサイズに応じてレイアウトとスタイルを調整し、応答性の高い効果を実現します。
柔軟なレイアウト: パーセンテージ、フレキシブルボックスモデル、またはグリッドレイアウトを使用して、適応的な Web ページレイアウトを実現します。

サンプルコード:

メディアクエリをstyles.css ファイルに追加します:

@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }

  header {
    padding: 10px;
  }

  nav ul li {
    margin-right: 5px;
  }

  article {
    padding: 10px;
  }

  footer {
    padding: 10px;
  }
}

ログイン後にコピー

上記のガイドを通じて、Web に準拠した Web サイトデザインを構築できます。規格。これらの仕様とテクノロジーにより、Web サイトのアクセシビリティ、保守性、ユーザーエクスペリエンスが向上すると同時に、検索エンジンでの Web サイトのランキングも向上します。この記事があなたのウェブサイトのデザイン構築に役立つことを願っています。

以上がWeb標準に準拠したWebサイトデザイン仕様書を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。