ビジネスで使えるホームページを初心者でも無料で作れるように支援します。
ログイン | RSS
$title_name ~無料でホームページを作る塾~
無料でホームページを作る塾

動画解説で初心者でも簡単にホームページがつくれる!まずは無料テンプレートをダウンロード!

ホームページデザインの基本スタイルシート


スタイルシートで「見栄え」を良くする!

動画を見る

HTMLはホームページを作るパーツに対して、CSS(Cascading Style Sheets)はデザインやレイアウトを定義するパーツで、
タグに直接指定する方法
HTMLファイルのヘッドに指定する方法
CSSファイルで一括指定する方法
の3種類があります。

ここでは「 CSSファイルで一括指定する方法 」を採用します。

方法は、HTMLファイル内の<HEAD>~</HEAD>内に <link href="style.css" rel="stylesheet" type="text/css">と記述します。

先ほどつくったHTMLファイルを [ 右クリック ] → [ 編集 ] →で開いて、 下記ソースを、コピーして貼り付けしてください。
<HTML>

<HEAD>
<link href="style.css" rel="stylesheet" type="text/css">
</HEAD>

<BODY>
(ブラウザに表示される文章、画像)
</BODY>

</HTML>

次に、「 style.css 」というファイルを作成します。

CSSのタグは、「スタイル適用対象タグ { スタイル宣言内容 }」のように記述します。

CSSファイルの基本的な構成は、以下のようになります。 メモ帳を [ 右クリック ] → [ 編集 ] で開いて、 下記ソースを、コピーして貼り付けしてください。 メモ帳に貼り付けたら、[ ファイル ]→[ 名前を付けて保存 ] で、ファイル名を「 style.css 」にして保存してください。

/*------------------------
body属性
------------------------*/
body {
color:文字色;
font-size:文字サイズ;
background-color:背景色;
margin:枠外余白;
padding:枠内余白;
line-height:行間;
}
/*------------------------
リンク属性
------------------------*/
a:link { color:リンク文字色;}
a:hover { color:マウスがのった状態ぼリンク文字色;}
a:visited { color:訪問済みのリンク文字色;}
/*------------------------
img(画像)属性
------------------------*/
img {
border:画像の枠線サイズ;
margin:枠外余白;
padding:枠内余白;
}
/*------------------------
テキスト属性
------------------------*/
p {
color:文字色;
font-size:文字サイズ;
text-align:文章を右揃え/中央揃え/左揃え;
line-height:行間;
margin:枠外余白;
padding:枠内余白;
}
/*------------------------
見出し属性
------------------------*/
h1,h2,h3,h4,h5,h6 {
color:文字色;
font-size:文字サイズ;
text-align:文章を右揃え/中央揃え/左揃え;
line-height:行間;
border-bottom:下線の幅 solid ;
margin:枠外余白;
padding:枠内余白;
}

次は、ホームページで最初に設定するヘッダーとフッター

HP制作準備

HP制作実践

HP公開

お勧めリンク

HPで稼ぐ

無料素材

SEO対策

スポンサーリンク

インフォメーション