HTML初級装飾編

HTML5で装飾するには

スタイルシート

HTML5では、装飾するのにスタイルシート形式を利用するよう推奨しています。なので、ついでにCSSの説明をしておきます。

CSS カスケーディング スタイル シート
Cascading Style Sheets
CSSの基本
セレクタープロパティ
で構成されます。

CSSの記述方法はHTMLファイルに直接記述する方法や外部にCSSファイルを作成する方法があります。


直接記述する例

最初は直接記述する方法を覚えましょう。HTMLファイルに直接記述する方法にも2種類の方法がありますが、始めはタグに直接記述する方法を見てみましょう。

文字のサイズ(h3の例) <h3 style="font-size:24px;">(h3)見出しのサイズは24ピクセル</h3>

これで見出し(h3)の文字の大きさが24ピクセルになります。この(h3)の部分をセレクターと言います。font-sizeの部分をプロパティと言い、24pxの部分がと言います。

これが基本ですが、最初は訳が分からないと思いますので無理に覚える必要はありません。

文字の色(h3の例) <h3 style="color:#ff0000;">(h3)見出しの色は赤です</h3>

<head>〜</head>間に記述する方法

上の直接記述する方法では、その部分だけを装飾するには有効ですが、複数の部分に設置したい場合は何度も記述する必要があります。設定を何度も使いたい場合はCSSをhead間に記述する方法が有効です。

head間に記述する場合の基本 <!DOCTYPE html>
<html lang="ja">
<head>
<title>タイトル</title>
<style>
〜ここにスタイルシートを設定します〜
</style>
</head>
<body>
<h1>見出しh1</h1>
<p>文章</p>
<h2>見出しh2</h2>
<p>文章</p>
</body>
</html>
スタイルシート(style間) <style>
h1 {color:#0000ff;}
h2 {color:#00ff00;}
p {font-size:10px; color:#ff0000;}
</style>

head間にスタイルシートを設定するとbody間のタグを変える事無く装飾ができます。簡単な例で説明しましたが、御自身で色々試してみると理解できるようになるはずです。

簡単に説明致しましたが、例を挙げるときりがありません。実際に御自身で色々試したい場合、役立つサイトリンク集のタグの部屋で色々タグをコピーしてファイルを作成してみて下さい。また、基本をしっかり覚えたいなら役立つサイトリンク集のHTMLリファレンスで細かく解説されています。

習うより慣れろでチャレンジしてみて下さいね。


補足

スタイルシートの色やサイズ

上のサンプルでは色を表す値は色コードの16進数を使用していますが、その他のコードなどの設定方法があります。また、サイズも同様にピクセル以外にもたくさんの値で設定する事ができます。


役立つアプリ

色見本などはたくさんのiPhoneアプリがあります。実際に私自身が使用しているアプリを紹介します。

ColorCodeFree

ColorCodeFree

色見本アプリです。写真からカラーコードを取得する事もできて便利に使えます。無料版には広告が入ります。

ColorCode

ColorCodeFree

色見本アプリです。写真からカラーコードを取得する事もできて便利に使えます。有料版には広告がありません。

装飾全般

HTML5のスタイルシート推奨

HTML5で装飾をするにはスタイルシートで装飾をする事を推奨しています。しかし、これから覚えようとする初心者にとっては、HTML?CSS?と混乱する可能性もあります。

ある程度慣れてくれば少しづつ身に付くはずですので、初心者の方は繰り返し練習して下さい。

また、練習するにもコピぺだけに頼らずに考えながら覚える習慣を身につけて下さい。

HTML超初級編HTML初級基礎編HTML初級装飾編。 この3編を練習する事でHTMLの基礎は貴方の常識になる事でしょう。そして他のリンクやアプリを利用して今よりも一歩づつでもステップアップして下さいね。

次の章でコピーして使えるサンプルを用意致しますが、コードをコピーして確認したら「なぜそうなるのか」と基本を調べて覚えましょう。


次はHTML初級応用編です。


表示モード切り替え