English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML 基本チュートリアル

HTML メディア

HTML リファレンスマニュアル

HTML5 基本チュートリアル

HTML5 API

HTML5 メディア

HTML CSS

CSS(Cascading Style Sheets)は、HTML要素タグのスタイルをレンダリングするために使用されます。

オンラインの更多例

HTMLにスタイルを適用
以下の例では、<head> 部分に追加されたスタイル情報を使用してHTMLをフォーマットする方法を示します。

スタイル属性を使用して下線のないリンクを作成する方法を示します。
style属性を使用して下線のないリンクを作成する方法

外部スタイルシートにリンクする方法
以下に示すように タグが外部スタイルシートにリンクされています。

CSSの使用方法

CSSはHTML 4 始めるために導入された、HTML要素のレンダリングをより良くするために。

CSSは以下の方法でHTMLに追加できます:

  • インラインスタイル- HTML要素に "style" 属性を使用して

  • 内部スタイルシート -HTMLドキュメントのヘッダー <head> 領域に <style> 要素を使用してCSSを含めます

  • 外部参照 - 外部CSSファイルの使用

最適な方法は、外部CSSファイルを参照することです。

このサイトのHTMLチュートリアルでは、インラインCSSスタイルを使用して例を示しました。これは例をシンプルにし、オンラインでコードを編集して実行するのがより簡単になるようにしました。

このサイトの CSS 教程 さらに多くのCSS知識を学ぶには。

インラインスタイル

特定のスタイルが個別の要素に適用される必要がある場合、インラインスタイルを使用できます。インラインスタイルの使用方法は、関連するタグにスタイル属性を使用することです。スタイル属性は、どんな CSS 属性も含むことができます。以下の例では、段落の色と左外側マージンを変更する方法を示しています。

<p style="color:blue;margin-left:20px;">これは段落です。</p>

さらに詳しく学ぶには、こちらを訪れてください CSS 教程.

HTMLスタイルの例 - 背景色

背景色属性(background-color)要素は、要素の背景色を定義します:

!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8> 
<title>基本チュートリアル(oldtoolbag.com)</title> 
</head>
<body style="background}}-color:yellow;">
<h2 style="background-color:red;">これはタイトルです</h2>
<p style="background-color:green;">これは段落です。</p>
</body>
</html>
テストを見てみましょう ‹/

初期の背景色属性(background-color)はbgcolor属性を使用して定義されます。

テストを見てみましょう ‹/›

現在は通常font-family(フォント)、color(色)、およびfont-size(フォントサイズ)属性を使用してテキストのスタイルを定義します。フォントタグ<font>を使用するのではなく、これを使用します。

HTML スタイルの例 - テキストアライメント方法

text-align(テキストアライメント)属性は、テキストの水平および垂直アライメント方法を指定します:

オンラインの例

!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8> 
<title>基本チュートリアル(oldtoolbag.com)</title> 
</head>
<body>
<h1 style="text-align:center;">中央に配置されたタイトル</h1>
<p>これは段落です。</p>
</body>
</html>
テストを見てみましょう ‹/›

テキストアライメント属性 text-alignが古いタグ <center> を置き換えました。

内部スタイルシート

特定のファイルに特別なスタイルが必要な場合、内部スタイルシートを使用できます。内部スタイルシートは<head>部分で<style>タグを使用して定義できます:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部スタイルシート

スタイルが多くのページに適用される必要がある場合、外部スタイルシートが理想的です。外部スタイルシートを使用すると、1つのファイルを変更することで全体のサイトの外観を変更できます。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML スタイルタグ

タグ説明
<style>テキストのスタイルを定義
<link>リソース参照のアドレスを定義

廃止されたタグと属性

HTMLにおいて 4以前にHTML要素のスタイルを定義するタグや属性は廃止されました。これらのタグは新しいHTMLタグのサポートを受けません。

使用を推奨しないタグには: <font>, <center>, <strike> があります。

使用しないべき属性: color と bgcolor.