×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

ホームページ作成講座

Home > 初心者の為のホームページ作成講座目次 > ステップ4

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

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

HTMLの正しい記入方法

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

本来HTMLの文章の記入は

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

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

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

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

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

表示出来たら→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!スタイルシートを利用すればモット表現が豊かになります。もし理解が深まれば一度当サイトを隅々まで見て頂ければと思います。

ステップ5へ

Home | 目次 | Page Top

無料サーバー
お薦めサーバー
ネットショップ
CMSブログソフトウェア

サイトマップ