HTMLとCSSの基礎-CSSチュートリアル-php.cn

HTML と CSS は Web ページの最も基本的な構成要素であり、Web 開発者になるための最初のステップでもあります。 HTML は Web ページのレイアウトとコンテンツを提供し、CSS はそのスタイルと外観を定義します。このチュートリアルでは、HTML と CSS の基本を説明します。最後には、あらゆるサイズのデバイスでシームレスに動作するレスポンシブ Web ページをデザインできるようになります。

HTMLとは何ですか?

HTML は、Web ページの作成に使用される標準のマークアップ言語です。見出し、段落、画像、リンク、フォームなどの HTML 要素を使用して、Web ページの構造とコンテンツを定義します。

HTML コードの作成を開始するには、以下の CodePen デモを使用できます。

コードデモ?

左側には HTML ソースコードが表示されます。これは基本的に、表示される内容の設計図です。ブラウザはこのブループリントを右側に表示される Web ページに変換します。

ソースコードを直接変更して、表示される Web ページにどのような影響を与えるかを確認できます。

Web 開発用にコンピューターを準備する

もちろん、実際には、動作する完全な機能を備えた Web アプリケーションを作成するために CodePen などのツールに依存することはできません。もっと強力なものが必要なので、Web 開発用にコンピューターをセットアップしましょう。

まず、ブラウザがインストールされていることを確認してください。このコースには、Google Chrome、Microsoft Edge、Safari、Firefox などの一般的な Web ブラウザーで十分です。リンクされた Web サイトからブラウザをダウンロードしてインストールできます。

さらに、コードを作成および編集するにはコードエディターが必要です。 Visual Studio Code は、初心者 (さらに言えば専門家) にとって優れたオプションです。世界で最も一般的に使用されているコードエディターです。公式 Web サイトからオペレーティングシステムに適切なインストーラーをダウンロードするだけです。

Fundamentals of HTML and CSS

VSCode をインストールした後、必ず Live Server 拡張機能もインストールしてください。左側のサイドバーの 拡張機能 タブに移動し、検索ボックスに「ライブサーバー」と入力します。そこから、拡張機能をダウンロードしてインストールできます。

Fundamentals of HTML and CSS

ライブサーバー は、自動リロード機能を備えたローカル開発サーバーを作成します。たとえば、新しい作業ディレクトリを作成し、VSCode を使用して開きます。

Fundamentals of HTML and CSS

このディレクトリの下に、index.html という名前の新しいファイルを作成します。 .html 拡張子は、これが HTML ドキュメントであることを示します。と入力してください！ VSCode で実行すると、次のような提案が表示されます:

Fundamentals of HTML and CSS

これは、HTML ドキュメントをすばやく作成するためのショートカットです。 ↑ または ↓ キーで移動できます。最初のオプションを選択すると、次のコードが生成されます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

ログイン後にコピー

VSCode ウィンドウの右下隅に、ライブ配信 ボタンがあることに注意してください。

Fundamentals of HTML and CSS

このボタンをクリックすると、Live Server 拡張機能が有効になります。ローカル開発サーバーが起動し、作成したばかりのindex.htmlファイルをホストします。

Fundamentals of HTML and CSS

もちろん、現時点ではファイルはまだ空なので、何も表示されません。の間に何かを追加します。タグ。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    Hello, world!
  </body>
</html>

ログイン後にコピー

変更を保存すると、Web ページが新しいコンテンツで自動的に更新されます。

Fundamentals of HTML and CSS

HTML文書の構造

典型的な HTML ドキュメントは常に次の構造を持っています:

<!DOCTYPE html>
<html lang="en">
  <head>
    . . .
  </head>
  <body>
    . . .
  </body>
</html>

ログイン後にコピー

タグはドキュメントの種類を定義します。 Web ブラウザはに遭遇すると、HTML 標準の最新バージョンである HTML5 の仕様に従ってページを解析して表示する必要があることを理解します。これにより、最新のブラウザが Web ページのコンテンツとレイアウトを正しく解釈できるようになります。

ファイル内のその他すべてはで囲む必要があります。要素。開始タグ () と終了タグ () で定義されます。

lang は属性と呼ばれ、値「en」を持ちます。これにより、ブラウザと検索エンジンに、この Web ページで使用される主言語が英語であることがわかります。

内要素には、

という 2 つの子要素があります。そして。 HTML ドキュメントに関するメタデータとその他の情報が含まれています。この情報はブラウザには表示されませんが、SEO (検索エンジン最適化) の目的で検索エンジンによってよく使用されます。一方、

には、ユーザーに表示される Web ページのメインコンテンツが含まれており、そのため、このコースで焦点を当てる HTML ファイルの部分でもあります。 .

要素と属性

前の例を詳しく見て、HTML ドキュメントが入れ子構造のさまざまな要素で構成されていることに注目してください。 HTML では、ほとんどの要素に開始タグと終了タグの両方があります:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

ログイン後にコピー

この場合、<タグ>は開始タグ、は開始タグです。は終了タグであり、これらが一緒になって HTML 要素を形成します。要素には、開始タグと終了タグの間にテキストコンテンツを含めることができます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    Hello, world!
  </body>
</html>

ログイン後にコピー

要素は他の要素を囲んで、入れ子構造を形成することもできます。

<!DOCTYPE html>
<html lang="en">
  <head>
    . . .
  </head>
  <body>
    . . .
  </body>
</html>

ログイン後にコピー

開始タグ内で、クラス、ID などの要素に関する追加情報を指定するために使用される属性を定義できます。

<tag>. . .</tag>

ログイン後にコピー

属性は通常、キーと値のペアで構成され、値は常に一致する引用符 (二重または一重) で囲む必要があります。

これらの一般的な形式にはいくつかの例外があります。たとえば、
改行を作成する要素には終了タグは必要ありません。複数などの一部の属性には値が必要ありません。これらの例外については、このコースの後半で遭遇したときに説明します。

ただし、要素に終了タグが必要な場合は、決して省略しないでください。ほとんどの場合、Web ページは引き続き正しく表示されますが、HTML ドキュメントの構造が複雑になるにつれて、予期しないエラーが発生する可能性があります。興味があれば、HTML と CSS を記述するためのベストプラクティスガイドラインをご覧ください。