HTMLをブラウザで表示してWindowsで勉強！HTMLファイルのカスタマイズ・CSSを読み込む方法

カスタマイズ

2017.06.13

HTMLの勉強を独学ではじめたい。自分でCSSを書いて、スタイルを反映させたい！ドットインストールやプロゲートはひと通りやってみたから、チャレンジしたいHTML・CSS初心者さん用のページになります。

HTMLの作り方（コピペOK！）
CSSの作り方（コピペOK！）
作ったHTMLファイルをブラウザの画面に表示させる方法

HTMLでブログの形を作りたい勉強熱心なあなたへのページです。ヘッダー（ナビゲーション付き）・メインコンテンツ・サイドバーになるサブコンテンツ・フッターとシンプルな構成で、ブログの基本形をCSSで装飾してみましょう！

HTMLファイルを作るにあたって準備するもの
HTMLファイルを自作する

HTMLファイルを作るにあたって準備するもの

初めてのHTMLファイル作りで、使いやすいテキストエディタを用意してください。

Windowsなら、TeraPadが初心者向けでオススメ

簡単シンプルなのに必要な機能が充実しているのでオススメですよ。ダウンロード場所が明確な『窓の杜』で無料でexeファイルをダウンロードしてインストールしてください。

LINKTeraPad｜窓の杜

ドットインストールなどをチェックして、Atomをなどを導入済みなら、コードをリコメンドしてくれて便利ですから、そのまま手元にあるテキストエディタをどうぞ。

※以降TeraPadで説明を行います＾＾

※最悪windowsのメモ帳でもいけますが、本当のブログで使用するには、無料で文字コードUTF-8Nを指定できるテキストエディタを持っている方がいいですよ♪

LINKファイルをアップしてエラー！WordPressの文字コードUTF-8Nbomなしって何！？

ブラウザは、Chrome・FireFox・Edge。何でもOKです。

どれも要素の検証が利用できます。個人的にはChromeですが、FireFoxも見やすくて良いかも知れません。

後は、デスクトップにフォルダを作成してください。

test-fileなど、適当な名前を付けて保存

日本語よりローマ字を付ける癖をつけてるという意味で、ローマ字から始まるローマ字ファイル名を指定しましょう＾＾

HTMLファイルを自作する

HTMLでブラウザに表示させるために、TeraPadなどの文字コード指定ができるテキストエディタで、HTMLタグを書きます。書く内容は下記。

ブラウザのタグにブログ名
ヘッド内には、ブログ名・ナビゲーション
記事タイトル
コンテンツを書く部分
- コンテンツ内にリンクやリストなどの装飾も
サイドバーにあたる部分
ブログの足元にあるフッター

ドキュタイプ宣言を書いたら、HTMLで言語を決めてヘッド内にタイトルなど入れていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
</head>
<body>
    <header>
        <h1>Blog Title</h1>
        <nav>ナビゲーション</nav>
    </header>
    <article>
        <h1>記事タイトル</h1>
        <div class="">
            本文
        </div> <!-- 本文 -->
    </article>
    <aside class="side">
        サイドバーにあたる部分
    </aside> <!-- .side -->
    <footer>フッター    </footer>
</body>
</html>

HTMLタグに囲まれた4行目headタグ内に、HTMLファイルをブラウザに表示するときの文字コードを指定をmetaタグで『utf-8』と指定してます。

簡単に言えば、最近はこの文字コードが一般的で主流。と思ってください＾＾

初めてのHTMLファイルの保存方法

はじめて作成したHTMLファイルの保存方法を間違えると、ブラウザで表示したとき文字化けしたり、HTMLタグがそのまま表示するなど、不具合がでます。

文字化け防止のため、文字コードの指定を行います。

ファイルより、文字コード/改行コード指定保存をクリック。

ブラウザでの文字化け防止でUTF-8を選択。

文字コードをUTF-8Nに設定し、名前を付けて保存にチェックを入れてOKをクリック！

ポイント

文字化けしている場合は、テキストエディタの文字コードをUTF-8にしてください。

もしUTF-8bomなし(N)があれば、そちらを設定して保存。

以前はそれでも文字化けしたとき、ブラウザの文字コードもUTF-8にしてましたが、最近は文字化けしない印象。直近2日しかしてない個人的な意見。

ブラウザにアップしたとき、HTMLタグがそのまま表示しないよう

ファイル名は拡張子を.htmlのtest.htmlなどにして、ファイルの種類をHTMLファイルと指定し、作成したhtml-fileフォルダに保存してください。

ファイル名はindex.htmlなど、ローマ字ならなんでもOK！コレを基本系にして必要な要素を追加していきましょう！

これで一度ブラウザにアップロードしてください！

HTMLファイルをブラウザにアップロードする方法

HTMLファイルをお使いのブラウザにポイッと入れると簡単にHTMLファイルがブラウザに反映されます。別の方法も必要なので、書いておきますね。

HTMLファイルを、右クリック
プログラムから指定を選択

これでブラウザで開くか、テキストエディタで開くか指定できます。以降テキストエディタに追記する場合、上書き保存でOK！

プログラムにテキストエディタのアイコンがない時

アイコンが無ければ、TeraPadを新規で開いて、上部にあるファイルタブをクリックして開くを選択し、デスクトップのフォルダに置いたHTMLファイルを選んで開けばOK！

ブラウザのタブにタイトルを表示するHTML

head内のmetaタグと同じ階層（その下に）タイトルタグを入れてブログタイトルを入れてください。

<title>Blog Title</title>

スタイルシートを読み込みたい。リンクタグの書き方

stylesheetをHTMLで外部から読み込みたいとき。headタグ内にリンクタグを入れます。

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

この場合のスタイルシートのパスは、

HTMLファイルがある場所にcssフォルダを作成
その中にstyle.cssファイルがあると表示されます。

href="css/style.css"

これはスタイルシートまでのパスです。cssフォルダを作ることで、大きなサイトを作る場合など、ページ毎にstylesheetの読み込みを変更できたりするので、このように置く場合もあります。

HTMLファイルと同じ場所にstyle.cssがある場合は下記で読み込みます。

href="style.css"

HTMLファイルと同じ場所にmy-style.cssがある場合は下記で読み込みます。

href="my-style.css"

ファイル名・ファイルまでのパスが一致してなければ、CSSは反映しません。

ココまでのheadタグに囲まれたHTMLは、下記です。

<head>
    <meta charset="utf-8">
    <title>Blog Title</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>

ブラウザが出力するスタイルを初期値に、リセットCSSのリンク

見るブラウザによって、スタイルはマチマチです。それを初期化するstyleは長いので、リンクを貼って初期化する簡単な方法です。

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css">

1から自分で作成したCSSを反映させたい場合は、超便利！
設置する場所は、stylesheetのリンク上に設置してください。

HTMLファイルの作成例として、CSSの練習用

body内のヘッダー・コンテンツ・サイドを作成したHTMLファイルです。

それぞれリストを置いているので、CSSの指定を変更する必要があります
CSSの勉強・HTMLタグの付け方の工夫が必要です
ちょっとヒントも書いてたりclass=””

どの程度の初心者さんか、ベテランよりか！？不明ですが、おそらくこのページあたりが参考になるかも知れません。

LINK初心者向け、HTMLの入門編！HTMLタグとCSSのセレクタの関係＆要素とは？

HTML書いて、CSSで思い通りに装飾できたら楽しいので、チャレンジしてくださいね！

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Blog Title</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <header>
        <h1>Page Title</h1>
        <nav>
            <ul class="">
                <li>home</li>
                <li>site</li>
                <li>profile</li>
            </ul>
        </nav>
    </header>
    <article>
        <h1>独学でHTMLの勉強をしてみよう</h1>
        <div class="">
            <p>今日は独自でHTMLをお勉強します。参考にするページは<a href="https://bibabosi-rizumu.com">ビバ★りずむ</a>です。</p>
            <p>いきなりリンクの貼り方まで書いちゃった。リンクのタグは<a href="#">ここはリンクのテキスト</a>#はURLを入れるわけ。</p>
            <h2>リストを作ってみよう</h2>
            <p>番号ありと無しリストがありますが、その違いは序列の有無です。</p>
            <ul>
                <li>ulは序列番号なしリスト</li>
                <li>番号がないから、打消しのunでulと覚えると良いかも＾＾</li>
            </ul>
            <p>ちなみに番号ありは、<span class="">olタグ</span>の間にリストliを入れると数字付きの序列ありリストに！</p>
            <ol>
                <li>olは番号ありリスト</li>
                <li>liタグをもう1つ付ければ、2項目目</li>
                <li>更につけると、3項目と増えていきます！</li>
            </ol>
            <h2></h2>
        </div> <!-- 本文 -->   
    </article>
    <aside class="side">
        <p>ここは本文とは別になります。サイドサイドサイドサイド</p>
        <ul>
            <li>リストになってる事もあるよぉ</li>
            <li>リストになってる事もあるよぉ</li>
            <li>リストになってる事もあるよぉ</li>
        </ul>
    </aside> <!-- .side -->
    
    <footer>
        <small>Copyright &copy;2017 <a href="#" class="cory">Blog Title</a> All Rights Reserved.</small>
    </footer>
</body>
</html>

上記のコードはブラウザのスタイルを初期化したものならこんな感じ。