ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

CSSファイルの作成

CSSファイルの準備と作成

レイアウトも確認したので、さっそく「さきちんカフェ」のベースとなる2カラムレイアウトのスタイルを作成しましょう。
まずはCSSファイルを用意します。

CSSファイルの作成

テキストエディタを立ち上げて、CSSファイルを作成しましょう。

テキストエディタの起動

起動したら「表示」「編集モード」から「CSS」を選択します。

これでCSSを入力する準備の完了です。

未対応ブラウザ用スタイルの入力

まずは未対応ブラウザ用スタイルを入力しましょう。

古いブラウザなど、HTML5から追加されたタグをサポートしていないブラウザで「さきちんカフェ」を見ると、ホームページが正常に表示されません。レイアウトが崩れて表示されてしまいます。

それでは困るので、未対応ブラウザに対応させる「おまじない」を入力しましょう。

CSSファイルに、以下のスタイルを入力します。

article, aside, details, figcaption, figure, header, hgroup, menu, nav, section {
display: block;
}
[CSSの記述例]
未対応ブラウザ用スタイルの入力例

CSSファイルの保存場所と手順

step.1

入力が完了したら、一旦CSSファイルを保存しましょう。

CSSファイルの保存

保存する際には文字コードを「UTF-8N」で保存する必要があります。
ファイルメニューの「文字/改行コード指定保存」から「UTF-8N」を選択して保存しましょう。

文字コードの確認

step.2

保存する場所はデスクトップの「cafe」フォルダを指定します。

保存する場所

step.3

「cafe」フォルダ内に「style」と名前をつけて保存しましょう。

CSSファイルの保存完了

これで「style.css」ファイルが作成されました。

次はホームページ全体の大枠となる「wrap」スタイルを作ってみましょう。

覚えておきたいポイント

文字コードに注意!

HTMLファイルやCSSファイルを保存する場合には、必ず文字コードを「UTF-8N」で保存するようにしましょう。

好きなテキストエディタでOK

解説ではTeraPadを使用していますが、お好みのテキストエディタを使ってもらって結構です。文字コードさえ指定できれば、どのテキストエディタでも問題ありません。

wrapスタイルの作成
« 前のページへ レイアウトの確認

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。