TempNateトップへ > HP作成ノウハウ > スタイルシート(CSS)について

スタイルシート(CSS)について

テンプレートは、スタイルシートという技術を使用して、デザインやレイアウトを指定しています。 こちらのファイルを変更する事で、デザインを簡単に編集・カスタマイズできます。

「style.css」というファイルがスタイルシートになります。デザインを決める重要なファイルです。下の図のような レイアウト構成になっています。

HTMLやCSSファイルのカスタマイズに関しては、多少の知識が必要になります。ただし、こちらをいじらなくても、画像ファイルを変更するだけで 、トップの画像は変更できます。なので、基本的には、このままでも大丈夫です。

 

●HTMLとCSSのレイアウト構成

 

●ホームページの各部分の名称

●ブラウザで表示したトップページ画面

 

スタイルシートはボックスの考え方の理解が必要です

スタイルシートでは、ヘッダー(サイトの上部分)や、フッター(サイトの下部分)などを1つの箱(ボックス)として、個別に考える必要があります。

●ボックス・モデルの画像↑

 

それぞれの各パーツである、ボックスのレイアウトに分けて、フォントサイズや背景色などを細かく指定しています。

 

margin ボックスの外側の余白

padding ボックスの内側の余白

border ホックスの上下左右のライン

wideth ボックスの幅

height ボックスの高さ

 

 

Web技術の標準化団体W3C

スタイルシートに関する国際団体です。Web関連技術の仕様書などを管理し、世界で標準化をすすめています。W3Cの勧 告に準拠したCSS(スタイルシート)である事がのぞましいとされています。

 

 

CSS(スタイルシート)のカスタマイズ方法

スタイルシートについて

CSSの要素名について (←次へ)

CSSの構成について (画像で解説

padding(内側の余白を指定する方法)

margin(外側の余白を指定する方法)

border(線の太さや、色を指定する方法)

wideth(ボックスの幅を指定する方法)

height(ボックスの高さを指定する方法)

background-color: #004080; (ボックスの背景の色を指定する方法)

font-size (文字サイズを変更する方法)

text-align(行揃えを指定)

font-family(文字の種類を指定)

letter-spacing(字間や行間を指定)

color (リンクの色を指定する方法)

float(回り込みを指定する方法)

 

HTMLのカスタマイズ方法

HTMLとは?

DOCTYPE(文書構造の定義)

HTMLの詳細について(SEO内部要素)

フォントについて

画像表示タグ

リンク表示タグ

著作権リンクを表示する

メニューなどのリストを表示したい

テーブルについて

スタイルシートを指定する

 

その他のホームページ基礎知識について

Webプログラミングの種類

人気のWebアプリケーションについて

インターネット広告の種類について

ホームページ運営上の注意点など

 

ホームページビルダーを使用した場合のHP作成方法

ホームページビルダーでのホームページ作成方法

ホームページビルダーのHPテンプレート編集方法

 

alpha Edit を使用した場合のHP作成方法

alpha Edit でのホームページ作成方法

alpha Edit のHPテンプレート編集方法

 

メモ帳などのエディターソフトを使用した場合のHP作成方法

メモ帳などのエディターソフトを使用した場合のホームページ作成方法