HTML５で装飾するには
スタイルシート
HTML５では、装飾するのにスタイルシート形式を利用するよう推奨しています。なので、ついでにCSSの説明をしておきます。
CSSの記述方法はHTMLファイルに直接記述する方法や外部にCSSファイルを作成する方法があります。
直接記述する例
最初は直接記述する方法を覚えましょう。HTMLファイルに直接記述する方法にも２種類の方法がありますが、始めはタグに直接記述する方法を見てみましょう。
これで見出し(h3)の文字の大きさが24ピクセルになります。この(h3)の部分をセレクターと言います。font-sizeの部分をプロパティと言い、24pxの部分が値と言います。
これが基本ですが、最初は訳が分からないと思いますので無理に覚える必要はありません。
<head>〜</head>間に記述する方法
上の直接記述する方法では、その部分だけを装飾するには有効ですが、複数の部分に設置したい場合は何度も記述する必要があります。設定を何度も使いたい場合はCSSをhead間に記述する方法が有効です。
head間にスタイルシートを設定するとbody間のタグを変える事無く装飾ができます。簡単な例で説明しましたが、御自身で色々試してみると理解できるようになるはずです。
簡単に説明致しましたが、例を挙げるときりがありません。実際に御自身で色々試したい場合、役立つサイトリンク集のタグの部屋で色々タグをコピーしてファイルを作成してみて下さい。また、基本をしっかり覚えたいなら役立つサイトリンク集のHTMLリファレンスで細かく解説されています。
習うより慣れろでチャレンジしてみて下さいね。
補足
スタイルシートの色やサイズ
上のサンプルでは色を表す値は色コードの16進数を使用していますが、その他のコードなどの設定方法があります。また、サイズも同様にピクセル以外にもたくさんの値で設定する事ができます。
役立つアプリ
色見本などはたくさんのiPhoneアプリがあります。実際に私自身が使用しているアプリを紹介します。
ColorCodeFree
色見本アプリです。写真からカラーコードを取得する事もできて便利に使えます。無料版には広告が入ります。
ColorCodeFree
色見本アプリです。写真からカラーコードを取得する事もできて便利に使えます。有料版には広告がありません。
装飾全般
HTML５のスタイルシート推奨
HTML５で装飾をするにはスタイルシートで装飾をする事を推奨しています。しかし、これから覚えようとする初心者にとっては、HTML？CSS？と混乱する可能性もあります。
ある程度慣れてくれば少しづつ身に付くはずですので、初心者の方は繰り返し練習して下さい。
また、練習するにもコピぺだけに頼らずに考えながら覚える習慣を身につけて下さい。
HTML超初級編、 HTML初級基礎編、 HTML初級装飾編。 この３編を練習する事でHTMLの基礎は貴方の常識になる事でしょう。そして他のリンクやアプリを利用して今よりも一歩づつでもステップアップして下さいね。
次の章でコピーして使えるサンプルを用意致しますが、コードをコピーして確認したら「なぜそうなるのか」と基本を調べて覚えましょう。
次はHTML初級応用編です。
