コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語

HTML スタイル

このセクションでは、HTML の style タグを紹介します

まずコードを見てみましょう

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 <body style="background-color:black;">
 
 <h1 style="color: white">标题的颜色</h1>
 
 <p style="color:red">
     我是标签的颜色</p>
 </body>
 </html>

上記のコードは、Web ページの背景色を黒に、タイトルの文字色を白に変更し、段落のテキストの色を赤にします

コードの実行結果:

28.png

上記のコードでは、タグ 、

、または

のいずれであっても、そのタグが確認できます。これで、HTML 要素のスタイルを変更するために使用される style 属性がわかりました。

HTML スタイル属性

スタイル属性の役割 : すべての HTML 要素のスタイルを変更するための汎用メソッドを提供します。

スタイルは HTML 4 で導入され、HTML 要素のスタイルを変更する新しい推奨方法です。 HTML スタイルを使用すると、style 属性を使用して HTML 要素にスタイルを直接追加したり、別のスタイル シート (CSS ファイル) でスタイルを定義して間接的にスタイルを追加したりできます。

CSS チュートリアルでスタイルと CSS についてすべて学ぶことができます。

HTML チュートリアルでは、style 属性を使用した HTML スタイルについて説明します。

非推奨のタグと属性

HTML 4 では、いくつかのタグと属性が非推奨になりました。非推奨とは、これらのタグと属性が HTML および XHTML の将来のバージョンでサポートされなくなることを意味します。

ここでのメッセージは明らかです。これらの非推奨のタグと属性の使用は避けてください。

次のタグと属性は避けてください:

は HTML フォントを定義します。
タグ属性
<font> と <basefont>
プロパティ
説明
with 」 テキストの色を定義します


上記のタグと属性の場合: 代わりにスタイルを使用してください。

HTML スタイルの例 - 背景色

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

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 <body style="background-color:yellow">
 
 </body>
 </html>

style 属性は、「古い」bgcolor 属性を廃止します。 

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 <body bgcolor="yellow">
 </body>
 </html>

HTML スタイルの例 - フォント、色、サイズ

font-family、color、font-size 属性は、要素内のテキストのフォント ファミリー、色、フォント サイズをそれぞれ定義します: 

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 
 <h1 style="font-family:verdana">标题</h1>
 <p style="font-family:arial;color:red;font-size:20px;">段落</p>
 
 </body>
 </html>

style属性は廃止されました 古い <font> タグは使用できなくなりました

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 
 <h1><font face="verdana">标题</font></h1>
 <p><font size="5" face="arial" color="red">段落</font></p>
 
 </body>
 </html>

HTML スタイルの例 - テキストの配置

text-align 属性は、要素内のテキストの水平方向の配置を指定します: 

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 <body>
 <h1 style="text-align:center">标题</h1>
 <p>学HTML PHP 就到www.php.cn</p>
 </body>
 </html>

style属性は廃止されました 古い「align」属性。

りー


学び続ける
||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body style="background-color:black;"> <h1 style="color: white">标题的颜色</h1> <p style="color:red"> 我是标签的颜色</p> </body> </html>
提出するリセットコード
前のセクション 次のセクション
チュートリアルリスト
ヘルプの取得
  • おすすめコース
  • コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜

このコースを視聴した生徒はこちらも学んでいます

最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)  492858 回再生