ホームページ作成講座

初心者の為のホームページ作成講座/ホームページの装飾

ここでは文字の装飾方法からリンクの方法など基本的な事柄だけを説明します。

あまり気にしてる方は少ないと思いますが、将来的な事も考えてあえて紹介させて頂きます。

本来HTMLの文章の記入は

見出し<h1>→段落（文章）<p>、小見出し<h2>以降→段落（文章）<p>

上記のように記述するのが本来の正しい姿です。

今どきはHPを閲覧するのにパソコンのみならず、携帯などでも閲覧できますよね。また、ブラウザもInternet Explorerのみならずさまざまなものがあり、同じInternetExplorerでもバージョンによって表示が違ってきます。

また、もし万一HTML内にバグがあったりHTMLの文法かおかしかったりしたら何をHPで紹介しているのか全く分からなくなります。しかしながらHTMLの本来の表現方法にしたがって記述さえしておけば万一の際もある程度の意味合いは伝わります。

例：下記ソースを作成したメモ帳の<body>～</body>にコピペしてみて下さい。メモ帳の表示の仕方は【ステップ2】を再確認。

<h1>ホームページの作成</h1> <p>ホームページの作成方法を教えます</p> <h2>見出しタグについて</h2> <p>文章の基本的な記述は見出しタグを使います</p> <h3>見出しタグの種類</h3> <p>＜h1＞から始まり＜h6＞まであります</p>

表示出来たら→sampleを見てみて下さい。

サンプルの上は上記のような正しいマークアップをしていないもの、サンプル下が上記のような記述です。この程度の事なのですが、後々SEOといった部分で重要になります。因みに見出しタグですが、<h1>はひとつのページ内に1回しか使わないように。

スタイルシートで指定します。

相対値指定します。一番簡単な指定として【%】を使います。

body{ font-size: 80%; }

bodyに指定する事でページ内の全ての文字に継承されます。保存した【index.html】を使っていろいろ試して下さい。

body{ color: 色; }

上記はページ全体に継承されます。

保存した【index.html】を使っていろいろ試して下さい。カラーコード

html

<p>文字の強調は<strong>強調したい文字</strong>とします。

<p>斜体は<em>斜体にしたい文字</em>とします。

色や太さはスタイルシートで指定します。

strong{ color: red; }

<br>タグを使います。

例：
改行したい文末で<br>
改行したい文末で<br>

ですが、せっかく本来の段落タグ<p>がありますので、なるべくこのタグをしようしましょう

以上のような感じですが、如何ですか？この段階でホームページはほぼ出来上がりましたね。あとはモットモット見た目を整理すればOK！スタイルシートを利用すればモット表現が豊かになります。もし理解が深まれば一度当サイトを隅々まで見て頂ければと思います。

無料サーバー

お薦めサーバー

ネットショップ

CMSブログソフトウェア